[css,xhtml] Pozycjonowanie w DIV Opcje

[easy]

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 (IMG:http://forum.php.pl/style_emoticons/default/angrysmiley.gif) wszystko jest u dołu, chodzi mi oczywiscie o to aby tu i tu bylo dobrze.

[yoyo]

[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]

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]

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

W teorii tak w praktyce nie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Sa to hacki do IE i czasami do Opery.

[yoyo]

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

W teorii tak w praktyce nie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) 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ść (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[Seth]

[b]Warning: Off-topic

[easy]

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: