Foros del Web » Creando para Internet » CSS »

Modificacion del Header

Estas en el tema de Modificacion del Header en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/10/2011, 04:14
 
Fecha de Ingreso: agosto-2003
Mensajes: 192
Antigüedad: 18 años, 10 meses
Puntos: 0
Modificacion del Header

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
  #2 (permalink)  
Antiguo 24/10/2011, 08:06
Avatar de mhotel  
Fecha de Ingreso: marzo-2011
Ubicación: Spain
Mensajes: 65
Antigüedad: 11 años, 3 meses
Puntos: 10
Respuesta: Modificacion del Header

A la capa contenedora (de todos los iconos) le metes un float: right; para alinearlo a la derecha.
Luego, a cada ul li un float: left para que pueda salir uno al lado del otro.

A cada li (o a, dependiendo como lo vayas a hacer) le añades una clase y le especificas el background (el icono). También tendrás que darle margin/padding para separaciones.

Lo ideal sería que le echases algún vistazo a tutoriales de CSS de una forma genérica, y no de manera específica...pues primero necesitas unas bases.

Un saludo

Etiquetas: header, modificacion, fondo
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 08:53.