div a due colonne e div annidati

  • Creatore Discussione Creatore Discussione kain
  • Data di inizio Data di inizio

kain

Utente Attivo
14 Apr 2010
67
0
0
Ciao a tutti ho un problema con i div.
vorrei due colonne allineate e mettere nella seconda altri div uno sotto l'altro.
il problema è che i div annidati non rispettano l'altezza assegnata per css ma si restringono
quello che vorrei fare è così
colonne e righe.jpg

ma quello che ottengo è questo
risultato.jpg

dove i div nella seconda "colonna" non occupano tutto lo spazio fino in fondo

ecco il codice
Codice:
<style>

.1 {float:left; display:block; width:70px; height:50px;  }
.2x7 {float:left; display:block; width:150px; height:350px;  }
.2,3,4,5,6,7,8 {float:left;  width:150px; height:50px; }

</style>


</head>

<body>
<div class="1">1</div>
<div class="2x8">
           <div class="2">2</div>
           <div class="3">3</div>
           <div class="4">4</div>
           <div class="5">5</div>
           <div class="6">6</div>
           <div class="7">7</div> 
           <div class="8">8</div> 
                    </div>
 
allora io ho costruito questo html/css che in realtà è molto simile al tuo ma a me funziona correttamente

html:
HTML:
<div class="col-1">1</div>
<div class="col-2">
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div> 
    <div class="block">8</div> 
</div>

css:
Codice:
.col-1 {
    float:left;
    display:block;
    width:70px;
    height:50px;
}
.col-2 {
    float:left;
    display:block;
    width:150px;
    height:350px;
}
.block {
    width:100%;
    height:50px;
}
 
Codice:
<style type="text/css">.ts-1 {
	border: none;
	height: 392px;
	text-align: left;
	width: 350px;
}

.ts-1-1 {
	border: none;
	float: left;
	height: 54px;
	line-height: 54px;
	padding: 1px;
	width: 173px;
}

.ts-1-3 {
	border: none;
	float: left;
	height: 334px;
	line-height: 334px;
	padding: 1px;
	width: 173px;
}

.gen-1 {
	clear: both;
}
</style>



		<div class="ts-1">
			<div class="ts-1-1">1</div>
			<div class="ts-1-1">2</div>
			<div class="ts-1-3">&nbsp;</div>
			<div class="ts-1-1">3</div>
			<div class="ts-1-1">4</div>
			<div class="ts-1-1">5</div>
			<div class="ts-1-1">6</div>
			<div class="ts-1-1">7</div>
			<div class="ts-1-1">8</div>
			<div class="gen-1"></div>
		</div>
 
n1k4r0 si con questo codice funziona
ma se nel css dove tu hai messo block vado a mettere " .1,2,3,4,5,6,7," e do' ai vari div corrispondenti gli stessi nomi nel body il problema iniziale ritorna.
deve essere qui l'errore
 
....problema che torna anche solo se si toglie la larghezza fissa, che non deve avere
 
Guarda chenon funziona se alla classi e agli id dai nomi che iniziano con un numero

Hai provato il mio codice?
 
le classi non possono essere un numero.
ai div float devi dare per forza una larghezza altrimenti diventano larghi come il loro contenuto, se non vuoi darla in pixel dalla in percentuale
 
nel post ho scritto numeri solo per far capire l'ordinamento, nel file non ho numeri.
 
scusa forse non ho capito, ma perché quella frase che se metti .2,.3,.4,.5 eccetera al posto di block non funziona? se i numeri non ci sono allora non c'è problema, non metterli :)
 
nel post ho scritto numeri solo per far capire l'ordinamento, nel file non ho numeri.
Quando si posta del codice per farsi correggere qualche cosa, non si deve postare codice fasullo ma il codice esatto che si usa altrimenti come facciamo a capire dove è l'inghippo?
Tanto per essere chiari tu nelle prove che fai non usi nei nomi delle classi o degli ID nomi che iniziano per un numero?

Perchè non provi il codice che ti ho dato io questo fuziona bene e non ha errori
 
nessun codice fasullo, come ho detto ho usato dei numeri (fin dall'inizio) per far si che ci si capisse sull'ordinamento
nomi delle classi ed id che sto usando non iniziano con numeri ma sono solo lettere
è vero che il codice che avevi scritto andava bene ma questo codice mi servirà per compilare molte schede in futuro ed identificare nominalmente il div mi farà comodo
è per questo che non posso lasciare un'unica regola con il "block" che hai messo
 
di solito per identificare i vari elementi si mette un id e non le classi proprio perché se gli oggetti hanno tutti lo stesso stile allora hanno tutti la stessa classe e si usa l'id per identificare un singolo oggetto. comunque ognuno fa come crede che sia meglio.

ma se il codice fosse così allora funzionerebbe ugualmente, non cambia nulla

HTML:
<div class="col-1">1</div>
<div class="col-2">
    <div class="b-1">2</div>
    <div class="b-2">3</div>
    <div class="b-3">4</div>
    <div class="b-4">5</div>
    <div class="b-5">6</div>
    <div class="b-6">7</div> 
    <div class="b-7">8</div> 
</div>

Codice:
.col-1 {
    float:left;
    display:block;
    width:70px;
    height:50px;
}
.col-2 {
    float:left;
    display:block;
    width:150px;
    height:350px;
}
.b-1,.b-2,.b-3,.b-4,.b-5,.b-6,.b-7 {
    width:100%;
    height:50px;
}

forse scrivi male qualcosa, nel tuo css c'è
Codice:
.2,3,4,5,6,7
che è sbagliato, a parte il fatto che le classi non possono esse soltanto numeri, ma mancano tutti i punti a parte il primo
 
ah un'altra cosa, forse non te ne sei accorto ma ti stiamo rispondendo in due, da come scrivi sembra che parli ad uno solo :)
 
È proprio quello che voglio dire non si deve scrivere codice solo per esempio, quello che si posta deve essere il codice reale altrimenti non ci si capisce mai
 
CAVOLOOOOO!!!!!!!!!!!!!!
è proprio questo l'errore fin dall'inizio anche nel primo codice che ho postato mancava il . (punto) nel css
Grazie a tutti e due
ora funziona
 

Discussioni simili