Horizontální menu na stream.cz/ – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Horizontální menu na stream.cz/ – CSS – Fórum – Programujte.comHorizontální menu na stream.cz/ – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
cheeester0
Stálý člen
14. 3. 2009   #1
-
0
-

Ahoj, chci se zeptat jestli by mi někdo nehelpnul jak elegantně napsat navigační menu jako na http://www.stream.cz/ (červené)

Velice se mi líbí jak je uprostřed menu a ty tenší časti jsou až do konce stránky :o) Děkuji všem

Nahlásit jako SPAM
IP: 88.146.167.–
Reklama
Reklama
bukaj_0010
Věrný člen
14. 3. 2009   #2
-
0
-

cheeester
jak elegantně napsat navigační menu jako na http://www.stream.cz/ (červené) … Velice se mi líbí jak je uprostřed menu a ty tenší časti jsou až do konce stránky
Ty malé červené mršky jsou prostě pozadí stráhky (nejspíš <body>) s horizontálním opakováním. Menu pak můžeš udělat, jak chceš – floating, inline-block[1] apod. Jen je potřeba, aby bylo ve výšce toho proužku. Na tom streamu toho docílili tak, že hlavička i položky menu mají pevnou velikost v pixelech.

body { background: url('pozadi-s-prouzkem.png') repeat-x; }

#hlavicka { /* pevná šířka a výška */ ... }
.stranka { margin: 0 auto; ... }
#menu { /* pevná šířka a výška */ ... }
<html>

<body>
<div class="stranka">
<div id="hlavicka">...</div>
<ul id="menu">
<li>...</li>
...
</ul>
....
</div>
</body>
</html>

Pokud by nešlo zařídit pevnou velikost menu, či jiných prvků, na kterých by pozice menu závisela, tak by bylo potřeba menu oddělit od hlavičky a obsahu:
<html>

<body>
<div class="stranka">
<div id="hlavicka">...</div>
</div>
<div class="stranka"
style="background: url('prouzek.png') left bottom repeat-x;">
<ul id="menu">
<li>...</li>
...
</ul>
....
</div>
<div class="stranka">
<!-- samotný obsah -->
...
</div>
</body>
</html>


[1] http://bukaj.netuje.cz/know-how/horizontalni-menu-pomoci-display-inline-block/

Nahlásit jako SPAM
IP: 88.101.128.–
Jak se správně ptát? -> http://www.hash.cz/inferno/otazky.html[br][br] Po programování je člověk hladovej.
cheeester0
Stálý člen
14. 3. 2009   #3
-
0
-

body pozadi mam jiz obsazene pro celou stranku proto bych spise uvital integrovat pruh do menu



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Untitled Document</title>
<style type="text/css">

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
line-height: 2.1em;
text-decoration: none;
background: transparent url(media/blockdivired.gif) left top repeat-y; /* moje */
/*border-right: 1px solid #666666;*/
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size:11px;
text-transform: uppercase;
width: 100%;
/*border: 1px solid #625e00;*/
border-width: 1px 0;
background: black url(media/blockdefault.gif) center bottom repeat-x;
list-style: none;
}

</style>
<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
</head>
<body>

<ul class="solidblockmenu">
<li><a href="http:///">xxx</a></li>
<li><a href="http:///style/" class="current">xxx</a></li>
<li><a href="http:///forums/">xxx</a></li>
<li><a href="http://">xxx</a></li>
<li><a href="http:///">xxx</a></li>
<li><a href="http://">xxx</a></li>
<li><a href="http://">xxx</a></li>
</ul>
<br style="clear: left" />

</body>
</html>



Nahlásit jako SPAM
IP: 88.146.167.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 5 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý