problema con css y estrucura web

tokiodata · #1 (**permalink**) 10/01/2013, 20:18

hola buen dia tengo un problema con html y css estoy creando una web, pero tengo varios errores uno de ellos es que si por ejemplo el menu de lado izquiero se deplaza una parte del div se desplaza
dejo una imagen

si los dos menus estan llenos se centra esa parte. de entrada no se como corregir ese error.

otra cosa que quiero corregir es que la parte de noticias y promos queden en en centro mitad y mitad pero tambien no lo e logrado tambien dejo una imagen

a la vez dejo mi codigo en html y css

Código:

<html> 
<head> 
 
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>wegb </title> 
</head> 
<body> 
<div id ="cabecera"><center>logo</center> </div>
<div id ="pmenu">menu
</div> 
<div id ="menu_izq"> mi menu izquiero </div> 
<div id ="menu_der">menu derecho <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>
<div id ="cuerpo">
texto
</div> 
<br> 
<br> 
<div id ="contenedor1">
<div id ="noticias">noticias <br></div>
<div id ="promos">promos</div>
</div><br> 
<br><br>
</body>
</html>

y este es el css

Código:

BODY { 
     
    background-color: #000000; 
    font-style: Helvetica Calibri;
    font-size: 14px;
    font-color:#000000;
    
} 
#cabecera{ 
     
    color: #333300; 
    width:100%; 
} 
#pmenu{  
    color: #333300; 
    width:100%; 
} 

#cuerpo{ 
width: 70%; 
 overflow: hidden;
     margin: auto; 
     border-left: #FF6600 2px solid;
     border-right: #FF6600 2px solid;
     background-color: #EDEEF8;
     padding: 5px; 
 
} 
#menu_izq{ 
overflow: hidden;
text-align: center; 
      float:left;
  
     width: 13%;
    
 
     background-color:#FF0100;

} 
#menu_der{ 
  text-align: center;    
 width: 13%; 
   	float: right;
     background-color:#FF0100;

} 
#contenedor1{ 
 
width: 70%; 
 overflow: hidden;
     margin: auto; 
     border-left: #FF6600 2px solid;
     border-right: #FF6600 2px solid;
     background-color: #EDEEF8;
     padding: 5px; 


} 
#noticias{
width: 35%; 
float:left;
background:#CC6600;
} 
#promos{
width: 35%;
float:right;
border-left: #FF6600 1px solid; 
; 
background:#CC6600;
} 
#contenedor2{ 
width: 99%; 
    overflow: hidden;
     border-left: #FF6600 2px solid;
     border-right: #FF6600 2px solid;
     background-color: #EDEEF8;
     padding: 5px;
      } 
#afiliados{ 
background: #fc3;
width:25%;
float: left;
} 
#terceros{
border-left: #FF6600 1px solid;
background: #fc3;
width:25%;
float: left;
}
#sociales{
border-left: #FF6600 1px solid;
background: #fc3;
width:25%;
float: left;
}
#derechos{
border-left:#FF6600 1px solid;
background: #fc3;
width:24.7%;
float: left;
}

espero me puedan ayudar gracias

tokiodata · #2 (**permalink**) 10/01/2013, 20:40

las images correctas son:

la primera

tokiodata · #3 (**permalink**) 14/01/2013, 18:23

alguien me podria ayudar ?

serg_prog · #4 (**permalink**) 15/01/2013, 09:12

Hola, puedes probar a la hora de definir los tamaños (width y height) usar pixeles (px) en lugar de %, ya que si pones por ejemplo que se separe un 20% de la izquierda, cuando escribes a la izquierdas, se va a separar un 20% del TEXTO, si usas px, se queda fijo.

tokiodata · #5 (**permalink**) 21/01/2013, 20:35

bueno ya realice algunos cambios este es el code de html

Código:

<html> 
<head> 
	<link rel="stylesheet" href="style.css" type="text/css"/>
	<title>wegb</title> 
</head> 
<div id ="principal">

	<div id ="head">
		head
       
<div id ="logo">
		logo
</div>

 </div>
<div id ="menu">
</div>
<div id ="i">
izquiero <br><br><br><br><br><br><br><br>ffff
</div>
<div id ="d">
derecho
</div>
<div id ="c">
centro
</div>
<br> 

<div id ="caja">
		<div id ="noticias">
			noticias <br>
		</div>
		<div id ="promos">
			promos
		</div>

</div>
</body>
</html>

Y EL CSS

Código:

BODY { 
    background-color: #000000; 
    font-style: Helvetica Calibri;
    font-size: 14px;
    font-color:#000000;   
} 
#principal{
position:relative;
width:99%; 
}
#head{
position:relative;
width:99%; 
}
#logo{
position:relative;
width:99%; 
font-color:EB2020; 
}
#menu{
position:relative;
width:99%; 
font-color:B67676; 
}

#i{
position:relative;
width:1%; 
float:left;
font-color:B67676; 
}
#c{
position:relative;
width:50%; 
     overflow: hidden;
     margin: auto; 
     border-left: #FF6600 2px solid;
     border-right: #FF6600 2px solid;
     background-color: #EDEEF8;
     padding: 5px; 
}
#d{
position:relative;
width:1%;
float: right; 
font-color:#FFFFFF; 
}
#caja{
position:relative;
width:50%; 
     overflow: hidden;
     margin: auto; 
     border-left: #FF6600 2px solid;
     border-right: #FF6600 2px solid;
     background-color: #EDEEF8;
     padding: 5px;  
}
#noticias{
width: 10%; 
	float:left;
	background:#CC6600;
}
#promos{
width: 10%;
	float:right;
	border-left: #FF6600 1px solid; 
	background:#CC6600;
}

Pero aun se desplaza en este caso "caja" si por ejemplo de lado derecho no hay texto se carga a ese lado. lo unico que quiero lograr es que quede en el centro igual que lo que va en el centro