Foros del Web » Creando para Internet » HTML »

Problema con divs ; HTML + CSS [AYUDA]

Estas en el tema de Problema con divs ; HTML + CSS [AYUDA] en el foro de HTML en Foros del Web. Hola! Vereis, tengo un problema con unos divs en una sencilla pagina... El problema es que tengo la página así tal cual se ve en ...
  #1 (permalink)  
Antiguo 24/06/2010, 16:36
Avatar de alberduris  
Fecha de Ingreso: junio-2010
Ubicación: Bizkaia
Mensajes: 7
Antigüedad: 14 años, 5 meses
Puntos: 0
Información Problema con divs ; HTML + CSS [AYUDA]

Hola! Vereis, tengo un problema con unos divs en una sencilla pagina...
El problema es que tengo la página así tal cual se ve en la imagen...



Pero cuando intento poner algún contenido pues pasa esto

El problema es que yo quiero que el contenido que en este caso son esas imagenes con letras negras salgan a la derecha del menú ese que está compuesto por tres divs...

Pero no hay manera siempre salen ahi abajo...



No sé como solucionarlo y si alguien me podría ayudar le estaría muy agradecido...

Códigos:
HTML:
<body>


<div id="global">
<a href="#"><img src="tpclogo.png" width="1000" height="108" alt="tpclogo (60K)" /></a>
<div id="navegacion">
<font size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp; Menos de 10 € &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Entre 11 y 50 € &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Entre 51 y 100€</font>
</div><!--navegacion-->
<DIV ID="contenido">



<div id="menu1">
<img src="botondecategorias.jpg" width="25" height="25" alt="botondecategorias (1K)" />
</div>


<div id="menu2">
<font color="#585858"> &nbsp;Ofertas</font>
</div>



<div id="menu">
<ul>
<li><font color="#FF8000">></font> cosa
<li><font color="#FF8000">></font> cosa
<li><font color="#FF8000">></font> cosa
<li><font color="#FF8000">></font> cosa
<li><font color="#FF8000">></font> cosa
<li><font color="#FF8000">></font> cosa
<li><font color="#FF8000">></font> cosa
<li><font color="#FF8000">></font> cosa
</ul>
</div>

<div id="contenido">

<img src="objetos/tallerpc.gif" width="318" height="111" alt="tallerpc (11K)" />

</div>

</body>
</html>


CSS:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: center}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:1000px ; margin:4px auto }

#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px ; text-align:center}
#navegacion {background-color: #A4A4A4 ; border: no-border ; height:25px ; text-align: left ; color: #FFFFFF }
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 300px }
#contenido {background-color: #FFFFFF ; border-left: black 1px solid ;
border-right: black 1px solid ; text-align: center }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}

#menu2 {background-color: #E6E6E6 ; width: 126px ; float:left ; height: 24px ;
text-align: left ; border-top: #D8D8D8 1px solid }



#menu1 {background-color: #E6E6E6 ; width: 25px ; float:left ; height: 25px ;
text-align: left ; }

#menu {background-color: #FFFFFF ; width: 150px ; float:under #menu1 ; height:500px ;
text-align: left ; margin-top: 25px ; border-right: #D8D8D8 1px solid ; border-left: #D8D8D8 1px solid ; border-top: #D8D8D8 1px solid ; border-bottom: #D8D8D8 1px solid }


#menu2 li {list-style:none ; }

#menu2 h1 {}



#menu1 li {list-style:none ; }

#menu1 h1 {}




#menu li {list-style:none ; margin: 4px 0px 4px 6px }

#menu h1 {}
#pie {border-left: black 0px solid ; border-right: black 0px solid ;
border-top: black 0px solid ; height: 65px ; background-color : #FFFFFF ; width : 1300px ; border-bottom: black 0px solid }




a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

----------------------------------

Siento haber hecho el post tan largo pero es que no sabía como hacer para que os sea lo más fácil posible intentar solucionar el problema

A todos los que contesteis ya mismo os van unos cuantos
  #2 (permalink)  
Antiguo 24/06/2010, 18:15
Avatar de eZakto  
Fecha de Ingreso: julio-2008
Mensajes: 214
Antigüedad: 16 años, 4 meses
Puntos: 5
Respuesta: Problema con divs ; HTML + CSS

En primer lugar tienes dos divs con la misma id (contenido) que creo que en este caso no afecta mucho pero no deja de estar mal.

Para que un div esté a un lado de otro (con float), en el html debe estar primero. Es decir:

