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(); }
}
?>