Comunidad de diseño web y desarrollo en internet online

[css]Problemas con css2... Float y alinear verticalmente...

Citar            
MensajeEscrito el 04 May 2006 08:13 pm
Buenas y Santas... la verdad es que me llevo medio de los pelos con css2 :crap:

Tengo, particularmente dos problemas...

1) cuando pongo en un contenedor div's con float al final del contenido, el contenedor no se "alarga" para contener esos divs.
2) se me complica mucho alinear verticalmente elementos y textos dentro de los div's.

Aca va un ejemplo para ver en FF:

http://www.rdgimenez.com/blog/index.php

En este ejemplo que les paso se ven losdos problemas que mas me urgen (vamos, q deben haber mas :oops: ).
Para no dar as vueltas, el contenedor blanco no se "estira" y no puedo alinear los textos en los botones de la izqauierda...

Aca va el codigo para ver si pueden explicarme un poco que es lo que estoy haciendo mal:

HTML:

Código :

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>|| Darío! Gimenez ||</title>
</head>
<body>
<center>
  <div id="contenedor">
    <div id="head"></div>
    <div id="headImg"></div>
    <div id="contenido">
      <div id="main"></div>
      <div id="botonera">
        <ul>
          <li>Menu Uno</li>
          <li>Menu Dos</li>
          <li>Menu Tres</li>
          <li>Menu Cuatro</li>
        </ul>
      </div>
    </div>
  </div>
</center>
</body>
</html>
CSS:

Código :

body{
   padding:10px;
   margin:0px;
   background-color:#c7c2b0;
}
#contenedor{
   margin:0px auto;
   /*margin:0px;*/
   padding:0 0 0 0;
   width:800px;
   border:1px solid #000;
   background-color:#FFF;
}
#contenedor div{
   margin:20 0 20 0;
}
#head{
   padding:0px;
   width:760px;
   height:100px;
   border:1px solid #000;
   background-color:#c7c2b0;
   background-image:url(../img/logo.jpg);
   background-position:right;
   background-repeat:no-repeat;
}
#contenido{
   padding:0px;
   width:760px;
   text-align:left;
}
#contenido div{
   margin:0px;
}
#headImg{
   padding:0px;
   width:760px;
   height:350px;
   border:1px solid #000;
   background-image:url(../img/headImg.jpg);
   background-position:left;
   background-repeat:no-repeat;
}
#main{
   padding:10px;
   border:1px solid #000;
   background-color:#fbf4e2;
   width:488px;
   float:left;
}
#botonera{
   margin-right:20px;
   padding:0px;
   width:250px;
   text-align:left;
   float:right;
}
#botonera ul{
   margin:0 0 0 20;
   padding:0px;
}
#botonera ul li{
   font:11px verdana;
   color:#000;
   margin:0 0 10 0;
   width:230px;
   height:30px;
   list-style:none;
   border:1px solid #000;
   background-color:#c2b292;
}

Desde ya muchisimas gracias por su atencion ^^

Por Dario!

28 de clabLevel



Genero:Masculino  

Capital Federal - BsAs - Argentina

firefox
Citar            
MensajeEscrito el 04 May 2006 11:06 pm
Cuando usas float pones el div a flotar por lo tanto ya no ocupa por decirlo así espacio del contenedor. Esto se soluciona con el clear. Ramm me comento está solución.

despues del div botonera pones esta div

Código :

<div id="botonera">contenido de botonera</div>
<div class="clear"></div>


En el css

Código :

.clear{clear:both}

Y listo espero sea lo que necesitabas.

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

 

Manizales city

firefox
Citar            
MensajeEscrito el 05 May 2006 12:04 am
Excelente!, coyr... muchisimas gracias... solo me resta saber como centrar verticalmente elementos en un contenedor, en este caso un texto... lo que voy a hacer, hasta q encuentre una solucion mas ortodoxa, es darle mas padding-top :$

Por Dario!

28 de clabLevel



Genero:Masculino  

Capital Federal - BsAs - Argentina

firefox
Citar            
MensajeEscrito el 05 May 2006 02:13 pm
Cuando usas tablas hay una propiedad vling que permite que puedas trabajar con ello. En las divs hasta donde tengo entendido no existe una propiedad para remplazar el vling de las tablas o simularlo. En CSS hay una propiedad vertical-align: <valor>, pero esta solo se aplica a elementos en linea. Así que en este caso no te funcionará. En definitica NPI de como hacerlo. Allí es donde entra tu imaginación para solucionar el problema XD XD XD. Si encuentro algo al respecto lo posteo (y).

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

 

Manizales city

unknown
Citar            
MensajeEscrito el 05 May 2006 02:44 pm
Bueno mira he aquí la solución a la alineación vertical...

html

Código :

<div id="exter">
   <div id="centro">
      <div id="cont">
        <p>Se supone que debo estar en el centro</p>
      </div>
   </div>
</div>


css

Código :

#exter{height: 400px; overflow: hidden; position: relative;}
#exter[id] {display: table; position: static;}

#centro {position: absolute; top: 50%;} /* Solo para explorer*/
#centro[id] {display: table-cell; vertical-align: middle; position: static;}

#cont {position: relative; top: -50%} /* Solo para explorer */
/* opcional: #cont[id] {position: static;} */
</style>


Y es codigo válido :o

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

 

Manizales city

unknown
Citar            
MensajeEscrito el 05 May 2006 04:40 pm
encontre el mismo codigo ^^ muchisimas gracias por la colaboracion! posteare el trabajo terminado... see you...

Por Dario!

28 de clabLevel



Genero:Masculino  

Capital Federal - BsAs - Argentina

unknown
Citar            
MensajeEscrito el 06 May 2006 04:28 am
Jajaja! Display de tablas, vertical-align middle y CSS2 (#exter[id]), que divertido.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

unknown
Citar            
MensajeEscrito el 06 May 2006 02:27 pm
Desde luego estas soluciones no van mucho con una Web semantica 101% :P :cry:

Por Coyr

Claber

1048 de clabLevel

2 tutoriales

 

Manizales city

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.