Código CSS:
Ver original
  1. #flotante { float: left; width: 200px }

Entonces:

Código HTML:
Ver original
  1.    <head>
  2.    </head>
  3.    <body>
  4.       <div id="flotante"></div>
  5.       <div id="contenido"></div>
  6.    </body>
  7. </html>

Si en el html pones contenido primero y flotante luego, o flotante dentro de contenido, pasara lo que te pasa a ti.

Además, especifica bien los anchos, tanto del menu como del contenido.

Saludos!
__________________
eZakto™
  #3 (permalink)  
Antiguo 25/06/2010, 02:06
Avatar de alberduris  
Fecha de Ingreso: junio-2010
Ubicación: Bizkaia
Mensajes: 7
Antigüedad: 14 años, 5 meses
Puntos: 0
Exclamación Respuesta: Problema con divs ; HTML + CSS

Bueno, mejor que EZakto no se puede responder pero el problema sigue ahí.

Como tu me has dicho he puesto los flotantes arriba (menu, menu1, menu2) y después el contenido y además en el CSS he puesto margin-top de 25 pixeles a los tres divs del menu para que se separen de la barra de navegación... pero al insertar otra vez el contenido (Las imagenes de siempre en este caso) me pasa esto...



La verdad estaba convencido de que la espuesta de Ezakto iba a ser la que me solucionaría todo pero no sé porque no lo ha sido xD

Bueno os dejo los códigos tal y como están ahora...

HTML:
Código HTML:
Ver original
  1. <title>Page title</title>
  2. <link rel="stylesheet" href="estilotpc.css" type="text/css" media="all">
  3. </head>
  4.  
  5.  
  6.  
  7. <div id="global">
  8. <a href="#"><img src="tpclogo.png" width="1000" height="108" alt="tpclogo (60K)" /></a>
  9. <div id="navegacion">
  10. <font size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Menos de 10 € &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Entre 11 y 50 €  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Entre 51 y 100€</font>
  11. </div><!--navegacion-->
  12.  
  13.  
  14.  
  15. <div id="menu1">
  16. <img src="botondecategorias.jpg" width="25" height="25" alt="botondecategorias (1K)" />
  17. </div>
  18. <div id="menu2">
  19. <font color="#585858"> &nbsp;Ofertas</font>
  20. </div>
  21. <div id="menu">
  22. <ul>
  23. <li><font color="#FF8000">></font> cosa
  24. <li><font color="#FF8000">></font> cosa
  25. <li><font color="#FF8000">></font> cosa
  26. <li><font color="#FF8000">></font> cosa
  27. <li><font color="#FF8000">></font> cosa
  28. <li><font color="#FF8000">></font> cosa
  29. <li><font color="#FF8000">></font> cosa
  30. <li><font color="#FF8000">></font> cosa
  31. </ul>
  32. </div>
  33.  
  34.  
  35. <div id="contenido">
  36. <img src="objetos/tallerpc.gif" width="318" height="111" alt="tallerpc (11K)" />
  37. <img src="objetos/tallerpc.gif" width="318" height="111" alt="tallerpc (11K)" />
  38. <img src="objetos/tallerpc.gif" width="318" height="111" alt="tallerpc (11K)" />
  39. <img src="objetos/tallerpc.gif" width="318" height="111" alt="tallerpc (11K)" />
  40. </div>
  41. </body>
  42. </html>

