Problema tonto css

Alkatelmo #1 Mar '13

El boceto de mi diseño es el siguiente:

El código css que afecta a estos 3 elementos es:

#banner{
text-align:center;
width="80%"
height="425"
border="0"
}

#menu{
position:absolute;
width:20%;
float:left;
}

#TextoWeb{
text-align:justify;
font-size:1.5em;
font-family:Vivaldi;
width:74%;
float:right;
margin-right:5%;
}

Mi problema es que cuando cambio la pantalla a una resolución menor #TextoWeb me aparece montado encima del menú. Me gustaría que al disminuir la resolución no se desplazara hacia ese lado sino que el texto se bajara a otra linea o algo para que no se monten...

Espero haberme explicado bien... Gracias por leerme y mas todavia por vuestra ayuda!

re4q #2 Mar '13

Esto pasa a veces cuando pones las dimensiones en px en lugar de porcentajes, pero no es tu caso. Lo siento no puedo ayudarte.

fer #3 Mar '13

Seguramente sea porque #menu tiene position absolute y no tiene ningún div contenedor con position relative, entonces al tener más resolución pilla su posición con respecto a la ventana, entonces depende del tamaño de ésta, tiene una posición u otra.

Supongo, sin ver más html/css apuesto por eso

Zuki #4 Mar '13

La solucion esta en poner un contenedor y dentro todas las capas en float left y el tamaño en porcentaje.

Y se acabo el misterio x'D

1

Alkatelmo #5 Mar '13

Os pongo el código de una de las secciones:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cofradía de la Entrada Triunfal de Jesús en Jerusalén - Villacarrillo (Jaén)</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>

<div id="TextoWeb"><h2>16/03/2012 Inauguración Web</h2>
Hola a todos, bienvenidos a la nueva web de la Cofradía de la Entrada Triunfal de Jesús en Jerusalem
</div>

    <div id="Copyright">®  Cofradía de la Entrada Triunfal de Jesús en Jerusalén - Villacarrillo (Jaén) - Alfonso Carlos Tello Mora</div> 
</body>

</html>

alterego #6 Mar '13

Como ya te han dicho, sería recomendable que lo metieras todo en un contenedor.
Si quieres que al cambiar el tamaño de la ventana se te coloque como has dicho:

#menu // quita position: absolute

#menu {
   width: 20%;
   float: left;
}

#TextoWeb // float: left en vez de right, y margin-left en vez de margin-right

#TextoWeb {
   text-align: justify;
   font-size: 1.5em;
   font-family: Vivaldi;
   width: 74%;
   float: left;
   margin-left: 5%;
}

Alkatelmo #7 Mar '13

La cuestión es que el menú y el banner se crean mediante funciones php... Como los meto entonces dentro de un mismo div?

1 respuesta

eXtreM3 #8 Mar '13

#7 mira, lo que necesitas es:

Que banner tenga un width que tú le pongas, ya sea en pixels o en %, y le pones margin auto. Con esto conseguirás que te quede centrado.
Te haces un contenedor (otro div) que servirá para meter dentro menu y TextoWeb. Le pones el mismo width que a banner y también margin auto para que quede centrado.
Necesitas que banner tenga float left y TextoWeb float right. A ambos tendrás que ponerle un width, en pixels o en %.
Detrás de TextoWeb necesitas crear una capa que limpie las flotabilidades de anteriores. Esto se consigue con un clear both.

Problema tonto css

Usuarios habituales

Tags