Foros del Web » Creando para Internet » CSS »

Problemas con DIV

Estas en el tema de Problemas con DIV en el foro de CSS en Foros del Web. Buenos Dias. Estoy haciendo una pagina web y lo que quiero es crear la estructura con divs, que sea mas o menos compatible con IE ...
  #1 (permalink)  
Antiguo 03/04/2007, 04:11
 
Fecha de Ingreso: abril-2007
Mensajes: 40
Antigüedad: 16 años, 11 meses
Puntos: 0
Problemas con DIV

Buenos Dias.
Estoy haciendo una pagina web y lo que quiero es crear la estructura con divs, que sea mas o menos compatible con IE y FireFox y que sea compatible con varias resoluciones.

Os cuento cual es la estructura de la pagina con div.
-tengo 6 div { .general -dentro de general tengo - .header
- .cuerpo -dentro tengo - .menu
- .contenido
- .footer


Para darle formato utilizo una hoja de estilo externa (estilo.css).

Para que sea compatible con varias resoluciones estoy poniendo los width en "%" y los height en
"em".

Problemas:
-mi pagina web se ve casi perfetamente en IE es decir todos los div estan en su sitio pero en FireFox tengo un espacio (como un salto de linea) entra capas es decir entre las capas header y cuerpo hay como un salto de linea.
-cuando cambio la resolucion de 1024x768 a 800x600 los div se adaptan a la nueva resolucion pero en cambio el texto no. El texto sobresale de la caja se que igual que en la resolucion 1024x768. Lo que yo queria es que la linea de texto se reduzca y se crean mas lineas (no se si me explico bien).
-tambien me gustaria definir un ancho minimo es decir la capa x tiene width=100% pero debido a que dentro tengo texto y quiero que quede mas o menos bien en una ventana reducida, me gustaria limiar el ancho minimo a por ejemplo: 600px o a 40% (algo parecido).

Yo creo que el problema esta en las propiedades puestas para cada div. Podria estar en la propiedad display para el texto. Y otra cosa ... todos mis div tiene posicion relativa.

Mi codigo HTML es:
------------------------------------------------------------------------------
Cita:
</head>

<body>
<div class="general">
<div class="header">
<p>Encabezado</p>
</div>

<div class="cuerpo">
<div class="menu">
<p>Menu</p>
</div>

<div class="contenido">
<p>Aqui pondre el contenido de mi pagina web</p>
</div>
</div>

<div class="footer">
<p>Pie de Pagina</p>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------

Mi codigo CSS es
------------------------------------------------------------------------------
Cita:
body {background-color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14pt;
margin:0px;
padding:0px;}

p {text-align:center;}

div.general {position:relative;
border-style:solid;
border-color:#990000;
border-width:thin;
width:auto;
height:auto;}

div.header {background-color:#CCCCCC;
position:relative;
width:100%;
height:4em;}

div.cuerpo {position:relative;
width:100%;
height:auto;}

div.menu {background-color:#0066CC;
position:relative;
float:left;
width:200px;
height:auto;}

div.contenido{background-color:#99CC00;
position:relative;
margin-left:200px;
width:auto;
height:auto;}

div.footer {background-color:#CCCCCC;
position:relative;
width:100%;
height:3em;}
------------------------------------------------------------------------------

Gracias y espero que este post sirva para muchos porque es una cosa que todos buscamos y hay poca informacion.

Saludos
  #2 (permalink)  
Antiguo 04/04/2007, 10:20
 
Fecha de Ingreso: agosto-2006
Ubicación: en mi casa
Mensajes: 192
Antigüedad: 17 años, 7 meses
Puntos: 0
Re: Problemas con DIV

Bueno Valentinoo por lo que he visto has cometido varios errores:
1º: Esto es muy importante, a tus div´s no le des clases (.) le tienes que asignar almoadillas(#).
2º: Para que no aparezca ese espacio que tu dices asignale que cada div margin:0

Espero haberte ayudado.

adios,

Lucas.
  #3 (permalink)  
Antiguo 04/04/2007, 12:50
 
Fecha de Ingreso: abril-2007
Mensajes: 40
Antigüedad: 16 años, 11 meses
Puntos: 0
Re: Problemas con DIV

Hola webpro_lukas y muchas gracias por contestar. En primer lugar os quiero decir que el sitio web que quiero crear no es para nadie. Solo quiero practicar y conseguir hacer sitios web mas o menos profesionales usando HTML CSS PHP MySQL y JavaScript.

Primero os cuento un poco lo que he conseguido de momento:

He resuelto un 90% este problema.

Cita:
-cuando cambio la resolucion de 1024x768 a 800x600 los div se adaptan a la nueva resolucion pero en cambio el texto no. El texto sobresale de la caja se que igual que en la resolucion 1024x768. Lo que yo queria es que la linea de texto se reduzca y se crean mas lineas (no se si me explico bien).
¿Como?
-lo que he hecho es adaptar mi pagina web a una resolucion de entre 800x600 hasta 1280x1024. Para que la resolucion minima sea de 800x600 y asi conseguir que el contenido de mi pagina que tiene un ancho de unos 750 px no salga de los div, he puesto como ancho minimo (min-width) 800px. Tambien hay que tener en cuenta que para conseguir las demas resoluciones (1024x768) he puesto el ancho normal de los div en porcentajes (width=100%). Con esto lo que conseguimos es que nuestros div se adapten al ancho de la ventana y que no baje de 800px para que no afecte mi texto que tiene unos 750 px.

La pagina web, de momento, funciona perfetamente (desde mi punto de vista) con el IE pero no con el FireFox. Yo creo que los div son mas compatibles con el IE.
webpro_lukas he hecho lo que tu me has dicho (he cambiado las clases por ID`s y he puesto el margin a 0, e incluso el padding a 0) y aunque no me a dado ningun resultado estoy convencido de que lo que tu dices es verdad.

Para una mejora comunicacion he colocado el sitio web en un subdominio (valentinoo.infozone24h.com) de un dominio que tengo contratado. Hechale un vistazo tanto con el IE como con el FireFox y mira tambien el nuevo CSS y dime si ves algo mal. En el menu del sitio web SOLO funciona los enlaces Portada y Login.

Saludos.
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 13:43.