centrare menu

**urulela** · 06-09-2006, 08:30

ciao.
ho un div di 45 px di altezza, con un immagine di background con 10 px in basso colorati. quindi l'altezza effettiva dello spazio sarebbe 35px.
ho messo su un menu in css che è centrato, ma essendoci i 10px in orizzontale risulta spostato verso il basso.
vorrei tirare su il padding di 4/5px. sono 2 gg. che faccio prove, ma non riesco minimamemnte a spostarlo.
potete darci un'occhiata? grazie

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {

background-color: #fff;

}
/* navigation
---------------------------------------------------------- */

#nav {
	padding: 0px 10px 0px 10px;
	background: #0000ff;
	}
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
#nav li {
	float: left;
	margin: 0;
	padding: 0;
	}
#nav li a {
	float: left;
	margin: 0;
	padding: 0px 15px;
	font-size: 11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	color: #99CCFF;
	}
#nav li a:hover {
	color: #fff;
	text-decoration: none;
		}
#nav li a.active {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	
	}
-->
</style></head>

<body>
<table width="680" height="45" background="bgheader.gif" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<div id="nav">
	<ul>
		[*]HOME
		[*]FORUM
		[*]ISCRITTI
		[*]CONTATTI
		[*]ABOUT
	[/list]

</div>
</td>
  </tr>
</table>
</body>
</html>

**salasir** · 06-09-2006, 09:14

Prova a inserire un height: 30px; nelle definizione del div #nav.

Ma come struttura

... un <div> dentro una tabella di una riga e una colonna ...

Non è meglio usare solo il <div> e ragionare su quello?

**urulela** · 06-09-2006, 11:03

Originariamente inviato da salasir

Ma come struttura

... un <div> dentro una tabella di una riga e una colonna ...

Non è meglio usare solo il <div> e ragionare su quello?

perchè per adesso non sono in grado di dividere un div in verticale, dove a sx c'è il menù (680px) e a dx c'è il logo (260px)
.mi vanno a finire uno sotto all'altro e quindi, tanto per creare il menù, avevo optato per questa soluzione da zero a zero

anzi, se mi spiegassi come fare... (ho visto in giro un pòò di tutorial, ma mi si mettono uno sopra ll'altro specialemnete con IE)
grazie

**salasir** · 06-09-2006, 11:12

Bhe ... così è difficile ..
Comunque si tratta di definire le sezioni che ti interessano con <div> ... </div> e poi, tramite CSS stabilisci le dimensioni (width: 300px; o meglio in percentuale width: 30%

e la posizione (float: left)

codice:

CSS 
#bloccosx { width: 30%; float: left; }
#bloccodx { width: 69%; float: left/right; }

(X)HTML 

<div id="bloccosx">
   logo
</div>
<div id="bloccodx">
   menù
</div>

però forse è meglio che dai un'occhiata a qualche esempio di layout e vedi come sono fatti:

Layout Gala

PS. Puoi scegliere anche la strada di un unico div ("header") in cui posizioni il logo come bakground tramite CSS)

**fmtech** · 06-09-2006, 11:42

Salve! Mi intrometto anche io per un problema similare....

<STYLE type=text/css>
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0em; PADDING-TOP: 0px
}
#menu {
PADDING-RIGHT: 0em; PADDING-LEFT: 0em; PADDING-BOTTOM: 0px; MARGIN: 0em 0px; PADDING-TOP: 0px; BORDER-BOTTOM: black 0px solid; HEIGHT: 25px
}
DIV.outer {
BACKGROUND: url(barra.gif) no-repeat 0px -50px; FLOAT: left; MARGIN: 0px 1px 0px 0px; WIDTH: 75px; HEIGHT: 20px
}
DIV.outer A {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BACKGROUND: url(barra.gif) no-repeat left top; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: bold 9px/2 Verdana, serif; OVERFLOW: hidden; WIDTH: 100%; COLOR: #039; PADDING-TOP: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
DIV.outer SPAN {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 1px
}
DIV.outer A:hover {
BACKGROUND-IMAGE: none; COLOR: yellow
}
DIV.outer A:active {
COLOR: Red
}
</STYLE>

1) Scusate come posso fare per mettere al centro esatto della pagina la div principale???
2) Come deve essere la sintassi per far si che il css sia esterno (la sintassi del css esterno) per poi richiamarlo nella pagina (cosa che so fare)?

Grazie di ttto a tutti di cuore!

**salasir** · 06-09-2006, 11:46

Senza il codice HTML ..
Comunque puoi dare un margin: 0 auto; al div principale e text-align: center; al div che lo contiene (Questo per IE che non interpreta il margin auto di cui sopra :rollo: )

**salasir** · 06-09-2006, 11:50

Originariamente inviato da fmtech

2) Come deve essere la sintassi per far si che il css sia esterno (la sintassi del css esterno) per poi richiamarlo nella pagina (cosa che so fare)?[/B]

:master:

Basta che tutto ciò che è contenuto tra <style> e </style> lo inserisci in un documento che chiami, per esempio, stile.css e poi lo inserisci nelle pagine interessate

codice:

	<link rel="stylesheet" type="text/css" href="stile.css" />

**fmtech** · 06-09-2006, 11:51

Originariamente inviato da salasir
Senza il codice HTML ..
Comunque puoi dare un margin: 0 auto; al div principale e text-align: center; al div che lo contiene (Questo per IE che non interpreta il margin auto di cui sopra :rollo: )

Nel ringraziarti segnalo che ho provato a modificare il margin come mi hai segnalato ma non riesco a centrarlo... il risultato allo stato attuale è così!

**salasir** · 06-09-2006, 12:03

Metti il text-align: center; al div #menu.

Comunque, essendo un menu, solitamente si realizza con una tecnica di lista di link:

codice:

<ul>[*]link1 
   ...[/list]

e gestito tramite CSS.

Rimane tutto più pulito e gestibile.

**fmtech** · 06-09-2006, 12:17

Originariamente inviato da salasir
Metti il text-align: center; al div #menu.

Comunque, essendo un menu, solitamente si realizza con una tecnica di lista di link:

codice:

<ul>[*]link1 
   ...[/list]

e gestito tramite CSS.

Rimane tutto più pulito e gestibile.

Questa proprio non la sapevo! Fantastico! Quindi posso gestire anche link dall'esterno?!?! Wow

Discussione: centrare menu

Strumenti discussione

Ricerca discussione

Visualizza

centrare menu

Permessi di invio