Layout header

**tryhere** · 27-08-2012, 00.10.37

In questa pagina volevo creare un header in modo che comparissero le due immagini ai lati e il titolo in mezzo...come posso portare questi tre elementi sulla stessa "riga"?

27-08-2012, 09.50.25

Il link che hai postato non funziona. Comunque per fare quello che chiedi devi usare i CSS.

27-08-2012, 09.58.40

O, in maniera molto brutale e decisamente meno fine, creare una tabella a una riga e tre colonne, ovviamente con bordi a spessore zero.

27-08-2012, 10.15.31

Secondo me basta usare 3 <span>, e con la proprietà float li sposto a sinistra e a destra.

**tryhere** · 27-08-2012, 10.24.46

Il link corretto è questo.
Pensavo che si potesse fare in maniera analoga alle colonne sotto ma non riesco.
Ovviamente parlavo di soluzioni css senza tabelle ;)

27-08-2012, 11.02.09

Copia tutto questo, sia html che css

Codice HTML:

<!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 http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Titolo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">

	<div id="headerdestra">
		<img src="logoheader.jpg" alt="Logo" />
	</div>
    <div id="headercentro">
		<h1>Titolo</h1>
	</div>
	<div id="headersinistra">
		<img src="logoheader.jpg" alt="Logo" />
	</div>
	
</div>
<div id="contenitore">
	<div id="sinistra">
		<p>Link1</p>
		<p>Link2</p>
	</div>
	<div id="centro">
		<p>Ciao</p><p>Ciao</p><p>Ciao</p><p>Ciao</p><p>Ciao</p><p>Ciao</p><p>Ciao</p>
		
	</div>
	<div id="destra">
		<p>Altro</p>
	</div>
</div>
</body>
</html>

Codice:

@charset "utf-8";
/* CSS Document */

body {
	width:1000px;
	margin:auto;
	background-color:#BBBBBB;
}

#header {
	background-color:#ABCDEF;
	margin:0;
	padding:0;
}

#headersinistra {
	float:left;
	
}

#headercentro {
	float:right;
	width:590px;
	
}

#headercentro h1{text-align:center;
}

#headerdestra {
	float:right;
	
}

#contenitore {
	overflow:auto;
	margin:auto;
	background-color:#C6D580;
}

#sinistra {
	float:left;
	width:200px;
}

#centro {
	float:left;
	width:600px;
	background-color:#FFFFFF;
}

#destra {
	float:left;
	width:200px;
}

**tryhere** · 27-08-2012, 14.22.05

C'è qualcosa che non va, può essere dovuto al fatto che l'immagine è di 202px anzichè 200?

27-08-2012, 14.45.32

Si, basta un pixel per rovinare tutto. Ho controllato il codice e non è quello che ti ho postato io. Per fare in modo che funzioni devi mettere l'HTML che ti ho postato io.

**tryhere** · 27-08-2012, 18.18.42

Ho quasi sistemato, resta il fatto che sotto alle due immagini rimane un po di header...è forse dovuto al bordo delle immagini? Come lo tolgo?

27-08-2012, 18.58.43

Devi mettere all'Header lo stesso height delle immagini. Esempio se l'immagine è alta 200px, devi mettere l'header alta 200px, e poi ricordati di azzerrare margin e padding.

Correggi l'id dell'header di sinistra manca un uguale.

**tryhere** · 27-08-2012, 20.41.02

Ho solamente corretto l'uguale che mancava e la pagina è diventata un disastro :(

27-08-2012, 20.53.13

Dal codice ho notato che l'header è fuori dal contenitore, invece deve essere all'interno del contenitore.

E poi non potresti creare un banner unico senza diventare pazzo con float ecc.?

**acsocmel** · 27-08-2012, 22.16.43

ma se hai già una struttura a 3 colonne perchè non la usi e distribuisci quello che vorresti nell'header nelle 3 colonne?
oppure se avessi usato le classi ti sarebbe bastato raddoppiare l'html

**tryhere** · 28-08-2012, 01.34.49

Benissimo ;)
Ultima cosa...nel riquadro bianco il testo è attaccato al bordo e non c'è il solito margine, come mai?

**acsocmel** · 28-08-2012, 01.50.33

sono tutti quei float

**tryhere** · 28-08-2012, 13.18.29

E non si può impostare qualche proprietà margin o simili?

28-08-2012, 20.41.02

Ho ricevuto il messaggio privato, quindi per mettere del margine interno (padding parola corretta) al div con lo sfondo bianco, devi aggiungere questo codice;

esempio padding sinistro:

Codice:

#centro {padding:0 0 0 10px;
}

Esempio padding sinistro alto:

Codice:

#centro {padding:10px 0 0 10px;
}

Spero di avere azzeccato la richiesta.

EDIT: ricorda che se aggiungi il padding devi diminuire il width, altrimenti si sballa tutto.

**tryhere** · 29-08-2012, 02.28.34

Ho scritto:

Codice PHP:


padding:10 10 10 10px;

sulle proprietà del div bianco ma non è cambiato nulla...riguardo il ridimensionare la width ho provato a ridurre quella del div bianco da 600px a 580px ma si sballa il layout.

29-08-2012, 09.18.56

Di fianco ad ogni 10 devi mettere px! Per quello che non funziona.

**tryhere** · 29-08-2012, 12.05.33

Inserendo il padding direttamente nel div centrale mi sballava anche l'header, ho quindi deciso di aggiungere all'interno del div centrare un ulteriore div con padding ;)
Ultima chicca riguardo gli elenchi puntati (con i quali ho costruito il menù di sinsitra): avendo eliminato i punti dell'elenco puntato, la parte sinistra del bottone scompare...come posso recuperarla?

29-08-2012, 13.34.07

Semplicemente al tag <ul> devi dargli un valore width con i css, in pratica la stessa larghezza che ha il div del menù.

**tryhere** · 29-08-2012, 14.44.04

è quello che ho fatto ma non funziona...

Codice PHP:


ul.navbar {

    width:200px;

    list-style:none;

    border-top:1px solid #666666;

    margin-bottom:15px;

}

29-08-2012, 15.02.23

Prova a mettere

Codice:

li {margin:0;
padding:0;
}

**tryhere** · 29-08-2012, 15.17.58

Aggiunto ma...niente da fare :(

29-08-2012, 15.21.56

All'inizio del codice CSS inserisci questo

Codice:

*, html {margin:0;
padding:0;
}

Se anche così non funziona, significa che hai impostato un qualche valore anomalo nei css.

**tryhere** · 29-08-2012, 15.29.39

Un po è migliorato ma si è anche sformato in basso...

29-08-2012, 15.34.04

Tranquillo, per quello basta che nel div centrale bianco metti questo

Codice:

#centro {line-height:3em;

}

Ovviamente in aggiunta all'altro codice.

**tryhere** · 29-08-2012, 15.38.35

vero, grazie!
e per centrare verticalmente il titolo?

29-08-2012, 15.41.22

Cambia il class .margine in questo modo

Codice:

.margine {
	padding:180px 10px 10px 0px;
}

In pratica ho azzerato il padding che hai aggiunto a sinistra.

**tryhere** · 29-08-2012, 15.44.17

Ho editato la risposta mentre tu rispondevi credo :)
Ho risolto togliendo il margine nella colonna di sinistra...ora devo solo centrare verticalmente il titolo ed ho finito :)

Discussione: Layout header

LinkBack

Strumenti discussione

Display

Layout header

Regole di scrittura