Hola CSSeros, soy programador y no tengo ni idea CSS :( y estoy peleandome con mi web, intentando que me salga algo medio decente. Me he puesto con el tema tirando de algunos tutoriales y obserbando estilos con FireBug.
La question es que casi lo tengo, podeís ver el resultado de mi trabajo en http:
www.nientegames.com
Tengo varias dudas a ver si me podeis ayudar. Cuando entro en la web, ya sea con IE o con FireFox, el div donde tengo el contenido, cuando este cambia, se mueve hacia a bajo, esto no pasa cuando pruebo en local con IE 8 en modo compatibilidad. ¿como puedo hacer que no se mueva?
El logo se me coloca en un sitio u otro según el navegador y no se como colocarlo... ¿hay algo del tipo if en los CSS para controlar en navegador y actuar en consecuencia?
Por último.... si hay un diseñador por aqui y me da alguna idea de como inegrar el logo con la cabezera para que quede bien... jajaja... es que tengo muy poca gracia!!!
El codigo:
Código PHP:
body {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 5px 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor{
text-align: left;
width: 1024px;
margin: auto;
}
#pie{
background-color:#E1E7EB;
background-image:url(img/fondo_pie.png);
background-repeat:repeat-x;
border:1px solid #D4D4D4;
color:#000000;
padding:8px 10px;
height:84px;
}
#cabecera{
background-color: #FFFFFF;
background-image: url(img/cabecera2.png);
background-repeat:no-repeat;
background-position: right top;
height:150px;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 5px 3px 3px 10px;
}
#cabecera h2 a {
background-image:url(./../Images/logo.png);
background-repeat:no-repeat;
display:block;
height:159px;
margin:-22px 50px 0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
width:250px;
}
#cuerpo{
margin: 10 0 10 0px;
}
#articulos
{
padding:5px 10px 0px 10px;
background-color: #FFFFFF
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffcc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #FFFFFF;
text-decoration: none;
}
#lateral{
width: 30%;
background-color: #999999;
float:right;
}
#principal{
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 170px;
width:70%;
height:100%;
display:block;
}
y la pagina:
Código PHP:
<div id="contenedor">
<div id="cabecera">
<h2>
<a title="Todas las noticias sobre videojuegos, analisis y articulos. Niente Games"
href="http://www.nientegames.com"></a>
</h2>
</div>
<div id="cuerpo">
<div id="lateral">
<div id="articulos" >
CONTENIDO
</div>
</div>
<div id="principal">
CONTENIDO
</div>
</div>
<div id="pie">
NienteGames.com, todas las noticias de un solo vistazo. Para que no te pierdas ni
una.
</div>
</div>
Gracias por todo!