Autor Zpráva
Filipos
Profil
Zdravím, snažím se podle vzoru vytvořit layout, ale nedaří se mi, aby v divu "all" byly umístěny všechny další divy. Když jsem divu "all" nastavil border(red) a padding 10px, tak je vidět, že je ten rámeček jen okolo divu "header".

Díky za rady.

Link zde: http://www.filip.nudaveskole.cz/

HTML a CSS
<style>

body, p, ul, li {margin:0;padding:0;}


body {background:silver;}



#all {width:960px; margin:0 auto;}
#header {width:958px; height:118px;}
#menu {width:198px; height:200px;}
#content {width:679px; height:200px;}


#all {padding:10px 10px;}
#header {margin:0 auto;}
#menu {float:left; padding:20px;}
#content {float:left; padding:20px;}


#all {border:solid red 1px;}
#header {border:solid black 1px;}
#menu {border:solid yellow 1px;}
#content {border:solid blue 1px; border-left:none;}


#menu li {list-style:none;}
#menu li a {display:block; background:white;}
  
  </style>
  </head>
  <body>
  
  <div id="all">  
    
    <div id="header">
    </div>
    
    <div id="menu">
      <ul>
        <li><a href="index.html">Domu</a></li>
        <li><a href="index.html">odkaz1</a></li>
      </ul>
    </div>
    
    <div id="content">
    </div>
    
    <div id="footer">
    </div>
        
  </div>
  
  </body>
Kubo2
Profil
Ty tie ostatné <div>y naozaj máš vo vnútri <div>u #all, ale nastavil si im CSS vlastnosť float, a to je dôvod, prečo sa ti border zobrazuje iba okolo #header, ktorému si float nenastavil.
Ono totiž float urobí dve veci:
• nastaví prvku blokové zobrazenie (akokeby display: block),
• a vyjme ho z toku dokumentu, teda nastaví mu position: absolute
A to druhé je dôvod, prečo sa ti border zobrazuje tak, ako sa ti zobrazuje. (Prečítaj si niečo o absolútnom pozicovaní.)


Filipos
Profil
Kubo2:

Dík, pochopil jsem a vyzkoušel jsem :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: