Forum PHP.pl > [css,xhtml] Pozycjonowanie w DIV

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css,xhtml] Pozycjonowanie w DIV

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

easy

14.01.2004, 21:24:39

Zrobiłem strone css,xhtml opartą o DIVy zamias tabel uklad jest taki:

Kod

|----------------------------|

|    baner          |

|----------------------------|

|    logo           |

|----------------------------|

|    menu           |

|------|---------------|-----|

| l    |    c       |p  |

|      |         |   |

|      |         |   |

|      |           |   |

|------|---------------|-----|

|    stopka         |

|----------------------------|

css:

Kod

#site {

    width: 780px;

    width: 780px;

    width: 780px;

    margin-left: auto;

    margin-right: auto;

    background-image: url(images/bg.gif);

    background-repeat: repeat-y;

}

#main {

    width: 778px;

    width: 778px;

    width: 778px;

    margin-left: 1px;

    margin-right: 1px;

}

#banner {

    padding: 0;

    margin-bottom: 0px;

    height: 60px;

    background-image: url(images/bg_up.gif);

    background-repeat: repeat-x;

}

#logo {

    clear: both;

    padding: 0px;

    margin-top: 0px;

}

#menu {

    padding: 0px;

    margin-bottom: 0px;

    background-image: url(images/bg_menu.gif);

    background-repeat: repeat-x;

    height: 25px;

}

#menu_l {

    float: left;

    width: 140px;

    width: 140px;

    width: 140px;

    margin: 0;

    margin-right: 0px;

    padding: 0;

}

#menu_r {

    float: right;

    width: 140px;

    width: 140px;

    width: 140px;

    margin: 0;

    margin-left: 0px;

    padding: 0;

}

#site_content {

    float:none;

    margin-left: 140px;

    margin-right: 140px;

    background-image: url(images/bg_center.gif);

    background-repeat: repeat-y;

    vertical-align: top;

}

#footer {

    clear: both;

    padding: 0px;

    margin-top: 0px;

    height: 35px;

    background-image: url(images/page_down.gif);

    background-repeat: no-repeat;

}

Nie mam pojęcia co zrobić a by w DIVie C wysztkie elementy były u góry (coś jak valgin="top"), w FireBirdzie wszystko jest okej, problem pojawia sie w IE

wszystko jest u dołu, chodzi mi oczywiscie o to aby tu i tu bylo dobrze.

yoyo

15.01.2004, 00:41:17

[xml:1:822c9c169d]width: 780px;
width: 780px;
width: 780px; [/xml:1:822c9c169d]

Tak tylko na marginesie - te 3 linijki są równoważne, nie potrzebnie używasz tych tricków jeśli ustawiasz je wszystkie na tą samą szerokość.[/xml]

easy

15.01.2004, 12:36:42

Heh, własnie spostrzegłem ciekawa rzecz, zawartosc C zaczyna sie pojawiac na poziomie tego co kończy się akurat w menu po lewej wykasuje je i leci do góry 8O (oczywiście w IE)

Dominik

15.01.2004, 16:21:00

Cytat

Tak tylko na marginesie - te 3 linijki są równoważne

W teorii tak w praktyce nie

Sa to hacki do IE i czasami do Opery.

yoyo

15.01.2004, 22:26:39

Cytat

Tak tylko na marginesie - te 3 linijki są równoważne

W teorii tak w praktyce nie

Sa to hacki do IE i czasami do Opery.

hehe, wiem doskonale o tym, chodzi mi o to, że wszystkie trzy linijki mają tą samą wartość

Seth

15.01.2004, 22:54:04

[b]Warning: Off-topic

easy

16.01.2004, 14:48:35

Heh, udało mi się zaradzić jakoś, wygląda że teraz jest okej.

Kod

#banner {

    padding: 0;

    margin-bottom: 0px;

    height: 60px;

    background-image: url(images/bg_up.gif);

    background-repeat: repeat-x;

}

#logo {

    clear: both;

    padding: 0px;

    margin-top: 0px;

}

#menu {

    padding: 0px;

    margin-bottom: 0px;

    background-image: url(images/bg_menu.gif);

    background-repeat: repeat-x;

    height: 25px;

}

#menu_l {

    float: left;

    width: 140px;

    width: 140px;

    width: 140px;

    margin-top: 0px;

}

#menu_r {

    float: left;

    width: 140px;

    width: 140px;

    width: 140px;

    margin-top: 0px;

}

#site_content {

    float: left;

    width: 498px;

    width: 498px;

    width: 498px;

    vertical-align: super;

    background-image: url(images/bg_center.gif);

    background-repeat: repeat-y;

}

#footer {

    clear: both;

    padding: 0px;

    margin-top: 0px;

    height: 35px;

    background-image: url(images/page_down.gif);

    background-repeat: no-repeat;

}

Plus zamaina kolejności divów w stronie.
Topic close :idea:

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.