Horizontální menu na stream.cz/

Fórum › CSS

cheeester 0

Stálý člen

14. 3. 2009 #1

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.–

bukaj_0010

Věrný člen

14. 3. 2009 #2

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.

cheeester 0

Stálý člen

14. 3. 2009 #3

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>