[HTML, CSS]podivne chovani divu ve Firefoxu

[Zorb]

Predem upozornuji, ze jsem zacatecnik.V IExploreru a Opere se stranka zobrazuje celkem podle mojich predstav.Nedokazu pochopit proc ve Firefoxu se DIV s id obsah radi pod menu a neni vedle neho.Stranky jsou teprve v rane fazi tak prosim omluvte jistou nedodelanost a neusporadanost CSS.

    <div id="hlavni">
      <div id="hlavni2">
        <div id="nadpis">
          [img]menu_img/nadpis.gif[/img]
        </div>
        <div id="body">
          <div id="menu">
            <div class="menubutton">
              neco
            </div>
            <div class="menubutton">
              neco
            </div>
            <div class="menubutton">
              neco
            </div>
            <div class="menubutton">
              neco
            </div>
            <div class="menubutton">
              neco
            </div>
            <div class="menubutton">
              neco
            </div>
          </div>
          <div id="obsah">
            <table width="590" align="center" border="0">
              <tr>
                <td id="ramecekNadpis">
                </td>
              </tr>
              <tr>
                <td id="ramecekObsah">
                  .....................
              </tr>
            </table>
            <table width="590" align="center" border="0">
              <tr>
                <td id="ramecekNadpis">
                </td>
              </tr>
              <tr>
                <td id="ramecekObsah">
                  .....................
                </td>
              </tr>
            </table>
            <table width="590" align="center" border="0">
              <tr>
                <td id="ramecekNadpis">
                </td>
              </tr>
              <tr>
                <td id="ramecekObsah">
                  .....................
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

body {
	font-family: verdana, sans-serif, helvetica, arial;
	font-size: 11px;
	background-color: #70ad08;
}
/* layout */
#hlavni {
	position: absolute;
	top: 0px;
	width: 100%;
	text-align: center
}
#hlavni2 {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-color: #FFFFFF;
	height: auto;
}
#nadpis {
	width: 790px;
	height: 120px;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px
}
#body {
	width: 790px;
	background-color: #FFFFFF;
	margin-left: 5px;
	margin-right: 5px
}
#menu {
	width: 160px;
		margin-top: 20px;
	height: auto;
	float: left;
	border: 2px solid Black;
}
#obsah {
	width: 600px;
	height: 100%;
	background-color: #FFFFFF;
	border: 2px solid Green;
}
#ramecekNadpis {
	width: 590px;
	height: 20px;
	background-color: #b1df1c;
	font-size: 15px;
	font-weight: bold
}
#ramecekObsah {
	width: 590px;
	background-color: #e8f6bd;
	padding-right: 4px;
	padding-left: 4px;
}

/* classes */
.menubutton {
	width: 160px;
	height: 20px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	float: left;
	background-color: #d6d6d6;
	margin-top: 2px;
}

[Kaltas]

Jsem hrozně ospalej a nechce se mi to zkoušet, ale zkus dát divu obsah

float: right;
display: inline;

a divu menu

display: inline;

[Zorb]

Porad to nefunguje tak jak bych si predstavoval.Ted se to chova jako by to nebyl potomek divu body (chyby tomu pozadi)

[Jezevec]

V FF se to radi spravne, teda vzhledem k tomu CSS a kodu, DIV je jak znamo blokovy element => neco jako odstavec, takze DIVy na stejne urovni proste maji byt pod sebou.

Mas dve moznosti, bud das divu position a umistis ho pomoci toho, nebo zmenis strukturu stranky.

[Skodik]

V FF se to radi spravne, teda vzhledem k tomu CSS a kodu, DIV je jak znamo blokovy element => neco jako odstavec, takze DIVy na stejne urovni proste maji byt pod sebou.

Mas dve moznosti, bud das divu position a umistis ho pomoci toho, nebo zmenis strukturu stranky.

jezisi jen ne position: relative !! Tohle jsem provozoval driv a je s tim vice skody nez uzitku! Naucte se pouzivat uzasne mocny avsak primitivni prikaz float. A pak si ty divy muzete radit v poho vedle sebe.

[jedik]

V FF se to radi spravne, teda vzhledem k tomu CSS a kodu, DIV je jak znamo blokovy element => neco jako odstavec, takze DIVy na stejne urovni proste maji byt pod sebou.

