Ceci est mon premier site Web en utilisant le CSS. J'ai utilisé le positionnement absolu d'un lot sur cette page pour essayer de faire tout ce qui se chevauchent une grande image. Pour la plupart de ses tous bien mais la navigation a un léger problème. Ive a essayé suivant les stratégies lynda.com mais IM sous le délai et le besoin de fixer ma page en utilisant ce que j'ai. le texte de navigation est en position absolue sur certains blocs d'images qui se trouvent sur un fond d'image JPEG.
Voici le problème: le texte déplace légèrement sur "la galerie Cameron" texte d'un côté dans l'IE et à l'autre dans Firefox. Les deux autres blocs de texte n'ont pas ce problème.
CSS:
}
#header {
}
#header ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: absolute;
left: 385px;
top: -106px;
width: 72px;
height: 34px;
}
#header li {
float: left;
}
#cameron {
}
#cameron ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: absolute;
left: 480px;
top: -106px;
width: 102px;
height: 34px;
}
#cameron li {
float: left;
}
#contact {
}
#contact ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: absolute;
left: 609px;
top: -106px;
width: 110px;
height: 34px;
}
#contact li {
float: left;
}
.style7 {font-size: 10px; font-family: Georgia, "Times New Roman", Times, serif; }
.style8 {
font-size: 12px;
font-weight: bold;
font-style: italic;
}
- }
- #header {
- }
- #header ul {
- margin: 0;
- padding: 0;
- list-style: none;
- float: left;
- position: absolute;
- left: 385px;
- top: -106px;
- width: 72px;
- height: 34px;
- }
- #header li {
- float: left;
- }
- #cameron {
- }
- #cameron ul {
- margin: 0;
- padding: 0;
- list-style: none;
- float: left;
- position: absolute;
- left: 480px;
- top: -106px;
- width: 102px;
- height: 34px;
- }
- #cameron li {
- float: left;
- }
- #contact {
- }
- #contact ul {
- margin: 0;
- padding: 0;
- list-style: none;
- float: left;
- position: absolute;
- left: 609px;
- top: -106px;
- width: 110px;
- height: 34px;
- }
- #contact li {
- float: left;
- }
- .style7 {font-size: 10px; font-family: Georgia, "Times New Roman", Times, serif; }
- .style8 {
- font-size: 12px;
- font-weight: bold;
- font-style: italic;
- }
Voici le code:
<div id="cameron">
<ul>
<li><a href="test.html" class="style7">the cameron gallery</a></li>
</ul>
</div>
<div id="contact">
<ul>
<li><a href="test.html" class="style7">contact dinah</a></li>
</ul>
</div>
- <div id="cameron">
- <ul>
- <li><a href="test.html" class="style7">the cameron gallery</a></li>
- </ul>
- </div>
- <div id="contact">
- <ul>
- <li><a href="test.html" class="style7">contact dinah</a></li>
- </ul>
- </div>
Faites moi savoir si vous avez besoin de plus d'infos et j'espère que quelqu'un pourra m'aider. Merci!
Moderator Remark: Added [code] tags
Mai 7th, 2009, 8:02 pm
