Problema con web a capas
Tengo una duda ya que veo unos fallos en la forma de ver mi web, los fallos que veo son los siguientes:
- No se ven las capas en IExplorer
- No puedo ampliar a 100% la altura de la capa del menu
- No puedo centrar las capas que hay en la columna derecha
El código de html y Css es el siguiente. Espero que sepan mis fallos. Gracias!
============================================
MI CODIGO HTML:
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="contenedor">
<div id="cabecera"><img src="img/cabecera.gif" alt="" border="0"></div>
<div id="centro">
<div id="centroizquierda">
<div id="centrocontenido">
Aquí toda la mierda
<p class="first-letter">Hola Ja ja ja Ja.asdfasfdasdfasdfasdf</p>
</div>
<div id="centrocontenido">
Aquí toda la mierda
<p class="first-letter">Hola Ja ja ja Ja.asdfasfdasdfasdfasdf</p>
</div>
<div id="centrocontenido">
Aquí toda la mierda
<p class="first-letter">Hola Ja ja ja Ja.asdfasfdasdfasdfasdf</p>
</div>
</div>
<div id="centroderecha">
<div id="navegador">
<a href="#" class="enlace">Portada</a><br>
<a href="#" class="enlace">Weblog</a><br>
<a href="#" class="enlace">Fotolog</a><br>
<a href="#" class="enlace">Albumnes de Fotos</a><br>
<a href="#" class="enlace">Deportes de invierno</a><br>
<a href="#" class="enlace">Diario de Alen</a>
</div>
<div id="navegador">
<a href="#" class="enlace">Sección de Fran</a><br>
<a href="#" class="enlace">El Rincón de Pedro</a><br>
<a href="#" class="enlace">Foto del Momento</a><br>
<a href="#" class="enlace">Perrerías a un perro</a><br>
<a href="#" class="enlace">Cajón Poético</a><br>
<a href="#" class="enlace">Publicidad</a><br>
<a href="#" class="enlace">Enlaces</a>
</div>
</div>
</div>
</div>
</body>
</html>
================================
MI CODIGO CSS:
body {
background: #C0D9D9 url(img/fondo.gif) repeat;
margin: auto;
margin: 20px 50px 20px 50px;
font: 11pt Mangal,Arial,Tahoma;
color: #404D4F;
text-align:center;
}
#contenedor{
text-align: left;
width: 750px;
margin: auto;
}
#cabecera{
height : 150px;
width: 700px;
}
#centro{
position: relative;
}
#centroizquierda{
float: left;
position: relative;
width: 440px;
height: 100%;
background-color: #FFFFFF;
}
#centrocontenido{
background: #D1DCA6;
width: 90%;
}
P:first-letter {
font-size: 300%;
color: #993333;
font-weight: bold;
text-transform: uppercase;
}
#centroderecha{
float: right;
position: relative;
min-height: 800px;
width: 310px;
}
#navegador{
background: #D1DCA6;
padding: 10px 10px 10px 10px;
}
A.enlace, A.enlace:VISITED, A.enlace:ACTIVE, A.enlace:FOCUS, A.enlace:LINK{
color: #494E6B;
font-family: Tahoma, Arial;
}
A.enlace:HOVER{
color: #C0CF81;
}
==============
Espero que puedan ayudarme. Gracias!
- No se ven las capas en IExplorer
- No puedo ampliar a 100% la altura de la capa del menu
- No puedo centrar las capas que hay en la columna derecha
El código de html y Css es el siguiente. Espero que sepan mis fallos. Gracias!
============================================
MI CODIGO HTML:
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="contenedor">
<div id="cabecera"><img src="img/cabecera.gif" alt="" border="0"></div>
<div id="centro">
<div id="centroizquierda">
<div id="centrocontenido">
Aquí toda la mierda
<p class="first-letter">Hola Ja ja ja Ja.asdfasfdasdfasdfasdf</p>
</div>
<div id="centrocontenido">
Aquí toda la mierda
<p class="first-letter">Hola Ja ja ja Ja.asdfasfdasdfasdfasdf</p>
</div>
<div id="centrocontenido">
Aquí toda la mierda
<p class="first-letter">Hola Ja ja ja Ja.asdfasfdasdfasdfasdf</p>
</div>
</div>
<div id="centroderecha">
<div id="navegador">
<a href="#" class="enlace">Portada</a><br>
<a href="#" class="enlace">Weblog</a><br>
<a href="#" class="enlace">Fotolog</a><br>
<a href="#" class="enlace">Albumnes de Fotos</a><br>
<a href="#" class="enlace">Deportes de invierno</a><br>
<a href="#" class="enlace">Diario de Alen</a>
</div>
<div id="navegador">
<a href="#" class="enlace">Sección de Fran</a><br>
<a href="#" class="enlace">El Rincón de Pedro</a><br>
<a href="#" class="enlace">Foto del Momento</a><br>
<a href="#" class="enlace">Perrerías a un perro</a><br>
<a href="#" class="enlace">Cajón Poético</a><br>
<a href="#" class="enlace">Publicidad</a><br>
<a href="#" class="enlace">Enlaces</a>
</div>
</div>
</div>
</div>
</body>
</html>
================================
MI CODIGO CSS:
body {
background: #C0D9D9 url(img/fondo.gif) repeat;
margin: auto;
margin: 20px 50px 20px 50px;
font: 11pt Mangal,Arial,Tahoma;
color: #404D4F;
text-align:center;
}
#contenedor{
text-align: left;
width: 750px;
margin: auto;
}
#cabecera{
height : 150px;
width: 700px;
}
#centro{
position: relative;
}
#centroizquierda{
float: left;
position: relative;
width: 440px;
height: 100%;
background-color: #FFFFFF;
}
#centrocontenido{
background: #D1DCA6;
width: 90%;
}
P:first-letter {
font-size: 300%;
color: #993333;
font-weight: bold;
text-transform: uppercase;
}
#centroderecha{
float: right;
position: relative;
min-height: 800px;
width: 310px;
}
#navegador{
background: #D1DCA6;
padding: 10px 10px 10px 10px;
}
A.enlace, A.enlace:VISITED, A.enlace:ACTIVE, A.enlace:FOCUS, A.enlace:LINK{
color: #494E6B;
font-family: Tahoma, Arial;
}
A.enlace:HOVER{
color: #C0CF81;
}
==============
Espero que puedan ayudarme. Gracias!
1 respuesta
Respuesta de cldemon
1
El problema es que los css cuando los llamas con el id, osea
<div id="algo">En explorer simplemente no los lee, ya que el trato es mas complejo (prefiero class), y claro, efectivamente probe la web en firefox y funciona como corresponde, mira, lo q te recomiento es que ocupes tablas para encacillar de forma mas ordenada los contenidos de tu web.
No lo siento, eso no me sirve, es que quiero hacer la web por capas. De todas formas yo he visto que las webs no utilizan class sino id y si que se siguen viendo, por lo que el error debe estar en mi código :S...
De cualquier forma ese solo es un tercio de mi problema, que te tengo los otros dos problemas:
- No puedo ampliar a 100% la altura de la capa del menu
- No puedo centrar las capas que hay en la columna derecha
Gracias
De cualquier forma ese solo es un tercio de mi problema, que te tengo los otros dos problemas:
- No puedo ampliar a 100% la altura de la capa del menu
- No puedo centrar las capas que hay en la columna derecha
Gracias
Lo mejor en estos casos es empezar desde cero la web, he ir poniendo una a una las cosas, y ahí te darás cuenta que te esta tirando el error.
