Buongiorno a tutti,
ho un piccolo problema con il menù che ho creato sul mio sito e spero possiate darmi una mano a risolverlo.
Ho creato un sito con layout fluido specificando in percentuale la larghezza del contenitore principale.
Il mio menù è orizzontale e ogni voce ha una larghezza stabilita di 100 px.
Quando restringo la pagina le ultime voci della lista si dispongono nella riga sottostante.
Come posso impedire che questo avvenga?
Ciao, puoi assegnare al menu una larghezza precisa (sommando la larghezza di tutte le voci), in questo caso quando la finestra sarà ridotta le voci del menu resteranno su una sola riga e avrai uno scrolling orizzontale
Sfortunatamente questo stratagemma non funziona.
Mi sono resa conto di non essere stata molto precisa nella descrizione del mio modello.
Il body non ha specifiche sulla larghezza mentre il container è impostato al 95% di larghezza.
Questo valore è l'unico indicato in percentuale, tutti gli altri sono impostati in pixel.
Impostando la larghezza del menù ( sia in pixel che in percentuale) succede che la "riga" su cui deve disporsi il menù rimane della larghezza giusta ( e appare lo scrolling) ma una o più voci del menù finiscono comunque nella riga sotto.
Hai qualche altra idea per caso?
Sai dirmi quale errore sto ancora commettendo?
Puoi mettere un link della pagina così da vederne il codice e vederla in funzione?
scusa tanto il ritardo di questa mia risposta.
... non so come farti vedere il sito perchè non è ancora on line... come faccio a fartelo vedere? dove posso metterlo?
Puoi postare qui il codice (sia css che html)
ti posto tutto il codice. intanto ecco la head. ti posto il body e il css in 2 messaggi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content= "HTML Tidy for Windows (vers 1st February 2005), see www.w3.org" />
<meta http-equiv="content-type" content= "text/html; charset=us-ascii" />
<meta name="description" content="va inserita una breve descrizione del contenuto pragma - istituto per le ricerche statistiche e l'analisi dell'opinione pubblica - ricerche sociali e di mercato - analisi del mercato e dei trend - sviluppo e gestione dei prodotti - sviluppo e gestione del brand - comunicazione - relazioni e crm - Analisi dell'opinione pubblica - ricerche sociali - ricerche qualitative, quantitative, multiclient, approccio integrato" />
<meta name="keywords" content="qui ci sono delle parole chiave che vengono trovate dai motori di ricerca" />
<title>Il Domani in Italia</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="container">
<div id="container2">
<div id="header">
[img]../immagini/logo1.jpg[/img]
[img]../immagini/bandiera_inglese.jpg[/img]
[img]../immagini/bandiera_italiana.jpg[/img]
</div>
<div id="navigation">
<ul class="level1">[*]L'Azienda
<ul class="level2">[*]La Storia[*]Gli Asset[*]L'Organizzazione
[*]Il Centro Servizi
<ul class="level3">
[*]Le Risorse[*]Gli Spazi
[/list]
[*]I Partners[*]Gli Impegni Attuali[/list]
[*]L'Esperienza
<ul class="level2">[*]I Prodotti
[*]I Must
[*]L'Archivio
<ul class="level3">
[*]Le Istituzioni[*]Il Mercato[*]La Mobilità[*]Il Turismo e i Trasporti
[/list]
[/list]
[*]I Dipartimenti
<ul class="level2">
[*]Le Istituzioni
<ul class="level3">
[*]I Clienti[*]Gli Impegni[*]L'Archivio
[/list]
[*]Il Mercato
<ul class="level3">
[*]I Clienti[*]Gli Impegni[*]L'Archivio
[/list]
[*]La Mobilità
<ul class="level3">
[*]I Clienti[*]Gli Impegni[*]L'Archivio
[/list]
[*]Il Turismo e i Trasporti
<ul class="level3">
[*]I Clienti[*]Gli Impegni[*]L'Archivio
[/list]
[/list]
[*]Domani in Italia
<ul class="level2">
[*]Io e La Famiglia
[*]Il Lavoro
[*]La Società
[/list]
[*]I Contatti
<ul class="level2">
[*]Dove siamo
[*]Lavora con noi
[/list]
[/list]
</div>
<div id="cerca">
| Cerca nel sito
| Registrati
| Accedi |
</div>
<div id="percorso">
Home>
Il Domani in Italia
</div>
<div id="navigationsx">
<h3>Il Domani in Italia</h3>
<ul>[*]Io e la famiglia[*]Il lavoro[*]La Società[/list]
</div>
<div id="extradx">
<h3>Contenuti extra</h3>
<div class="newsbox">
<h4>Dati istat</h4>
[img]../immagini/prova.jpg[/img]
Qui si potrebbero inserire le elaborazioni dei dati istat</p>
<div class="clearer">
</div>
</div>
<div class="newsbox">
<h4>Il futuro e gli italiani</h4>
[img]../immagini/prova.jpg[/img]
Compare una delle ultime notizie pubblicate</p>
<div class="clearer">
</div>
</div>
<div class="newsbox">
<h4>Altro box</h4>
[img]../immagini/prova.jpg[/img]
Con lo stesso principio dei box precedenti possono
essere inserite notizie in aggiornamento.</p>
<div class="clearer">
</div>
</div>
<div class="newsbox">
<h4>Altro box</h4>
[img]../immagini/prova.jpg[/img]
Contenuti del box</p>
<div class="clearer">
</div>
</div>
</div>
<div id="content">
<h2>Il Domani in Italia</h2>
<p class="contenuto">
Comporre un testo introduttivo che anticipi i contenuti di questa sezione e che spieghi come vengono reperite/elaborate queste informazioni.
</p>
</div>
<div id="footer">
© 2002 Pragma Srl. -p.iva 00934911009 c.f .00819770587
</div>
</div>
</div>
Associato con
[img]../immagini/logo_assirm.jpg[/img]
[img]../immagini/logo_esomar.jpg[/img]
[img]../immagini/logo_dnv.jpg[/img]
[img]../immagini/logo_mspa.jpg[/img]
</p>
</body>
</html>
IL CSS E' ANCORA UN PO' DISORDINATO...
/* stili per layout fluido*/
html,body {
margin:0px;
padding:0px}
body {
font-family: arial,sans-serif;
font-size: 76%;
text-align: center;
background-color:#EBD699;
color: #000;}
body img{
height: 40px;
width:40px;
margin: 0px 2px 0px 2px;
border-width: 2px;
border-color: silver;
background-color: #1F1F14;
padding: 1px;
/*-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 20px #000;
box-shadow:0px 0px 20px #000; */
}
div#container{
width: 80%;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
margin-bottom:0px;
/* seguono i bordi esterni del contenitore che si vede*/
border:1px solid #888;
border-color:#ddd #555 #555 #ddd;
/*questi sono gli angoli arrotondati
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:0px 0px 30px #000;
-webkit-box-shadow:0px 0px 30px #000;
box-shadow:0px 0px 30px #000;*/
background: url(../immagini/sfondodx.jpg) repeat-y top right;
background-color: white; /*se non carica l'immagine colora colonna centrale e dx*/
text-align: left;}
div#container2{
background: #59b200;
background: url(../immagini/sfondosx.jpg) repeat-y top left;
text-align: left;
}
/*border-top-left-radius:30px;}*/
/*stili generici su header e footer*/
div#header{
height: 160px;
border: 0px solid black;
/*-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;*/
padding: 10px;
background: white;
text-align: left;
color: white;}
div#header a{
color:#083;
text-decoration:none;
}
div#header h1{
margin: 5px 0px 5px 10px;
color: #083;
text-decoration:none;
font-size: 20px;}
div#header p{
margin: 0px;
padding-bottom:3px;
text-align:right;
color:black;}
div#header img{
height: 150px;
width: 244px;
margin: 5px 0px 0px 10px;
border-color: white;
padding: 0px;}
div#header img.bandiera {
height: 20px;
width:30px;
float: right;
display:inline;
margin-top:140px;
/*margin: 10px 30px 0px 5px;
border-color: silver;
background-color: #1F1F14;
padding: 1px;*/
}
div#footer {
z-index: 5000;
clear:both;
padding: 5px 0px;
background-color: #083;
color: #000;
font-size:12px;
text-align:center;}
div#footer img{
height: 40px;
width:40px;
margin: 2px 2px 0px 2px;
border-width: 2px;
border-color: silver;
background-color: #1F1F14;
padding: 1px;
/*-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 20px #000;
box-shadow:0px 0px 20px #000;*/
}
div#footer p {
text-align:center;}
div#footer a {
color:white;
border-width: 2px;
border-color: #5C5C3D;
font-weight: bold;
text-decoration: underline}
div#navigationsx {
float:left;
width:200px;
width:210px;
width:200px;
padding:6px 10px;
border:1px;
/*border-top-left-radius:30px;*/
}
div#navigationsx ul{
list-style-type : circle;
margin: 10px 10px -5px 2px;
padding: 10px 5px 25px 20px;
border-color:black;
background-color:white;
color:#000;}
div#navigationsx h3{
color: #083;
margin: -5px 10px 5px 2px;
padding: 10px 5px 10px 10px;
border-color:black;
background-color:white;}
div#extradx {
float:right;
width:190px;
width:200px;
width:190px;
margin-top: 0px;
border-width:0px 0px 0px 0px; /*inserisce il bordo tra la colonna centrale e quella dx*/
border-style:solid;
border-color: black;
padding:10px} /*distanzia i box dal bordo destro*/
div#extradx div.newsbox{
width: 190px;
margin-right: -70px;
margin-bottom: 5px;
background-color: #083;
/*-moz-box-shadow:0px 0px 20px #333333;
-webkit-box-shadow:0px 0px 20px #333333;
box-shadow:0px 0px 20px #333333;*/
}
div#extradx div.newsbox:hover {
width: 190px;
margin-right:0px;
margin-bottom: 5px;
background-color: #083;
/*transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);*/}
div#extradx div.newsbox img{
float: left;
margin:5px;}
div#extradx div.newsbox h4{
padding: 10px 0px 0px 10px;
color: white;
font-size: 15px;}
div#extradx div.newsbox p{
margin: 0px;
padding: 2px;}
div#extradx div.newsbox + div.newsbox + div.newsbox{
display:none;}
div.clearer{clear: left;}
div#content {
margin-top:0px;
margin-right:200px; /* deve avere sempre le dimensioni della colonna di dx*/
margin-bottom: 0px;
margin-left: 210px;/* deve avere sempre le dimensioni della colonna di sx*/
border-width:0px 0px;
border-style:solid;
border-color: black;
padding:5px 10px; }
div#cerca {
clear:both;
z-index: 5000;
border-width:0px 0px 0px 0px;
border-color:black;
border-style: solid;
padding: 3px 10px;
background-color: white;
text-align:right;}
div#percorso {
clear:both;
color: silver;
border-width:0px 0px 0px 0px;
border-color:black;
border-style: solid;
padding: 5px 15px;
background-color: #083;
text-align:left;}
div#percorso a{
text-decoration: none;
color: white;
}
a.linkw:visited {
text-decoration: none;
color: white;
}
a.linkw:hover {
text-decoration: none;
color: white;
font-weight: bold;
background-color: #c9f;
}
a.linkw:active {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #999966;
}
/*classi*/
/*link verdi*/
a.linkg:link {
text-decoration: none;
color: #000;
}
a.linkg:visited {
color: green;
text-decoration: none;
}
a.linkg:hover {
color: #FFFFFF;
text-decoration: none;
font-weight: 50px;
background-color: #05c;
}
a.linkg:active {
color: #ccf;
text-decoration: none;
font-weight: bold;
background-color: #999966;
}
/*link bianchi*/
a.linkw:link {
text-decoration: none;
color: white;
}
a.linkw:visited {
color: #green;
text-decoration: none;
}
a.linkw:hover {
color: #9f9;
text-decoration: none;
font-weight: bold;
background-color: #c9f;
}
a.linkw:active {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
background-color: #999966;
}
.contenuto {
/*inserire le specifiche del testo di contenuto*/
}
/*stili generici*/
#navigation {
position:relative;
z-index:5000;
}
#navigation ul {
padding:5px;
margin:0px 0px 0px 210px;
list-style:none;
background:#083;
}
#navigation ul.level1 {
height:30px;}
#navigation ul ul {
position:absolute;
margin: 0px 0px;
left:-9999px;}
#navigation table {
border-collapse:collapse;
width:0;
height:0;
position:absolute;
left:-1px;
top:-1px;}
#navigation ul li {
background:#083;
margin-right:5px;
float:left;}
#navigation ul li a {
width:105px;
display:block;
float:left;
padding:8px 10px 8px 5px;
font:normal 11px verdana, sans-serif;
text-align: center;
color:#000;
text-decoration:none;
background:#acb;
/*-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;*/
border:1px solid #888;
border-color:#ddd #555 #555 #ddd;}
#navigation ul li a.fly {
background:#7ACC29;
padding-right:5px;}
#navigation ul ul li {
margin:0px 0px 0px 0px;
text-align:left;}
#navigation ul ul li a {
width:100px;}
#navigation ul ul li a.fly {
padding-right:10px;}
#navigation ul li:hover {
position:relative;}
#navigation ul li a:hover {
direction:ltr;
background:#830;
color:#008F00;
border-color:#8a9;
/*-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;*/
position:relative;}
#navigation ul li:hover > a {
background:#47B247;
color:#fff;
border-color:#8a9;
/*-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;*/}
#navigation ul :hover ul {
left:-5px;
width:115px;
top:31px;
/*-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;*/ }
#navigation ul :hover ul :hover ul{
left:100px;
width:115px;
top:-35px;
margin:31px 0px 0px 17px;
}
#navigation ul :hover ul :hover ul :hover ul,
#navigation ul :hover ul :hover ul :hover ul :hover ul {
left:120px;
width:130px;
top:-35px;
margin:0px 0px 0px 15px;}
#navigation ul :hover ul :hover ul :hover a.fly + ul.level3 {
top:162px;
}
#navigation ul :hover ul ul,
#navigation ul :hover ul :hover ul ul,
#navigation ul :hover ul :hover ul :hover ul ul {
left:-9999px;}
Aggiungi al div#container un min-width:830px; .
Permessi di invio
Rispondi quotando