Layout in css e menu a tendina

**ibiscus** · 09-07-2004, 12:09

Ciao,
vorrei passare dal classico metodo di realizzazione della pagina attraverso le tabelle al metodo css. Ho cominciato a lavorare con i DIV, per creare un layout centrato con dimensione fissa a 750 px, ma non ho risolto un dubbio:

come faccio a creare una barra di navigazione orizzontale con i classici menu a tendina che compaiono con il rollover sul bottone corrispondente?

se imposto i DIV in posizione assoluta, ovviamente mantengono la loro posizione al ridimensionamento della finestra del browser, e non rimangono ancorati al bottone corrispondente...

c'è un modo per "annidarli" in un DIV container in modo che mantenfgano la posizione assoluta solo rispetto al DIV e non alla finestra del browser?

Grazie 1000

**carp** · 09-07-2004, 12:24

qui
c'è un articolo che potrebbe interessarti

**ibiscus** · 09-07-2004, 12:52

Grazie carp,
l'esempio mi è molto utile, il codice è veramente bello, quello che cerco io però è una barra di navigazione orizzontale con drop down menu verticale, che deve mantenere posizione fissa rispetto al layout centrato, adesso provo a studiarci sopra!

**panta** · 12-07-2004, 10:14

ed è esattamente quello che ti ha linkato...

ciao

**ibiscus** · 13-07-2004, 14:42

Ce l'ho fatta! Ci ho messo un po'(non ho molta pratica con il layout creato interamente con i css, di solito uso le tabelle integrate ai css), ma adesso ho creato il menu che volevo io.
Grazie ancora carp!

**carp** · 13-07-2004, 15:04

e di che?!

hai modificato il codice del menù dell'articolo o hai preso un'altra strada?

magari postalo così ne beneficiamo tutti

ciao

**ibiscus** · 13-07-2004, 15:15

Ho modificato le caratteristiche dei CSS, mentre il codice è sostanzialmente lo stesso. Ora però stavo facendo delle prove in Netscape e lì non gli piace tanto...
ecco il codice:

codice:

<body>

e lo style

codice:

<style type="text/css">

il javascript è lo stesso dell'articolo

ciao

**ibiscus** · 13-07-2004, 15:17

oops, ho fatto qualche casino..

codice:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT src="drop_down.js" 
type=text/javascript></SCRIPT>
<style type="text/css">
<!--
body{
margin:0px;
padding:0px;
font-family:Verdana, sans-serif;
font-size:1.1em;
text-align:center;
}
div#testa{
background-color:#FF9900;
color:#fff;
width:760px;
margin:0px auto 0px auto;
padding:0px;
text-align:left;
 }
div#barranav{
	background-color:#5CCAF1;
	padding-left:410px;
	background-image: url(images/NavBg.gif);
 }
ul {
	margin: 0px;
	list-style-type: none;
	white-space: nowrap;
	width:150px;
	padding: 0px;
}
UL LI {
	POSITION: relative
}
LI UL {
	DISPLAY: none;
	LEFT: 0px;
	POSITION: absolute;
	TOP: 22px;
}
li.navbar {
	display: inline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #28215D;
	margin-left: 30px;
}
 HTML UL LI {
	HEIGHT: 1%;
	clear: right;
}
 HTML UL LI A {
	HEIGHT: 1%
}
LI:hover UL {
	DISPLAY: block
}
LI.over UL {
	DISPLAY: block
}
UL LI A {
color: #28215D; 
TEXT-DECORATION: none; 
font-size:12px;
padding: 4px 4px 4px 12px;
background-image: url(images/NavChio.gif);
background-repeat: no-repeat;
background-position: left center;
}
UL LI A:hover {
	color: #ffffff;
	font-size:12px;
	text-decoration: none;
	padding: 4px 4px 4px 12px;
    background-image: url(images/NavChio.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
a.navbar1:link {
	color: #28215D;
	font-size:12px;
	text-decoration: none;
	padding: 4px 4px 4px 12px;
	background-image: url(images/NavChio.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
a.navbar1:visited {
	color: #28215D;
	font-size:12px;
	text-decoration: none;
	padding: 4px 4px 4px 12px;
    background-image: url(images/NavChio.gif);
	background-repeat: no-repeat;
	background-position: left center;			
}
a.navbar1:hover{
	color: #ffffff;
	font-size:12px;
	text-decoration: none;
	padding: 4px 4px 4px 12px;
    background-image: url(images/NavChio.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
a.navbar1:active {
	color: #ffffff;
	font-size:12px;
	text-decoration: none;
	padding: 4px 4px 4px 12px;
    background-image: url(images/NavChio.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
LI UL LI A {
	color: #28215D;
	font-size:9px;
	background-color:#F2BC18;
	text-decoration: none;
   	width: auto;
	padding: 3px 11px 3px 5px;
	margin: 0px;	
   	display: block;
}
LI UL LI A:hover {
	color: #ffffff;
    font-size:9px;
	background-color: #FFA100;
	text-decoration: none;
   	width: auto;
	padding: 3px 5px 3px 11px;
	margin: 0px;
	background-image: url(images/MenuIco.gif);
	background-repeat: no-repeat ;
	background-position: left center;
}
-->
</style>
</head>
<body>
<div id="testa">Logo
<div id="barranav">
<UL id=nav>
  	  <LI class="navbar">Home </LI>
  	  <LI class="navbar">About 
		<UL>
		  <LI>History </LI>
		  <LI>Team </LI>
		  <LI>Offices </LI>
		[/list]
	  </LI>
  	  <LI class="navbar">Services 
		<UL>
		  <LI>Web Design </LI>
		  <LI>Internet Marketing </LI>
		  <LI>Hosting </LI>
		[/list]
	  </LI>[/list]
</div>
</div>
</body>
</html>

PS: usa il tasto code x postare il codice!

Discussione: Layout in css e menu a tendina

Strumenti discussione

Ricerca discussione

Visualizza

Layout in css e menu a tendina

Permessi di invio