Css: margin o position???

**jackweb** · 02-07-2003, 10:37

Ciao a tutti!
Sto creando un layout in css maa nt7 e Ie leggono il css in maniera diversa!
Ho letto MOLTO su questo anche sulle guide del sito ma non riesco a risolvere il problema.
Per posizionare i box prima ho usato i margini (margin-top:...) poi ho fatto il tentativo con position e i relativi top e left ma non ho ottenuto risultati soddisfacenti.
Sapete spiegarmi una volta per tutte come funzia questo benedetto posizionamento tra i vari box? Sto veramente sclerando..

Premetto che non ho usato padding o bordi per rendere il codice + semplice!
Grazie tante!

**Kibi** · 02-07-2003, 11:21

Hai dato un doctype alla pagina? Se non lo fai ie 6 te la visualizza in modo sbagliato...

**antos** · 02-07-2003, 11:39

http://www.html.it/css/guida_css_27.htm
qui ti spiega i sistemi di come posizionare li elementi dove e come vuoi

**jackweb** · 02-07-2003, 15:17

Grazie Antos...avevo già visto quella pagina ma non ero riuscito a venirne a capo ugualmente!
Sarà che preso dall'entusiasmo dei css mi sono lasciato andare alla creazione senza forse studiare in maniera approfondita....anche se, ora che tento di risolvere il problema, non ci riesco!

DOCTYPE???? Quale tipo di doctype dovrei inserire???:master:

Questo è il codice.....netscape7 mi alza la barra "linealink" di almeno 5px + in alto

!!! E' inspiegabile!!! Se volete dare una occhiata...

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#sf{height:361px;
width:200px;
background:url(mwa/sf-snote.gif) 100% 100% ;
margin-top:0px ;

}
#sin{height:356px;
width:104px;
background-color:#ffffff ;
margin-top:-359px ;
margin-left:2px;
}
#sing{height:352px;
width:100px;
background-color:#d8ddee ;
margin-top:-354px;
margin-left:4px ;
}

#linea-link{height:16px;
width:400px;
background-color:#ffcccc;
margin-top:-361px;
margin-right:110px;
margin-left:106px;
background: url( mwa/html-v/sfera.gif) 100% 100%;

}
#linkutili{height:40px;
width:90px;

margin-top:-120px ;
margin-left:9px;
}
#testo-linkutili{height:40px;
width:80px;

margin-top:0px ;
margin-left:6px;

}
a.class-1{font-family:Verdana;
color:black;
font-size:20px;
background-color:#d8ddee;
text-align:center;
text-decoration:none;
line-height: 16px;

}
a.class-1:hover{color:red;
text-decoration: none;
background-color:#ffffff;
}
a.class-2{font-family:Verdana;
color:black;
font-size:10px;
background:url("mwa/freccia2.gif") 0 50% no-repeat;
text-align:center;
text-decoration:none;
line-height: 16px; }

a.class-3{font-family:Verdana;
color:black;
font-size:12px;

text-align:center;
text-decoration:none;
line-height: 16px;

}

a.class-2:hover{color:red;
text-decoration: none;
background-color:#d8ddee;
}
a.class-3:hover{color:red;
text-decoration: none;
background:#ffffff;
}

</style>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle" >
<table width="600" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" height="400">
<div id="sf"></div>
<div id="sin"></div>
<div id="sing">
<div align="center"></div>
<div align="center">

<font color="#006699" face="Courier New, Courier, mono"></font></p>

[img]mwa/html-v/logo-pic.gif[/img]</p>
</div>
</div>
<div id="linea-link"><a title="Il mio profilo"class="class-2" href="profilo.htm" >
Profilo </a> Conoscenze
<a title="Il curriculum di MauroWebArt"class="class-2" href="curriculum.htm" >
Curriculum </a><a title="I lavori"class="class-2" href="portfolio.htm" >Portfolio
</a><a title="Scrivete una e-mail"class="class-2" href="mailto:mauro_ricci@tiscali.it" >
E-Mail </a>
</div>

</td>
</tr>
</table></td>
</tr>
</table>
</body>

**blakwolf** · 02-07-2003, 15:38

penso che sia un problema di box modeled

http://www.constile.org/tutorial/IE5_box_model/

**antos** · 02-07-2003, 15:39

guarda hai fatto un casino annidando le 2 tabelle che non si capisce niente, tag non chiusi etc etc.. molto probabilente se sistemi tutto vedrai che la pagina funzionerà correttamente...

PS
se stai imparando ad usare i CSS come mai ancora queste tabelle annidate:gren:

**antos** · 02-07-2003, 15:41

Originariamente inviato da blakwolf
penso che sia un problema di box modeled

http://www.constile.org/tutorial/IE5_box_model/

mi sa che il box model di IE5 qui non c'entri:gren:

**blakwolf** · 02-07-2003, 15:44

si ho notato adesso facendo una prova :tongue:

**jackweb** · 02-07-2003, 18:12

Grazie ragazzi.....il vostro aiuto mi conforta perchè io proprio non trovo la soluzione!

Le tabelle annidiate? x tenere sempre centrato il sito!! Una in % e la seconda come "architettura"....
Ho notato una cosa tra i 2 browser.............facendo le prove e posizionando 2 box ad un margin-top e position relative -361 ambedue si posizionano alla stessa altezza ma tra IE e Netscape quest'ultimo li posiziona + in alto di 3-4 px........ più o meno!!!
Perciò il problema rimane irrisolto!!!!!!!
Ma come mai? Eppure no padding no border....ho anche tentato di rendere semplici le cose proprio per renderlo leggibile dai diversi browser....

**antos** · 02-07-2003, 18:15

questo invece pare proprio il problema del box model...

(per centrare un sito non devi usare per forza le tabelle!)

Discussione: Css: margin o position???

Strumenti discussione

Ricerca discussione

Visualizza

Css: margin o position???

Permessi di invio