Problema tonto css

Alkatelmo

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

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

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

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

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&iacute;a de la Entrada Triunfal de Jes&uacute;s en Jerusal&eacute;n - Villacarrillo (Ja&eacute;n)</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>

<body>
<div id="banner"><img src="imagenes/banner.png" alt="banner" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="56,46,112,74" href="Inicio.php" alt="inicio" />
<area shape="rect" coords="179,47,260,77" href="Noticias.php" alt="noticias" />
<area shape="rect" coords="321,46,371,76" href="http://libros.miarroba.es/leer.php?id=266811" target="_blank" alt="foro" />
<area shape="rect" coords="426,51,517,72" href="Contacta.php" alt="contacta" />
</map>
</div>
<div id="menu" ><img src="imagenes/menu.png" width="220" height="480" border="0" usemap="#Map2" alt="menu"/>
<map name="Map2" id="Map2">
<area shape="rect" coords="32,85,72,101" href="Inicio.php" alt="Inicio" />
<area shape="rect" coords="34,104,84,121" href="Saluda.php" alt="Saluda" />
<area shape="rect" coords="33,123,101,140" href="Estatutos.php" alt="Estatutos" />
<area shape="rect" coords="33,142,92,160" href="Historia.php" alt="Historia" />
<area shape="rect" coords="34,163,84,180" href="Titular.php" alt="Titular" />
<area shape="rect" coords="33,184,141,199" href="SedeCanonica.php" alt="Sede Canónica" />
<area shape="rect" coords="32,204,195,219" href="EstacionDePenitencia.php" alt="Estación De Penitencia" />
<area shape="rect" coords="32,222,114,239" href="Patrimonio.php" alt="Patrimonio" />
<area shape="rect" coords="32,242,165,258" href="JuntaDeGobierno.php" alt="Junta De Gobierno" />
<area shape="rect" coords="32,263,151,278" href="GaleriaDeFotos.php" alt="Galería De Fotos" />
<area shape="rect" coords="33,282,93,298" href="Anderos.php" alt="Anderos" />
<area shape="rect" coords="33,302,91,317" href="Noticias.php" alt="Noticias" />
<area shape="rect" coords="32,320,103,337" href="Proyectos.php" alt="Proyectos" />
<area shape="rect" coords="32,341,72,357" href="Culto.php" alt="Culto" />
<area shape="rect" coords="33,361,110,377" href="Formacion.php" alt="Formación" />
<area shape="rect" coords="33,380,108,398" href="Descargas.php" alt="Descargas" />
<area shape="rect" coords="34,401,87,416" href="Enlaces.php" alt="Enlaces" />
<area shape="rect" coords="32,420,155,436" href="Agradecimientos.php" alt="Agradecimientos" />
</map>
</div>


<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

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

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

#7 mira, lo que necesitas es:

  1. 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.

  2. 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.

  3. Necesitas que banner tenga float left y TextoWeb float right. A ambos tendrás que ponerle un width, en pixels o en %.

  4. Detrás de TextoWeb necesitas crear una capa que limpie las flotabilidades de anteriores. Esto se consigue con un clear both.

Usuarios habituales

  • eXtreM3
  • Alkatelmo
  • alterego
  • Zuki
  • fer
  • re4q