Autor Zpráva
Nickel
Profil *
Dobrý den, potřeboval bych zarovnat tohle menu na střed, ale v css jsem začátečník, mohl by mi někdo pomoct? Už jsem použil google, ale ani on nepomohl.

#container {
    width: 1200px;
    margin: 100px auto;
}

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

#blob {
    background: #0b2b61;
    border-right: 1px solid #0059ec;
    border-left: 1px solid #0059ec;
    position: absolute;
    z-index: 1;
    top: 0;
    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
    background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #011331;
    -webkit-box-shadow: 2px 3px 10px #011331;
}

#nav {
    position: relative;
    background: #292929;
    float: left;
}

#nav li {
    float: left;
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
}

#nav li a {
    color: #e3e3e3;
    z-index: 2;
    position: relative;
    cursor: pointer;
    float: left;
    font-size: 30px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    padding: 30px 45px;
    width: 100px;

}
dalik
Profil
Uprav si to takhle:

#container {
    margin-top:100px;
    text-align:center;
}

#nav {
    width:600px; /*Šířka bloku*/
    margin: 0 auto;
}
 
#nav li {
    float: left;
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
    position: relative;
    background: #292929;
}

Jestli to nebude fungovat, tak tu napiš i HTML kód.
Nickel
Profil *
Bohužel nefunguje.
<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>stránka</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>
<body>

<div id="container">

    <ul id="nav">
        <li id="selected"><a href="#">Odkaz</a></li>
        <li><a href="#">Odkaz1</a></li>
        <li><a href="#">Odkaz2</a></li>
        <li><a href="#">Odkaz3</a></li>
    </ul>



</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>

<script type="text/javascript">
    $('#nav').spasticNav();
</script>
</body>
</html>
MyShare
Profil
Nazdar Nickel skús

#container {
    width: 860px;
    margin: 0 auto;
}
Pokiaľ teda ten #container obaľuje iba to menu je zbytočné rozťahovať ho na šírku 1200px tam ti stačí úplne zadať menší rozmer.
Nickel
Profil *
MyShare:
Jo už se to hnulo díky moc, ale nešlo by s tím hnout ještě trochu doprava?
MyShare
Profil
Nickel:
Hádam pomôže :)

<div id="container">

    <ul id="nav">
        <li id="selected"><a href="#">Odkaz</a></li>
        <li><a href="#">Odkaz1</a></li>
        <li><a href="#">Odkaz2</a></li>
        <li><a href="#">Odkaz3</a></li>
    </ul>

</div>

body { margin: 0; padding: 0; }

#container {
    width: 540px;
    margin: 0 auto;
    border: 1px solid red;
}

ul#nav {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #292929;
}

ul#nav li {
    display: inline-block;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid #000;
    padding: 15px 15px 15px 15px;
}
ul#nav li a {
    text-align: center;
    text-decoration: none;
    font-size: 30px;
    font-family: helvetica, arial, sans-serif;
    color: #e3e3e3;
    cursor: pointer;
}
ul#nav li a:hover {
    color: #fff;
}
dalik
Profil
Nickel:
Bohužel nefunguje.


Zvláštní, že ti to nefunguje. Zkus to podle tohoto http://jsfiddle.net/NYxDq/
Je tam:
#nav {
    width:780px; /*Šířka bloku*/
    margin: 0 auto;
    position:relative;
    left:50px;/*Posunutí doprava*/
}
leftem si to posuneš doprava o kolik chceš.
Nickel
Profil *
Tak jsem zkusil ten druhý kod od dalika a už to funguje, ale zas se mi změnilo pozadí těch tlačítek z černé na bílou, nevíte čím to může být?
Jinač díky za pomoc všem ;-)
dalik
Profil
Zkus přidat k #nav li !important, asi ti to tam něco blokuje:
#nav li {
    float: left;
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
    position: relative;
    background: #292929 !important;
}

Kdyžtak hoď odkaz na živou ukázku.
margin
Profil *
1. „Nikdy není tak zle, aby bylo !important” (http://www.zdrojak.cz/clanky/udrzovatelny-stylopis-poradek-hacky-important/)
2. pozadí se nedědí, takže až na výjimky, kdy dochází ke změně pozadí při hoveru nebo za přispění JS není třeba pozadí měnit a i tyto případy, až na velice řídké výjimky, jsou standardně řešitelné bez !important.

Nickel:
Bez živé ukázky bych to podle kávové sedliny viděl na přidání overflow: hidden; pro #nav.
Nickel
Profil *
Ani jedno nefunguje :-/
Ukázka: http://ukazkaaa.wz.cz/#
MyShare
Profil
pretože si nikde nedefinoval background toho menu čiže
#nav {
    width:780px; /*���ka bloku*/
    margin: 0 auto;
    position:relative;
    left:10px;/*Posunut� doprava*/
   background: #tvoja-farba  
}
Nickel
Profil *
MyShare:
To taky nefunguje
MyShare
Profil
Skús to vložiť do
#nav li 
pavuk
Profil
Nickel:
Div <#nav> nemá žádnou výšku, takže se barva pozadí nemá na čem ukázat...
Nickel
Profil *
MyShare:
Vložil jsem to tam a už to funguje díky moc všem.

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: