Entrar

Problemas con alineación de divs y texto

zoatone · · Solicitar retirada
Hola a todos, antes que nada quiero darle las gracias a Jorgens por ayudarme a mi y a todos los que visitan la web a crear una pagina web. En la screen adjunta con este post se muestran los problemas que tengo, quiero porner el div de color rosa debajo del menu lateral y que el texto sea continuo a la derecha de este div, también otro problema que tengo es en la cabecera se supone que toda la web tiene un ancho de 800px así que no se porque se ve esa diferencia de ancho entre la cabecera y el contenido. También me gustaría saber como puedo añadir una galería de imágenes a mi pagina web algo parecido a esta galería que acabo de encontrar http://www.donangelo.es/galeria-imagenes.html .

Un saludo y muchas gracias.
Web-Freelance · · Solicitar retirada
Hola zoatone. Tienes que pegarnos aquí tus códigos, tanto html como css, sino no podremos ayudarte.

Saludos!
zoatone · · Solicitar retirada
html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270px"
height="80px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad"></div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quien soy</a></li>
<li><a href="#">Trabajos</a></li>
<li><a href="#">Pedir presupuesto</a></li>
<li><a href="#">Galería</a></li>
<li><a href="#">Contacto</a>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->

<div id="contenido">

<div id="menu">
<ul><li><a href="#">Inicio</a></li><li><a href="#">Quien soy</a></li></a><li><a href="#">Trabajos</a></li><li>
<a href="#">Galería</a></li><li><a href="#">Contacto</a></li></ul></div>
<img alt="puerta" src="objetos/puerta.jpg" height="557" width="400" />
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>
<p>En pocas lecciones aprenderé a darle margenes para
separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
alineados a la izquierda, o justificados. Así esto parece una poesia! je je je sghgfghsjflkslghlgljhfjlgdflg gggggggdfjgfdlghgdfjlghjldghdjlg
jdgfhgdjghdfghdfgjdfgdf</p>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddd</p>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddd</p>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddd</p>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddd</p>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddd</p>

</div>
<div id="pie">
<div id="pieuno"><ul><li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>

</div>
</body>
</html>
zoatone · · Solicitar retirada
css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px;}
p {text-align: right;float: left}
h1 {font-size: 1.2em; color:green ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font-size: 1.1em; color:green ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align:center; background-image: url(objetos/fondo32.jpg); background-repeat:repeat-y; background-color:CCFFFF;}
img {border-style:none; float: left;}
#global {width:800px; margin: 4px;font-family: arial;}
#puerta { background-color: pink; width: 400px; height: 557px;margin: 87px 0px 20px 0px;float: left; position: relative;left: -160px}
#cabecera {background-color: none ; border-left: black 0px solid ;
border-right: black 0px solid ; height:80px;}
#img {width: 400px; float:left; text-align:left;background-image: url(obejtos/puerta.jpg); margin: 0px 20px 0px 0px}
#logotipo {width:280px ; float:left;}
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: black; border: black 0px solid ; height:35px;}
#navegacion li {float:left ; list-style:none; padding: 12px }
#navegacion ul { margin-left: 60px; }
#contenido {background-color: white; border-left: black 0px solid ; border-right: black 0px solid; padding: 0px 0px 0px 0px; float: none;}
#contenido p {margin: 5px 10px 10px 10px ; text-indent: 15px; text-align:left; float: none;}
#menu {width: 150px ; float:left ;
text-align:left ; margin: -10px 10px 3px 0px ;
background-color: black ;padding: 5px 0px 5px 5px;}
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;background-image: url(objetos/curva-superior1.gif) }
#pie { background-color: none; height: 65px ;width: 800px; float:left;}
#pie li {list-style:none;font-size:12px; float:right; padding:0px 5px 0px 0px; margin: 5px 0px 0px 0px}
#pieuno {background-color:none; float:left; width:800px; float:left;}
#piedos {background-color:none; float:left; width:498px;}
#pietres {background-color:none; float:left; width:150px; float:left;}
a {color: white ; text-decoration:none ; display: block; }
a:link {}
a:visited {}
a:hover {color:silver ; text-decoration:none ; background-color: none}
a:active {}
#pie a {color:black ; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#menul a {color:white}
#menul a:link
#menul a:visited
#menul a:hover {color:black; background-color: black;}
#menul a:active
SuperHipo · · Solicitar retirada
Una cosita zoatone antes de seguir: NO existe la regla "background-color: none;"
He visto que la usas a menudo. Si no quieres ningún color de fondo no pongas nada. Si quieres algún color pues lo pones.

