navigazione a sx

**grungi** · 20-06-2008, 15:01

Buondi',
ho la navigazione staccata dal bordo della pagina, come se ci fosse un margine, mentre io la voglio tutta a sinistra.
potete aiutarmi a capire cosa e' che non va?
- #navigation e' la parte che vorrei se ne stessa a sinistra, insieme con la parte relativa al #menu
- #content e' il corpo centrale con il testo
- #extra e #newsbox la navigazione di sinistra

ho cercato di creare un layout a tre colonne...
grazie

#navigation {
float:left;
/* Inizia il Simplified Box Model Hack */
width:160px; /* Dimensioni per Opera 5 */
width:170px; /* Dimensioni per Explorer 5.x */
width:160px; /* Dimensioni per browser standard compliant */
padding:1em 0 0 10px}

#menu {
margin: 0px;
color:#0099FF;
list-style-type: none
}

#menu li a, #menu li a:visited {
position:relative;
text-decoration:none;
text-align:left;
display:block;
background-color:#FF9900;
color:#fff;
width:7em;
padding:0.1em;
margin:0.5em auto;
}

#menu li a:hover {
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}

#extra {
float:right;
width: 160px;
width:170px;
width:160px;
padding:1em 5px}

#newsbox {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:11px}

#content{
margin:0 170px;
padding:1em 10px;
background-color:#FFFFFF}

**Myaku** · 20-06-2008, 19:09

senza vedere l'html e qual è l'effettiva resa grafica si va un po' a naso.
Così su due piedi ti direi che avendo settato un padding-left, il contenuto è normale che stia staccato dal bordo.

**dyuhs** · 20-06-2008, 23:39

Aggiungerei anche (per IE):

body {
margin:0;
padding:0;
border:0;
}

**grungi** · 21-06-2008, 20:48

Originariamente inviato da Myaku
senza vedere l'html e qual è l'effettiva resa grafica si va un po' a naso.
Così su due piedi ti direi che avendo settato un padding-left, il contenuto è normale che stia staccato dal bordo.

corretto.

<body>
<div id="container">
<ul id="linkList">
[*]home[*]soluzioni[*]offerte[*]pacchetto
[*]pacchetto
[*]pacchetto[/list]

<div id="h2"></div>

<div id="navigation">
<ul id="rientro">
<div id="menu">[*]Home[*]Pillole[*]Contenuti[*]Grafica[*]Linguaggi[*]Webdesign[*]Software
</div>[/list]
</div>

<div id="extra">
<div id="newsbox">

La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
</div>

<div id="content">

Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte,
fino ad arrivare ai portali. Si compone delle seguenti sezioni fondamentali:
header, navigazione, contenuti, sezione extra e footer.</p>

Resta
l' idea che la sezione dei contenuti dovrebbe essere la più corposa, e
quindi la colonna centrale la più lunga. Come per il layout a due
colonne, la versione a tre colonne con i float rispetto all' analogo
con posizionamenti ha il pregio di non imporre vincoli sulla lunghezza
relativa delle colonne. D' altra parte vincola l' ordine di codifica
dell' html.

</p>
</div>

<div id="footer">
<div id="newsbox">
© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di Chiara s.r.l.</div>
</div>

</div>
</body>
</html>

**grungi** · 25-06-2008, 17:56

Originariamente inviato da dyuhs
Aggiungerei anche (per IE):

body {
margin:0;
padding:0;
border:0;
}

Ho inserito anche queste proprieta' ma non cambia lo spazio a sinistra.
qualche altro suggerimento please?
grazie ancora

**grungi** · 25-06-2008, 18:19

ho trovato una soluzione
ho sostituito il #menu
con un linkList da applicare al <ul>
in questo modo:

#linkList2 {
margin-top:0px;
margin-left:0em;
padding: 0;
min-width: 37em;
color:#009900;
list-style-type: none
}

#linkList2 li {
height:0.7em;
width:3em;
color:#FF9900;
padding-top: 13px;
padding-left: 1em
}

#linkList2 li a {
color:#009900;
text-decoration:none}

#linkList2 li a:hover {
color: #009900;
text-decoration:none;
color:#cccccc}

Discussione: navigazione a sx

Strumenti discussione

Ricerca discussione

Visualizza

navigazione a sx

Permessi di invio