Per avere un box model cioè fissando un altezza e una larghezza è necessario fissare display block.
Ma se volessi dei box model affiancati dovrei usare display inline ma facendo questo la dimensione del box non viene presa in considerazione.
Sapete come potrei risolvere?
No, per mettere dei box affiancati devi solo dire:
float: left;
in tutti.
Poi alla fine dovrai mettere un
clear: left;
Nel promo blocco che non deve affiancarsi.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Grazie!!!
un ultima domanda:
questi box mi serviranno per fare delle anteprime di immagini, però vorrei che siano centrati rispetto la pagina, quindi avevo provato a fissare margin: 0 auto; in un div con al suo interno queste anteprime ma non lo centra, sapresti mica come fare?
per centrare un elemento in un altro devi mettere:
<div class="fuori">
<??? class="centrato" />
</div>
con il CSS:
.fuori { text-align:center; // hack per IE }
.centrato { margin: 0 auto; // browser conformi }
Il ??? puo` esser qualsiasi elemento (anche l'immagine stessa)
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Dove sbaglio?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
#corpo{
width:550px;
text-align:center;
height:300px;
background:#003399;
}
.anteprima{
float:left;
height:100px;
width:100px;
background:#98d0f8;
color:#003399;
}
a.anteprima:hover{
background:#003399;
color:#FFF;
}
#anteprime{
margin:0 auto;
}
</style>
</head>
<body>
<div id="corpo">
<div id="anteprime">
[img]#[/img]Foto
[img]#[/img]Foto
[img]#[/img]Foto
[img]#[/img]Foto
[img]#[/img]Foto
[img]#[/img]Foto
</div>
</body>
</html>
A parte che nel codice HTML mi pare manchi la chiusura di un <div>,
a parte che l'attributo border nel tag <img> puo` dare problemi (e` meglio usare solo i CSS per la formattazione, altrimenti il browser potrebbe trovare dei conflitti),
a parte che a.anteprima:hover non avra` effetto, dato che al suo interno ci sono altri oggetti,
a parte che dentro un <div> non ci potrebbe stare del testo (manca un
o altro oggetto),
a parte che i tag <img> vanno correttamente chiusi,
a parte che mancano gli attributi alt alle immagini;
per il resto la pagina dovrebbe essere corretta.
Pero` non ho capito cosa vuoi centrare (quale oggetto deve stare al centro e al centro di quale altro ?). Le varie immagini non sono centrate all'intrno dei rispettivi <div>
Tieni anche presente che un'immagine con a fianco una scritta, sara` piu` larga di 100 px, per cui probabilmente la visualizzazione dipende molto fortemente dal browser in cui vai a visualizzare (vedi bug dell'attributo width in IE).
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
insomma era quasi perfetta la pagina
scusa ma che io sappia il tag img non ha chiusura.
L'hover funziona, l'ho provato.
Per centrato intendo che il div anteprime sia centrato rispetto il contenitore, in questo caso siccome la larghezza del container è di 550px, ci stanno 5 anteprime larghe 100px, quindi rimangono 50px che verranno suddivisi 25 a destra e 25 a sinistra. Per fare questo ora ho usato margin:0px 25px 0px 25px; ma non c'è un modo un po più dinamico? perchè se ho una sola foto non viene centrata...
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
#corpo{
width:550px;
text-align:center;
height:300px;
background:#003399;
}
.anteprima{
float:left;
height:100px;
width:100px;
background:#98d0f8;
color:#003399;
}
a.anteprima:hover{
background:#003399;
color:#FFF;
}
#anteprime{
margin:0px 25px 0px 25px;
}
img{
border-width:0;
}
</style>
</head>
<body>
<div id="corpo">
<div id="anteprime">
<a class="anteprima" href="#" >[img]#[/img]
Foto</p></a>
<a class="anteprima" href="#" >[img]#[/img]
Foto</p></a>
<a class="anteprima" href="#" >[img]#[/img]
Foto</p></a>
<a class="anteprima" href="#" >[img]#[/img]
Foto</p></a>
<a class="anteprima" href="#" >[img]#[/img]
Foto</p></a>
<a class="anteprima" href="#" >[img]#[/img]
Foto</p></a>
</div>
</div>
</body>
</html>
dai un margin:auto alle anteprime
Non funziona...Originariamente inviato da Sgurbat
dai un margin:auto alle anteprime
è perche usa float:left;
[Scambio Links a Tema] Contattatemi in Privato x + Info.
Permessi di invio
Rispondi quotando