Stránka 1 z 1

Posun menu  Vyřešeno

Napsal: 20 úno 2014 22:10
od Vratka2CZ
Dobrý den,
mám menší problém zde: http://soscb.cz/vyuka/p16benda/%C3%9Akol2/index.html ,že mám od záhlaví (ten obrázek) k menu menší místečko. Já bych rád to menu posunul nahoru aby ho zakrylo, bohužel si nevim rady. Jsem začátečník a teprve se to ve škole učíme. Dostali jsme úkol vytvořit jednoduchou stránku. Teď je můj problém posunutí toho menu nahoru.
Asi si ťukáte na hlavu, že jsem blbec, že to nevim, ale je to tak. Za vaši radu předem děkuji.
Dělám to v HTML 5

CSS

Kód: Vybrat vše

body { background: #000000 url('obrazky/pozadi.png');
}
header h1 {
      text-align: center;
      }
#obal {                             
      margin: 0 auto;
      border: solid black 1px;
      width: 980px;
      background-color: #c7b765;
      }   

a.hlavni {
      text-decoration: none;
      color: white;
      }

.vrchnimenu {
      display: inline;
      float: left;
      text-align: center;
      border: solid black 1px;
      border: none;
      padding-left: 10px;
      color: #781818;
      font-weight: bold;
      font-size: large;
      }
     
.menu {
      border: solid black 1px;
      border-right: none;
      border-left: none;
      width: 980px;
      height: 50px;
      margin: 0px auto;
      background-color: #575757;
      background: rgba(28, 23, 28, 0.7);
      }     



HTML

Kód: Vybrat vše

<nav class="menu">

<ul> 
      <li class="vrchnimenu"><a class="hlavni" href="index.html">Vítejte</a></li>
      <li class="vrchnimenu"><a class="hlavni" href="historie.html">Historie</a>
         <ul class="schovej">
              <li ><a class="horni" href="yyy.html"></a></li>
              <li ><a class="prostred" href="yyy.html"></a></li>
              <li ><a class="spodni" href="yyy.html"></a></li>
         </ul>
      </li>   
      <li class="vrchnimenu"><a class="hlavni" href="statistiky.html">Statistiky</a>
         <ul class="schovej">
              <li ><a class="horni" href="xxx.html"></a></li>
              <li ><a class="prostred" href="xxx.html"></a></li>
              <li ><a class="prostred" href="xxx.html"></a></li>
              <li ><a class="spodni" href="xxx.html"></a></li>
         </ul>     
      </li>
      <li class="vrchnimenu"><a class="hlavni" href="úspěchy.html">Úspěchy</a>
         <ul class="schovej">
              <li ><a class="horni" href="fff.html"></a></li>
              <li ><a class="prostred" href="fff.html"></a></li>
              <li ><a class="prostred" href="fff.html"></a></li>
              <li ><a class="spodni" href="fff.html"></a></li>
         </ul>     
      </li>
      <li class="vrchnimenu"><a class="hlavni" href="galerie.html">Galerie</a>
         <ul class="schovej">
              <li ><a class="horni" href="screeny.html">Screenshots</a></li>
              <li ><a class="spodni" href="wallpery.html">Wallpapers</a></li>
         </ul>
      </li>
      <li class="vrchnimenu"><a class="hlavni" href="kontakt.html">Kontakt</a></li>
   </ul>

  </nav>



</ul>

Re: Posun menu

Napsal: 20 úno 2014 23:51
od LuCaCZ
CSS

Kód: Vybrat vše

header { height: 180px; }

nebo

Kód: Vybrat vše

header img { display: block; }

nebo

Kód: Vybrat vše

header img { vertical-align: top; }


http://stackoverflow.com/questions/3003 ... my-padding

Re: Posun menu

Napsal: 21 úno 2014 10:19
od iTerminator
Čau, stačí, když tělíčku <body> v CSS nastavíš margin-top: 0;.

Následně pak jen nastav tomu <div id="obal"> border-top: none;

CSS

Kód: Vybrat vše

<style>
body{margin-top: 0;}
div#obal{border-top: 0px;}
</style>


Ten druhý řádek stylu tam nemusí být, ale když tam není, tak nahoře bude začínat ten border a jde to docela hodně vidět, není to moc pěkný, ale nechám na tobě.

Re: Posun menu

Napsal: 21 úno 2014 14:32
od LuCaCZ
To není co myslel. Mezi menu a obrázkem v záhlaví měl mezeru.

Re: Posun menu

Napsal: 21 úno 2014 14:39
od iTerminator
Moje chyba, díky za upozornění.

Re: Posun menu

Napsal: 22 úno 2014 22:15
od Vratka2CZ
Jo, super Děkuji :)