Foros del Web » Creando para Internet » CSS »

Problema con maquetacion en CSS

Estas en el tema de Problema con maquetacion en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/02/2007, 10:30
 
Fecha de Ingreso: mayo-2005
Mensajes: 109
Antigüedad: 12 años, 7 meses
Puntos: 0
Problema con maquetacion en CSS

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.
  #2 (permalink)  
Antiguo 02/02/2007, 10:36
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Problema con maquetacion en CSS

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!
  #3 (permalink)  
Antiguo 02/02/2007, 14:23
 
Fecha de Ingreso: mayo-2005
Mensajes: 109
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Problema con maquetacion en CSS

Lo que me dice en la validación no afecta a la estructura que me da el problema.
  #4 (permalink)  
Antiguo 02/02/2007, 15:58
 
Fecha de Ingreso: abril-2005
Mensajes: 22
Antigüedad: 12 años, 8 meses
Puntos: 0
Re: Problema con maquetacion en CSS

En el DIV #decoracio establece la propiedad:

font-size : 1px;

Y comprueba si te respeta la altura que has establecido
  #5 (permalink)  
Antiguo 02/02/2007, 16:10
 
Fecha de Ingreso: abril-2005
Mensajes: 22
Antigüedad: 12 años, 8 meses
Puntos: 0
Re: Problema con maquetacion en CSS

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>
  #6 (permalink)  
Antiguo 02/02/2007, 19:00
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: Problema con maquetacion en CSS

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.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #7 (permalink)  
Antiguo 02/02/2007, 19:44
 
Fecha de Ingreso: mayo-2005
Mensajes: 109
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Problema con maquetacion en CSS

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!

Última edición por glayvin; 02/02/2007 a las 20:12
  #8 (permalink)  
Antiguo 03/02/2007, 15:26
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: Problema con maquetacion en CSS

Revisando y si se puede mejorando he aprendido algo de css.
Gracias y suerte.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:39.