mettere i box in questa maniera con i css.

ra.denis · 26-06-2003, 19:24

vorrei posizionare 4 box (div) in orrizzontale dentro ad un altro box, come nella pagina di esempio, e possibilmente appiccicati tra loro.

per tenerli appiccicati tra loro, no problem: margin: 0px;, il problema e' che non so come tenerli in orrizzontale.

alla classe che definisce i box interni, gli ho dato un float: left; e funziona, ma solo con IE, con Netscape il box sotto si butta al fianco destro dei box in questione.

c'e' qualche altro modo per fare cio'?!?

**Francis87** · 26-06-2003, 19:45

prova a mettere tra i vari box il tag <nobr>

**Dennis** · 26-06-2003, 19:54

un idea che mi viene è quella di settare position:absolute e lavorare sulla posizione.. ma quasi sicuramente si può fare anche con relative

**br1** · 26-06-2003, 20:08

hai provato con display:inline ?

ciao

Guido Piazza · 26-06-2003, 20:39

Posti gentilmente il codice usato ? a me con netscape il "float" funziona benissimo

Ciao

**the great Ra** · 27-06-2003, 08:27

Originariamente inviato da Guido Piazza
Posti gentilmente il codice usato ? a me con netscape il "float" funziona benissimo

Ciao

prova una roba simile :

codice:

<html>
<head>
<style>
#contenitore {
border: 1px Solid Lime;
width: 402px;
height: 102px;
padding: 3px;
}
#box1 {
border: 1px Solid Red;
width: 90px;
height: 90px;
display: inline;
}
#box2 {
border: 1px Solid Red;
width: 90px;
height: 90px;
display: inline;
}
#box3 {
border: 1px Solid Red;
width: 90px;
height: 90px;
display: inline;
}
#box4 {
border: 1px Solid Red;
width: 90px;
height: 90px;
display: inline;
}
</style>
</head>
<body>
<div id="contenitore">
	<div id="box1"></div>
	<div id="box2"></div>
	<div id="box3"></div>
	<div id="box4"></div>
</div>
</body>
</html>

**Francis87** · 27-06-2003, 10:01

beh, ma in IE funziona!!

ra.denis · 27-06-2003, 10:24

tnx x le risposte...

il display on-line non mi funzia...

ok, con explorer va ma io generalmente uso netscape.

posto il codice...

codice html

<div id="resorts">
<div class="resortbox">[img]images/top-left-corner.gif[/img]
[img]images/resbox-austria.gif[/img]
[img]images/bot-right-corner.gif[/img]
</div>
<div class="resortbox">[img]images/top-left-corner.gif[/img]
[img]images/resbox-france.gif[/img]
[img]images/bot-right-corner.gif[/img]
</div>
<div class="resortbox">[img]images/top-left-corner.gif[/img]
[img]images/resbox-italy.gif[/img]
[img]images/bot-right-corner.gif[/img]
</div>
<div class="resortboxlast">[img]images/top-left-corner.gif[/img]
[img]images/resbox-usa-canada.gif[/img]
[img]images/bot-right-corner.gif[/img]
</div>
</div>

codice css

#resorts {
width: 750px;
padding:0px;
margin: 10px 0px 0px;
border: 0px;
text-align: left;
}

.resortbox {
position: relative;
margin :0px;
width: auto;
height: 130px;
padding:0px;
border-top: 2px solid #6699CC;
border-right: 0px solid #6699CC;
border-bottom: 2px solid #6699CC;
border-left: 2px solid #6699CC;
float: right;
}

.resortboxlast {
position: relative;
margin :0px;
width: auto;
height: 130px;
padding:0px;
border-top: 2px solid #6699CC;
border-right: 1px solid #6699CC;
border-bottom: 2px solid #6699CC;
border-left: 2px solid #6699CC;
float:right;
}

.imgtopleft {
position: absolute;
top: -2px;
left: -2px;
z-index:2;
}

.imgbotright {
position: absolute;
right: -2px;
bottom: -2px;
z-index:2;
}

.nospacearound {
border:0px none;
margin:0px;
padding:0px;
}

e un esempio di quel che mi capita in Netscape7... mentre in IE e' corretto.

ra.denis · 27-06-2003, 10:44

farebbe comodo una specifica come questa:

http://www.w3.org/1999/06/WD-css3-multicol-19990623

:quipy: :quipy: :quipy:

ra.denis · 27-06-2003, 11:23

ho trovato questa tecnica:

http://glish.com/css/8.asp

ma, da come descritto, con valori fissi va pesante... e poi usa gli absolute che non riesco a vederli di buon occhio.

ho fatto un mix tra div e tabella, almeno non mi fa crasshare opera.

Discussione: mettere i box in questa maniera con i css.

Strumenti discussione

Ricerca discussione

Visualizza

mettere i box in questa maniera con i css.

Permessi di invio