Ahora me pongo con el código a ver si solucionamos lo de la imagen y el texto.

Un saludo.
SuperHipo · · Solicitar retirada
Intenta crear una estructura correcta en html organizada por divs que contengan a otros. No dejes cosas sueltas por ahí (como el h1 o la imagen :)).

Te dejo un ejemplo:

<body>
<div id="global">

<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="cabecera">
<div id="logotipo">
<a href="index.html"><img src="objetos/logotipo.gif" width="270px"
height="80px" alt="Haz clic aquí para volver a la página de inicio"></a>
</div>
<div id="publicidad"></div>
</div>

<div id="navegacion">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quien soy</a></li>
<li><a href="#">Trabajos</a></li>
<li><a href="#">Pedir presupuesto</a></li>
<li><a href="#">Galería</a></li>
<li><a href="#">Contacto</a>
</ul>
</div>

<!-- FIN DE CODIGO DE CABECERA -->

<div id="contenido">

<div ="sidemenu">
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quien soy</a></li>
<li><a href="#">Trabajos</a></li>
<li><a href="#">Galería</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>

<div id="image">
<img alt="puerta" src="objetos/puerta.jpg" height="557" width="400" />
</div>
</div>

<div id="texto>
<h1>...............</h1>
<p>......................</p>
</div>

</div>

<div id="pie">

<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li>
<li><a href="#">Contactos</a></li>
<li><a href="#">Nos Enlazan</a></li>
</ul>
</div>

</div>

</div>

</body>
SuperHipo · · Solicitar retirada
Ahora, con CSS lo maquetas hasta que quede como quieres.

IMPORTANTE:
- Todos los divs (MENOS el GLOBAL) tienen que tener "float: left"
- Controla los "width" de los divs para que quepan dentro de su div contenedor ya que si no se colocarán debajo (por ejemplo si un div tiene "width: 400px;" y hay dos divs dentro de él, la suma de los "width" de estos dos no puede superar los 400px o si no el segundo de ellos se colocará debajo).
- Ojo con los bordes porque también cuentan en el "width" (por ejemplo, si a un div le pones "width: 400px; border: 1px solid #000;", su ancho real no será de 400px sino de 402px, la suma del ancho y los dos píxeles de los bordes laterales).

Espero que te sirva.

Un saludo!
zoatone · · Solicitar retirada
No se como arreglar el problema, sigue igual con la diferencia que el texto esta debajo d la imagen y la imagen al lado del menu lateral. Se supone que el div image y el div texto tienen que tener una anchura sumados inferior o igual a 800px no? o también tengo que contar el menu lateral para que la imagen quede debajo del menu lateral?
SuperHipo · · Solicitar retirada
Seguramente será que el el ancho del contenedor del texto es demasiado grande y por eso se coloca debajo.
Prueba a darle un ancho menor y que estés seguro de que quepa, así vas controlando el problema y lo puedes ajustar más tarde.

Suerte. Ya me cuentas.

Un saludo
Dai.B · · Solicitar retirada
Hola soy nueva en esto! y necesito a alguien que me ayude tengo un problema estoy armando algo así como el armazón para hacer una pagina y me trabe; yo tengo tres divs con una foto cada uno y creo q se me superponen ahi les dejo el código si me pueden decir que es lo que tengo que hacer se los re agradezco!

