allineare due box(div) affiancati

Marco Carlozzo · 30 Set 2014

salve a tutti, ho un problema che non riesco a risolvere con il css. Ovvero, ho realizzato una pagina web dove tra i contenuti devo inserire 5 box(div) affiancati uno con l'altro e sotto ognuno di esso una didascalia(<figcaption>) e a capo un'altra fila di 5 div affiancati. nonostante io mettessi al blocco un float left non me li allinea uno a fianco a l'altro ma,uno sotto l'altro. sto cercando diversi modi ma non ci riesco proprio:incazz::incazz: vi lascio in allegato le foto di ciò che mi esce con il mio codice e ciò che vorrei ottenere.
ecco il mio codice

HTML:

html,body{
	background-color:#FFF;
	font-family:"Raleway Medium";
}
h3 {
	color:#094e93;
}
#contenitore{
	width:1170 px;
	height:100%;
	margin:30px 80px 26px;
	}
header{
	width:100%;
}
#logo {
	width:186px;
	height:65px;
	float:left;
	
	}
header h4 {
	font-size: 14px;
	color:#87c71a;
	float:left;
	margin-top:50px;
	margin-left: 30px; 
 
}

nav{
	float: right;
	margin-top:35px;
}

 nav ul li{
	list-style-type: none;
	float:left;
	display:block;
	padding-left: 20px;
}
nav ul li a {
	font-family: "Raleway Medium";
	font-size: 13px;
	text-transform: uppercase;
	color: #094e93;
	text-decoration: none;
	word-spacing: normal;
	float:right;
}
#contenuto {
	margin-top:52px;
	margin-bottom:50px;
	float:left;

}
#box1{
	background-image:url(../img/rettangolo.gif);
	float:left;
	display:block;
}
#box1{
	background-image:url(../img/rettangolo.gif);
	float:left;
	display:block;
	margin:1px;
}
figcaption{
	color:#094e93;
	background-image:url(../img/rettangolo.gif);
	margin:3px;

	}

footer{
	color:#87c71a;
	float:left;
}
#diritti img {
	float:left;
	padding-right:33px;

}

Soulfearor · 30 Set 2014

Ciao, perchè hai messo 2 volte #box1 nel codice CSS? Prova intanto a dargli una larghezza.

Marco Carlozzo · 30 Set 2014

Soulfearor ha scritto:
Ciao, perchè hai messo 2 volte #box1 nel codice CSS? Prova intanto a dargli una larghezza.

scusami ma avevo sbagliato, ecco il css aggiornato:

Codice:

@font-face {
	font-family: 'Raleway Medium';
	src: url('Raleway-Medium.ttf') format('truetype');
}
html,body{
	background-color:#FFF;
	font-family:"Raleway Medium";
}
h3 {
	color:#094e93;
}
#contenitore{
	width:1170 px;
	height:100%;
	margin:30px 80px 26px;
	}
header{
	width:100%;
}
#logo {
	width:186px;
	height:65px;
	float:left;
	
	}
header h4 {
	font-size: 14px;
	color:#87c71a;
	float:left;
	margin-top:50px;
	margin-left: 30px; 
 
}

nav{
	float: right;
	margin-top:35px;
}

 nav ul li{
	list-style-type: none;
	float:left;
	display:block;
	padding-left: 20px;
}
nav ul li a {
	font-family: "Raleway Medium";
	font-size: 13px;
	text-transform: uppercase;
	color: #094e93;
	text-decoration: none;
	word-spacing: normal;
	float:right;
}
#contenuto {
	margin-top:52px;
	margin-bottom:50px;
	float:left;

}
#box{
	width:204px;
	height:204 px;
	background-image:url(../img/sfondobox.gif);
	padding-right:30px;
	float:left;
	display:block;
}


figcaption{
	color:#094e93;
	margin:3px;
	background-image:url(../img/sfondobox.gif);

	}

footer{
	color:#87c71a;
	float:left;
}
#diritti img {
	float:left;
	padding-right:33px;

}

grazie, purtroppo non ha dato buoni risultati

Soulfearor · 30 Set 2014

Un consiglio, posta il codice HTML e CSS del pezzo di codice che non ti riesce, così faciliti chi ti aiuta oltre che si capisce meglio

Marco Carlozzo · 30 Set 2014

ecco il codice che mi crea problemi:

Codice:

#box{
	width:204px;
	height:204 px;
	background-image:url(../img/sfondobox.gif);
	padding-right:30px;
	float:left;
	display:block;
}


figcaption{
	color:#094e93;
	margin:3px;
	background-image:url(../img/sfondobox.gif);

	}

cory · 30 Set 2014

visto che usi le dimensioni fisse e non ne capisci di css
a dispetto dei "semantici"
ti consiglio di usare una tabella

Marco Carlozzo · 30 Set 2014

