div a due colonne e div annidati

K

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>
 
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
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

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.396
338
83
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>
 
K

kain

Utente Attivo
14 Apr 2010
67
0
0
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
 
K

kain

Utente Attivo
14 Apr 2010
67
0
0
....problema che torna anche solo se si toglie la larghezza fissa, che non deve avere
 
Max 1

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.396
338
83
Guarda chenon funziona se alla classi e agli id dai nomi che iniziano con un numero

Hai provato il mio codice?
 
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
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
 
K

kain

Utente Attivo
14 Apr 2010
67
0
0
nel post ho scritto numeri solo per far capire l'ordinamento, nel file non ho numeri.
 
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
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

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.396
338
83
kain ha scritto:
nel post ho scritto numeri solo per far capire l'ordinamento, nel file non ho numeri.
Clicca per allargare...
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
 
K

kain

Utente Attivo
14 Apr 2010
67
0
0
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
 
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
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
 
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
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

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.396
338
83
È 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
 
K

kain

Utente Attivo
14 Apr 2010
67
0
0
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
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
C Dividere un div in due colonne Javascript 2
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
paloppa Div che appare appena due form sono compilati jQuery 16
S [HTML] Distanza esatta tra due div HTML e CSS 7
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
S [Javascript] Nascondere e rendere visibile un Div cliccando su due link Javascript 2
M allineare due box(div) affiancati HTML e CSS 19
J due div allineati all'interno di un'altro div HTML e CSS 6
A Spazio tra due div HTML e CSS 4
F toggle con testo al toggle tra due div jQuery 3
N Scrivere in un DIV in base alle scelte fatte in due select Javascript 5
T ajax con due div Ajax 14
P riuscire a porre due div sulla stessa orizzontale senza che vadano a capo HTML e CSS 1
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
C Nascondere un div al click di una casella Ajax 1
G [HTML] Posizionamento testo in un div HTML e CSS 5

Discussioni simili

Alto Basso