Salva a tutti , da non molto sto studiando i fogli di stile e sono riuscito a realizzare alcuni layout abbastanza puliti come codice e senza l'ausilio delle tabelle , ora volevo realizzare un layout molto simile a questo..
creo il contenitore principale , creo l'header ..
come vedete dall'immagine dentro l'header c'è il menu con cinque sezioni ..
che codice dovrei scrivere per inserire dentro l'header il menu composto da altre 5 immagini??
grazie per la rispostanon ci avevo proprio pensato..
allora ho fatto come dici tu e con il foglio di stile ho scritto questo codice
------
div#container{width: 760px;margin: 0 auto;text-align: left;
background-color:#FFF;
}
div#header {background: url(immagini/header_1.jpg); height:117px;
}
li.home {list-style-image:url(menu/schema_03.gif);}
----
invece nel html cosi
----
<body>
<div id="container">
<div id="header">
<ul>
<li class="home">[/list]
</div>
</div>
</body>
</html>
----
il problema e che il menu (in questo caso home) mi compare in alto a sinistra , come posso personalizzare la posizione in modo da spostarlo in basso a destra.
Inoltre il link anche se appare in altro non ha collegamento.. cioè c'è solo l'immagine , il collegamento a prov.html non funziona ..
grazie
grazie
la prima cosa sbagliata che mi è saltata nell' occhio è questa:
così è corretta:codice:li.home {list-style-image:url(menu/schema_03.gif);}
codice:li.home {background:url(menu/schema_03.gif);}
però in ogni caso il problema principale resta , come gestisco la posizione nei fogli di stile..
il menu esce in alto a sinistra , io vorrei spostarlo in basso a destra...
potresti aiutarmi
margin, padding, position, float, allineamento
ci sono tante tecniche diverse, devi solo fare prove e valutare
comunque visto che hai già una dimensione (altezza header)
dai un paddin top al tuo <ul>
float right e dimensioni ai[*]
display block ai <a>
Codice PHP:#header ul {
margin: 0px;
list-style-type: none;
padding-top: 80px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#header li {
background-color: #00FF00;
height: 37px;
width: 80px;
float: right;
}
#header li a {
display: block;
line-height: 37px;
}
eccoti una pagina di esempio che ho buttato giù:
linka.png & linkb.png sono due immagini a tua scelta di dimensioni 80x50pxcodice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>esempio menu</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <!-- <link rel="stylesheet" href="" type="text/css"> <script type="text/javascript" src=""></script> --> <style type="text/css"> body{ font: 100%/1.125em "Trebuchet MS", Arial, Verdana; color:#555555; background:#FFFFFF; } #header { position: relative; background: #ccc; height: 140px; } #header_menu{ position: absolute; bottom: 0; right: 10px; width: 400px; overflow: auto; list-style: none; margin: 0; } #header_menu li{ float: left; } #header_menu li a { float: left; width: 60px; height: 50px; line-height: 50px; text-align: center; background: transparent url(linka.png); margin: 0 1px 0 0 } #header_menu li a:hover{ background: url(linkb.png); } </style> </head> <body> <div id="page"> <div id="header"> <h1>Nome Sito</h1> <ul id="header_menu"> [*]link 1 [*]link 2 [*]link 3 [*]link 4 [*]link 5 [/list] </div> <div id="contenuti"> qui i contenuti</p> </div> </div> </body> </html>
ora mi rendo conto (ancora di più) di quanto sia potente questo strumento..
ma ho un nuovo problema
allora ho scritto il codice cosi
----
li.home{ background: transparent url(immagini/menunormal/home.gif) no-repeat; }
li.studio{ background: transparent url(immagini/menunormal/studio.gif) no-repeat; }
li.clienti{ background: transparent url(immagini/menunormal/clienti.gif) no-repeat; }
...
<li class="home">
<li class="studio">
<li class="clienti">
---
cosi grazie alle classi assegno ad ogni LI un immagine diversa , però per assegnare una classe ad ogni LI in hover , come dovrei fare ??
è un problema diverso da quello iniziale. Riproponilo aprendo un nuovo thread ma questa volta usa un titolo più esplicativo (tutte le discussioni riguardano "problemi con fogli di stile"), grazie
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
Permessi di invio
