Posizionamento con float e elenco di link

**Kamui** · 30-08-2005, 19:49

Ciao, scusate per le domande forse stupide ma sono agli inizi

Sto facendo il tipico layout "header + menu a sinistra, contenuto a destra + footer", e ho provato a impostare il menu in un div lungo 200px con float a sinistra, lasciando al contenuto un margine di 200px a sinistra.
Però ho notato che i div si sovrapponevano lo stesso, e facendo diverse prove ho trovato una coincidenza circa a 185px e 198px (vedi codice e screenshot) come mai?

codice:

#menu
{
	width: 185px;
	height: 300px;
	position: relative;
	background: white;
	float: left;
	text-align: center;
	padding: 5px;
	border-left: solid thin blue;
	border-right: solid thin black;
}

#contenuto
{
	width: 560px;
	height: 300px;
	position: relative;
	background: white;
	margin-left: 198px;
	border-left: solid thin red;
	border-right: solid thin blue;
}

inoltre in un semplice menu di link noto che l'ultimo link ha sempre uno spazio prima... ma perchè?! io non ce l'ho inserito...

codice:

<div id="menu">
	
Album 1
	
Album 2
	
Album 3
	
Album 4
	
Album 5
</div>

CSS:

a.linkMenu:link
{
	color: blue;
	font-family: verdana, bitstream vera sans, sans serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
}

a.linkMenu:visited
{
	color: blue;
	font-family: verdana, bitstream vera sans, sans serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
}

a.linkMenu:hover
{
	color: blue;
	font-family: verdana, bitstream vera sans, sans serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: underline;
}

Grazie

**keratox** · 31-08-2005, 00:48

MMH sinceramente non ho capito perchè usare float + posizionamenti relativi

codice:

#menu
{
	width: 185px;
	height: 300px;
	background: white;
	float: left;
	text-align: center;
	padding: 5px;
	border-left: solid thin blue;
	border-right: solid thin black;
}

#contenuto
{
	width: 560px;
	height: 300px;
	background: white;
	margin-left: 10px;
	border-left: solid thin red;
	border-right: solid thin blue;
        float:left;
}

così dovrebbe andare comunque ... almeno credo

Ciao

**Kamui** · 01-09-2005, 15:26

Sto provando i posizionamenti assoluti, ma anche qui ho problemi. Nonostante matematicamente sembra che tutto quadri, il risultato non è quello desiderato, come si può vedere in figura... ad esempio top e footer hanno entrambi width=760px ma uno è più corto dell'altro, così come menu+contenuto dovrebbe essere 160+600=760 e invece è più corto. Oppure la dimensione di top e barra è di 50+20=70px, il top di menu e contenuto è impostato a 70px ma ugualmente inizia prima e si va a sovrapporre a barra... perchè?

Codice:

codice:

CSS: 

#top
{
	width: 760px;
	height: 50px;
	position: absolute;
	background: white;
	font-family: verdana, bitstream vera sans, sans serif;
	font-size: 25px;
	color: blue;
	letter-spacing: 3px;
	padding-top: 10px;
	padding-bottom: 1px;
	padding-left: 5px;
	border-top: solid thin blue;
	border-left: solid thin blue;
	border-right: solid thin blue;
}

#barra
{
	width: 760px;
	height: 20px;
	position: absolute;
	top: 50px;
	background: #d5eff4;
	padding-left: 5px;
	text-transform: uppercase;
	border-top: solid thin blue;
	border-bottom: solid thin blue;
	border-left: solid thin blue;
	border-right: solid thin blue;
}

#menu
{
	width: 160px;
	height: 400px;
	position: absolute;
	top: 70px;
	background: white;
	text-align: center;
	border-left: solid thin blue;
	border-right: solid thin black;
}

#contenuto
{
	width: 600px;
	height: 400px;
	position: absolute;
	top: 70px;
	left: 160px;
	background: white;
	border-left: solid thin red;
	border-right: solid thin blue;
}

#footer
{
	width: 760px;
	height: 20px;
	position: absolute;
	top: 470px;
	background: #d5eff4;
	border-top: solid thin blue;
	border-bottom: solid thin blue;
	border-left: solid thin blue;
	border-right: solid thin blue;
}


XHTML:

<body>
<div id="pagina">
<div id="top">
        Photo Gallery
</div>
<div id="barra">
        galleria
</div>
<div id="menu">
        
Album 1
        
Album 2
        
Album 3
        
Album 4
        
Album 5
</div>
<div id ="contenuto">
        

</div>
<div id="footer">
        

</div>
</div>
</body>

**keratox** · 01-09-2005, 15:31

Magari le differenze di larghezze sono in base a bordo, padding, margin... boh bisognerebbe vedere the code :rollo:

**Kamui** · 01-09-2005, 15:53

Sì scusa mi ero dimenticato di incollare il codice

I bordi ho provato anche a toglierli, ma nada...

Discussione: Posizionamento con float e elenco di link

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento con float e elenco di link

Permessi di invio