Maquetación web con divs

suaveSHOW

Buenas, tras haber estado este último año en el que aprendí a maquetar páginas web con tablas, me he decidido a dar el gran paso a los divs & css 100% :D.

Estoy ahora mismo con uno probando, y me gustaría saber una serie de cosas.
1º Como hacer que al pasar el ratón por encima de un div, este cambie su imagen de fondo, y al apartarlo, poner la predeterminada.
2º Que metodo puedo hacer para saltos de linea que no sean <br> (para el texto si que usaré este)

Y bueno, si es posible, que alguien me pase alguna página que os parezca buena que te ayuden a controlar al 100% divs y css.

Fr4nk0

Para el 1) lo que se usa es la propiedad hover de Css. Si tu tienes un div con id div1 por ejemplo el css sería:

#div1{
background-image: url(ruta_imagen_normal_div);
}

#div1:hover{
background-image: url(ruta_imagen_al_pasar_el_raton_por_encima);
}

Con eso consigues que cuando pases por encima del div con id div1, se cambie el fondo y cuando salgas del div (con el raton) vuelva a su fondo normal.

Para el 2) depende, con las propiedades css margin y padding puedes simular saltos de línea. Además los div por definición , su display es block, y tienen un salto de línea antes y después del div (por definición).

Shock

Cuidado porque la propiedad hover de un 'div' en IE6 no funciona, los hovers sólo funcionan con 'a' en IE6.

suaveSHOW

Pero muchas veces pongo margins y paddings y "no me hacen caso" y tengo que poner position:absolute.

Shock

#4 Un margin te hará caso -edit- generalmente -edit- que estés en position:relative y un padding te tiene que hacer caso siempre. Por ejemplo:

.ejemplo_div {
position:relative;
float:left;
margin-top:50px;
padding:5px;
}

Te crearía una clase de un div (div class="ejemplo_div") en posición relativa a su div contenedor (si tuviera), flotando a la izquierda, dejando un margen con cualquier objeto HTML que tuviera arriba de 50 píxeles y con un padding interior del div de 5 píxeles.

Además te aconsejo que uses el Firefox y te bajes el Firebug, que es un addon para Firefox que para maquetar ayuda muchísimo, se usa a nivel profesional en maquetación de páginas webs.

Fr4nk0

Es cierto, como dice #3 la propiedad hover solo funcionan con los a en IE6.
Para que funcione bien, tienes que hacerlo con javascript, por ejemplo

window.onload=function(){  //o si usas jquery $(document).ready(function(){.... });
document.getElementById("id_del_div").onmouseover = "Funcion para cambiar el fondo por javascript";

document.getElementByUd("id_del_div").onmouseout = "Funcion para volver a poner el fondo original";
}

Para esto, si usas JQuery que funciona en todos los navegadores te ahorraras mucho trabajo :D

Crawler

#5 Un margin te hará caso siempre que estés en position:relative

Discrepo.

Un margin te hará caso siempre que estés en un elemento block y no en un inline.

<a href="#" id="tal">enlace</a>

#tal{margin: 40px 0;position:relative;} No me hace nada.

#tal{margin: 40px 0;display: block;} Asi si me funciona.

Y créeme, me había emocionado pensando que me habías enseñado algo nuevo en css, que hace ya meses que creo que no me queda nada por ver :P

Volviendo a #1:

No tengo ninguna web que lo explique "todo", asi que voy a intentar hacerte un miniresumen (siempre digo que escribiré esto un día, pero lo dejo incompleto...)

0.- (opinión personal) Utiliza xhtml, puedes conseguir una buena base leyendo "XHTML + CSS de una maldita vez! de Belen Albeza (http://cafeina.ladybenko.net/?page_id=5).
Yo preferí empezar usando XHTML Strict que te limita más, una vez que ya queria hacer cosas que el DTD strict no me dejaba, vi ventajas/inconvenientes de usar transitional.

1.- (básico e indiscutible!) Utiliza algun tipo de "reset css", yo suelo usar el de Eric Meyer (con algún añadido), pero hay varios.
Esto evita muchos problemas de compatibilidad de navegadores.
El primer css al que tienes que llamar desde tu html, es a este.

2.- (este punto es bastante personal) Para empezar, utiliza los "position" lo menos posible. Con todo por defecto (static), utilizando floats y clears, ya puedes hacer 1000 cosas. y te evitarás problemas de posicionamiento según que navegadores.

3.- Aprende a controlar floats.
http://css.maxdesign.com.au/floatutorial/ y el todopoderoso hack:
http://www.planseldon.com/blog/hasta-siempre-clearboth/

4.- Utiliza listados para crear menús:
http://css.maxdesign.com.au/listutorial/index.htm
(quizá no sea la mejor web, pero como me gustó el tutorial de floats...)

Y solo con eso, ya tienes para un rato ;)

Shock

#7 Tiene razón, "siempre" son demasiadas veces, más bien diré "generalmente" xD

suaveSHOW

Gracias por todo, iré probando.
La verdad es que xhtml lo manejo casí a la perfección, pero me faltan cosas que ignoro su utilidad.
Lo de resets css no te entiendo, y los hacks ya lo miraré cuando maneje 100% el css.

Cuando termine la página que estoy haciendo con divs la pondré por aquí para que me digais como mejorarlo en caso de poder muahaha :)

mOrK2

lo de la pagina, www.google.com

css tutiral -> go

Crawler

#9 Pongamos por caso, que para Internet explorer el margen por defecto para cada elemento es de 5 pixeles, mientras que para firefox es de 0, para safari de 2px... etc (es solo un ejemplo, pero pasa con algunas cosas) por cada objeto que creásemos tendríamos hasta 5px de error.

La idea es que por css, lo primero que haces es definir "todo". Si dices que ese margen es 0, será 0 para todos los navegadores, por que ya no pillará el valor default.

Seguro que leyendo el css te enteras mejor de que va el tema:

/* reset css /
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/
remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
height: 100%;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
legend{white-space:normal;}
strong{font-weight: bold;}
p{line-height: 1.2em;}

Más o menos es un "coge todo, ponle margen 0, espaciado 0, color negro, fondo blanco, etc.. y a partir de aqui, empezamos"

Si empiezas tu hoja de estilos css con lo que te he pegado arriba, te ahorrarás un gran número de dolores de cabeza ;)

suaveSHOW

Gracias, no sabía que cada explorador tuviera un default distinto :) entonces si habría entendido lo de reset css.

Creo que con lo que me habeís dicho podré seguir mi travesía de los divs :D

NeB1

#12 y además te dejo un pequeño script que te permite usar la propiedad :hover en cualquier elemento para cualquier explorador

http://www.anieto2k.com/2008/12/22/whateverhover-selector-hover-para-todos-los-navegadores/

Usuarios habituales

  • NeB1
  • suaveSHOW
  • Crawler
  • mOrK2
  • Shock
  • Fr4nk0