cory ha scritto:
visto che usi le dimensioni fisse e non ne capisci di css
a dispetto dei "semantici"
ti consiglio di usare una tabella

hai ragione,più che non saper niente, l'ho usato poco. avevo pensato alla tabella, ma non mi piace come idea...non posso far altrimenti pur usando dimensioni fisse?

cory · 30 Set 2014

cambia

Codice:

#box{...
}

in

Codice:

.box{...
}

e nell'html dei "box" usa class invece di id

parti da questo
poi come ti hanno già chiesto
se vuoi mostrare la pagina in cui stai provando sarebbe meglio

Marco Carlozzo · 30 Set 2014

Lo stavo appunto pensando di usare le classi al posto degli anni id, ma cosa intendi di mettere online il lavoro con "se vuoi mostrare la pagina in cui stai lavorando sarebbe meglio"

cory · 1 Ott 2014

eh si
se non riesci a risolvere
bisogna controllare cosa scrivi e come lo scrivi

Marco Carlozzo · 1 Ott 2014

cory ha scritto:
eh si
se non riesci a risolvere
bisogna controllare cosa scrivi e come lo scrivi

Domani pubblico il tutto su altervista

Marco Carlozzo · 1 Ott 2014

perfetto, con l'uso della classe ciò che sto realizzando prende forma. ora come faccio ad allineare i miei box, ovvero disporli 5 su ogni riga. potete vedere la pagina web qui :http://demowebmarco.altervista.org/

cory · 1 Ott 2014

basta racchiuderli in un contenitore con larghezza pari a box x 5

Marco Carlozzo · 1 Ott 2014

cory ha scritto:
basta racchiuderli in un contenitore con larghezza pari a box x 5

ho provato ma niente. dato che il mio box è di 204px x lato ho moltiplicato 204 x e l'ho messo come valore della larghezza del contenitore dei contenuti, ora li raggruppa in 4 se tolgo il padding e il margin

cory · 1 Ott 2014

vedo che fai errori di distrazione

Codice:

100 px

è sbagliato, mentre

Codice:

100px

è corretto
controlla e correggi tutte le misure

Marco Carlozzo · 1 Ott 2014

cory ha scritto:
vedo che fai errori di distrazione

Codice:

100 px

è sbagliato, mentre

Codice:

100px

è corretto
controlla e correggi tutte le misure

perfetto, ora però se do un padding di 30px per distanziare ogni box dall'altro me li mette in fila per 4, mentre se tolgo il padding me li allinea in fila x 5. Allora io ho fatto 204(dimensione box)*5+ 30 (padding destro per distanziarli) ma me li mette in linea x 4. dove sbaglio?

Marco Carlozzo · 1 Ott 2014

Marco Carlozzo ha scritto:
perfetto, ora però se do un padding di 30px per distanziare ogni box dall'altro me li mette in fila per 4, mentre se tolgo il padding me li allinea in fila x 5. Allora io ho fatto 204(dimensione box)*5+ 30 (padding destro per distanziarli) ma me li mette in linea x 4. dove sbaglio?

perfetto ho risolto sommando a 204+30=234, moltiplicando *5 ho trovato la dimensione del mio contenitore. questo problema l'ho risolto.

grazie a tutti quelli che mi hanno dato una mano e mi hanno fatto capire i miei errori.

Marco Carlozzo · 1 Ott 2014

mentre se volessi allineare al testo una barra di navigazione come faccio?. esattamente testo a sinistra e menù a destra:
ecco il mio codice:

HTML:

nav{
	float: right;
	margin-top:35px;
}

 nav ul li{
	list-style-type: none;
	float:left;
	display:block;
	padding-left:20px;
}
nav ul li a {
	font-family: "Raleway Medium";
	font-size: 13px;
	text-transform: uppercase;
	color: #094e93;
	text-decoration: none;
	word-spacing: normal;
	float:right;
}
footer{
	color:#87c71a;
	float:left;
}
#diritti img {
	float:left;
	padding-right:33px;

}

Marco Carlozzo · 1 Ott 2014

penso che con i consigli che mi avete dato tutti voi siano stati utilissimi e fenomenali. mi hanno aiutato a maturare un'attimo di più cercando di fare un ragionamento del tutto diverso. Un grandissimo grazie a tutti voi e a questo forum utile, trovando persone come voi capaci e pronte ad aiutare gli altri. grazie ai vostri consigli ho risolto anche questo!:fonzie:

cory · 1 Ott 2014

bravo, oltre a fare la tua pagina
continua a esercitarti, padroneggiare il box-model è quasi tutto dei css

allineare due box(div) affiancati

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Nuovo Utente

Utente Attivo

Nuovo Utente

Utente Attivo

Nuovo Utente

Nuovo Utente

Nuovo Utente

Nuovo Utente

Utente Attivo

Discussioni simili