Buenos dias a todos
Lo primero, disculparme si este mensaje no va en este foro. Lo segundo, mis conocimientos de css son nulos, espero que por el momento.
Estoy intentando realizar una modificacion en el Header de Theme que utilizo actualmente en wordpress. La modificacion consiste en colocar en la parte superior una serie de iconos para acceso a las redes sociales. A continuacion les pego una imagen del header actual y lo que deseo realizar:
Encontre un tuturial de realizacion (parecido a lo que buscaba) y es este :
http://www.wptip.net/wordpress-training-tutorial/wordpress-tips-how-to-add-social-media-icons-to-wordpress-header/
Pero el resultado no esta siendo el deseado y ya no se donde estoy cometiendo el error o es un error de base y voy por mal camino.
Les describo un poco la ubicacion de los elemenos respecto a las imagenes
Barra superior: muestra Inico y las Paginas de Wordpress
Barra inferior: muestra las categorias y subcategorias (esto por el momento no lo voy a modificar)
El problema es que no consigo partir esa barra superior para que muestre por un lado izquiero el Inicio y las paginas y en la parte derecha esten fijos los botones.
A continuacion les peqo el codigo del header y del CSS que entiendo que afecta a esta zona del theme
Codigo del Header
Código:
<body>
<div id="wrapper">
<div id="foxmenucontainer">
<div id="menu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Inicio</a>
</li>
<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
</ul>
</div>
<div id="header_icons">
<ul>
<li> <a href="http://twitter.com/#!/mundomotero" target= "_blank" alt="Twitter"><img src="http://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/48/twitter.png" /> </a><a href="http://twitter.com/#!/mundomotero" target= "_blank" alt="Twitter"><img src="http://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/48/facebook.png" /> </a><a href="http://twitter.com/#!/mundomotero" target= "_blank" alt="Twitter"><img src="http://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/48/tuenti.png" /> </a><a href="http://twitter.com/#!/mundomotero" target= "_blank" alt="Twitter"><img src="http://cdn1.iconfinder.com/data/icons/web2/Icons/Feed_48x48.png" /> </a></li>
</ul>
</div>
</div>
<div id="top">
<div class="blogname">
</div>
<?php include (TEMPLATEPATH . '/headbanner.php'); ?>
</div>
<div class="clear"></div>
<div id="catmenucontainer">
<div id="catmenu">
<ul>
<?php wp_list_categories('sort_column=name&title_li=&depth=4'); ?>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="casing">
Y aqui el Codigo CSS que afecta a esa zona
Código:
*Page menu*/
#foxmenucontainer{
height:40px;
width:700px;
background:url(images/menu.jpg) repeat-x;
display:inline;
padding:0px 0 0px 0px;
font: 12px Arial, Helvetica, Sans-serif;
font-weight:normal;
text-transform:uppercase;
border-bottom:1px solid #2C353B;
}
#menu{
margin: 0px;
padding: 0px;
width:700px;
background:url(images/menu.jpg) repeat-x;
height:40px;
}
#menu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px 0 0px 0px; /* el 100 desplaza el INICIO hacia la derecha*/
}
#menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#header_icons {
float: left;
margin:0px;
width: 100px;
padding-right: 0px 0px 0px 0px;
}
#header_icons ul {
height: 50px;
width: 50px;
}
#header_icons ul li {
display: inline;
float: left;
height: 50px;
margin: 0px;
padding: 0px;
}
#header_icons img {
float: left;
height: 50px;
margin: 0px;
padding-left: 0px; /*con este padding se juntan las imagenes */
width: 50px;
}
#wrapper {
width:1000px;
margin:0 auto;
border: 1px solid #373f4a; /*COLOR DEL BORDE */
}
#casing {
padding:0px 0px 0px 0px;
background:#f6f5f5; /*COLOR DEL FONDO DE PAGINA INCIAL*/
float:left;
width:1000px;
}
Se que la explicacion es un poco complicada y toda ayuda sera bienvenida.
Gracias y un saludo