problema - se mueven los margenes

sololu · #1 (**permalink**) 27/01/2009, 14:26

Hola gente. Tengo este problemilla. maqueto mi pagina perfectamente en dreamweaver con css pero resulta que al probar la pagina en los browsers tanto en IE como en Firefox, no respetan los parametros que puse y se mueven.

Mientras que en dreamweaver se ve así:

En el browser se ve así:
http://www.targetmail.com.ar/prueba/diseno2.jpg

MI css está de esta manera:

Código:

body{
font:Arial, Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#504026;
text-align:center;
margin-top:0px;
}

#wrapper{
width:1024px;
height:768px;
margin:0px auto;
}

#leftcolumn { 
width: 786px;
height:768px;
background-image:url(images/lola_and_simon.jpg);
background-repeat:no-repeat;
background-position:5% 10%;
margin:0px;
}

#content_wrapper{
text-align:left;
margin-top:205px;
margin-left:10px;
margin-bottom:auto;
margin-right:auto;
}

#main{
width:208px;
height:768px;
float:right;
background-color:#c79453;
text-align:center;
}

#menu_wrapper{
width:201px;
margin:222px 7px auto;
text-align:left;
}

#foot{
clear:both;
}

y mi html está asi:

Código:

<body>
<div id="wrapper">
  <div id="main">
  <div id="menu_wrapper">
  <span id="bot_menu"><a href="#">Home</a></span>
  <span id="bot_menu"><a href="#">Book on-line</a></span>
  <span id="bot_menu"><a href="#">Locarion & map</a></span>
  <span id="bot_menu"><a href="#">Opening times</a></span>
  <span id="bot_menu"><a href="#">Food & drink</a></span>
  <span id="bot_menu"><a href="#">Photo gallery</a></span>
  <span id="bot_menu"><a href="#">Private parties</a></span>
  <span id="bot_menu"><a href="#">Special offers</a></span>
  <span id="bot_menu"><a href="#">Lola & Simon</a></span>
  <span id="bot_menu"><a href="#">Calendar</a></span>
  <span id="bot_menu"><a href="#">Press notes & reviews</a></span>
  <span id="bot_menu"><a href="#">Sing up for news and events</a></span>
  </div>
  </div>
<div id="leftcolumn">
  <div id="content_wrapper">
  <img src="images/foto.jpg" />
  </div>
</div>
</div>
</body>
</html>

ya probè todas las maneras que se me ocurrieron pero nose que es lo que hace que mi div contenedor de todo "#wrapper" tome el mismo margen que el div que va dentro de "#leftcolumn". no entiendo!!!!

Gracias a la persona "buena onda" que me ayude a resolver esto!

Dalvenjha · #2 (**permalink**) 27/01/2009, 14:30

Primer consejo, desinstala el dreamweaver -.-. Como es posible que tengas tantos span con el mismo ID -.- =S.

jomaruro · #3 (**permalink**) 27/01/2009, 14:43

Hola:

Primero, utiliza listas para hacer tus menús.
Segundo, los id son identificadores únicos, cuando tengas que aplicar un id varias veces utiliza class.
Tercero, ¿Dónde has definido el id/class bot-menu?

Saludos.

locoxchacho · #4 (**permalink**) 27/01/2009, 14:50

supongo que el problema debe estar ahi... no puedes usar un id mas de una vez en una misma pagina.... a lo sumo, lo que quieres usar es una clase (class)...

por otro lado, por lo menos en el codigo CSS que subiste, nunca definiste ningun id o class "bot_menu", asique no te puedo decir si lo que sucede radica en un error ahi... por el resto, creo anda bastante bien...

por ultimo.. para hacer un menu, no te recomiendo hacerlo con span.. sino con un <ul> cuyos elementos <li> sean los links del menu... es más ordenado logicamente, y creo que con eso no tendras problemas... y además te ahorraras de tantos <span>...

y por ultimo, si no diseñas en modo "diseño" en dreamweaver... lo mismo, utiliza el notepad++, o parecido... es mas facil, y no te mezcla con el codigo que crea el dreamweaver...

fijate, espero no olvidarme nada.. cualquier cosa que me haya equivocado, avisame que veo que puedo hacer...

saludos, espero haber ayudado!

pablo.

locoxchacho · #5 (**permalink**) 27/01/2009, 14:52

jomaruro... jajajaj... dijiste lo mismo que yo, solo que tarde un poco mas en escribirlo...

perdon por repetir!! pero cuando estaba escribiendo, no estaba tu respuesta

un saludo!

