Problemilla con Divs

[Natsumi]

Buenas, estoy haciendo la maquetacion de una web en la que se compone de un logo arriba que ocupa todo el espacio, un pekeño menu abajo izq, y una seccion de noticias a la derecha del menu, todo esto esta dentor de un div llamado "contenedor" que abarca los 800px de la pagina. El problema esta en que aun contando los px y dejandolos justos la seccionde noticias se me ve abajo del menu, cuando yo kiero ke salga alado.

Os pongo el codigo CSS aver si vosotros podeis decirme ke ago mal.

(añadir que tanto el menu como la secciond e noticias se compone de imagenes de fondo, de ahi lo de menu 1 2 y 3 y lo de las noticia 1 2 y 3)

Código PHP:

  #contenedor
    {
    text-align:left;
    background-color:#BDBCBC; 
    width:800px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    }
#baner
    {
    background-image:url(../images/logo.jpg);
    background-position:center;
    width:772px;
    height:169px;
    margin-left:14px;
    margin-right:14px;
    margin-top:10px;
    background-repeat:no-repeat;
    }
#menu
    {
    margin-left:70px;
    margin-top:10px;
    background-color:#BDBCBC;
    width:160px;
    float:left;
    }
#menu1
    {
    background-color:#BDBCBC;
    background-image:url(../images/menuup.jpg);
    width:160px;
    height:55px;
    background-repeat:repeat-y;
    }
#menu2
    {
    background-color:#BDBCBC;
    background-image:url(../images/menumiddle.jpg);
    padding-left:25px;
    width:160px;
    height:20px;
    background-repeat:repeat-y;
    }
#menu3
    {
    background-color:#BDBCBC;
    background-image:url(../images/menudown.jpg);
    width:160px;
    height:29px;
    background-repeat:repeat-y;
    }
#noticias
    {
    background-color:#BDBCBC;
    margin-right:71px;
    margin-top:10px;
    width:449px;
    float:right;
    }
#noticias1
    {
    background-color:#BDBCBC;
    background-image:url(../images/noticiasup.jpg);
    width:449px;
    height:55px;
    background-repeat:repeat-y;
    }
#noticias2
    {
    background-color:#BDBCBC;
    background-image:url(../images/noticiasmiddle.jpg);
    width:449px;
    height:25px;
    padding-left:25px;
    background-repeat:repeat-y;
    }
#noticias3
    {
    background-color:#BDBCBC;
    background-image:url(../images/noticiasdown.jpg);
    width:449px;
    height:29px;
    background-repeat:repeat-y;
    } 
   

PD: Tampoco comprendo por que en la vista previa del dreamweaver sale bie y depsues en el host sale mal :/, si alguien mepudiera respnder a esto se lo agradezco mucho jiji

[AddexBCN]

Prueba a poner todos los menus 1 2 y 3 con float:left; y las noticias 1 2 y 3 con float:right; sino se le har ala picha un lio hy por eso te sale debajo, pruebalo y dinos que tal te va.

Respecto a lo del dreamweaver, yo cuando lo usaba nunca me fiado de él

Saludos

[Natsumi]

