Posicionament <DIV>

Josep

unread,

Jan 23, 2008, 4:09:57 AM1/23/08

to DeCSS

Bon dia,

tinc un problema amb el posicionament d'una capa. Us passo un codi
d'exemple a veure si algu em pot donar un cop de ma. El problema el
tinc en la capa 'pie' es que hauria de sortir per sota de 'cuerpo'. El
que passa es que la capa 'cuerpo' varia d'alçada ja que a dins
d'aquesta n'hi ha 3 que varien. Llavors la capa 'pie' ha d'estar uns
30 pixels per sota de la finalització de 'cuerpo'.

Aqui va el codi.

Moltes gràceis. ;-)

<html>
<head>
<title>Proba de capes</title>
<style type="text/css">

</style>
</head>
<body>
<div class="grupo">
<div class="cabecera">cabecera</div>
<div class="cuerpo">
<div class="izquierda">izquierda</div>
<div class="central">central</div>
<div class="derecha">derecha</div>
</div>
<div class="pie">pie</div>
</div>
</body>
</html>

Sergi Faber

unread,

Jan 23, 2008, 5:48:51 AM1/23/08

to de...@googlegroups.com

El 23/01/08, Josep <josep...@hotmail.com> ha escrit:

Bon dia,

Hola Josep,

tinc un problema amb el posicionament d'una capa. Us passo un codi
d'exemple a veure si algu em pot donar un cop de ma. El problema el
tinc en la capa 'pie' es que hauria de sortir per sota de 'cuerpo'. El
que passa es que la capa 'cuerpo' varia d'alçada ja que a dins
d'aquesta n'hi ha 3 que varien. Llavors la capa 'pie' ha d'estar uns
30 pixels per sota de la finalització de 'cuerpo'.

Aqui va el codi.

Crec que el que passa és que estàs emprant posicionament absolut i relatiu sense massa criteri, no és cap crítica negativa, al contrari, no és sencill aclarir-se quan un comença a tocar CSS sense una base clara. T'aconsello, en anglès un parell d'articles que segur que t'ajuden molt [1] [2].

Veig que vols fer el tipic layout amb capçalera, cos a tres columnes i peu. Per això t'aconsello que repassis bé els 2 articles. Penso que si flotes les columnes centrals ho tindràs molt millor. Pots veure'n un exemple millor [3], si no requereixes que cada columna tingui un border o un color de fons diferent Pensa que el peu tal com el tens definit es comporta com tu li has indicat: deixa 20px de marge per sobre i 0 per l'esquerra, però com que les columnes del cos central també van posicionades abolutament doncs hi passa per sobre.

[1] http://www.digital-web.com/articles/web_design_101_positioning/
[2] http://www.digital-web.com/articles/web_design_101_floats/
[3] http://glish.com/css/ Mira't els quick links to layouts. Si ho vols afegir un peu et serà sencill després d'entande bé com funciona el posicionament css.

Sense lectura bàsica els exemples no t'ajudaran més que en cada cas concret.

Salut!

--
Sergi Faber

edu

unread,

Jan 23, 2008, 6:40:47 AM1/23/08

to de...@googlegroups.com

totalment d'acord amb el sergi.

S'haurien d'eliminar tots els "position" i jugar amb els "float" i marges.

Ha Smashing Magazine [1] fa poc van fer un recull de Layouts i Templates de CSS:
[1] http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/

A veure si et serveix...

2008/1/23 Sergi Faber <sergi...@gmail.com>:

Moebius

unread,

Mar 20, 2008, 8:38:17 AM3/20/08

to DeCSS

Bones.

Actualitza als estils que he canviat.

<!--
.grupo { margin: 25px 132px; padding: 0px; width: 975px; }
.cabecera { margin: 0px; border-bottom: 0px; padding: 0px; background-
color:#FF0000; }
.cuerpo { margin: 20px 0px 0px 0px; padding: 0px; }
.izquierda { float:left;margin: 0; padding: 0px; width: 194px; height:
70px; background-color:#00CC00; }
.central { float:left; margin: 0 0 20px 18px; width: 474px; height:
70px; background-color:#CC9966; }
.derecha { float:left; margin-left:18px; border: 0px;padding: 0px;

width: 271px; height: 70px; background-color:#9966FF; }

.pie { clear:left; margin: 20px 0px 40px 0px; padding: 0px; background-
color:#FFFF66; }
-->

Els border:0px, no son necessaris, a menys que els heredis un border
de una clase pare.
Compara amb el que tens fet i com sempre el millor i el que et donarà
experiència son els errors i les posibles solucions.

Et recomano tb el plugin de Firefox Web developer per anar trastejant.
(http://chrispederick.com/work/web-developer/)

On 23 Gen, 12:40, edu <biochip...@gmail.com> wrote:
> totalment d'acord amb el sergi.
>
> S'haurien d'eliminar tots els "position" i jugar amb els "float" i marges.
>
> Ha Smashing Magazine [1] fa poc van fer un recull de Layouts i Templates de
> CSS:

> [1]http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templ...

>
> A veure si et serveix...
>

> 2008/1/23 Sergi Faber <sergifa...@gmail.com>:
>
> > El 23/01/08, Josep <josep_b...@hotmail.com> ha escrit:

>
> > > Bon dia,
>
> > Hola Josep,
>
> > tinc un problema amb el posicionament d'una capa. Us passo un codi
> > > d'exemple a veure si algu em pot donar un cop de ma. El problema el
> > > tinc en la capa 'pie' es que hauria de sortir per sota de 'cuerpo'. El
> > > que passa es que la capa 'cuerpo' varia d'alçada ja que a dins
> > > d'aquesta n'hi ha 3 que varien. Llavors la capa 'pie' ha d'estar uns
> > > 30 pixels per sota de la finalització de 'cuerpo'.
>
> > > Aqui va el codi.
>
> > Crec que el que passa és que estàs emprant posicionament absolut i relatiu
> > sense massa criteri, no és cap crítica negativa, al contrari, no és sencill
> > aclarir-se quan un comença a tocar CSS sense una base clara. T'aconsello, en
> > anglès un parell d'articles que segur que t'ajuden molt [1] [2].
>
> > Veig que vols fer el tipic layout amb capçalera, cos a tres columnes i
> > peu. Per això t'aconsello que repassis bé els 2 articles. Penso que si
> > flotes les columnes centrals ho tindràs molt millor. Pots veure'n un exemple
> > millor [3], si no requereixes que cada columna tingui un border o un color
> > de fons diferent Pensa que el peu tal com el tens definit es comporta com tu
> > li has indicat: deixa 20px de marge per sobre i 0 per l'esquerra, però com
> > que les columnes del cos central també van posicionades abolutament doncs hi
> > passa per sobre.
>
> > [1]http://www.digital-web.com/articles/web_design_101_positioning/
> > [2]http://www.digital-web.com/articles/web_design_101_floats/

> > [3]http://glish.com/css/Mira't els quick links to layouts. Si ho vols

Reply all

Reply to author

Forward