Problema con maquetacion en CSS

glayvin · #1 (**permalink**) 02/02/2007, 10:30

Buenas, tengo varios problemas con CSS, podeis ver la pagina aqui...
Meruts festival
Los problemas son:
1º- En IE no me respeta el tamaño del div #decoracio i me sale duplicado
2º- La capa en la que pone publicidad (#dinss)se ve más abajo de lo que deberia, cuando deberia estar al nivel de Sobre el meruts festival (#dins)
3º- Problema con la alienacion del texto superior en IE, he testeado con la solución que està en las faqs y me pone los "botones" en mitat pantalla, toma el position absolute como de toda la página.

El css:

Código HTML:

BODY {
    font: 8pt Arial;
    margin: 0 0 0 0px;
    text-align: center;
    background-color: #fff;
}
#decoracio{
	 background-image: url('taudalt.gif');
	 height: 6px; !important
}
#contenidor{
    text-align: left;
    width: 770px;
    margin: auto;
}
#dalt{
    background-color: #00ccff;
    color: #fff;
    font-size:12pt;
    font-weight: bold;
	margin-top: 20px;
}
#dalt2{
	width: 770px;
    background-color: #282828;
	align: center;
}
#dalt3{
    background-color: #282828;
}
#cos{
	margin-top: 15px;
	}
#lateral{
    width: 160px;
    background-color: #f6f5f5;
    float:left;
}
#central{
    margin-left: 170px;
    width: 600px;
}
#dins{
    width: 400px;
}
#dinss{
    margin-left: 410px;
    width: 190px;
	background-color: #282828;
	color:#FFF;
	text-align:center;

}


#peu{
    background-color: #f3f3f3;
    text-align: center;
	margin-top: 20px;
	clear: both;
} 
#un{
	background-image: url('boto.gif'); 
	height: 25px;
	repeat: no-repeat;
	width: 75px;
	color:#FFF;
	font-size: 13px;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle;
	text-align:center;


	}
#dos{
	background-image: url('boto2.gif'); 
	height: 25px;
	repeat: no-repeat;
	width: 75px;
	text-align:center;
	color:#000;
	font-size: 13px;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle;
	text-align:center;
	}
	
em { 
	color:#00ccff;
 	font-weight: bold;}
	
.tusencuestas_pregunta
{   
    font-weight: bold;
}

I la pagina en html (solo el body)...

Código HTML:

<body>
<div id="dalt3">
  <div id="div">
      <table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td><div align="left"><img src="logo.gif" width="273" height="62" /></div></td>
          <td width="87" align="right"><div id="un">INICI</div></td>
          <td width="87" align="right"><div id="dos">LLOC</div></td>
          <td width="87" align="right"><div id="dos">HORARIS</div></td>
          <td width="87" align="right"><div id="dos">GRUPS</div></td>
          <td width="91" align="right"><div id="dos">FIRMA</div></td>
        </tr>
    </table>
  </div>
</div>
<div id="contenidor">

    <div id="dalt">
       Meruts festival </div>
    <div id="cos">
      <div id="lateral">	   	
	   <div id="decoracio">
	   </div>
	    Aquí va la encuesta 
         </div>
       	<div id="central">
	  	 <div id="decoracio">
	  	 </div>
		 <div id="dins"><strong>SOBRE EL MERUT'S FESTIVAL</strong><br /> 
          El <em>merut's festival</em> es presenta enguany com una aposta per bla bla bla </div>
		  <div id="dinss"> publicitat </div>
           </div>
  </div>
    <div id="peu">
    <strong>Merut's Festival 2007</strong>    - Contacte - Publicitat - Horaris - Lloc - Grups </div>
</div> 
</body>

Gracias de antemano.

DragonX · #2 (**permalink**) 02/02/2007, 10:36

http://jigsaw.w3.org/css-validator/v....es%2Fmerut%2F

Este es el resultado de tu validación de CSS. Miralo y fijate si descubris el problema!

glayvin · #3 (**permalink**) 02/02/2007, 14:23

Lo que me dice en la validación no afecta a la estructura que me da el problema.

JORASA · #4 (**permalink**) 02/02/2007, 15:58

En el DIV #decoracio establece la propiedad:

font-size : 1px;

Y comprueba si te respeta la altura que has establecido

JORASA · #5 (**permalink**) 02/02/2007, 16:10

En cuanto al problema con #dinss

Creamos:

#frenaDinss{
height : 1px;
font-size : 1px;
clear : both;
width : 10px; (o la anchura de #dinss)
}

Y EN EL CÓDIGO:

<div id= "dinss">
<div id= "frenaDinss"></div>
</div>

Ruben_JD · #6 (**permalink**) 02/02/2007, 19:00

Prueba con este codigo, me funciono en IE, opera y firefox:

Código HTML:

<html>
<head>
    <title></title>    
