Menu in linea problemi

**bako** · 27-03-2009, 12:53

Salve
sono alle prime armi con i css, ma ho fatto questo:

http://bako.altervista.org/test/grafica.html

problemi:
come posso fare che ogni pulsante abbia le stesse dimensioni?
si può mettere un'immagine di sfondo diversa per il pulsante della pagina corrente (es: se sono i home il pulsante home non sarà cliccabile, devo farlo a mano o posso farlo con i css?)

NB: perchè con IE NON SI VEDE COME CON FIREFOX?

grazie

codice css

codice:

#alto{
	position: absolute;
	left: 0%;
	top: 0px;
	width:100%;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #0078A6;
	background-image: url(immagini/Senza-titolo-3_02.png);
	background-repeat: repeat-x;
	}

	
#imgAlto{
	position: absolute;
	left: 0%;
	top: 113px;
	width: 100%;
	}

#menu ul {
	list-style:none;
	margin: 0px;
	padding:0px;
	height:110px;
    }
#menu ul li {
	padding:0px;
	 display: inline-block; 
	 background-image:url(immagini/Senza-titolo-3_02.png);
		color: #FFFFFF;
	
	}

#menu ul li a {
	text-decoration:none;	
	position:relative;
	top:70px;
	padding-top:100px;
	padding-bottom:20px;
	font-family: Calibri, Tahoama;
	font-size: 15px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	width:45px;
	color:#FFFFFF
     }
	 
	 

#menu ul li a:hover{
 background:#006699;
color:#FFFFFF;
}

 #menu ul a:active {
 background:#00CC33;
}

codice pagina

codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link href="stile.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #00384c;
}
-->
</style></head>
<body>
<div id="alto">
  <div id="menu"> 
  <ul> [*]Home[*]project[*]casa[*]mia
  </div>
</div>





<div id="imgAlto"></div>
</body>
</html>

**Mich_** · 27-03-2009, 13:23

Nota che i posizionamenti vanno usati solo se strettamente necessario. In genere creano sovrapposizioni.

Comunque volendo realizzare un menu, ti consiglio di prendere dai menu gia` pronti, dove ti basta modificare i colori e i font.
Fatti un giro tra i "link utili" (o anche in rete se vuoi).
Comunque nella pagina di CSSplay, di menu ce ne sono di tutti i tipi, gia` testati e funzionanti in tutti i browser.

**bako** · 27-03-2009, 13:44

http://www.cssplay.co.uk/menus/

saperlo prima nn sprecavo neanche il tempo dell'upload dei file

**bako** · 27-03-2009, 16:17

ho trovato questo:

http://www.cssplay.co.uk/menus/pointer.html

dovrei fare 3 modifiche:

fare che la freccia sia sopra il bordo
fare che tt i pulsanti abbiano la stessa dimensione.
fare che il rettangolo si estenda fino alla cima della pagina.

si può?

**Mich_** · 30-03-2009, 09:45

Per la larghezza, devi solo impostarla fissa (ora c'e` solo un min-width). Quindi togli semplicemetne il min- e modifica il valore in modo corretto (dovresti pero` usare gli em anziche` i px, per renderlo robusto rispetto ad un cambio di dimensione dei caratteri):

E devi anche modificare il width al link: io preferisco mettere nel link 100% sia per height che per width, inmodo da non avere bordi o disturbi al di fuori del tag <a>

codice:

.menu li {
  float: left;
  width: 20em;
  height: 2em;
}
.menu a {
  position: relative;
  display: block; 
  text-decoration: none; 
  width: 100%;
  heght: 100%;  
}

Per la freccia, dovresti andare a cercare dove e` inserita: ora non ho tempo di andare a cercarla io.

fare che il rettangolo si estenda fino alla cima della pagina.

Non la ho capita. Puoi rispiegarla?

**bako** · 30-03-2009, 15:43

Originariamente inviato da Mich_
Per la larghezza, devi solo impostarla fissa (ora c'e` solo un min-width). Quindi togli semplicemetne il min- e modifica il valore in modo corretto (dovresti pero` usare gli em anziche` i px, per renderlo robusto rispetto ad un cambio di dimensione dei caratteri):

E devi anche modificare il width al link: io preferisco mettere nel link 100% sia per height che per width, inmodo da non avere bordi o disturbi al di fuori del tag <a>

codice:

.menu li {
  float: left;
  width: 20em;
  height: 2em;
}
.menu a {
  position: relative;
  display: block; 
  text-decoration: none; 
  width: 100%;
  heght: 100%;  
}

Per la freccia, dovresti andare a cercare dove e` inserita: ora non ho tempo di andare a cercarla io.

Non la ho capita. Puoi rispiegarla?

ho quasi sistemato tutto.
la freccia è fatta con bordi, se la giro IE nn la prende quindi l'ho lasciata perdere.
grazie mille.

Discussione: Menu in linea problemi

Strumenti discussione

Ricerca discussione

Visualizza

Menu in linea problemi

Permessi di invio