dividere Header in più sezioni con i CSS

**MrClog** · 05-05-2012, 19:38

Salve,

io voglio dividere l'header della mia pagina web in due sezioni.

In sostanza voglio che nell'header della pagina ci sia a sx il logo e a dx un menu (fatto di immagini).
Questo è quello che vorrei
comevorrei

Questo è quello che viene
come viene

questo è l'index

codice:

<body >
		
		
	<div id="container">
        <div id="header">
			<div id="logo"> 
				[img]img/TecWebLogo.png[/img]
			</div>
			
			<div id="navigation">
			<ul>
				<li onload="logInit('uname', 'upass', 'logbtn');">
					<div id="login">
						<label for="uname">User name</label>
						<input id="uname" type="text" value="user" />
						<label for="upass">User password</label>
						<input id="upass" type="text" value="password" />
						<label for="logbtn">Login button</label>
						<input id="logbtn" type="button" value=" " />
					</div>
				
				[*]<a href="inc/registra.inc.php"><img src"img/reg.png" alt="Nuova registrazione">
Registrazione</a>
				[*]<a href="inc/recuperapwd.inc.php"><img src"img/pwd.png" alt="Recupera password">
Recupera Password</a>
				[*]<a href="index.php"><img src"img/home.png" alt="Home">
Home</a>
				
			</div>
		
		</div>
        
		
		<div id="content"></div>
        <div id="footer"></div>
    </div>

mentre questo è il foglio css(in parte)

codice:

<style type="text/css">

html,body{
	margin:0; 
	padding: 0
	}
body{
	font-family: arial,sans-serif; 
	font-size: 76%
	}
div#container{
	position: relative; 
	width: auto;
	height:100%
	}
div#header{
	top:10px;
	background: #E0FFFF;/*Azzurro ghiaccio*/
	
	float: left;
    width: 45%;
    width: 49%;
    width: 45%;
    padding: 0 2%
	}
#logo{
	
	display:inline
	
	}
#navigation{
	
	background-color:#FFE0F6; 
	border:solid;
	padding:0.4em;
	color: #fff;

	}
#navigation ul{
	margin-left: 0;
	padding-left: 0;
	display: inline;
	} 

#navigation ul li {
	margin-left: 0;
	margin-bottom: 0;
	padding: 2px 15px 5px;
	
	list-style: none;
	display: inline;
	}

**Prill** · 05-05-2012, 19:48

Perché assegni al div header 3 larghezze diverse? Dagli una larghezza del 100%, poi un float:left al div logo (cui assegni una larghezza pari a quella dell'immagine), calcoli la larghezza del menu, gliela assegni e fai flottare pure quello (a sinistra o a destra) (inoltre assegna al div header, o al contenitore esterno anche una min-width che sia pari alla larghezza minima dei contenuti per evitare che i blocchi affiancati col float vadano a capo se si restringe la finestra)

**MrClog** · 05-05-2012, 20:20

ok,

ora mi trovo i due Div uno accanto all'altro.

Per le tre dimensioni ho letto sopra la guida CSS di HTML che servono per dare il parametro ai tre diversi browser. non importa lo posso togliere

Ma continuo a non visualizzare le immagini del menù e a non vedere gli stessi uno accanto all'altro

grazie per la celerità

**Prill** · 05-05-2012, 20:45

Le immagini del menu non le vedi perrché le hai richiamate con

codice:

<img src"img/reg.png"

manca il segno = dopo src
Poi inserisci anche la chiusura di ul che manca

**MrClog** · 05-05-2012, 21:36

Finalmente inizia a prendere forma! quelle delle immagini era proprio un errore di distrazione.
Ma le immagini con i link si visualizzano una sotto un altra anche se

codice:

#navigation ul li {
	margin-left: 0;
	margin-bottom: 0;
	padding: 2px 15px 5px;
	
	list-style: none;
	display: inline;
	}

ho inserito il display: inline. Oppure le devo mettere al box più esterno?

Discussione: dividere Header in più sezioni con i CSS

Strumenti discussione

Ricerca discussione

Visualizza

dividere Header in più sezioni con i CSS

Permessi di invio