Problema con cabezera

DoPeY-BBS · #1 (**permalink**) 05/12/2008, 20:58

Saludos, tengo un problema con este código que estoy adaptando a mi encabezado, el problema radica en que en firefox no funciona pero en explorer si, lo cómico de el caso es que estoy trabajando en firefox

Nota: aunque tengo mucho tiempo aqui soy muy novato en esto de css

No me maten

Código PHP:

  body {
margin: 0px;
padding: 0px;
}
#contenedor {
width: 100&#37;;
}

#cabecera {
background-color: black;
}

div.enlacescabecera {
    position: absolute;
    right: 2ex;
     top: 2.25em;
}

div.enlacescabecera a {
  text-decoration: none;
  font-weight: bold;
}

Código HTML:

<div id="cabecera">
      <h1 class="titulocabezera">
        <a href="./index.html" title="Ferrer Lantigua Website" lang="es">Ferrer Lantigua <span>Website</span></a></h1>      
    <div class="enlacescabecera"> <a href="./index.html">Portada</a> | <a href="./quiensoy.html">Quien 
      soy </a> | <a href="./portafolio">Portafolio</a> | <a href="./contacto.html">Contacto</a></div>
    </div>

hCanté · #2 (**permalink**) 05/12/2008, 23:27

Hola!

Te dire que el css deberia estas así:

Código HTML:

body {
margin: 0px;
padding: 0px;
}
#contenedor {
width: 100%; 
}

#cabecera {
background-color: black;
}

.enlacescabecera {
    position: absolute;
    right: 2px;
    top: 2.25em;
}

.enlacescabecera a {
  text-decoration: none;
  font-weight: bold;
}

Aun asi no se que quieres lograr, si lo que se ve en IE o lo que se ve en FF... si se ven distinto.

hCanté · #3 (**permalink**) 05/12/2008, 23:42

Hice un ejemplo de lo que yo veia que querias hacer con el primer código que colocaste, intenta con esto:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css">

body, h1 {
    margin:0;
    padding:0;    
}

    div#cabecera {
        width:100%;
        background:#000;
    }
    h1 a {
        /* aqui coloca el estilo que quieres para tu h1 */
    }
    div#enlacescabecera {
        width::50%;
        float:right;
    }
    
    .clear {
        clear:both;    
    }

    
</style>

</head>

<body>

<div id="cabecera">

    <h1 class="titulocabezera">
        <a href="index.html" title="Ferrer Lantigua Website">Ferrer Lantigua Website</a>
    </h1>      

    <div id="enlacescabecera"> <!-- inicia enlaces cabecera --> 
        <a href="index.html">Portada</a> | 
        <a href="quiensoy.html">Quien soy </a> | 
        <a href="portafolio">Portafolio</a> | 
        <a href="contacto.html">Contacto</a>
    </div> <!-- termina enlaces cabecera -->

<div class="clear"></div> <!-- como usé un float en el div que viene de arriba necesito usar un clear:both; definido ya en el css. -->

</div> <!-- termina cabecera -->

</body>
</html>

Luego depende si quieres que los enlaces queden al mismo nivel del titulo, habria que usar un display:inline y flotar a la derecha el h1 talvez, o darle una altura en pixeles y/o un padding a los enlaces para que no queden tan pegados al cuadro que ahora esta de color negro.

Saludos!

DoPeY-BBS · #4 (**permalink**) 06/12/2008, 11:45

Quedo perfecto.. gracias amigo

hCanté · #5 (**permalink**) 06/12/2008, 12:01

Que bueno, :)

DoPeY-BBS · #6 (**permalink**) 07/12/2008, 19:51

¿porque pasa esto? o sea, no le esta dando margenes a 0 al contenedor o y eso es lo que me gustaría y no como esta.

Yo tengo la cabecera englobada en un contenedor pero con el contenedor el margen a 0 solamente se ve en explorer.

NOTA: el ejemplo me sirvio, pero en este caso quiero que el contenedor sea el que me de el margen y no el h1.

¿se puede?

rb3m · #7 (**permalink**) 07/12/2008, 21:39

Pues es que no le estás diciendo que le deje margen 0.

Si le pones así:

#contenedor {
margin: 0;
}

entonces lo pone a cero. Pero si no le especificas nada le va a poner el que el navegador traiga por defecto y cada navegador tiene el suyo. Si quieres poner todos los márgenes y rellenos a cero en todos los navegadores primero tienes que hacer algo así:

* {
margin: 0;
padding: 0;
}

y con eso puedes estar más tranquilo.

DoPeY-BBS · #8 (**permalink**) 07/12/2008, 21:51

a bueno, es que no te lo puse en el ejemplo pero ahora mismo estoy viendo como que no todas las maquetas llevan contenedores

hCanté · #9 (**permalink**) 07/12/2008, 23:24

Si, en realidad el h1 no te deberia dar el margen, es cuertión de trabajarlo de forma que el texto no haga más que la función que debe de tener como tal.

Yo te recomiendo usar el reset de Eric Meyer acá el enlace http://meyerweb.com/eric/tools/css/reset/ ... la idea de esto es adelantarse a las incompatibilidades en los navegadores y darle un formato estandar en la medida de lo posible. (siempre hay cosas con las que uno va a tener que vivir, a menos que haya que usar hojas de estilo distintas dependiendo si es IE o FF)

el * { margin:0; padding:0 } si es considerado un reset pero es lo más basico, y puede no ser siempre lo mejor, yo me he ahorrado muchos dolores de cabeza con este reset.

Un Saludo!