<div style="overflow: hidden; width: 1010px; height: 267px;">
<div id="a-div" style=" position:relative; width: 250px; height: 267px;"><img src="/home/desarrollo/Escritorio/lili.jpg"></div>
<div id="b-div" style=" position:relative; width: 250px; height: 267px;"><img src="/home/desarrollo/Escritorio/lili2.jpg"></div>
<div id="c-div" style=" position:relative; width: 250px; height: 267px;"><img src="/home/desarrollo/Escritorio/lili4.jpg"></div>
</div>
SuperHipo · · Solicitar retirada
Hola Dai.B

Para plantear nuevas preguntas mejor que lo hagas en el foro abriendo un tema nuevo. Así todos podrán verlo y ayudarte o aprender de las respuestas, ya que es posible que muchos tengan el mismo problema que tú.

Sería conveniente que plantearas más o menos cómo quieres que se estructure la página (Todos los divs unos encima de otros, al lado, ...). Hay mucha opciones. Pero de momento te digo que quites todos esos "position: relative" y uses "float".

Cuéntame un poco más sobre la estructura que quieres y te explico cómo conseguirla ¿ok?

Un saludo Dai.B
SuperHipo · · Solicitar retirada
Zoatone, la anchura del div contenedor del menu lateral y la imagen (el div que los contiene a ambos) MÁS la anchura del div que contiene el texto no puede superar la anchura del div contenedor global (incluidos margin, padding y border).

Con esto, prueba con lo que te he dicho en el post anterior y me cuentas.

Un saludo!
SuperHipo · · Solicitar retirada
Exáctamente, el ancho del "div id=contenido" + el ancho del "div id=texto" no pueden superar el ancho del "div id=global" (y no te olvides de los bordes los márgenes y los padding... Perdona que insista pero es algo que ocurre mucho, :))
zoatone · · Solicitar retirada
Pues no se que tengo mal :S

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px;}
h1 {font-size: 1.2em; color:green ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font-size: 1.1em; color:green ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align:center; background-image: url(../objetos/fondo32.jpg); background-repeat:repeat-y; background-color:CCFFFF;}
img {border-style:none; float: left;}
.carruseldeimagenes img {-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
#global {width:800px; margin: 4px;font-family: arial;}
#cabecera { border-left: black 0px solid ;
border-right: black 0px solid ; height:80px; float:left;}
#image { float:left; background-color: white;}
#logotipo {width:280px ; float:left;}
#publicidad {width:518px ; float:left ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: black; border: black 0px solid ; height:35px; float: left;}
#navegacion li {float:left ; list-style:none; padding: 12px }
#navegacion ul { margin-left: 60px; }
#contenido {background-color: white; border-left: black 0px solid ; border-right: black 0px solid; padding: 0px 0px 0px 0px; float: left; width:300px}
#contenido p {margin: 5px 10px 10px 10px ; text-indent: 15px; text-align:left; float: left;}
#menu {width: 150px ; float:left ; text-align:left ; margin: -10px 10px 3px 0px ;background-color: black ;padding: 5px 0px 5px 5px;}
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;background-image: url(objetos/curva-superior1.gif) }
#pie { height: 65px ;width: 800px; float:left;}
#pie li {list-style:none;font-size:12px; float:right; padding:0px 5px 0px 0px; margin: 5px 0px 0px 0px}
#pieuno { float:left; width:800px; float:left;}
#piedos { float:left; width:498px;}
#pietres { float:left; width:150px; float:left;}
#texto {background-color: white; float: left; width: 300px;}
a {color: white ; text-decoration:none ; display: block; }
a:link {}
a:visited {}
a:hover {color:silver ; text-decoration:none ;}
a:active {}
#pie a {color:black ; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#menul a {color:white}
#menul a:link
#menul a:visited
#menul a:hover {color:black; background-color: black;}
#menul a:active
SuperHipo · · Solicitar retirada
El problema está en que no indicas el "width" de los div. Si no pones el ancho, como un div es un elemento de bloque, automaticamente ocupa el 100% del ancho disponible y por lo tanto no cabe nada a su lado.

Debes indicar el ancho de los divs que no quieras que ocupen todo el ancho del div global.

