[CSS] Aiuto riguardo i Box

25-07-2013, 12.59.34

Nel mio box sono presenti 5 immagini, la quinta fuoriesce dal box quindi vorrei metterla sotto la prima creando una seconda fila, il seguente è il codice sorgente con la speranza che possiate aiutarmi.

__________________________________________________ _______________

<head>
<style>
#mainbox {
display:block;
display:box;
width:241px;
border:1.4px solid #004C7F;
border-radius:8px;
display:-moz-box;
background-color:#287FB9;
margin-left:40px;
margin-top:50px;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
}

#p1
{
border:1px solid #004C7F;
border-radius:8px;
width:50px;
height:50px;
background-color:#118EE1;
rgb(224, 239, 245);
margin-left:10px;
text-align:center
}

#p2 {
display:block;
display:box;
border:1px solid #004C7F;
border-radius:8px;
width:50px;
height:45px;
margin-left:7px;
background-color:#118EE1;
text-align:center
}

#p3 {
display:block;
display:box;
border:1px solid #004C7F;
border-radius:8px;
width:50px;
height:50px;
margin-left:7px;
background-color:#118EE1;
text-align:center
}

#p4 {
display:block;
display:box;
border:1px solid #004C7F;
border-radius:8px;
width:50px;
background-color:#118EE1;
margin-right:10px;
background-repeat:no-repeat;
text-align:center;
margin-left:7px;
}

#p5 {
border:1px solid #004C7F;
border-radius:8px;
width:50px;
height:45px;
background-color:#118EE1;
rgb(224, 239, 245);
margin-left:10px;
text-align:center;
}
</style>

</head><body><div id="mainbox">

<p id="p1"><img src="https://images-eussl.habbo.com/c_images/album1584/NT254.gif"></p>
<p id="p2"><img src="https://images-eussl.habbo.com/c_images/album1584/NT253.gif"></p>
<p id="p3"><img src="https://images-eussl.habbo.com/c_images/album1584/NT252.gif"></p>
<p id="p4"><img src="https://images-eussl.habbo.com/c_images/album1584/NT251.gif"></p>
<p id="p5"><img src="https://images-eussl.habbo.com/c_images/album1584/NT250.gif"></p>
</div>

<p style="color: rgb(164, 192, 215); font-family: Ubuntu;font-weight:bold;margin-top:10px;position:absolute;top:31px;left:112px;tex t-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);background-color:#287FB9;border-radius:4px;border-left:1px solid #004C7F;border-top:1px solid #004C7F; border-right: 1px solid #004C7F;box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.4);">Ultimi Badge</p>

</body>

25-07-2013, 13.17.48

Ricopiando il tuo codice io vedo perfetto: habborumble

Cosa c'è che non va? :/

---EDIT---
Io sto usando Chrome magari è problema di browser..
PS: Se usi HTML 5 aggiungi ad inizio pagina il tag:

Codice HTML:

<!DOCTYPE html>

25-07-2013, 13.26.35

Le immagini le vedi in verticale o orizzontale?

25-07-2013, 13.29.38

Le vedo in verticale... dalla tua domanda intuisco che vuoi vederle a file, giusto? :)

25-07-2013, 14.28.59

Aggiungi "overflow:auto" al mainbox e "float:left" a tutti i p.

Vedi l'effetto quì: http://jsfiddle.net/55hcV/

Discussione: [CSS] Aiuto riguardo i Box

LinkBack

Strumenti discussione

Display

[CSS] Aiuto riguardo i Box

Tags for this Thread

Regole di scrittura