CSS:
Código CSS:
Ver original
  1. * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
  2. p {text-align: center}
  3. h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
  4.     text-align: center}
  5. h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
  6.     text-align: center}
  7. body        {text-align: center }
  8. #global     {width:1000px ; margin:4px auto }
  9.  
  10. #cabecera   {background-color: white ; border-left: black 1px solid ;
  11.              border-right: black 1px solid ; height:85px}
  12. #logotipo   {width:280px ; float:left }
  13. #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px ; text-align:center}
  14. #navegacion {background-color: #A4A4A4 ; border: no-border  ; height:25px ; text-align: left ; color: #FFFFFF }
  15. #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
  16. #navegacion ul { margin-left: 300px }
  17. #contenido  {background-color: #FFFFFF ; border-left: black 1px solid ;
  18.              border-right: black 1px solid ; text-align: center }
  19. #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
  20.  
  21. #menu2      {background-color: #E6E6E6 ; width: 126px ; float:left ; height: 24px ;
  22.              text-align: left ; border-top: #D8D8D8 1px solid ; margin-top: 25px }
  23.  
  24.  
  25.  
  26. #menu1      {background-color: #E6E6E6 ; width: 25px ; float:left ; height: 25px ;
  27.              text-align: left ; margin-top: 25px }
  28.  
  29. #menu       {background-color: #FFFFFF ; width: 150px ; float:under #menu1 ; height:300px ;
  30.              text-align: left ; margin-top: 25px ; border-right: #D8D8D8 1px solid ; border-left: #D8D8D8 1px solid ; border-top: #D8D8D8 1px solid ; border-bottom: #D8D8D8 1px solid }
  31.  
  32.  
  33. #menu2 li    {list-style:none ;  }
  34.  
  35. #menu2 h1 {}
  36.  
  37.  
  38.  
  39. #menu1 li    {list-style:none ;  }
  40.  
  41. #menu1 h1 {}
  42.                          
  43.                          
  44.  
  45.  
  46. #menu li    {list-style:none ; margin: 4px 0px 4px 6px }
  47.  
  48. #menu h1 {}
  49. #pie     {border-left:  black 0px solid ; border-right: black 0px solid ;
  50.           border-top:   black 0px solid ; height: 65px ; background-color : #FFFFFF ; width : 1300px ; border-bottom: black 0px solid }
  51.  
  52.  
  53.  
  54. a         {}
  55. a:link    {}
  56. a:visited {}
  57. a:hover   {}
  58. a:active  {}

Gracias a todos los que respondais, y para eZakto lo prometido es deuda, unos para ti.
  #4 (permalink)  
Antiguo 26/06/2010, 15:06
Avatar de alberduris  
Fecha de Ingreso: junio-2010
Ubicación: Bizkaia
Mensajes: 7
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Problema con divs ; HTML + CSS [AYUDA]

Bueno gracias a todos los que han visitado el post y especiales gracias a eZakto por responder pero ya he resuelto el problema. El meollo de la cuestión era que había un conflicto con el atributo "float" y además me faltaba poner el atributo "clear: left" a uno de los divs de menú.

Finalmente el Código HTML no le he tocado a excepción de lo que me dijo eZakto y el código css ha quedado así

CSS:

Código CSS:
Ver original
  1. #menu2      {background-color: #F2F2F2 ; width: 121px ; float:left ; height: 24px ;
  2.              text-align: left ; margin-top: 25px ; padding: 1px 1px 1px 1px ; border-right: #D8D8D8 1px solid ; border-top: #D8D8D8 1px solid }
  3.  
  4.  
  5.  
  6. #menu1      {background-color: #FFFFFF ; width: 25px ; float:left ; height: 25px ;
  7.              text-align: left ; margin-top: 25px ; padding: 1px 1px 1px 1px ; border-left: #D8D8D8 1px solid ;border-top: #D8D8D8 1px solid  }
  8.  
  9.  
  10. #elem1 {background-color: #FFFFFF ; width: 150px ; float: left ; clear: left ; height:25px ;
  11.              text-align: left ; margin-top:0px ; border-right: #D8D8D8 1px solid ; border-left: #D8D8D8 1px solid ; border-top: ; border-bottom: #D8D8D8 1px dotted }
  12. #elem2 {background-color: #FFFFFF ; width: 150px ; float: left ; clear: left ; height:25px ;
  13.              text-align: left ; margin-top:0px ; border-right: #D8D8D8 1px solid ; border-left: #D8D8D8 1px solid ; border-top:  ; border-bottom: #D8D8D8 1px dotted }
  14. #elem7 {background-color: #FFFFFF ; width: 150px ; float: left ; clear: left ; height:25px ;
  15.              text-align: left ; margin-top:0px ; border-right: #D8D8D8 1px solid ; border-left: #D8D8D8 1px solid ; border-top:  ; border-bottom: #D8D8D8 1px solid }
  16. #elemesp {background-color: #FFFFFF ; width: 150px ; float: left ; clear: left ; height:35px ;
  17.              text-align: left ; margin-top:0px ; border-right: #D8D8D8 1px solid ; border-left: #D8D8D8 1px solid ; border-top:  ; border-bottom: #D8D8D8 1px solid }

Como veis he sustituido el div "menu" por esos "elem" porque la estetica del menu ha cambiado algo podeis ver como ha quedado el menú ahora en [URL="http://alber.mypressonline.com/indextpc.html"]el boceto de mi página de aprendizaje[/URL]

Saludos!

TEMA CERRADO

Última edición por alberduris; 26/06/2010 a las 15:19

Etiquetas: css
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 22:35.