Ciao a tutti
Avrei intenzioni di creare un sito costituito da:
div#header alto circa 50px e con una percentuale di lunghezza pari al 100%, contenente immagine a sinistra che fa da logo e a destra un menu testuale minimale di secondaria importanza creato con una lista non ordinata in verso orizzontale.
div#main che andrà a visualizzare i contenuti del sito con una percentuale di lunghezza del 90% e con un'altezza fissa definita in px.
div#navigation che sarà un menu graficamente più complesso del precedente e che rivestirà un ruolo di primaria importanza.
-
Il primo problema che mi si presenta è il menu presente nel div#header che al rimpicciolirsi della finestra, mi finisce verticalmente sotto l'immagine.
Mi chiedo come sia possibile ovviare al problema, fissando diciamo un limite che la ul non deve oltrepassare.
Lo stesso dicasi per il menu che sta sotto.
In poche parole vorrei che sopra e sotto nel ridimensionare la finestra, si eviti la sovrastazione dei vari oggetti lista.
Eccovi il codice:
http://thor.prohosting.com/huskyfez/html/index.htm<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body,html { margin: 0 0 0 0; padding: 0 0 0 0; }
/* HEADER */
#header { width: 100%; height: 50px;
position: fixed; top: 0px; left: 0px;
border-bottom: 1px solid #000; }
/* MENU SECONDARIO CONTENUTO NELL'HEADER */
#navig2 { height: 100%; float: right; }
#navig2 ul li { display: inline;
margin: 0 1em 0 1em; }
/* MAIN */
#main { width: 90%; height: 400px;
position: relative; top: 0%; left: 5%;
border-left: 1px solid #000; border-right: 1px solid #000; }
/* MENU PRIMARIO */
#navig1 { border-top: 1px solid #000; border-bottom: 1px solid #000; }
#navig1 ul li { display: inline; }
#navig1 ul li a { padding: 6em; }
/* FINE STYLE */
</style>
<title>Titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<!-- HEAD ->
<div id="header">
[img]#[/img]
<div id="navig2">
<ul>
[*]Link1
[*]Link2
[*]Link3
[*]Link4
[/list]
</div>
</div>
<!-- MAIN ->
<div id="main">
<h2>TITOLO</h3>
</div>
<div id="navig1">
<ul>
[*]Link1
[*]Link2
[*]Link3
[*]Link4
[/list]
</div>
</body>
</html>
Grazie mille e chiedo scusa in anticipo per qualche eventuale castroneria
Rispondi quotando