div a due colonne e div annidati

kain · 2015-08-21T12:31:25+0200

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ì

ma quello che ottengo è questo

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>

n1k4r0 · 2015-08-21T12:36:39+0200

solo un tentativo ma prova a togliere il float dai div annidati

kain · 2015-08-21T12:40:16+0200

Già provato ma nessun risultato

n1k4r0 · 2015-08-21T12:43:38+0200

strano, accendo il computer e provo il codice

n1k4r0 · 2015-08-21T14:42:38+0200

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;
}

Max 1 · 2015-08-21T14:48:27+0200

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>

kain · 2015-08-21T16:50:19+0200

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

kain · 2015-08-21T17:03:21+0200

....problema che torna anche solo se si toglie la larghezza fissa, che non deve avere

Max 1 · 2015-08-21T17:05:45+0200

Guarda chenon funziona se alla classi e agli id dai nomi che iniziano con un numero

Hai provato il mio codice?

n1k4r0 · 2015-08-21T17:10:31+0200

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

kain · 2015-08-21T17:54:29+0200

nel post ho scritto numeri solo per far capire l'ordinamento, nel file non ho numeri.

n1k4r0 · 2015-08-21T18:00:33+0200

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

Max 1 · 2015-08-21T18:06:21+0200

kain ha scritto:
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

kain · 2015-08-21T18:36:10+0200

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

n1k4r0 · 2015-08-21T18:48:59+0200

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

n1k4r0 · 2015-08-21T18:51:03+0200

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

Max 1 · 2015-08-21T18:57:09+0200

È 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

kain · 2015-08-21T19:00:10+0200

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

Cerca

Cerca

div a due colonne e div annidati

kain

Utente Attivo

n1k4r0

Utente Attivo

kain

Utente Attivo

n1k4r0

Utente Attivo

n1k4r0

Utente Attivo

Max 1

Super Moderatore

kain

Utente Attivo

kain

Utente Attivo

Max 1

Super Moderatore

n1k4r0

Utente Attivo

kain

Utente Attivo

n1k4r0

Utente Attivo

Max 1

Super Moderatore

kain

Utente Attivo

n1k4r0

Utente Attivo

n1k4r0

Utente Attivo

Max 1

Super Moderatore

kain

Utente Attivo

Discussioni simili