Autor Zpráva
krkus
Profil
Mám problém se stránkou na ročníkovou práci, layout mam tak, jak jsem chtěl, ale když tam přidám menu , tak se mi to celé rozhodí
Zde je html a css, prosil bych najít nějakou chybu, co popřípadě předělat

<!Doctype html>
  <head><!--  ščřžýŠČŘŽÝ -->
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <title>Dota2</title>
  
 </head>
 <body>
  <div id="main">
     <div id="logomenu">
     <div id="hornipanel">
        <div id="logo"><a href="./index.html"><img src="./hlavicka1.png" /></a></div>
        <div id="login"></div>
      </div>
     <div id="menu">        
        <ul>
        <li><a href="@">Úvod</a></li>
        <li><a href="@">Galerie</a></li>
        <li><a href="@">Formulář</a></li>
        <li><a href="@">Kontakt</a></li>
        </ul>
     </div>
     </div>
    <div id="hlavni">
      <div id="pravypanel">
        <div id="novinky"></div>
        <div id="reklama"></div>
      </div>
      <div id="obsah"></div>
    </div>
    <div id="pata"></div> 

</div >  
 </body>
</html>




body{
background-color:black;

}
#main{
width:1024px;
height:1080px;
background-color:#111111;
margin:auto;
}
#hornipanel{
width:1022px;
height:231px;
border-width:1px;
border-color:red;
border-style:solid;
border-bottom-style:none;
}
#logo{
height:231px;
width:742px;
float:left;
background-repeat: repeat;
background-image: url(pozadi.jpg);
}
#login{
height:231px;
width:280px;
float:right;
background-repeat: repeat;
background-image: url(pozadi.jpg);
}
#menu{
width:1023px;
height:49px;
background-color:red;
border-width:1px;
border-color:red;
border-right-style:solid;    
}
#hlavni{
height:750px;
width:1023px;
border-width:1px;
border-color:red;
border-right-style:solid;
}
#pravypanel{
width:223px;
height:750px;
float:left;
background-color:pink;
}
#obsah{
width:800px;
height:750px;
float:right;
background-color:#111111;
}
#pata{
height:50px;
width:1023px;
background-color:navy;
clear:both;
border-width:1px;
border-color:red;
border-right-style:solid;
}
img{
  border:0px;
}
#menu ul{
  list-style:none;
  display:block;
  float:left;
  position:relative;
}
a{
  text-decoration:none;
}
li{
  float:left;

  text-align:center;
  color:white;
}
#logomenu{
width:1023px;
height:280px;
}
margin
Profil *
Menu nemá ukončené obtékání: kouknu na Jak funguje "float" a "clear"
Ale dostaneš jinou, jednodušší, radu, než je v článku, do pravidla pro #menu přidej deklaraci:
overflow: hidden;

Nechápu smysl deklarací na řádcích 74, 75, 76, můžeš je s klidem vymazat.
Trejpa
Profil
krkus:
Tím, že do #menu zadáš rámečky, projeví se na vnitřním elementu UL jeho výchozí svislý margin. Seznam je se svým marginem vyšší, než vymezená výška #menu, takže z něj přetéká dolů přes #hlavni. V něm obsažený #pravypanel plovoucí vlevo musí na přetečený obsah počkat a tak se posune doprava. Následující plovoucí #obsah nemá dost místa, tudíž odskočí na další volný řádek, na který se vleze.

Vynuluj si výchozí margin pro seznam a pokud se chceš zbavit i té mezery vlevo, tak i jeho padding. Svislé vyrovnání položek v menu proveď pomocí line-height na odkazech v menu. Proti případnému přetékání do budoucna uřízni #menu pomocí overflow.

#menu { overflow: hidden; }
#menu ul { margin: 0; padding:0; }
#menu a { line-height: 49px; padding: 0 10px; }
krkus
Profil
moc děkuji za rady, jak říkám zrovna to děláme ve škole, ale ten jejich výklad není úplný
krkus
Profil
ok zase nevím co dál, menu mám ale nevím, jak ho dát vysouvací položku doprava, a celkově to nějak nefunguje
body{
background-image: url(dota-2-wallpaper-w-o-logo-by-archangelx2-wide.jpg);
background-repeat:no-repeat;
background-color:black;
color:white;
}
#main{
width:1024px;
height:1080px;
background-color:#111111;
margin:auto;
}
#logologin{
width:1022px;
height:231px;
border-width:1px;
border-color:red;
border-style:solid;
border-bottom-style:none;
}
#logo{
height:231px;
width:742px;
float:left;
background-repeat: repeat;
background-image: url(pozadi.jpg);
}
#login{
height:231px;
width:280px;
float:right;
background-repeat: repeat;
background-image: url(pozadi.jpg);
}
#menu{
width:1023px;
height:49px;
background-color:red;
border-width:1px;
border-color:red;
border-right-style:solid;
    
}
#hlavni{
height:750px;
width:1023px;
border-width:1px;
border-color:red;
border-right-style:solid;
}
#pravypanel{
width:223px;
height:750px;
float:left;
background-color:pink;
}
#obsah{
width:800px;
height:750px;
float:right;
background-color:#111111;
}
#pata{
height:50px;
width:1023px;
background-color:red;
clear:both;
border-width:1px;
border-color:red;
border-right-style:solid;
}
img{
  border:0px;
}
table{
margin:auto;
position:absolute;
top:70px;
}
.red{
color:red;
}
.registrace{
color:red;
}
a:hover{
  text-decoration:none;
  color:red;
}
a:visited{
color:red;
}
li{
  float:left;

  text-align:center;
  color:white;
}
#logomenu{
width:1023px;
height:280px;
}
#menu ul{
margin:0px;
padding:0px;
}

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 15px 25px 15px 25px;
    background: red;

}
ul li a:hover {
background: white;
color:red;
}
li:hover ul {
    display: block;
    position: absolute;
}

