Foros del Web » Creando para Internet » CSS »

Problema con cabezera

Estas en el tema de Problema con cabezera en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2008, 20:58
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Problema con cabezera

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 {
margin0px;
padding0px;
}
#contenedor {
width100%;
}

#cabecera {
background-colorblack;
}

div.enlacescabecera {
    
positionabsolute;
    
right2ex;
     
top2.25em;
}

div.enlacescabecera a {
  
text-decorationnone;
  
font-weightbold;

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> 
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 05/12/2008, 23:27
Avatar de hCanté
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Guatemala
Mensajes: 233
Antigüedad: 10 años, 9 meses
Puntos: 9
De acuerdo Respuesta: Problema con cabezera

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.

Última edición por hCanté; 07/12/2008 a las 23:26
  #3 (permalink)  
Antiguo 05/12/2008, 23:42
Avatar de hCanté
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Guatemala
Mensajes: 233
Antigüedad: 10 años, 9 meses
Puntos: 9
Respuesta: Problema con cabezera

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!

Última edición por hCanté; 06/12/2008 a las 15:26 Razón: el tag [PHP] da problema con los signos.
  #4 (permalink)  
Antiguo 06/12/2008, 11:45
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Problema con cabezera

Quedo perfecto.. gracias amigo
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 06/12/2008, 12:01
Avatar de hCanté
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Guatemala
Mensajes: 233
Antigüedad: 10 años, 9 meses
Puntos: 9
Respuesta: Problema con cabezera

Que bueno, :)
  #6 (permalink)  
Antiguo 07/12/2008, 19:51
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Problema con cabezera

¿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?
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #7 (permalink)  
Antiguo 07/12/2008, 21:39
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Problema con cabezera

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.
  #8 (permalink)  
Antiguo 07/12/2008, 21:51
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Problema con cabezera

a bueno, es que no te lo puse en el ejemplo pero ahora mismo estoy viendo como que no todas las maquetas llevan contenedores
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #9 (permalink)  
Antiguo 07/12/2008, 23:24
Avatar de hCanté
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Guatemala
Mensajes: 233
Antigüedad: 10 años, 9 meses
Puntos: 9
Respuesta: Problema con cabezera

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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:14.