| Autor | Zpráva | ||
|---|---|---|---|
| Thomas777 Profil |
#1 · Zasláno: 31. 7. 2013, 16:26:01 · Upravil/a: Thomas777
Opět vás všechny zdravím lidé zkušení.
Potřeboval bych moci s vycentrováním odkazů v menu, které je uloženo v navigačním panelu. Menu je stažené z internetu, chápu jednotlivé položky a rozumím jim. Také chápu centrování přes margin:0px auto; tak jako přes text-align:center; Zkušel jsem tyto tagy přidat jak do začátku menu, tak k #nav li, rovněž tak k #nav li a, stejně mi to nefunguje. Vidím i přepisování margin:0 25px 0 10px;, no když jsem zkoušel toto odsazení umazat, nedostalo se mi kýženého výsledku. Proto se opět obracím na vás, na tuto diskusi, kde se mi zatím vždy dostálo rychlé, fungující odpovědi. Nejjednodušší bude, když uvedu kód i živý příklad, takže: http://www.stunicholls.com/menu/skeleton.html CSS: /* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#eca #b97 #a86 #edb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#b75;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#b75;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls dot com | menu - skeleton </title>
<meta name="Author" content="Stu Nicholls" />
<link rel="stylesheet" type="text/css" href="skeleton/skeleton.css" />
<script src="skeleton/stuHover.js" type="text/javascript"></script>
</head>
<body>
<h1>stunicholls.com</h1>
<h2>Skeleton drop down menu</h2>
<h3>7th Novemebr 2007</h3>
<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »</a>
<ul>
<li><a href="#nogo">Who we are</a></li>
<li><a href="#nogo">What we do</a></li>
<li><a href="#nogo">Where to find us</a></li>
</ul>
</li>
<li><a href="#nogo">Products »</a>
<ul>
<li><a href="#nogo">Tripods »</a>
<ul>
<li><a href="#nogo">Monopods</a></li>
<li><a href="#nogo">Tripods</a></li>
<li><a href="#nogo">Adjutable head</a></li>
<li><a href="#nogo">Fixed</a></li>
<li><a href="#nogo">Flash mount</a></li>
<li><a href="#nogo">Floating head</a></li>
</ul>
</li>
<li><a href="#nogo">Films »</a>
<ul>
<li><a href="#nogo">35mm</a></li>
<li><a href="#nogo">Color Print</a></li>
<li><a href="#nogo">Black and White</a></li>
<li><a href="#nogo">Roll</a></li>
<li><a href="#nogo">Color Slide</a></li>
</ul>
</li>
<li><a href="#nogo">Cameras »</a>
<ul>
<li><a href="#nogo">Compact »</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon</a></li>
<li><a href="#nogo">Minolta</a></li>
<li><a href="#nogo">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo">Digital »</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon »</a>
<ul>
<li><a href="#nogo">Lenses »</a>
<ul>
<li><a href="#nogo">Standard</a></li>
<li><a href="#nogo">Telephoto</a></li>
<li><a href="#nogo">Wide Angle</a></li>
<li><a href="#nogo">Fish Eye</a></li>
<li><a href="#nogo">Mirror</a></li>
<li><a href="#nogo">Macro</a></li>
</ul>
</li>
<li><a href="#nogo">Speedlight</a></li>
<li><a href="#nogo">Coolpix »</a>
<ul>
<li><a href="#nogo">Coolpix S10</a></li>
<li><a href="#nogo">Coolpix L2</a></li>
<li><a href="#nogo">Coolpix S500</a></li>
<li><a href="#nogo">Coolpix P5000</a></li>
<li><a href="#nogo">Coolpix 4600</a></li>
<li><a href="#nogo">Coolpix S6 Silver</a></li>
</ul>
</li>
<li><a href="#nogo">D200</a></li>
<li><a href="#nogo">D80</a></li>
</ul>
</li>
<li><a href="#nogo">Minolta</a></li>
<li><a href="#nogo">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo">SLR »</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon</a></li>
<li><a href="#nogo">Minolta</a></li>
<li><a href="#nogo">Pentax</a></li>
<li><a href="#nogo">Panasonic</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo">Flash</a></li>
<li><a href="#nogo">Video</a></li>
</ul>
</li>
<li><a href="#nogo">FAQs »</a>
<ul>
<li><a href="#nogo">Cameras</a></li>
<li><a href="#nogo">Film types</a></li>
<li><a href="#nogo">Digital Photography</a></li>
</ul>
</li>
<li><a href="#nogo">Privacy »</a>
<ul>
<li><a href="#nogo">Privacy Policy</a></li>
<li><a href="#nogo">Privacy Statement</a></li>
</ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>
<img src="skeleton/leaf.jpg" alt="skeleton leaf" title="" />
<p>© 2007 stunicholls.com</p>
</body>
</html>JS: /* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this script and the associated (x)html
is available at http://www.stunicholls.com/menu/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover); |
||
| peta Profil |
#2 · Zasláno: 1. 8. 2013, 10:20:18
Ten proslov je moc hezky, ale neni mi z neho jasne, co, kde se ma v jakem prohlizeci jak zobrazovat a jak se to zobrazuje ted.
Ve FF jsou odkazy Home, Galleries, ... uprostred sveho policka. Jedine, co se nejevi centrovane jsou policka vuci strance, vpravo jsou na kraji, vlevo je mezera a Forum policko preteka na druhy radek.
"i živý příklad" Skutecne je to ziva ukazka, link na tvou stranku? |
||
|
Časová prodleva: 11 let
|
|||
0