Immagini diverse in due div incapsulati [Archivio]

Sick Boy

05-06-2011, 14:25

buongiorno,

sto facendo un sito web e sono alle prese con il menù iniziale.

purtroppo l'html e il css non supportano le tracce attorno alle lettere, quindi ho optato per usare un'immagine di sfondo e poi i vari link delle sezioni a loro volta sono immagini .gif

il problema è che vorrei fossero sovrapposte allo sfondo del body, ma non so come fare.. sapete darmi una mano?

qui c'è la struttura html e css

<body background="images/sfondo.jpg">
<div id="corpo">
<div id="menu">
<a class="chisiamo" href="http://www.google.it"></a>
</div>
</div>

body {
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-position: center;
}

div#corpo {
width: 1024px;
height: 768px;
}

div#menu {
width: 1024px;
height: 768px;
}

.chisiamo {
width: 125px;
height: 42px;
background-image:url(images/chisiamo.gif);
}

Lazy Bit

05-06-2011, 15:25

Se ho capito bene, vuoi creare una barra di navigazione caricando le immagini che andranno a costituire i pulsanti del menù. Queste immagini dovranno sovrapporsi allo sfondo del <body>, giusto? Puoi fare così:

body, img, ul, li, p {
border: 0;
margin: 0;
padding: 0;
}

body {
background: url(sfondo.jpg) top center no-repeat;
}

div#contenitore {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 1024px;
height: auto;
}

div#menu {
margin: 0;
padding: 0;
width: 1024px;
height: 42px;
}

div#corpo {
margin: 0;
padding: 0;
height: 768px;
}

ul, li {
list-style: none;
}

li {
display: inline;
}

<html>
<body>
<div id="contenitore">
<div id="menu">
<ul>
<li><a href=""><img src="immagine1.gif" /></a></li>
<li><a href=""><img src="immagine2.gif" /></a></li>
<li><a href=""><img src="immagine3.gif" /></a></li>
</ul>
</div>

<div id="corpo">
<p>Testo</p>
</div>
</div>
</body>
</html>

Spero di aver azzeccato il problema...