Por cierto, te aclaro una cosita de los estilo. Todo lo que no quieras no hace falta que lo pongas. Por ejemplo, si no quieres padding no hace falta que pongas "padding: 0px 0px 0px 0px;". No pongas nada. Solo cuando algo ya tenga un padding y se lo quieras quitar tendrás que usar esto (pero más resumido ("padding: 0px;")).

Prueba a darle anchos a los divs y me cuentas.
zoatone · · Solicitar retirada
El problema lo tengo en meter el div texto dentro del div contenido, el div image ya sale debajo del menu lateral. Que puedo hacer? cambie el ancho de todos los divs y no consigo poner el texto al lado d la imagen :S
zoatone · · Solicitar retirada
* {text-indent:0px; margin: 0px}
h1 {font-size: 1.2em; color:green ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font-size: 1.1em; color:green ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align:center; background-image: url(../objetos/fondo32.jpg); background-repeat:repeat-y; background-color:CCFFFF;}
img {border-style:none; float: left;}
.carruseldeimagenes img {-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
#global {width:800px; margin: 4px;font-family: arial;}
#cabecera { border-left: black 0px solid ;
border-right: black 0px solid ; height:80px; float:left; width: 800px}
#image { float:left; background-color: pink; width: 400px; height: 557px}
#logotipo {width:280px ; float:left;}
#publicidad {width:518px ; float:left ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: black; border: black 0px solid ; height:35px; float: left; width: 800px}
#navegacion li {float:left ; list-style:none; padding: 12px }
#navegacion ul { margin-left: 60px; }
#texto {background-color: white; width: 350px; float:left;}
#contenido {background-color: red; float: left; width:800px;}
#contenido p {margin: 5px 10px 10px 10px ; text-indent: 15px; text-align:left; float: left;}
#menu {width: 150px ; float:left ; text-align:left ; margin: 0px 10px 3px 0px ;background-color: black ;padding: 5px 0px 5px 5px;}
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;background-image: url(objetos/curva-superior1.gif) }
#pie { height: 65px ;width: 800px; float:left;}
#pie li {list-style:none;font-size:12px; float:right; padding:0px 5px 0px 0px; margin: 5px 0px 0px 0px}
#pieuno { float:left; width:800px; float:left;}
#piedos { float:left; width:498px;}
#pietres { float:left; width:150px; float:left;}
a {color: white ; text-decoration:none ; display: block; }
a:link {}
a:visited {}
a:hover {color:silver ; text-decoration:none ;}
a:active {}
#pie a {color:black ; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#menul a {color:white}
#menul a:link
#menul a:visited
#menul a:hover {color:black; background-color: black;}
#menul a:active
zoatone · · Solicitar retirada
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Page title</title>
<link rel="stylesheet" href="estilotrabajo.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="cabecera">
<div id="logotipo">
<a href="index.html"><img src="objetos/logotipo.gif" width="270px"
height="80px" alt="Haz clic aquí para volver a la página de inicio"></a>
</div>
<div id="publicidad"></div>
</div>
<div id="navegacion">
<ul>
<li><a href="../inicio/inicio.html">Inicio</a></li>
<li><a href="../quiensoy/quiensoy.html">Quien soy</a></li>
<li><a href="trabajos.html">Trabajos</a></li>
<li><a href="../galeria/galeria.html">Galería</a></li>
<li><a href="../contacto/contacto.html">Contacto</a>
</ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->

<div id="contenido">
<div id="sidemenu">
<div id="menu">
<ul><li><a href="#">Puertas</a></li><li><a href="#">Armarios</a></li></a><li><a href="#">Parquet</a></li><li>
<a href="#">Construcciones</a></li></ul>
</div>
<div id="image">

</div>
</div>
<div id="texto">
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo.</p>
<p> Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>
<p>En pocas lecciones aprenderé a darle margenes para
separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
alineados a la izquierda, o justificados. Así esto parece una poesia! je je je sghgfghsjflkslghlgljhfjlgdflg gggggggdfjgfdlghgdfjlghjldghdjlg
jdgfhgdjghdfghdfgjdfgdf</p>


</div>
</div>
<div id="pie">
<div id="pieuno"><ul><li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>