Posicionamiento con CSS Publicada el Domingo 3 de Junio de 2007 a las 4:20 pm por Infected-FX
Eden nos trae un tutorial que muchas veces nos puede sacar de apuros al poner dos elementos como flotantes, cuando usamos esto generalmente si tenemos un contenedor se desplaza y no quedan en "el bloque" que deseamos, no sé a ustedes pero a mi más de una vez me ha pasado... sin embargo esta técnica les puede resultar muy útil.
No pude resistirlo y viendo el tutorial me saltó algo a la cabeza que últimamente también he usado y resulta bastante bueno. Siguiendo el mismo tutorial de Eden, en el último paso, encontramos el ID container, lo que haremos será quitarle el height:300px; y ponerle overflow:auto;, de tal forma que la CSS quedaría así:
CSS:
-
#container{
-
position:relative;
-
margin:0 auto;
-
overflow:auto;
-
width:60%;
-
background:#ddd url(http://www.edenahp.net/img/gradients/negro.png) top repeat-x;
-
border:1px solid #aaa;
-
}
Esa es otra opción ;)
MeTaL_oRgY
Junio 3, 2007 a las 8:48 pm
También he adoptado el “limpiar” los contenedores de elementos flotantes sin agregar marcado extra el HTML y usando solo CSS. Definitivamente nos da un código más limpio (y se ve más profesional. ;)). Lo mejor de todo es que funciona en Internet Explorer sin problemas. :P aunque yo uso el contenido generado por CSS, simplemente es cuestión de gustos. ;)
¡Un saludo, hermano!
Eden
Junio 4, 2007 a las 2:27 am
claro eso es otra opcion de floats :) yo lo hice con alturas fijas y me faltó decir eso :)
Saludos!
nyght
Junio 4, 2007 a las 9:19 am
mmm disculpa metal_orgy pero no entendi muy bien a que te refieres con “sin agregar marcado extra el HTML y usando solo CSS” ???
Eden
Junio 5, 2007 a las 2:12 am
kiere decir ke no has de usar en el html el style=”noseke:nosecuantos” sino ke ya viene definido en el css
creo ke es eso
Saludos!
Lucas
Junio 5, 2007 a las 2:14 pm
WUAAAAAUUUU APLAUSOS PARA EDEN Y PARA VOSS DUEÑO DEL BLOG (QUE NO SE TU NOMBRE)… realmente son increibles hace una semana que estoy luchando con ese problema del overflow, si bien ahora el conteiner llega hasta abajo, ahora abajo me aparece un barra de dezplazamiento, como si fuera un frame, alguien me podria decir como sacarla¿?¿?¿? o a que se debe¿?¿?¿? la verdad que necesito su ayuda, me seria muy util si me ayudaran.
Nos vemos,
Lucas.
Sil
Junio 6, 2007 a las 2:08 am
Te felicito por este espacio tan interesante que administras, te alento para que sigas con esta misma calidad de trabajo.
Mi interés se centran en como puedo hacer esos efectos que haz logrado con la implementación de CSS, como por ejemplo el visualizar=ocultar el codigo al hacer click en HILITED HTML .
Agradecería muchisimo tu ayuda.
Gracias!
Juanjo Vargas
Junio 6, 2007 a las 4:05 pm
lucas, ese efecto puede ser producido porke el contenido de la web es mas ancho que el tamaño de ancho que has asignado al body… sino no lo entiendo :S
ejemplo, tienes esto:
body {width:800px}
#content{width:850px}
Si usas el div content seguro ke tendras un scrollbar pk es mas grande ke el body y esta en su interior ;)
revisa el codigo y hablamos. si kieres, compartelo conmigo e intentare mirar donde esta el fallo: eden14@gmail.com
Saludos!
javita
Junio 9, 2007 a las 12:37 am
hola amigos.. paseando por la web encontre esta ayuda q me es de utilidad pero no se como usarla…
la verdad es q soi principiante i para empezar me meti a editar una plantilla para blogger…. o mas bien a hacerla denuevo sobre una ya estructurada, pero al hacer esto me ocurrio el problema q describen aqui i no se como pueda arreglarlo…
si alguien me kiere ayudar me seria de gran ayuda.
no sé como hacer para publicarles el codigo a ver si lo pueden arreglar… les dejo mi correo por si alguien me kiere ayudar
de antemano muchas gracias
un abrazo
(jovoska@hotmail.com)