Salve ragazzi come da titolo sto cercando di avvicinarmi ai css tramite al libro di cui sopra.
Mi sono imbattuta pero' in una cosa molto molto strana, credo sia un errore.
Stavo realizzando un layout liquido a due colonne con intestazione e pič.
Bene mi trovo ora a dover appicare il bordo a #corpo e IL LIBRO RIPORTA LE SEGUENTI PAROLE:Codice PHP:<html>
<head>
<style type="text/css">
body{
padding:0;
margin:0 10%;
}
#corpo{
width:auto;
background:#00CC00 url([url]http://www.gruppowebazar.com/z.png[/url]) 35% 0 repeat-y;
overflow :hidden;
border: solid 3px #000
}
#col1{
width:35%;
float:left;
background:#trasparent;
}
#col2{
width:65%;
float:left;
background:#trasparent;
}
p{
padding-left:0.7em}
h1,h2{margin:0}
#int{
background:#CCFF00;
text-align:center;
border: solid 3px #000;
border-bottom:none;
}
#pie{
background:#FF0000;
text-align:center;
font-size:105%;
border: solid 3px #000;
border-top:none;
clear:left;
}
</style>
<div id="int"> <h1> Questo č il titolo </h1> </div>
<div id="corpo">
<div id="col1">
colonna 1 </p> </div>
<div id="col2"> <pcolonna 2 </p> </div>
</div>
<div id="pie"> <h2> The end.... </h2> </div>
}
</style>
</head>
</html>
In questo es. il trucco sta nel dare a heigth 1% in modo tale da accontentare overflow:hidden;.... Le complicazioni sono essenzialmente dovute al fatto che si vuole aggiungere un bordo il cui spessore č espresso in pixel a un layout in cui la larghezza č espressa in percentuali. L'uso della dichiarazione overflow:hidden richiede che per l'elemento #corpo sia dichiarato un valore diverso da auto per la proprietā width. Volendo aggiunger un bordo di 3px la larghezza complessiva dell'elemento #corpo supererā quella messa a disposizione dal padding di body.
La soluzione alternativa č questa:
Codice PHP:#corpo{
width: auto; /* in questa maniera si risolve il problema dell'eccedenza dei bordi (commento personale)*/
hegth:1%;
border-left:3px;
border-rigth:3px
Il libro a proposito di questo dice:
Bene ho fatto come dice il libro ma aprendo la pagina con firefox o safari o IE7 il corpo risulta completamente schiacciato (all1% ovvero). Se invece ometto heigth:1% e lascio semplicemente width:auto, tutto funziona alla perfezione sia in firefox che in Safari. Ovvero accade tutto il contrario del libro:Tale proprietā (impostare heigth:1%) sarā del tutto ininfluente.
lė dice ce impostando solo width:auto non funziona perchč overflow:hidden richiedeun valore diverso da auto, E INVECE A ME FUNZIONA. Dice che si deve impostare heigth:1% MA COSI' FACENDO LA PAGINA DIVIENE ILLEGIBILE.
P.s.
In IE7 (sempre togliendo hegth) invece non si riesce a visualizzare lo sfondo di #corpo, cosa che ho risolto inserendo il <div id="pie"> all'interno di corpo.... Non ancora capito perchč tra l'altro....
Se invece lasciavo heigth:1% c'era si il problema che corpo veniva schiacciato pero' riuscivo a visualizzare lo sfondo di corpo (un pezzo piccolo ovviamente) senza bisogno di inserire il #pie all'interno del corpo.....
Che casino....
Spero che qualcuno abbia la pazienza di illuminarmi perchč non so piu' dove sbattere la testa...
A dimenticavo questo č il link (in cui il pič č fuori da #corpo)
http://www.gruppowebazar.com/prova.html
Rispondi quotando