</head>
<style type="text/css">
BODY { background-color: #FFFFFF; font: 11px Arial; margin: 0px; text-align: center; }
#decoracio{ background-image: url('taudalt.gif'); background-repeat: repeat-x; height: 6px!important; }
#contenidor{ margin: auto; text-align: left; width: 770px; }
#dalt{ background-color: #00CCFF; color: #FFFFFF; font-size: 12pt; font-weight: bold; margin-top: 20px; text-indent: 10px; /* sangria de 10px; */ }
#dalt2{ background-color: #282828; /*align: center;*/ width: 770px; }
#dalt3{ background-color: #282828; height: 62px; margin: 0 auto; }
#cos{ margin-top: 15px; }
#lateral{ background-color: #F6F5F5; float: left; width: 160px; }
#central{ float: right; /*margin-left: 170px;*/ margin: auto; width: 600px; }
#dins{ width: 400px; }
#dinss{ background-color: #282828; color: #FFFFFF; float: right; text-align: center; width: 190px; }
h5{ font-size: 95%; margin: 0; }
#peu{ background-color: #F3F3F3; clear: both; margin-top: 20px; text-align: center; width: 100%; }
*
.negrita{ font-size: 12px; font-weight: bold; }
/* Menu Horizontal */ 
#menu { border: none; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; /* es mejor manejarlo todo en pixels, mayor presición, cualquier navegador lo entiende */ font-weight: bold; height: 25px; }
#menu img{ border: none; float: left; /* siempre colocado a la izquierda del contenedor */ margin-right: 50px; /* separación con los botones del menu */ }
#menu ul { list-style-type: none; /* ningun simbolo para las listas o viñetas */ margin: 0; padding: 20px 0 20px 0; }
#menu li { display: inline; /* disposición en linea recta de botones */ }
#menu a { background: url(boto2_1.gif) no-repeat left top; float: left; /* parte izquierda del boton siempre a la izquierda */ padding: 0 0 0 3px; text-decoration: none; }
#menu a span { background: url(boto2.gif) no-repeat right top; /* completamos el boton */ color: #000000; display: block; padding: 6px 18px 9px 10px; text-align: center; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span { float: none; }
/* End IE5-Mac hack */
#menu a:hover span { color: #FFFFFF; }
#menu a:hover { background: url(boto1_1.gif) no-repeat left top; }
#menu a:hover span { background: url(boto1.gif) no-repeat right top; }
#menu #current a { background: url(boto1_1.gif) no-repeat left top; /* boton seleccionado por defecto */ }
#menu #current a span { background: url(boto1.gif) no-repeat right top; color: #FFFFFF; }
/* Fin Menu Horizontal */
em { color: #00CCFF; font-weight: bold; padding: 0 4px 0 4px; }
.tusencuestas_pregunta { font-weight: bold; }
</style>
<body>
<div id="dalt3">
<div id="contenidor"> <!-- Centramos imagen y menu al tamaño de la página 770px -->
    <div id="menu">
    <img src="logo.gif" width="273" height="62">
         <ul>
             <li id="current"><a href=""><span>INICI</span></a></li>
            <li><a href=""><span>LLOC</span></a></li>
            <li><a href=""><span>HORARIS</span></a></li>
            <li><a href=""><span>GRUPS</span></a></li>
            <li><a href=""><span>FIRMA</span></a></li>
         </ul>
      </div>
    </div>
</div>
<div id="contenidor">
    <div id="dalt">Meruts festival</div>
    <div id="cos"></div>
    <div id="lateral">           
        <div id="decoracio"></div>
        Aquí va la encuesta 
    </div>
    
    <div id="central">
        <div id="decoracio"></div>
        <div id="dinss"> publicitat </div>
        <div id="dins">
            <h5>SOBRE EL MERUT'S FESTIVAL</h5>
            <span>El<em>merut's festival</em>es presenta enguany com una aposta per bla bla bla.</span>
        </div>
    </div>
    <div id="peu">
        <span class="negrita">Merut's Festival 2007</span><span>- Contacte - Publicitat - Horaris - Lloc - Grups</span></div>
    </div> 
</div>
</body>
</html>

las imagenes:

espero que te sirva.

glayvin · #7 (**permalink**) 02/02/2007, 19:44

Muchas gracias a todos me habéis sido de gran ayuda ;)

Jorasa: Lo de #decoracio si que se solucionaba con font-size : 1px; ,perfecto.
Lo de las capas no me ha acabado de funcionar.

Ruben_JD: Todo perfecto. Lo he subido aquiHe añadido al #menu ul { float: right;} para ver las casillas del menú a la derecha. .Muchas gracias por el trabajo que has realizado.

Saludos!

Ruben_JD · #8 (**permalink**) 03/02/2007, 15:26

Revisando y si se puede mejorando he aprendido algo de css.
Gracias y suerte.