[CSS] Layout e float che non va

[stecla]

Ciao a tutti premetto che sono niubbissimo in campo di css ma la voglia di impararare a creare un layout con questo metodo è tantissima .... mi sono subito imbattuto in un problemino e guardando questa pagina capirete subito perchè....

link

Come mai i due div news e articoli non si affiancano.... :master:
il foglio di stile è questo...

body {margin:auto; padding: 20px 20px 20px 20px; color:#333333; background-image: url(images/bg.gif); font:11px Verdana, Arial, Helvetica, sans-serif; text-align: center;}

h1 {font:bold 26px Verdana, Arial, Helvetica, sans-serif;color: #3D83C9;margin: 0px 0px 0px 0px;}

div.menu{border:1px solid #3D83C9;}

div#contenuto {border:1px solid #3D83C9; width: 600px; margin: auto; text-align:left;}

div#messaggio{margin:auto;text-align: center;}

div#news{width: 50%;border: 1px dotted #3D83C9; float:left; text-align:left;}

div#articoli {width: 50%;border: 1px dotted #3D83C9; float:right; text-align:center;}

div#crediti{background-color: #ebebeb; font:9px Verdana, Arial, Helvetica, sans-serif; text-align: center;}

a:{linkcolor:#3D83C9;font-weight: 400;}

a:visited {color:#3D83C9;font-weight: 400;text-decoration: none;}

a:hover {color: #FFFFFF; background-color: #3D83C9;font-weight: 400;text-decoration:underline;}

[span]

prova a leggere questo: http://atomsurfer.altervista.org/xht...s_floating.php

conta anche la disposizione degli elementi (x)html, non solo il CSS se usi il float

[Jerry Masslo]

io te te lo dico però poi tu me ne spieghi un'altra.

intanto non capisco l'affannarti coi div se poi ci ficchi lo stesso dentro le tabelle, sarebbe come cucinare a forno per evitare le fritture però poi nel forno c'infili le patate fritte.

stai usando un doctype con cui ie funziona in modo standard e quindi applica le regole corrette del box model, per cui i bordi si sommano alla larghezza da cui due 50% più i bordi non possono stare dentro lo stesso box, devi ridurre le percentuali. Nota che se togli il doctype con ie si sistema, perchè in questo caso funziona colle sue regole.

Ora potresti spiegarmi perchè passando sui link del menù con ie succede quel che succede?

[span]

Originariamente inviato da Jerry Masslo
Ora potresti spiegarmi perchè passando sui link del menù con ie succede quel che succede?

che succede? :master:

[stecla]

Originariamente inviato da span
prova a leggere questo: http://atomsurfer.altervista.org/xht...s_floating.php

conta anche la disposizione degli elementi (x)html, non solo il CSS se usi il float

Ho letto la guida ma non sono riuscito a ricollegarla al mio problema...

nel frattempo ai due div #news e #articoli ho dato una misura fissa ma i problemi si accavvallano ora pur essendo affiancati il div #crediti si sottopone a entrambi....questo perchè...???

[span]

Originariamente inviato da Jerry Masslo
stai usando un doctype con cui ie funziona in modo standard e quindi applica le regole corrette del box model, per cui i bordi si sommano alla larghezza da cui due 50% più i bordi non possono stare dentro lo stesso box, devi ridurre le percentuali. Nota che se togli il doctype con ie si sistema, perchè in questo caso funziona colle sue regole.

sinceramente non ho guardato il tuo codice, ma presta attenzione a quello che ti ha scritto jerry

http://atomsurfer.altervista.org/ese...dingborder.php

Tu stai ragionando pensando alla seconda immagine, invece lo devi fare pensando alla prima

[stecla]

Originariamente inviato da Jerry Masslo
io te te lo dico però poi tu me ne spieghi un'altra.

intanto non capisco l'affannarti coi div se poi ci ficchi lo stesso dentro le tabelle, sarebbe come cucinare a forno per evitare le fritture però poi nel forno c'infili le patate fritte.

stai usando un doctype con cui ie funziona in modo standard e quindi applica le regole corrette del box model, per cui i bordi si sommano alla larghezza da cui due 50% più i bordi non possono stare dentro lo stesso box, devi ridurre le percentuali. Nota che se togli il doctype con ie si sistema, perchè in questo caso funziona colle sue regole.

Ora potresti spiegarmi perchè passando sui link del menù con ie succede quel che succede?

Hai ragione in tutto però il codice per le news ormai ce l'avevo dentro tabelle e mi so incollato il tutto per questione di tempo...

Per quanto riguarda l'allineamento ho capito e invece che ridurre la % ho messo un fisso in px ed ho ottenuto credo le stesso risultato che se avessi messo 49%

E per il fatto del menu :master: boh aspetta che ci penso... :quipy:

[span]

Originariamente inviato da stecla
nel frattempo ai due div #news e #articoli ho dato una misura fissa ma i problemi si accavvallano ora pur essendo affiancati il div #crediti si sottopone a entrambi....questo perchè...???

prova a dare a #crediti un clear: both; nel CSS (vedi guida )

[stecla]

Originariamente inviato da span
(vedi guida )

Ma forse anche di più :gren:

Cmq grazie a entrambi i primi problemi li ho risolti

[Jerry Masslo]

Originariamente inviato da stecla

E per il fatto del menu :master: boh aspetta che ci penso... :quipy:

Ma a voi non lo fa? Su ie6 a me se passo il mouse sui link del menù scompare buona parte del box sotto, ora vedo che non lo fa più e vedo pure che col clear both che si sistema ma copiate e provate questo su ie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>..::WebStella.it::..</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="WebStella.it">
<meta name="keywords" content="Stella, Claudio, asp">
<style>
body {margin:auto; padding: 20px 20px 20px 20px; color:#333333; background-image: url(bg000000.gif); font:11px Verdana, Arial, Helvetica, sans-serif; text-align: center;}
h1 {font:bold 26px Verdana, Arial, Helvetica, sans-serif;color: #3D83C9;margin: 0px 0px 0px 0px;}
div.menu{border:1px solid #3D83C9;}
div#contenuto {border:1px solid #3D83C9; width: 600px; margin: auto; text-align:left;}
div#messaggio{margin:auto;text-align: center;}
div#news{width: 50%;border: 1px dotted #3D83C9; float:left; text-align:left;border:0}
div#articoli {width: 50%;border: 1px dotted #3D83C9; float:right; text-align:center;border:0}
div#crediti{background-color: #ebebeb; font:9px Verdana, Arial, Helvetica, sans-serif; text-align: center;}
a:{linkcolor:#3D83C9;font-weight: 400;}
a:visited {color:#3D83C9;font-weight: 400;text-decoration: none;}
a:hover {color: #FFFFFF; background-color: #3D83C9;font-weight: 400;text-decoration:underline;}
table{width:100px} /*l'ho aggiunto io per evidenziare la stranezza con meno codice*/
</style>
</head>
<body>
<div id="contenuto">
<h1>WebStella.it</h1>
<div class="menu">
..::Home::..
..::Chi sono::..
..::Galleria::..
</div>
<div id="messaggio">
Benvenuto nel mio sito di prova asp.

Ancora è tutto in fase di test e sperimentazione

</div>
<div id="news">
<table><tr> <td>
a voi passando sui link dek menù non scopare buona parte di questo qua? ora vedo che non scopare più, ma aggiungendo altro qui vedrete se non fa il dispettoso anzi ora stringo la tabella così allunga di più e vedete </td></tr>
</table>
</div>
<div id="articoli">
A sinistra andranno le news e a destra gli approfondimenti
</div>
<div id="crediti">
Tutti i diritti riservati a WebStella.it
</div>
</div>
</body>
</html>