bordi che non si vedono!le ho provate tutte!

**aerozep** · 08-05-2005, 13:32

Salve a tutti,
andiamo subito al dunque:
ho questa pagina: http://www.aerozep.it/prove/layoutppm.html
E come si può vedere in FF se faccio un hover su un menu sopra si vede (giustamente un bordino rosso) in E6 no!
Ora ho controllato anche le dimensioni e le varie proprietà del parent (che nel mio caso è headerup) ma niente!
ecco i codici:

CSS:

html,body{margin:0;padding:0}
body{font-size: 100.01%; "Trebuchet MS",Verdana,Arial,sans-serif;
text-align: left;
background: white;
color: black;}
h1{margin: 0;padding: 30px 0 10px 5px;font-size: 600%;color: #FF744C}
h2,h3,h4{margin:0;padding-left: 5px;line-height: 30px;color: #333}
h2{font-size: 160%}
h3{font-size:130%}
h4{font-size:120%}
p{margin: 0 5px;padding: 0 0 0.7em}

div#container1{width:780;margin: 0; background: url(sfondo.jpg)
repeat-y;text-align:left;float: left;}

div#container2{width:220;border: 3px solid white;margin: 0;

background: #F5B800 repeat-y;text-align:left; float: left}

div#header{background: #C7CBD4; height: 100px; }

div#headerup{
background: #EBECF1; margin: 0px; padding-left: 20px; height:20px;
border: none;

}

div.headerupli{
float: left;
line-height: 12px;
/*border-top: 3px solid blue;*/
background: url(dot.gif) repeat-y top left;
padding-left: 10;
padding-right: 6;
margin-top: 6;
padding-bottom: 3;
margin-left: 2;
margin-right: 2;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #3366CC;
font-size: 12px;
text-align: center;}

div.headerupli a:link{text-decoration: none;color: #3366CC;
}

div.headerupli a:hover{text-decoration: none;color: red; border-top: 8px solid red;
}

div#content{float:right;width:625px}

div#nav{float:left;width:135px;font-size:85%; padding-left: 20px; }

div#footer{clear:both;width:100%;padding-top:5px;background: #3366CC}

ed ECCO HTML:

<body>
<div id="container1">
<div id="header">
<div style=" position:absolute; width: 20px; background-color: red; height:100px;"></div>

<div id="headerup">
<div class="headerupli" style="background: none; padding-left:6; padding-right:6;">HOME</div>

<div class="headerupli">AUTO</div>
<div class="headerupli">MOTO</div>
<div class="headerupli">NAUTICA</div>
<div class="headerupli">CHI SIAMO</div>
<div class="headerupli">CONDIZIONI</div>
<div class="headerupli">SERVIZI PATNER</div>
<div class="headerupli">CONTATTI</div>
</div>
[img]pass-nuovo.gif[/img]
</div>
<div id="content">
<h2>Contenuti</h2>

Ie iiii ioo uia aa eu oo ie ia iuuu oa ooa eoeo ui oi uoueo eie oaii.</p>
</div>
<div id="nav">
<h3>Navigazione</h3>

ciaooo</p>
</div>

<div id="footer">

Qui il footer</p></div>

</div>
</body>

Dove sbaglio? Da notare che anche i tratteggi verticali sono sbagliati, in FF sono (giustamente ) attaccati al margine grigio scuro mentre in E6 no!
Grazie a chi mi aiuta!

**borgio3** · 08-05-2005, 16:25

Perchè fare un menu in quel modo invece di usare le liste?
Meno impegno, meno peso e facile gestione.

Prova a rivedere la struttura e poi adatta il CSS.
Da un punto di vista formale i colori sarebbero più giusti dichiarati con l'esadecimale.
Potresti anche raggruppare molte dichiarazioni del CSS.

Ciao Ciao

**aerozep** · 09-05-2005, 20:44

Ciao allora ho aggiustato un po' le cose:
ho raggruppato e usato le liste anche se i bordi sopra in E6 non si vedono ancora!riposto il codice:

CSS:

html,body{margin:0;padding:0}
body{font-size: 100.01%; "Trebuchet MS",Verdana,Arial,sans-serif;
text-align: left;
background: white;
color: black;}
h1{margin: 0;padding: 30px 0 10px 5px;font-size: 600%;color: #FF744C}
h2,h3,h4{margin:0;padding-left: 5px;line-height: 30px;color: #333}
h2{font-size: 160%}
h3{font-size:130%}
h4{font-size:120%}
p{margin: 0 5px;padding: 0 0 0.7em}

div#container{width:1024;margin: 0; background: white repeat-y;text-align: left}
div#container1{width:780;margin: 0; background: url(sfondo.jpg) repeat-y;text-align:left;float: left;}
div#container2{width:220;border: 3px solid white;margin: 0; background: #F5B800 repeat-y;text-align:left; float: left}
div#header{background: #C7CBD4; height: 100px; }
div#headerup{
background: #EBECF1;
margin: 0px;
padding-left: 0px;
height:20px;
}

div#headerup ul {
margin: 0px;
padding-top: 0px;
padding-left:30 px;
list-style-type: none;
}

