Foros del Web » Creando para Internet » CSS »

Necesito vuestra Ayuda. Problemas con el header ¡¡¡¡¡

Estas en el tema de Necesito vuestra Ayuda. Problemas con el header ¡¡¡¡¡ en el foro de CSS en Foros del Web. Hola, Necesito vuestra ayuda. estoy intentanto maquetar el header de mi web. Tengo varios problemas: 1. No sé como hacer para que el header ocupe ...
  #1 (permalink)  
Antiguo 20/12/2010, 06:39
 
Fecha de Ingreso: diciembre-2010
Mensajes: 5
Antigüedad: 7 años
Puntos: 0
Pregunta Necesito vuestra Ayuda. Problemas con el header ¡¡¡¡¡

Hola,

Necesito vuestra ayuda. estoy intentanto maquetar el header de mi web. Tengo varios problemas:

1. No sé como hacer para que el header ocupe todo el ancho del navegador arriba. Puse width:100% pero en mozilla me sale el scroll horizontal bajo...y la pagina no queda bien ajustada. En safari en cambio si.

2- He creado una barra de navegacion (nav) pero me gustaría que quedara debajo del logo y no se como hacerlo

La pagina es www.costadoradavip.com

el codigo css es el siguiente:

/* template

-------------------------------------------------------------------*/

#header { width:100%;
height:145px;
z-index: 100;
display:block;
position:relative;
top:0px;
left: 0px;
margin:0;
overflow: hidden;
background:#ef0000 none repeat scroll 0 0;
}

/* Header

-------------------------------------------------------------------*/

#header div { float:left;
margin:0;
padding:15px 0 0 0px;
text-shadow:none; }

#header form { float:left; margin:0; padding:0; }

#header h3 { text-transform:uppercase; padding:0; float:left; margin:0 10px 0 0; font-family:Helvetica Neue,Helvetica,Arial,sans-serif; }

#header p { padding:0; margin:0; }

#header a { font-style:italic; text-decoration:none; }

#header a:hover { color:#; }



#header input,

#header select { -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; padding:4px; margin:-4px 0 0 0; border:0; font:10px/1em Helvetica Neue,Helvetica,Arial,sans-serif; float:left; }

#header input { width:auto; }



#header ul { list-style-type: none; list-style-image: none; padding:0; margin:0; }

#header li { display:inline; margin:0; padding:0; text-transform:lowercase; font-size:12px;color:#fff; }

#header ul li.first { list-style-type: none; list-style-image: none; border-left:0; padding:0; margin:0;width:50px; }


.blogInfo { text-transform:uppercase; font-weight:bold; line-height:2em; padding: 0; }

.blogInfo a { text-transform:capitalize; font-size:36px; color:#fff; margin:0px; padding:0; }


#header .stuffing { position:absolute; left:600px; width:auto; margin: 10px 0 0 0;}

#header .categories { float:left; width: auto; padding: 0px 0px 0px 40px; }
#header .acceso { clear: both; padding:5px 0px 0px 40px; }


#wpcontent_slider_container { margin:50px auto 0px 127px!important; }



/* nav

-------------------------------------------------------------------*/


ul {padding:0;margin:0;display: block; float:left;}

ul li { display: inline; color: #fff; padding:0; margin:0; text-align: center;}

ul li a { padding:10px 0 10px 0;margin:0; width: 132px; display: inline-block; color: #fff; }


en php:

<?php wp_head(); ?>

<script type="text/javascript">
jQuery.noConflict();
</script>

</head>


<div id="header">

<div class="blogInfo">
<?php
// if header image has been uploaded, display that, else display title and description
if(get_option('fgp_header_image')!='')
{
?><a href="<?php bloginfo('url'); ?>"><img src="<?=get_option('fgp_header_image');?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>" /></a><?php
}
else
{
?><p><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a><br /><?php bloginfo('description'); ?></p><?php
}
?>
</div>

<div class="stuffing">
<div class="categories">
<h3>Ofertas VIP en este momento</h3>
<?php wp_dropdown_categories('show_option_none=Seleccion a por tipo de oferta'); ?>
</div>
<div class="acceso">
<p>
<?php
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
echo "Bienvenido " .$current_user->user_login. "! <a href='". wp_logout_url( home_url() ) ."' title=\"Logout\">Logout</a>";
}
?>
</p>
</div>
</div>


<ul> <li class="first"><a href="<?php bloginfo('url'); ?>">Home</a></li>

<?php wp_list_pages('title_li=&depth=1'); ?>

</ul>
</div>
</div>



<?php

if(is_page('2')){if(function_exists('wp_content_sl ider')) { wp_content_slider(); }
}
?>

Última edición por luija; 20/12/2010 a las 07:09
  #2 (permalink)  
Antiguo 20/12/2010, 09:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Necesito vuestra Ayuda. Problemas con el header ¡¡¡¡¡

1: header con anchura al 100%
En la línea 91 de style.css tiene declarado
Código CSS:
Ver original
  1. body {
  2. padding: 0 25px 50px;
  3. }
ese paddín es el que impide al header ocupar toda la anchura

2:
Al div que contiene el nombre de su página en una imagen no lo flote, con ello el menú se irá a la línea inferior.
Y a continuación dele un referente top/right o left al buscador para posicionarlo.

Sobre el scroll horizontal, debe buscar qué elemento se lo hace aparecer. Seguramente será algún hijo directo del body con anchura 100% y algún margen, padding o borde lateral. Siento no tener más tiempo para buscarlo.
  #3 (permalink)  
Antiguo 20/12/2010, 09:32
 
Fecha de Ingreso: diciembre-2010
Mensajes: 5
Antigüedad: 7 años
Puntos: 0
Respuesta: Necesito vuestra Ayuda. Problemas con el header ¡¡¡¡¡

Muchas gracias kseso¡¡¡¡ voy a probar y te digo
  #4 (permalink)  
Antiguo 20/12/2010, 12:37
Avatar de xcoltx  
Fecha de Ingreso: diciembre-2008
Mensajes: 65
Antigüedad: 9 años
Puntos: 0
Respuesta: Necesito vuestra Ayuda. Problemas con el header ¡¡¡¡¡

hola amigo.. intenta agregar un reset de css a tu pagina.. donde se definen todos los elementos con margin y paddin en 0..

checka por aca http://meyerweb.com/eric/tools/css/reset/

sino a la rapida.. mandale un margin:0; y un padding:0; a tu body,html

Saludos :D
__________________
http://www.acomodate.cl

Etiquetas: header
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 19:16.