Elementi menu width 100%

**addosso** · 11-01-2013, 01:53

Salve, sto creando un sito web , la pagina dove ho il problema è QUESTA ed avendo un foglio di stile separato ovviamente è un problema comune anche per le altre.
Come vedete quando si va a ridimensionare la finestra del browser , le voci del menu' tendono a scorrere, mentre io le vorrei fisse dove si trovano adesso ed a tutte le possibili risoluzioni di monitor. Un esempio di menu ( inteso come stile di resize) lo potete trovare per esempio QUA .

Vi posto il codice del css che riguarda la barra menu 100% width e gli elementi del menu stesso.

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-image:url(../images/menu.png);
height:50px;
border-bottom: 1px solid #ccc; }
#nav ul {
list-style: none;
width: 800px;
margin: 0 35%;
padding: 3px; }
#nav li {
float: left;
position: relative;}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
font-size:x-large;
}
#nav li:first-child a {
}
#nav li a:hover {
font-weight: bold;
color: #0F0;
}

Ringrazio anticipatamente chiunque mi possa aiutare.

**GI89** · 11-01-2013, 12:15

Ciao, ho controllato il codice nella pagina, hai semplicemente non hai inserito il menu prima del container e non dopo, in pratica,
tu hai:

codice:

<body>
<div id="nav">
	<ul>
		[*]Home
		[*]Chi Sono
		[*]Contatti
		[*]Progetti
		
	[/list]
</div>

<div class="container">
  <div class="header">[img]images/header.png[/img]</div>
  <div id="destra">
    <p class="try"> News</p>
    <p class="azzo">In questa sezione terro' tutte le mie news riguardanti alla grafica del sito </p>
    
  </div>

Mentre dovrebbe essere

codice:

<body>
<div class="container">
<div id="nav">
	<ul>
		[*]Home
		[*]Chi Sono
		[*]Contatti
		[*]Progetti
		
	[/list]
</div>

  <div class="header">[img]images/header.png[/img]</div>
  <div id="destra">
    <p class="try"> News</p>
    <p class="azzo">In questa sezione terro' tutte le mie news riguardanti alla grafica del sito </p>
    
  </div>

**addosso** · 11-01-2013, 13:44

grazie mille della risposta, la cosa è che se io mettessi il container prima del menu', avrei la barra di background del menu stesso larga non tutta la pagina ma bensi solo 960px. Il container lo ho impostato a 960px centrato ed è per questo che non puo' andare bene ; esiste qualche trucco magari per far allargare il solo background oltre la larghezza del div container?

**GI89** · 11-01-2013, 14:30

Non ho capito bene cosa intendi perchè non ho il tempo di copiarmi il codice e verificare, comunque ho notato che usi 2 sfondi,uno per il menu e l'altro per la pagina (bg.png)

hai provato a mettere lo sfondo nel div e non nel css? Prova

codice:

<div id="nav" style="background-image: url(../images/menu.png);

**addosso** · 11-01-2013, 15:10

mi spiego meglio, io sono nella medesima condizione di come riportato su questa immagine che ho messo in allegato, solamente che gli elementi del menu li voglio centrati per ogni tipo di risoluzione monitor cioe li voglio fixed.

**addosso** · 11-01-2013, 15:23

Ho risolto adesso in un modo elaborioso, ho definito con la pseuclasse :frist-child il primo elemento del menu', poi gli ho dato un margine sinistro di 200px.

Discussione: Elementi menu width 100%

Strumenti discussione

Ricerca discussione

Visualizza

Elementi menu width 100%

Permessi di invio