layer/menu che sparisca

**Georgias** · 10-10-2008, 11:41

Ciao a tutti
il problema è:
ho un menu con 4 voci che occupano lo spazio per l'intera dimensione del content
distanziati con regolarità, ma nel caso dal db viene omessa la visualizzazione di una voce delle 4 il tutto si deve spostare e centrare.
Dilemma che non riesco a risolvere. ho provato di tutto, float, layer contenitori, tabelle....
ma nulla di lontanamente fattibile
Qualcuno sa darmi un idea???

posto immagine per farvi comprendere

Ciao e grazie

**Georgias** · 10-10-2008, 12:36

nessuno sa darmi idee?

**Georgias** · 13-10-2008, 09:30

proprio nessuno

**Mich_** · 13-10-2008, 10:36

Hai provato a mettere
margin: 0 auto;
ai vari blocchi (interni) che devono stare sulla stessa riga?
Naturalmente i blocchi devono stare dentro un contenitore, che a sua volta deve essere largo come l'intera riga.

Comunque se hai problemi dovresti postare il codice HTML e CSS, perche` oggetti diversi sono da formattare in modo diverso.

**Georgias** · 13-10-2008, 11:30

si c'ho provato, ma il tutto si allinea a sinistra e se metto in hide un liv non si spostano...

css

codice:

#menuPOGB (contenitore menu) { 
	background-color: olive; 
	text-align: center; 
	visibility: visible; 
	margin-bottom: 7px; 
	position: relative; 
	width: 906px; 
	height: 20px; 
	float: center; 
	padding: 0; }
#menuP { 
	color: #fff; 
	font-size: 10px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold; 
	background-image: url(../i-immagini-inside/curvettaPon.jpg); 
	background-repeat: no-repeat; 
	background-position: left bottom; 
	text-transform: uppercase; 
	background-color: #93117e; 
	position: relative; 
	top: 0; 
	height: 18px; 
	width: 133px; 
	visibility: visible; 
	float: left; 
	margin: 0 auto; }
#menuO { 
	color: #fff; 
	font-size: 10px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold; 
	background-image: url(../i-immagini-inside/curvettaOon.jpg); 
	background-repeat: no-repeat; 
	background-position: left bottom; 
	text-transform: uppercase; 
	background-color: #ee7f00; 
	position: relative; 
	top: 0; 
	height: 18px; 
	width: 133px; 
	visibility: visible; 
	float: left; 
	margin: 0 auto; }
#menuG { 
	color: #fff; 
	font-size: 10px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold; 
	background-image: url(../i-immagini-inside/curvettaGon.jpg); 
	background-repeat: no-repeat; 
	background-position: left bottom; 
	text-transform: uppercase; 
	background-color: #35a32c; 
	position: relative; 
	top: 0; 
	height: 18px; 
	width: 133px; 
	visibility: visible; 
	float: left; 
	margin: 0 auto; } 
#menuB { 
	color: #fff; 
	font-size: 10px; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: bold; 
	background-image: url(../i-immagini-inside/curvettaBon.jpg); 
	background-repeat: no-repeat; 
	background-position: left bottom; 
	text-transform: uppercase; 
	background-color: #008bd0; 
	position: relative; 
	top: 0; 
	height: 18px; 
	width: 133px; 
	visibility: visible; 
	float: left; 
	margin: 0 auto; }

html

codice:

<body>

<div id="menuPOGB">
	
	<div id="menuP">
		
		asset
	</div>
	
	
	<div id="menuO">
		
		property
	</div>
	
	
	<div id="menuG">
		
		facility
	</div>
	
	
	<div id="menuB">
		
		agency
	</div>
	
</div>
</body>

**Mich_** · 13-10-2008, 11:40

Ti faccio notare che 4 <div> non formano un menu: hanno lo stesso aspetto in un browser visuale, ma non per chi o cosa non ci vede: in particolare quel sistema ti penalizza nei motori, che non trovano una struttura corretta.
I menu si devono realizzare tramite liste (di solito <ul> e[*])

Ti conviene cercare un menu a tendina nelle varie raccolte (vedi ad esempio tra i "link utili"): mi par di ricorare che tra i menu di CSSplay ce ne sia anche qualcuno con spazi automatici tra i vari blocchi.

**Georgias** · 13-10-2008, 13:55

Hai perfettamente ragione, l'interfaccia è per una intranet.

per il list hai ragione ma il problema sarebbe la gestione dei 4 colori diversi per voce menu/area [un problema per volta

]
son riuscita nell'intento con i list, ma nn riesco a centrarli

css

codice:

#menuPOGB { 
	font-size: 100%; 
	background-color: silver; 
	text-align: center; 
	position: relative; 
	width: 100%; 
	height: 30px; 
	margin: 0; 
	padding: 0; }
ul#menuO { 
	text-align: left; 
	float: left; 
	margin: 0; 
	padding: 0; 
	list-style-type: none; }
ul#menuO li { 
	width: 133px; 
	float: left; 
	margin: 0 auto; 
	padding: 0; 
	list-style-type: none; }
ul#menuO a { 
	float: left; 
	padding: 2px 0 0 14px; 
	text-decoration: none; 
	color: white; 
	font-size: 10px; 
	font-family: arial; 
	font-weight: bold; 
	background-color: #f7b46e; 
	text-transform: uppercase; 
	text-align: left; 
	width: 119px; 
	height: 16px; 
	margin: 0 auto; }
ul#menuO li#active a,ul#menuO a:hover{ 
	color: white; }
ul#menuO li#active span,ul#menuO a:hover span{ 
	color: white; }

html

codice:

<div id="menuPOGB">
<ul id="menuO">
	[*]menu1
	[*]menu2[*]menu3
	[*]menu4
	[/list]</div>

e non riesco a centrare il menu rispetto al contenitore.
e se levo una voce di menu mi si sposta tutto a sinistra
invece dovrebbe rimaner centrato

**Mich_** · 13-10-2008, 15:09

Sicuro che sia un problema di "centramento"?

Per una diagnosi devi dare colori diversi a:
#menuPOGB
ul#menuO
ul#menuO li
I colori servono solo per la fase di sviluppo, poi potrai toglierli.

Poi ci sono alcune cose che non capisco:
- perche` hai messo float:left nel ul#menuO a ? Io avrei definito display:block; width:100%; height:100%; margin:0; padding:0;
- perche` #menuO ha il float? Non serve; invece dovrebbe esserci:
menu0:after {clear:left; ... (vedi il trucco "fabclearing" che trovi mediante una ricerca nel forum)

Per la gestione dei colori, li attribuisci dando degli id ai singoli[*], ma e` un problema che si puo` risolvere anche dopo.

**Georgias** · 14-10-2008, 10:55

ho risolto in questo modo:

html

codice:

<div id="menuPOGB">
<div class="menuO">
<ul id="menuO">

<li class="P">
asset

<li class="O">
property

<li class="G">
facility

<li class="B">
agency[/list]</div>
</div>

css

codice:

#menuPOGB { 
	text-align: left; 
	width: 100%; 
	height: 30px; 
	margin: auto; 
	padding: 0; }
.menuO { 
	float:left; 
	position:relative; 
	left:50%; }
ul#menuO { 
	text-align: left; 
	position: relative; 
	left: -50%; 
	height: 27px; 
	margin: 0; 
	padding: 0; 
	list-style-type: none; }
/*variazione colore*/
ul#menuO li.O { 
	width: 133px; 
	float: left; 
	margin: 0 62px; 
	padding: 0; 
	list-style-type: none; }
ul#menuO a.O { 
	float: left; 
	padding: 3px 0 0 15px; 
	text-decoration: none; 
	color: white; 
	font-size: 10px; 
	font-family: arial; 
	font-weight: bold; 
	background-color: #f7b46e; 
	background-image: url(../i-immagini-inside/curvettaOof.jpg); 
	background-repeat: no-repeat; 
	background-position: left bottom; 
	text-transform: uppercase; 
	text-align: left; 
	width: 133px; 
	height: 18px; 
	margin: 0 auto; }
ul#menuO li.O#active a,ul#menuO a.O:hover{ 
	color: white; 
	background-color: #ee7f00; 
	background-image: url(../i-immagini-inside/curvettaOon.jpg); 
	background-repeat: no-repeat; 
	background-position: left bottom; }
ul#menuO li.O#active span,ul#menuO a.O:hover span{ 
	color: white; 
	background-color: #ee7f00; 
	background-image: url(../i-immagini-inside/curvettaOon.jpg); 
	background-repeat: no-repeat; 
	background-position: left bottom; }

pare che funzioni!!!!

**Georgias** · 16-10-2008, 11:07

infatti funziona perfettamente su FF ma su IE no.

dove sbaglio?

Discussione: layer/menu che sparisca

Strumenti discussione

Ricerca discussione

Visualizza

layer/menu che sparisca (in parte)

idee??

Permessi di invio