jomaruro · #6 (**permalink**) 27/01/2009, 15:21

jajaja, no es la primera vez que pasa aunque esta vez me he adelantado un poco, no tengo nada que perdonar todos queremos ayudar.

Saludos.

sololu · #7 (**permalink**) 28/01/2009, 05:14

Gracias a los dos!!! voy a tratar de hacer los cambios que me sugieren.
Si el id de los botones no lo subì, me olvide de copiarlo je.

Fueron muy rapidos en responder!! gracias!!
Saludos a los dos!!!

Luciana

cluster28 · #8 (**permalink**) 28/01/2009, 12:23

Yo tampoco es que sea un experto en diseño web, llevo muy poquito pero lo que sí se es que Dreamweaver lía mucho a la hora de maquetar con CSS. No lo interpreta bien. Yo uso Firebug, que un add-on de Firefox que permite editar en vivo los CSS. Según los modificas se ve el efecto en la página web. Luego no tienes más que copiar y pegar en la hoja de estilos y ganas mucho tiempo.

La idea del diseño es hacerlo lo más simple posible, y en eso una aplicación WYSIWYG no te va a ayudar mucho. Lo mejor es aprender a lo "rural" que es más "verdadero" dque Dreamweaver.

sololu · #9 (**permalink**) 30/01/2009, 04:56

Si claro! entiendo lo que me decis Cluster. Ya me he visto envuelta en ese problema de Dreamweaver asi que me tomè el año pasado para aprender html y css para entender el còdigo que se generaba solo en este programa.

Pero recien ando haciendo mis practicas con css (esto lo hago a lo "rural" como decis vos je) y html, y por ahí me pasan cosas como esta que dije. Mi problema está en el CSS me parece porque mas alla de que puse muchos <span> en vez de usar una lista ( como me corrigieron los chicos unos post mas arriba ) no le pego con el margin o padding.

Lo que yo quiero es que mi contenedor se mantenga con margin 0 y que la div que se encuentra dentro tenga un margin de 222px pero ahi esta el problema, cuando lo visualizo en el browser en contenedor tambien me muestra un margin de 222px. Estoy errando en algun lado y nose a donde!

Igual Mil gracias!!!!

locoxchacho · #10 (**permalink**) 30/01/2009, 05:46

proba dandole al div que tienes dentro un padding de 222px, y no un margin.. pq el margin cuenta desde el final de la caja para afuera, y es por eso que quizas te para que el contenedor tambien tiene margin, pero en realidad es el margin del div.. prueba con padding, que este si hace un espacio para "adentro", si me explico... y luego me cuentas a ver como anduvo.

Resumiendo:

div#contenedor: {margin:0; padding; 0}
div#adentro: {margin:0; padding 222px}

<div id="conenedor">
<div id="adentro">Aca va el contenido que va a estar "corrido"</div>
</div>

prueba eso y me cuentas. Si no era eso lo que querias, pues te agradeceria una mejor expliacion!!!

espero haberte ayudado, un saludo!

Mikmoro · #11 (**permalink**) 30/01/2009, 06:03

Cita:

Iniciado por sololu

Lo que yo quiero es que mi contenedor se mantenga con margin 0 y que la div que se encuentra dentro tenga un margin de 222px pero ahi esta el problema, cuando lo visualizo en el browser en contenedor tambien me muestra un margin de 222px.

Esto que dices es algo ya conocido. No sé si lo quieres a 222px de la parte de arriba. En ese caso, lo que puedes hacer es ponerle al div de dentro position: relative; y top: 222px; con lo que desplazarás el div de dentro y no el contenedor de este.

locoxchacho · #12 (**permalink**) 30/01/2009, 11:10

bueno.. en la solucion que yo te dije, era padding del costado que necesites, superior, inferior, derecho, izquierdo... etc.

creo que cualquiera de las dos son validas... SALVO que mikmoro, que es el experto, diga que la mia esta mal! :S

Mikmoro · #13 (**permalink**) 30/01/2009, 12:34

Cita:

Iniciado por locoxchacho

SALVO que mikmoro, que es el experto, diga que la mia esta mal! :S

No podría decir que esté mal porque ni siquiera sé cómo son sus cajas, no sé acuál se refiere con cada cosa ni identificarlas con el problema, pero si la caja de dentro tuviera un borde o un fondo de color, el padding no conseguiría el efecto deseado, ya que no sustituiría el margen al verse la caja realmente desde arriba con su fondo o borde. No sé si me explico.

Todo depende de a qué lo apliques realmente. Sin borde ni fondo creo que serviría también, aunque me inclino por el top.