Ayuda con el css de mi menú
Hola jente, tengo un problema con el css y no encuentro manera cristiana de solucionarlo, tengo en la pagina un menu css que he realizado, pero cuando reescalo el navegador el menu se me mueve de sitio y yo quiero que se mantenga en su sitio, no se si me explico, igual con imagenes se me entiende mejor:
Al estar a una resolución, se ve bien
Al reescalar el navegador, y al ver la pagina en otra resolución se me mueve el menu, y no se prque!!
SOS
Gracias y salu2
Al estar a una resolución, se ve bien
Al reescalar el navegador, y al ver la pagina en otra resolución se me mueve el menu, y no se prque!!
SOS
Gracias y salu2
0
Puntos
Puntos
1474
Visitas
Visitas
13
Resp
Resp
Por borch hace 127 meses
Avanzado
Respuesta #1
creo que es por la altura de la div logo, haz la prueba quitando la div logo por completo y lo compruebas
Respuesta #2
que va Zeuskx!!no es de la div logo, la he quitado tanto del html como del css y no es
0
Puntos
Puntos
Por borch hace 127 meses
Avanzado
Respuesta #3
ah pues seria buena idea que veamos tu códigos de index.php y estilos.css
Respuesta #4
pues juraria que ya lo he pegado!!,te lo pego otra vez:
index.php
index.php
<?php require_once('Connections/conexionforo.php'); ?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><?php echo $row_Datosweb['titulo']; ?></title>
<link rel="shortcut icon" type="image/x-icon" href="<?php echo $row_Datosweb['url']; ?>skins/default/img/favicon.ico">
<meta name="description" content="<?php echo $row_Datosweb['descripcion']; ?>">
<meta name="keywords" content="<?php echo $row_Datosweb['keywords']; ?>">
<link href="skins/default/css/estilos.css" rel="stylesheet" type="text/css">
<?php echo $row_Sacarextras['contador']."\n"; ?>
</head>
<body>
<div id="contenedor">
<div id="head">
<div id="cabecera">
<div id="logo"><a href="<?php echo $row_Datosweb['url']; ?>"><img src="skins/default/img/logo.png" width="200" height="50" alt="logo"></a></div>
<div id="buscador">
<?php include("includes/buscador.php"); ?>
<?php include("includes/usuarios.php"); ?>
</div>
</div>
</div>
<div id="menu">
<?php include("includes/menu.php"); ?>
</div>
<div id="cuerpo"><table width="100%" height="100%" border="0">
<tr>
<td width="100%" valign="top"><div id="izquierda">
<?php include("includes/listado.php"); ?>
</div></td>
<td width="310" valign="top"><div id="derecha">
<div id="bloques"><?php echo $row_Sacarextras['anuncio']; ?></div>
<div id="bloques">
<?php include("includes/bloque_categorias.php"); ?>
<?php include("includes/bloque_comentarios.php"); ?>
</div></td>
</tr>
</table>
</div>
<div id="footer">
<?php include("includes/footer.php"); ?>
</div>
</body>
</html>
estilos.css
/* CSS Document */
body{
margin:0;
background:#f2f2f2;
background-image: url(../img/fondo.png);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a{
text-decoration:none;
color:#2a047e;
}
a:hover{
color:#3F6;
}
#contenedor {
height: auto;
width: 100%;
}
#head {
background-image: url(../img/bg_head.jpg);
height: 73px;
}
#cabecera{
width:1018px;
margin:0 auto;
}
#logo {
float: left;
height: 50px;
width: 200px;
margin-top: 12px;
padding:0px 20px;
-webkit-transition-duration:0.4s;
-moz-transition-duration:0.4s;
}
#logo:hover {
opacity:0.7;
-webkit-transition-duration:0.4s;
-moz-transition-duration:0.4s;
}
#buscador {
float: right;
height: 50px;
width: 285px;
margin-top: 30px;
margin-right: 10px;
}
#menu {
color: #FFF;
background-color: #54585b;
height: 45px;
padding:0px 459px;
font-size: 14px;
width: 100%;
margin:0px auto;
}
/*#menu a{
text-decoration:none;
color:#FFF;
}
#menu a:hover{
color:#ccc;
}*/
#cuerpo {
background:#fff;
box-shadow: 0 0 0.9em #000;
-webkit-box-shadow: 0 0 0.9em #000;
-moz-box-shadow: 0 0 0.9em #000;
height: auto;
margin:0 auto;
width: 1018px;
margin-top:40px;
margin-bottom:40px;
}
#footer {
background-image: url(../img/bg_footer.jpg);
height: 80px;
font-weight: bold;
color: #FFF;
text-align: center;
padding-top: 20px;
font-size: 12px;
}
input{
padding:4px;
}
#estadisticas{
width:1000px;
height:30px;
margin:0px auto;
margin-bottom:8px;
text-align: center;
font-size: 11px;
}
#creditos{
width:1000px;
height:30px;
margin:0px auto;
}
#bloques{
width:300px;
height:auto;
margin-bottom:8px;
}
#bloques a{
text-decoration:none;
color:#000;
}
#bloques a:hover{
color:#06F;
}
#izquierda {
padding: 5px;
height: 720px;
background-color:#fff;
border:1px solid #ccc;
}
#izquierda_admin {
padding: 5px;
height: 600px;
background-color:#fff;
border:1px solid #ccc;
}
#derecha {
height: auto;
width: 300px;
margin-left: 10px;
background-color:#fff;
border:1px solid #ccc;
}
/*#usuarios {
float: right;
font-weight: bold;
height: 45px;
margin-right: 3px;
margin-top: -37px;
text-align: right;
width: 180px;
}*/
#usuarios {
float: right;
font-size: 14px;
font-weight: bold;
height: 42px;
margin-right: 311px;
margin-top: -26px;
text-align: right;
width: 224px;
}
#usuarios a{
color:#fff;
}
#usuarios a:hover{
color:#ccc;
}
#post_global {
height: auto;
margin-bottom: 8px;
padding:10px;
border: 1px solid #ccc;
}
#tittle_post {
height: 40px;
font-size: 22px;
margin-bottom: 20px;
}
#autor_post {
height: 70px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
}
#conenido_post {
height: auto;
margin-bottom: 20px;
word-wrap:break-word;
max-width:1441px;
}
.btnbuscar {
border-radius: 0px;
border: none;
width: 32px;
height: 32px;
margin-right: 5px;
padding: 8px;
background-color: #000;
background-image: url(../img/btn_mio.png);
background-repeat: no-repeat;
background-position: center center;
}
.btnbuscar:hover {
cursor:pointer;
background-color:#09f;
}
.barrabuscar {
border: 1px solid #ccc;
margin-right: -4px;
margin-top: 3px;
background: #fff;
color: #999;
padding: 0px 5px;
border-radius: 0;
outline: none;
width: 215px;
height: 30px;
}
#moderar{
height: 18px;
text-align: right;
font-size: 12px;
margin-top: -46px;
}
#head_bloque {
font-size: 12px;
font-weight: bold;
color: #FFF;
background-color: #54585b;
padding: 5px;
height: 20px;
}
#lista_categoria {
font-size: 12px;
font-weight: bold;
padding: 5px;
height: 20px;
border-top:1px solid #999;
border-bottom:1px solid #999;
margin: 2px 0px;
}
.textopeque{
font-size:11px;
}
.resultados{
border:1px solid #ccc;
padding: 10px;
}
.tituloresultado{
font-size:22px;
}
/*-----------menu----------------*/
#nav2{
margin-top: -8px;
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
font-size: 16px;
padding-left: 2px;
}
#nav2 li{
float:left;
position:relative;
margin-right: 20px;
}
#nav2 a{
display:block;
padding:10px;
color:#fff;
background:#fffff;
text-decoration:none;
font-size: 16px;
}
#nav2 a:hover{
color:#D6D6D6;
}
/*--- submenu ---*/
#nav2 ul{
background:#000;
list-style:none;
position:absolute;
text-align:center;
left:-9999px;
}
#nav2 ul li{
float:none;
font-size: 12px;
margin-right: 0px;
}
#nav2 ul a{
white-space:nowrap;
color:#ffffff;
}
#nav2 li:hover ul{
left:0;
}
#nav2 li:hover a{
color:#BEBEBE;
}
#nav2 li:hover ul a{
text-decoration:none;
color:#ffffff;
}
#nav2 li:hover ul li a:hover{
background-color: #f00;
}
#nav2 li a.seleccionado {
color: #FC3;
}
0
Puntos
Puntos
Por borch hace 127 meses
Avanzado
Respuesta #5
no lo puedo comprobar ya que no tengo tus includes y ademas sigues haciéndola en html5, la verdad que tenéis manía cuando el html5 es prácticamente igual que el html pero con unas pocas choradas mas
cuando tengas tu pagina online me pasas enlace y la veo funcionando así podría ayudarte saludos
cuando tengas tu pagina online me pasas enlace y la veo funcionando así podría ayudarte saludos
Respuesta #6
He subido el index.php con los includes,.....,a mi servidor, ahunque da herror de conexión no importa.
La dirección es:
www.borjareguera.com/foro
La dirección es:
www.borjareguera.com/foro
0
Puntos
Puntos
Por borch hace 127 meses
Avanzado
Respuesta #7
cambia
#menu {
color: #FFF;
background-color: #54585b;
height: 45px;
padding: 0px 459px;
font-size: 14px;
width: 100%;
}
por
#menu {
color: #FFF;
background-color: #54585b;
height: 45px;
padding: 0px 125px;
font-size: 14px;
width: 100%;
}
tenias un padding de 459px algo bestia la verdad xdd
Respuesta #8
El problema está en el padding del menu.
Cambia el CSS del menu por este
Cambia el CSS del menu por este
#menu {
color: #FFF;
background-color: #54585b;
height: 45px;
padding: 0px 4px;
font-size: 14px;
width: 100%;
}
Ajusta el padding segun tu gusto, pero antes tenía 400 y algo y por eso se rodaba.
Respuesta #9
Gracias, pero si cambio el padding del menu como decis, el menu se me coloca a la izquierda como muestra la imagen, y yo lo quiero colocar justo debajo del logo, y de hay que no se mueva, y no se que es!! :(
Tiene pinta que algo tiene medidas relativas, porcentajes, en vez de absolutas, pixeles, pero no lo encuentro.
Pero gracias por la ayuda compañeros.
Tiene pinta que algo tiene medidas relativas, porcentajes, en vez de absolutas, pixeles, pero no lo encuentro.
Pero gracias por la ayuda compañeros.
0
Puntos
Puntos
Por borch hace 127 meses
Avanzado
Respuesta #10
cambiale el width a la cabecera..
#cabecera {
width: 100%;
}
Y no hace falta colocarle un margin ya que se supone ocupa todo el ancho de la pantalla, así que no hay porqué centrarla
Respuesta #11
exacto haz lo que te a dicho Jose, utiliza porcentajes % en tu css
Respuesta #12
si cambio la cabacera a % se me descuadra todo, se me va todo a las esquinas, como puedes ver en la imagen. yo no lo quiero responsive, sino de tamaño fijo.
no se que puede pasar, estoy flipando!!
no se que puede pasar, estoy flipando!!
0
Puntos
Puntos
Por borch hace 127 meses
Avanzado
Respuesta #13
Solucionado!!, le he dado una solución un poco "de andar por casa", pero funciona xd!!. por si a alguien le pasa lo mismo lo que he hecho es coger el include del menu, y meterlo dentro del id del logo, lo pego justo debajo del logo, asi aprobecho su caja. Asi como muestro en la imagen me sale perfecto:
y si reescalo el navegador, que era el problema que me traia de cabeza, tambien me sale perfecto al heredar los css de la id logo, como podeis ver en la imagen:
salu2!!
:-)
y si reescalo el navegador, que era el problema que me traia de cabeza, tambien me sale perfecto al heredar los css de la id logo, como podeis ver en la imagen:
salu2!!
:-)
0
Puntos
Puntos
Por borch hace 127 meses
Avanzado
