Foros del Web » Creando para Internet » CSS »

problema - se mueven los margenes

Estas en el tema de problema - se mueven los margenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/01/2009, 14:26
 
Fecha de Ingreso: octubre-2008
Ubicación: Resistencia - Chaco
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Exclamación problema - se mueven los margenes

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!
  #2 (permalink)  
Antiguo 27/01/2009, 14:30
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: problema - se mueven los margenes

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

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 27/01/2009, 14:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema - se mueven los margenes

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.

  #4 (permalink)  
Antiguo 27/01/2009, 14:50
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: problema - se mueven los margenes

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.
  #5 (permalink)  
Antiguo 27/01/2009, 14:52
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: problema - se mueven los margenes

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!
  #6 (permalink)  
Antiguo 27/01/2009, 15:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema - se mueven los margenes

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.

  #7 (permalink)  
Antiguo 28/01/2009, 05:14
 
Fecha de Ingreso: octubre-2008
Ubicación: Resistencia - Chaco
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: problema - se mueven los margenes

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
  #8 (permalink)  
Antiguo 28/01/2009, 12:23
Avatar de cluster28  
Fecha de Ingreso: enero-2008
Ubicación: Donostia - San Sebastián
Mensajes: 752
Antigüedad: 9 años, 11 meses
Puntos: 32
Respuesta: problema - se mueven los margenes

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.
  #9 (permalink)  
Antiguo 30/01/2009, 04:56
 
Fecha de Ingreso: octubre-2008
Ubicación: Resistencia - Chaco
Mensajes: 19
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: problema - se mueven los margenes

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!!!!
  #10 (permalink)  
Antiguo 30/01/2009, 05:46
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: problema - se mueven los margenes

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!
  #11 (permalink)  
Antiguo 30/01/2009, 06:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema - se mueven los margenes

Cita:
Iniciado por sololu Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 30/01/2009, 11:10
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: problema - se mueven los margenes

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
  #13 (permalink)  
Antiguo 30/01/2009, 12:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema - se mueven los margenes

Cita:
Iniciado por locoxchacho Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:35.