allineare due box(div) affiancati

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
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;

}
RISULTATO OTTENUTO DA CSS.JPGRISULTATO DA OTTENERE.jpg
 

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
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
 

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
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);

	}
 

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
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

Utente Attivo
31 Gen 2014
51
0
6
cory.altervista.org
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

Nuovo Utente
13 Giu 2014
27
0
0
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"
 
Ultima modifica:

cory

Utente Attivo
31 Gen 2014
51
0
6
cory.altervista.org
vedo che fai errori di distrazione
Codice:
100 px
è sbagliato, mentre
Codice:
100px
è corretto
controlla e correggi tutte le misure
 

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
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

Nuovo Utente
13 Giu 2014
27
0
0
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.:cool: grazie a tutti quelli che mi hanno dato una mano e mi hanno fatto capire i miei errori.
 

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
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

Nuovo Utente
13 Giu 2014
27
0
0
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:
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Allineare due righe di testo in photoshop Photoshop 2
A Allineare due colonne in una tabella HTML PHP 6
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
F Allineare immagine al centro HTML e CSS 6
S Come allineare tre immagini in linea al centro HTML e CSS 1
A Allineare il testo dentro una select composta da più campi pesi da un db PHP 5
I come allineare un icona HTML e CSS 6
K allineare div al centro HTML e CSS 9
P Allineare data a sx dello schermo e titolo al centro HTML e CSS 16
K allineare controlli in un div HTML e CSS 3
G Allineare Div in orrizzontale con cilo for PHP PHP 1
L Allineare 2 tools su sito web HTML e CSS 0
N Allineare numeri a destra. Classic ASP 2
B allineare le voci del menu con stile (Css) HTML e CSS 9
G Come allineare in alto una tabella? HTML e CSS 5
F confrontare due stringhe "numeriche" PHP 7
M Aggiornare stesso campo in due tabelle PHP 0
M Collegare due segmenti di rete diversi Reti LAN e Wireless 0
M Aggiornare simultaneamente i campi di due tabelle collegate con id PHP 4
Tommy03 Unire dati da due tabelle MySQL 5
A Cercare un carattere uguale in due stringhe Java 5
elpirata [MySQL] Sincronizzare dati tra due tabelle sullo stesso host MySQL 0
S [PHP] Confrontare due array con valori quasi uguali PHP 2
G Mi hanno fatto due preventivi per telecamere abitazione IP Cam e Videosorveglianza 8
MarcoGrazia [PHP] Unioni di due array con somma di valori PHP 6
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
Tommy03 Due menù nella stessa app Sviluppo app per Android 0
I [PHP] generazione url "uguale" che punta a due immagini diverse PHP 0
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
G Condividere 1 cartella in rete due computer windows 10 Reti LAN e Wireless 0
Domenico_Falco1 Associare una stessa funzione get a due eventi a.click con classi differenti Ajax 6
M PHP Arrotondamento minuti in differenza tra due Orari PHP 9
N due siti web sullo stesso spazio hosting Hosting 0
S [PHP] come esportare due tabelle in file excel su due fogli distinti PHP 8
maxnegri Conoscere giorni della settimana fra due date con php PHP 2
felino EXCEL: verifica dati mancanti tra due sheet Windows e Software 2
Monital funzione php si ripete due volte PHP 6
A [Javascript] Multi input su due tabelle correlate Javascript 1
felino Windows 8.1: installare sistema operativo e programmi in due hard disk diversi Windows e Software 4
M [PHP] Sommare due campi calcolati PHP 3
K [PHP] Controllare dati database tra due valori PHP 18
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
A Php mail non invia due mail di seguito PHP 3
M [VENDO] Due Account Instagram [21k] [3k] Annunci servizi di Social Media Marketing 5
T Artisti: Uno o due profili Instagram? Social Media Marketing 2
bianca_dimulescu [Javascript] Disabilitare due bottoni di submit in base al radiobutton selezionato Javascript 1
I database mysql estrarre due tabelle Database 2
otto9due Chiamata ajax su due url è possibile? Ajax 0
paloppa Div che appare appena due form sono compilati jQuery 16
P impostare due Vlan su router - dhcp su seconda sottorete e statico su prima Reti LAN e Wireless 0

Discussioni simili