XHTML&CSS - Problema con DIV & arrotondamento angoli
Allora, sto cercando di trasformare un sito da me creato, con layout composto interamente da tabelle, in una struttura composta da DIV.
Vediamo ad esempio questa pagina: http://www.webmasterpoint.org/webdesign/css/09.asp
Facile, e funziona.
Ma se si tiene conto che quei due DIV sono racchiusi in un DIV più grande che è largo il 70% della pagina ed allineato al centro, le cose si complicano.
Sì, perché IE mi visualizza tutto correttamente, mentre Firefox anzitutto non mi allinea il grande DIV al centro, ed inoltre avendo quei due piccoli DIV impostata la proprietà "float" a "left", escono fuori dal DIV che li contiene.
Quindi la domanda è: come si fa ad incapsulare più DIV in un ununico più grande senza "sballature"?
------------------------------------------
Richiesta N° 2
Ho creato uno "script" CSS che mi crea dei box con gli angoli tutti arrotondati, e borda il tutto con un colore da me scelto (nell'esempio sotto è il blu).
Ecco i relativi codici CSS e HTML:
Codice:
div.box,div.box_top,div.box_bottom{
background-color: #FF0000;
border-left: solid #0000FF 1px;
border-right: solid #0000FF 1px;
}
div.box_top { border-top: solid #0000FF 1px; }
div.box_bottom { border-bottom: solid #0000FF 1px; }
Codice HTML:
<div style="width: 170px; height: 7px;">
<div class="box_top" style="margin: 0px 6px 0px 6px; height: 1px;"> </div>
<div class="box" style="margin: 0px 4px 0px 4px; height: 1px;"> </div>
<div class="box" style="margin: 0px 3px 0px 3px; height: 1px;"> </div>
<div class="box" style="margin: 0px 2px 0px 2px; height: 2px;"> </div>
<div class="box" style="margin: 0px 1px 0px 1px; height: 2px;"> </div>
</div>
<div class="box" style="width: 168px;">
CONTENUTO BOX
</div>
<div style="width: 170px; height: 7px;">
<div class="box" style="margin: 0px 1px 0px 1px; height: 2px;"> </div>
<div class="box" style="margin: 0px 2px 0px 2px; height: 2px;"> </div>
<div class="box" style="margin: 0px 3px 0px 3px; height: 1px;"> </div>
<div class="box" style="margin: 0px 4px 0px 4px; height: 1px;"> </div>
<div class="box_bottom" style="margin: 0px 6px 0px 6px; height: 1px;"> </div>
</div>
Con Firefox è tutto perfetto, mentre IE mi allunga i bordi superiori ed inferiori in modo da far somigliare il box ad un aquilone fatto male... :crycry:
Mi appello a voi...