div#headerup li{
display: inline;
background: url(dot.gif) repeat-y bottom left;
padding-top: 0px;
padding-left: 14px;
padding-right: 6px;
margin-top: 0px;
padding-bottom: 5px;
margin-left: 2px;
margin-right: 2px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
color: #3366CC;
font-size: 12px;
text-align: center;}

div#headerup li a:link{text-decoration: none;color: #3366CC;
}

div#headerup li a:hover{text-decoration: none;color: red; border-top: 2px solid red;
}
div#content{float:right;width:625px}
div#nav{float:left;width:135px;font-size:85%; padding-left: 20px; }

div#footer{clear:both;width:100%;padding-top:5px;background: #3366CC}

HTML:

<body>
<div id="container1">
<div style=" position:absolute; width: 20px; background-color: red; height:100px;"></div>
<div id="header">
<div id="headerup">
<ul>
<li style="background: none; padding-left:6px; padding-right:6px;">HOME[*]AUTO[*]MOTO[*]NAUTICA[*]CHI SIAMO[*]CONDIZIONI[*]SERVIZI PATNER[*]CONTATTI[/list]
</div>

[img]pass-nuovo.gif[/img]
</div>
<div id="content">

<h2>Contenuti</h2>

Ie iiii ioo uia aa eu oo ie ia iuuu oa ooa eoeo ui oi uoueo eie oaii.</p>

Eouuioi aaeeui oao uo ei iee oai uuie auoio oieo uu a ui e ou uao ooeoi uueu ui uoiuou oaiia ii.</p>

Oaia oe ou o ooi aaieeo oaai aeu iueoa i ieoiu uuoiui eeo uiu uueiia ueo iea eoieaue euu oe iea uauoa euuoue ioaei iau uo uuai oo oo eueeou o uiuoo iu aiieue.</p>

Oeiu aiuo uaoeei ooeaueo ou euaeae euii euuuii oeie eai aaa u ueua ooo ea iaiui oeo aoeo uoooeo euuoie ie iio uueu uouee eouauau iu iooia uiii.</p>

Ei oe ae uoeii aeaouu a au uia ooea eee ee ueou ueioo uuea uuioa eu a ee e ieao aoee iaoae ue uoii uiue uu ooe ueeo uaiuoo ooue iiao ueeeio euio i ia oei.</p>

Uou oae uo ooo ieiei aui ie aoeo aoa oi o uie oiuu i eaoaoa iioa aa oai ioe iieiei i oii uo auio e iuuou eiie ooioi eouo oiu oo aeuoaue uuaei eaiu iie uoio iaooue ueu oeii.</p>
</div>
<div id="nav">
<h3>Navigazione</h3>

Aaeiiu i ieieoe ee oooo u ouaioe au oi iue iii iuoi uiua oiea uuuuii eo uooeee iueu oeiuou e uieo oiu uee e iaou ioio o oaa o.</p>

Uaauueeu uee ei ouia oooui euieoe iui uuee oouoeu e ou ii uiii uua eaoa oouauu iuie oeei ei uuiuuoo.</p>
</div>

<div id="footer">

Qui il footer</p></div>

</div>
</body>

La pagina è sempre: www.aerozep.it/prove/layoutppm.html

Ho provato a mettere padding: 0px e margin: 0px su tutti i div ma niente sembra quasi che in explorer cominci tutto più in alto!
Questi bordi non voglio proprio uscire!
grazie come sempre!

**aerozep** · 10-05-2005, 00:05

dopo un po' di orette, ho risolto. In explorer la dimensione del testo in un inline ne determina anche la dimensione del contenuto quindi si allagarva e il bordo non si vedeva.
Il mio ragionamento è corretto?
Poi è bastato inerire un line-height e tutto è tornato ok!
grazie comunque a chi ci ha pensato!
Mattia

**borgio3** · 10-05-2005, 09:38

Visto con Opera 8.0 per Mac
La pagina si trova sbilanciata a sinistra e questo non è carino.
Per il resto non mi sembra che ci siano problemi.
Io avrei messo il menu sotto il titolo comunque ...

Cerca di allinearlo al centro e di staccarlo dal margine superiore della finestra.

Ciao Ciao

**aerozep** · 10-05-2005, 09:47

Ciao ti ringrazio per la risposta...
Il fatto è che devo ricopiare pari pari il sito www.passaparolamotori.it sempre mio ma fatto con le tabella e tantissime immagini finte. Quindi per ora mi limito a questo poi farò delle modifiche...
Ti ringrazio ancora Mattia

Discussione: bordi che non si vedono!le ho provate tutte!

Strumenti discussione

Ricerca discussione

Visualizza

bordi che non si vedono!le ho provate tutte!

Ciao

Ciao

Permessi di invio