El logo me queda delante del menu, ¿cómo lo pongo detrás?

ZiriusX · #1 (**permalink**) 13/06/2013, 09:18

Hola, necesito su ayuda, estoy diseñando una página web, pero el logo de la misma me queda delante del mundo y por lo tanto el menú se me corre, como hago para que el logo quede detrás del menu, yo tengo mas o menos una idea de como se podría hacer pero no se cuales serian los códigos, mi idea es hacer que el menú sea un objeto mas importante que el logo, estoy trabajando con HTML y CSS, gracias...

Aquí le dejo el enlace a la página para que vean como queda:
http://procreargprueba.host22.com/www.procrearg.com/

Código del Index:

Código:

<!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>.: Procrearg :.</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- header start -->
<div id="header">
	<div id="logo">
    <img src="imagenes/logo.png" width="296" height="135" /></div>
    <div id="status">
    <a href="http://www.gametracker.com/server_info/198.27.68.195:25567/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/198.27.68.195:25567/b_560_95_3.png" border="0" width="560" height="95" alt=""/></a>
    </div>
</div>
<!-- header end -->
<!-- menu start -->
<div id="menu">
	<ul>
    	<li class="current_item"><a href="#">Inicio</a></li>
        <li><a href="#">Reglas</a></li>
        <li><a href="#">Comandos</a></li>
        <li><a href="#">Donaciones</a></li>
    </ul>
</div>
<!-- menu end -->
<!-- page start -->

<!-- page end -->
</body>
</html>

Codigo de la hoja de estilos:

Código:

@charset "utf-8";
/* CSS Document */

/* CSS Header */

#header {
	width:950px;
	height:128px;
	margin: 0 auto;
}

/* CSS Status */

#status {
	padding: 20px 10px 20px 10px;
	float:right;
}

#status a {
	padding: 0 0 3px 24px;
	background: url(images/img03.gif) no-repeat;
	text-decoration: none;
	font-weight: bold;
}

#status a:hover {
	text-decoration: underline;
}

/* CSS Status End */
/* CSS Logo */
#logo {
	float:left
}

/* CSS Menu */
#menu {
	width:950px;
	height:60px;
	margin:0 auto;
	background: url(imagenes/menu_bg.gif);
}
	
#menu ul {
	margin:0 ;
	padding: 5px 0px 20px 5px ;
	list-style: none;
}

#menu li {
	display: inline;
	text-transform: uppercase;
}

#menu a {
	display: block;
	float: left;
	background: url(imagenes/menu_separator.gif) no-repeat right 100%;
	padding: 18px 30px 0 30px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
}

#menu a:hover {
	height: 40px;
	background: url(imagenes/menu_hover.gif) repeat-x right 30%;
	color: #000000;
}

#menu .current_item a {
	color: #FFFFFF;
}
/* CSS Menu End */

Mariano_Floyd · #2 (**permalink**) 13/06/2013, 10:29

Hola, te dejo el código con el cual logre que quede como querías:

#menu {
width:950px;
height:60px;
overflow:hidden;
margin:0 auto;
background: url(imagenes/menu_bg.gif);
}

#status {
padding: 20px 10px 10px 10px;
float: right;
}

Como veras, le agregue la propiedad overflow a tu div #menu, y le quite 10px de padding inferior a tu div #status.

Saludos