| Autor | Zpráva | ||
|---|---|---|---|
| Nickel Profil * |
#1 · Zasláno: 18. 8. 2013, 10:32:32
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 * |
#3 · Zasláno: 18. 8. 2013, 16:50:32
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;
} |
||
| Nickel Profil * |
#5 · Zasláno: 18. 8. 2013, 17:37:48
MyShare:
Jo už se to hnulo díky moc, ale nešlo by s tím hnout ještě trochu doprava? |
||
| MyShare Profil |
#6 · Zasláno: 18. 8. 2013, 19:59:58
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 |
#7 · Zasláno: 18. 8. 2013, 21:39:03
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*/
} |
||
| Nickel Profil * |
#8 · Zasláno: 19. 8. 2013, 08:13:40
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 |
#9 · Zasláno: 19. 8. 2013, 10:20:12
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 * |
#10 · Zasláno: 19. 8. 2013, 10:39:16
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 * |
#11 · Zasláno: 19. 8. 2013, 13:09:40
Ani jedno nefunguje :-/
Ukázka: http://ukazkaaa.wz.cz/# |
||
| MyShare Profil |
#12 · Zasláno: 19. 8. 2013, 13:19:15
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 * |
#13 · Zasláno: 19. 8. 2013, 14:27:00
MyShare:
To taky nefunguje |
||
| MyShare Profil |
#14 · Zasláno: 19. 8. 2013, 14:44:27
Skús to vložiť do
#nav li |
||
| pavuk Profil |
#15 · Zasláno: 19. 8. 2013, 15:58:06
Nickel:
Div <#nav> nemá žádnou výšku, takže se barva pozadí nemá na čem ukázat... |
||
| Nickel Profil * |
#16 · Zasláno: 19. 8. 2013, 16:22:58
MyShare:
Vložil jsem to tam a už to funguje díky moc všem. |
||
|
Časová prodleva: 11 let
|
|||
0