Este es mi primer sitio web con CSS. He utilizado mucho la posición absoluta en esta página para tratar de hacer todo lo que la superposición de una imagen grande. Para la mayor parte de su todo bien, pero la navegación tiene un pequeño problema. Ive intentado seguir las estrategias lynda.com pero Im en un plazo y la necesidad de fijar mi página con lo que tengo. el texto de navegación es una posición absoluta sobre algunos bloques de la imagen que están en un fondo de imagen JPEG.
Aquí está el problema: el texto se desplaza ligeramente en "la galería de Cameron" de texto a un lado en el IE y la otra en Firefox. Los otros dos bloques de texto no tienen este problema.
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;
- }
Aquí está el código:
<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>
Hágame saber si usted necesita cualquier información más y espero que alguien me puede ayudar. Gracias!
Moderator Remark: Added [code] tags
Mayo 7th, 2009, 8:02 pm