li:hover a { 
background: red; 
}
li:hover li a:hover {
    background: white;
    color:red;
}


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
 <head><!--  ۨ��ɘϝ -->
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <title>Dota2</title>
  
 </head>
 <body>
  <div id="main">
     <div id="logomenu">
     <div id="logologin">
        <div id="logo"><a href="./index.html"><img src="./hlavicka1.png" alt="Dota2" /></a></div>
        <div id="login">
            <table align="center">
                <tr>
                    <td><span class="red">Jméno:</span></td>
                    <td><input type="text" /></td>
                </tr>
                <tr>
                    <td><span class="red">Heslo:</span></td>
                    <td><input type="password" /></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Přihlásit se" /></td>
                    <td><a href="@" class="registrace">Registrovat</a></td>
                </tr>
            </table>
        </div>
      </div>
     <div id="menu">        
        <ul>
        <li><a href="@">Úvod</a></li>
        <li><a href="@">DotA</a></li>
        <li><a href="@">Dota2</a>
          <ul>    
          <li><a href="@">Hrdinové</a>
            <ul>
                <li><a href="@">Radiant</a></li>
                <li><a href="@">Dire</a></li>
            </ul>
                
          </li>
          <li><a href="@">Předměty</a></li>
          <li><a href="@">Tipy a Triky</a></li>
          <li><a href="@">HW nároky</a></li>
          </ul>
        </li>
        <li><a href="@">Turnaje</a>
            <ul>
                <li><a href="@">Amerika</a>
                    <ul>
                        <li>The International</a></li>
                    </ul>
                </li>        
                <li><a href="@">Evropa</a>
                    <ul>
                        <li><a href="@">Starladder</a></li>
                        <li><a href="@">Premier Leadue</a></li>
                        <li><a href="@">Raidcall ESM</a></li>
                    </ul>
                </li>        
                <li><a href="@">Čína</a>
                <ul>
                    <li><a href="@">G-1 League</a></li>
                    <li><a href="@">Super League</a></li>
                </ul>
                </li>
                </ul>        
        </li>
        <li><a href="@">Galerie</a></li>
        <li><a href="@">Formulář</a></li>
        <li><a href="@">Kontakt</a></li>
        </ul>
     </div>
     </div>
    <div id="hlavni">
      <div id="pravypanel">
        <div id="novinky"></div>
        <div id="reklama"></div>
      </div>
      <div id="obsah"></div>
    </div>
    <div id="pata"></div> 

</div >  
 </body>
</html>
Kubo2
Profil
Dá sa to urobiť JavaScriptom, pomocou DHTML.

# HTML kód:

<ul id="vysuvaci">
 <li>Položka</li>
 <li>Ďaľšia položka</li>
 <li>Vysúvacia položka
 <ul>
  <li>Položka</li>
  <li>Položka 2</li>
 </ul>
 </li>
 <li>Ďaľšia vysúvačka
 <ul>
  <li>Vysunutá položka</li>
  <li>XXX</li>
  <li>YXY</li>
 </ul>
 </li>
</ul>

# JavaScript kód:

var menu = document.getElementById("vysuvaci");
menu.onmouseover = (function (ev) {
  var omoEl = ev.toElement;
  if(omoEl.nodeName.toUpperCase()=="LI")
  {
   omoEl.children.item(0).style.display = 'block';
   omoEl.children.item(0).onmouseout = (function () {
    this.style.display = 'none';
   });
  }
});
Ten JS kód nie je dokonalý a hádže neošetrené výnimky, ale je celkom použiteľný ako primárna šablóna, prepíš si ho podľa seba :-)

# CSS kód:

(iba ten najnutnejší, skryť vnorené zoznamy)
ul#vysuvaci li ul {
  display: none;
}
krkus
Profil
no rád bych, ale mohu použít jedině css
Kubo2
Profil
krkus:
mohu použít jedině css
No tak to máš smolu, pretože CSS nemá udalosti (napr. pri prechádzaní myšou nejakého elementu urob niečo s iným elementom), takže buď JS alebo potom neviem.
edit:// ale margin má pravdu, pomocou CSS sa ovplyvniť vzhľad podradených elementov, akurát ja som v CSS predsa len zisťujem, ešte stále nie taký zručný ako som si myslel, a nevedel som že sa dajú použiť také konštrukcie ako selektor podradeny-selektor :pseudotrieda > každé-dieťa-ktoré-je-priamym-potomkom-rodičovského-elementu { štýly }
Takže, prepáč mi to, moja chyba :(
margin
Profil *
Kubo2:
No tak to máš smolu, pretože CSS nemá udalosti (napr. pri prechádzaní myšou nejakého elementu urob niečo s iným elementom)
Pomocí CSS se dají ovlivnit vnořené elementy a pseudotřída :hover je v CSS odjakživa.

krkus:
Koukni na http://css.blbeckove.com/3.seznamy/3.resene-priklady.html, tuším, že hledáš "Horizontální menu, svisle rozbalovací, tříúrovňové", tak jich tam pár najdeš.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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