Nop sigue sin irme aun poniendo el float en todos los contenedores, yo macuerdo que lo ice en otra web, lo e revisado tengo float left en uno, otro contenedor en el centro y luego un float rigth en otro contenedor a la derecha y me funcionaba bien, sin necesidad de ponerle a todo float :(

[reyesoft]

PRIMERO: ORDENEMOS EL CSS
Bueno, primero que nada tienes que ordenar tu CSS. Comprendo lo de noticias1 noticias2 y noticias3, y está bien utilizar 3 por los fondos; pero está mal que repitas los valores. Imagina que tienes 20 noticias (ya la hoja se hizo bastante larga) y decides cambiar un valor, tienes que repetir 20 veces la operación.

Por lo tanto, te doy resumida tu hoja CSS y verás en prácitica es igual a la tuya:

Código HTML:

#contenedor
    {
    text-align:left;
    background-color:#BDBCBC; 
    width:800px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    }
#baner
    {
    background-image:url(../images/logo.jpg);
    background-position:center;
    width:772px;
    height:169px;
    margin-left:14px;
    margin-right:14px;
    margin-top:10px;
    background-repeat:no-repeat;
    }
#menu
    {
    margin-left:70px;
    margin-top:10px;
    background-color:#BDBCBC;
    width:160px;
    float:left;
    }
#menu1, #menu2, #menu3
    {
    background-color:#BDBCBC;
    width:160px;
    background-repeat:repeat-y;
    }
#menu1
    {
    background-image:url(../images/menuup.jpg);
    height:55px;
    }
#menu2
    {
    background-image:url(../images/menumiddle.jpg);
    padding-left:25px;
    height:20px;
    }
#menu3
    {
    background-image:url(../images/menudown.jpg);
    height:29px;
    }
#noticias
    {
    background-color:#BDBCBC;
    margin-right:71px;
    margin-top:10px;
    width:449px;
    float:right;
    }
#noticias1, #noticias2, #noticias3
    {
    background-color:#BDBCBC;
    width:449px;
    background-repeat:repeat-y;
    }
#noticias1
    {
    background-image:url(../images/noticiasup.jpg);
    height:55px;
    }
#noticias2
    {
    background-image:url(../images/noticiasmiddle.jpg);
    height:25px;
    }
#noticias3
    {
    background-image:url(../images/noticiasdown.jpg);
    height:29px;
    }

SEGUNDO: RESOLVAMOS EL PROBLEMA

Bueno, ya pasado el 1º tip tratemos de ver el problema:
Ya que no pasaste el HTML, lo supuse como lo pongo a continuación:

Código HTML:

<div id="contenedor">
  <div id="baner">banner banner banner banner </div>
  <div id="menu">menu
      <div id="menu1">menu1</div>
      <div id="menu2">menu2</div>
      <div id="menu3">menu3</div>
  </div>
  <div id="noticias">noticias
      <div id="noticias1">noticias1</div>
      <div id="noticias2">noticias2</div>
      <div id="noticias3">noticias3</div>
  </div>
</div> 

Y tu CSS arreglado quedaría así

Código HTML:

#contenedor
    {
    text-align:left;
    width:800px;
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    }
#baner
    {
    background-position:center;
    width:772px;
    height:169px;
    margin-left:14px;
    margin-right:14px;
    margin-top:10px;
    background-repeat:no-repeat;
    }
#menu
    {
    position:absolute;
    left:70px;
    margin-top:10px;
    background-color:#BDBCBC;
    width:160px;
    }
#menu1, #menu2, #menu3
    {
    background-color:#BDBCBC;
    width:160px;
    background-repeat:repeat-y;
    }
#menu1
    {
    background-image:url(../images/menuup.jpg);
    height:55px;
    }
#menu2
    {
    background-image:url(../images/menumiddle.jpg);
    padding-left:25px;
    height:20px;
    }
#menu3
    {
    background-image:url(../images/menudown.jpg);
    height:29px;
    }
#noticias
    {
    background-color:#BDBCBC;
    margin-left: 290px;
    margin-right:71px;
    margin-top:10px;
    width:449px;
    }
#noticias1, #noticias2, #noticias3
    {
    background-color:#BDBCBC;
    width:449px;
    background-repeat:repeat-y;
    }
#noticias1
    {
    background-image:url(../images/noticiasup.jpg);
    height:55px;
    }
#noticias2
    {
    background-image:url(../images/noticiasmiddle.jpg);
    height:25px;
    }
#noticias3
    {
    background-image:url(../images/noticiasdown.jpg);
    height:29px;
    }

En firefox tu CSS se veía "bien", pero en explorer no.

A esto ahora falta tiempo, dedicación y PROLIJIDAD y quedará andado de diez.

Para que se vea bien en ambos navegadores tienes que establecer todas las propiedades como padding y margin. Y no repitas los colores o imágenes de fondo. si ponés un div1 dentro de un div2, y el div2 tiene fondo gris, no le pongas a div1 gris, si no se va a ver; es como poner una hoja blanca sobre otra hoja blanca más grande.

Digiere el trabajo que he hecho con tu problema. Si tienes otra duda no dudes en volver a escribir.

Saludos!

[Natsumi]

No entendi muy bien tu respuesta, y la forma en que haces los CSS, si es mas corta con menos texto y sin tanta repeticion, de echo supongo que se debera de hacer asi :P, es cierto que e quitado muchas repeticiiones de los colores ene ste caso, pero ponienod #menu1, #menu2 #menu3 me lio mucho mas :S, de todas formas tu tambien lo pusiste con position absolute, pero gracias ha eso vi el fallo, y es que yo estaba haciendo el 2º div (el derecho) con el margen respecto al lado derecho, y lo que devia hacer era poner el menu flotando (float) a la izq y la seccion de noticias ajustado al margen izq tambien, pero sin flotar.

Al final me quedo asi ^^

Código:

#menu
	{
	margin-left:50px;
	margin-top:10px;
	background-color:#BDBCBC;
	width:160px;
	float:left;
	}
#menu1
	{
	background-image:url(../images/menuup.jpg);
	width:160px;
	height:55px;
	background-repeat:repeat-y;
	}
#menu2
	{
	background-image:url(../images/menumiddle.jpg);
	width:160px;
	height:20px;
	padding-left:25px;
	background-repeat:repeat-y;
	}
#menu3
	{
	background-image:url(../images/menudown.jpg);
	width:160px;
	height:29px;
	background-repeat:repeat-y;
	}
#noticias
	{
	background-color:#BDBCBC;
	margin-left:220px;
	margin-top:10px;
	width:449px;
	}
#noticias1
	{
	background-image:url(../images/noticiasup.jpg);
	width:449px;
	height:55px;
	background-repeat:repeat-y;
	}
#noticias2
	{
	background-image:url(../images/noticiasmiddle.jpg);
	width:449px;
	height:25px;
	padding-left:25px;
	background-repeat:repeat-y;
	}
#noticias3
	{
	background-image:url(../images/noticiasdown.jpg);
	width:449px;
	height:29px;
	background-repeat:repeat-y;
	}

No es como debe hacerse supongo, pero me aclaro mas, asique mas vale no cometer errores ni hacer 40 divs eh jiji :P

Bueno muchas gracias por la ayuda, sobretodo por el position absolute que fue por lo que descubri el fallo jeje, Gracias ^^

[reyesoft]

Me alegro te halla sido de utilidad.