Mas dve moznosti, bud das divu position a umistis ho pomoci toho, nebo zmenis strukturu stranky.

jezisi jen ne position: relative !! Tohle jsem provozoval driv a je s tim vice skody nez uzitku! Naucte se pouzivat uzasne mocny avsak primitivni prikaz float. A pak si ty divy muzete radit v poho vedle sebe.

WTF Relativni pozicovani funguje vzdy jak ma pokud se s nim umi delat a nezacne se bezhlave pokouset. A dale float divy nejsou na razeni "vedle sebe". I kdyz se to s nima da udelat nekdy take tak na to prave jak jiz Kaltas naznacil vlastnost display. Chce si to najit dokumentaci k jednotlivym moznostem kterych display muze nabyvat. Daji se s tim delat vcelku pekne veci.

[Skodik]

jezisi jen ne position: relative !! Tohle jsem provozoval driv a je s tim vice skody nez uzitku! Naucte se pouzivat uzasne mocny avsak primitivni prikaz float. A pak si ty divy muzete radit v poho vedle sebe.

WTF Relativni pozicovani funguje vzdy jak ma pokud se s nim umi delat a nezacne se bezhlave pokouset. A dale float divy nejsou na razeni "vedle sebe". I kdyz se to s nima da udelat nekdy take tak na to prave jak jiz Kaltas naznacil vlastnost display. Chce si to najit dokumentaci k jednotlivym moznostem kterych display muze nabyvat. Daji se s tim delat vcelku pekne veci.

nemyslel jsem to nijak zle, nejsem zadny expert, ale rekl bych, ze s flout se daji delat vetsi divy (divy jako zazraky ) nez s display. Ale samozrejme zalezi na situaci. Jinak relativni pozicovani uz me naucilo, protoze se divy davaji porad pod sebe a relativni pozici s nimi jenom pohnete, tak potom zanechava sloupec 4 divu pekne misto, pokud by jste je chteli takto seradit vedle sebe. Vim na toto ani neni urcino, ale proste pokud se to da a to jako, ze casto, tak je lepe se pozicovani vyhnout a radsi pouzit float.

jen takova mala ukazka zrovna rozpracovaneho webu -> http://skodik.unas.cz/new/ je to skoro cele jenom float Ale je to jeste silne ve vyvoji... takze to mozna neni konecna podoba.

[jedik]

2Skodik: Ja nerikam ze je to spatne pouziti, sam na to plovouci divy pouzivam obcas, ale proste mluvis o dvou ruznych vecech

BTW: mame taky absolutni pozicovani

BTW: CSS3? Proc to tam mas kdyz to jeste neni standardizovane?

[Skodik]

2Skodik: Ja nerikam ze je to spatne pouziti, sam na to plovouci divy pouzivam obcas, ale proste mluvis o dvou ruznych vecech

BTW: mame taky absolutni pozicovani

BTW: CSS3? Proc to tam mas kdyz to jeste neni standardizovane?

Mas pravdu, zalezi na pouziti!

Absolutni se hodi imho jeste mene casto nez to relativni Precejenom casto potrebujeme aby se stranyk prizpusobovaly obsahu.

CSS3? No to ja nevim, zas tolik se v tom neorientuji, ale kdyz mi ho nabizi W3C, tak jsem myslel ze je to OKa?? Jak to tedy je, at nejsem za wola ?

[jedik]

http://www.w3.org/Style/CSS/current-work
« under construction »

Komatibilitu bys mel brat opacne, pokud treba nepouzivas nic z CSS2.1 neni treba ji uvadet a staci uvest CSS1. Duvod je snad jasny

[Jezevec]

Heh, bez pozicovani bys byl asi pekne v riti, jinak absolutni se pouziva dost casto, ono totiz vetsinou neco nepozicujes v ramci stranky, ale prave v ramci DIVu a dost casto se ti hodi aby jinej div byl trebas vdycky presne 10px zleva, nezavisle na tom, co je zrovne pred nim.

A to uz nemluvim o tom, ze z logiky veci (kvuli vyhledavani) ve strukture html kodu patri spravne menu az na konec a kdyz ho chces mit nahore, tak ho tam musis nejak umistit.