Autor | Zpráva | ||
---|---|---|---|
trongixcz Profil |
#1 · Zasláno: 3. 11. 2012, 17:39:47
Dobrý den potřeboval bych vycentrovat menu které jsem stáhnul z internetu a nějak se mi to přes div nedaří, poradil by mi někdo ? :/
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 / CSS3 Drop-Down Navigation Menu</title> <meta name="description" content=""> <link rel="stylesheet" href="style.css"> <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <img class="center" src="title.png" alt="" /> <nav id="nav"> <ul id="navigation"> <li><a href="#" class="first">Home</a></li> <li><a href="#">Services »</a> <ul> <li><a href="#">Web Development</a></li> <li><a href="#">Logo Design</a></li> <li><a href="#">Identity & Branding »</a> <ul> <li><a href="#">Business Cards</a></li> <li><a href="#">Brochures</a></li> <li><a href="#">Envelopes</a></li> <li><a href="#">Flyers</a></li> </ul> </li> <li><a href="#">Wordpress</a></li> </ul> </li> <li><a href="#">Portfolio »</a> <ul> <li><a href="#">Graphic Design</a></li> <li><a href="#">Photography</a></li> <li><a href="#">Architecture</a></li> <li><a href="#">Calligraphy</a></li> <li><a href="#">Film »</a> <ul> <li><a href="#">John Carter</a></li> <li><a href="#">The Avengers</a></li> <li><a href="#">The Amazing SpiderMan</a></li> <li><a href="#">Madagascar 3</a></li> </ul> </li> <li><a href="#">Graffity </a></li> </ul> </li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a></li> <li><a href="#" class="last">Contact</a></li> </ul> </nav> </div><!--end wrapper--> <div id="bar"> <div id="innerbar"><h2>Tutorial: <a href="http://www.ourtuts.com/create-a-drop-down-navigation-menu-with-html5-and-css3/">Create a Drop-Down Navigation Menu with HTML5 and CSS3</a>. Go back to <a href="http://www.ourtuts.com/create-a-drop-down-navigation-menu-with-html5-and-css3/">OurTuts</a> to download the source files.</h2> </div> </div> </body> </html> /* css reset - makes the layout looking good in all browsers */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; font:12px/20px Arial; /*background:#e0f3ff; */ background:url(pattern.png) repeat scroll 0 0; } ol, ul { list-style: none; } .center { margin:50px 0 0 190px; width:240px; } h1 { font-size:30px; margin:130px 0 0 0; text-align:center; font-weight:bold; color:#777777; text-shadow: 1px 2px 0 #ffffff, 2px 4px 0 #d6d6d6; } #bar { background-color: #2f2f2f; bottom: 0; border-top:2px solid #eeeeee; height: 50px; left: 0; position: fixed; width: 100%; z-index: 100000; display:block; } #innerbar { width:900px; margin:0 auto; } #innerbar h2 { color: #bdbdbd; font-size: 14px; font-weight: normal; padding: 13px 0 0; text-align:center; margin:0; padding-top:16px; } #innerbar a { color:#fff; } #wrapper{ width:620px; margin:0 auto; } #nav { position:relative; width:620px; margin:0 auto; margin-top:10px; padding:10px; } ul#navigation { margin:0px auto; position:relative; float:left; border-left:1px solid #c4dbe7; border-right:1px solid #c4dbe7; } ul#navigation li { display:inline; font-size:12px; font-weight:bold; margin:0; padding:0; float:left; position:relative; border-top:1px solid #c4dbe7; border-bottom:2px solid #c4dbe7; } ul#navigation li a { padding:10px 25px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border-right:1px solid #fff; border-left:1px solid #C2C2C2; border-top:1px solid #fff; background: #f5f5f5; -webkit-transition:color 0.2s linear, background 0.2s linear; -moz-transition:color 0.2s linear, background 0.2s linear; -o-transition:color 0.2s linear, background 0.2s linear; transition:color 0.2s linear, background 0.2s linear; } ul#navigation li a:hover { background:#f8f8f8; color:#282828; } ul#navigation li:hover > a { background:#fff; } /* Drop-Down Navigation */ ul#navigation li:hover > ul { visibility:visible; opacity:1; } ul#navigation ul, ul#navigation ul li ul { list-style: none; margin: 0; padding: 0; visibility:hidden; position: absolute; z-index: 99999; width:180px; background:#f8f8f8; box-shadow:1px 1px 3px #ccc; opacity:0; -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; -moz-transition:opacity 0.2s linear, visibility 0.2s linear; -o-transition:opacity 0.2s linear, visibility 0.2s linear; transition:opacity 0.2s linear, visibility 0.2s linear; } ul#navigation ul { top: 43px; left: 1px; } ul#navigation ul li ul { top: 0; left: 181px; } ul#navigation ul li { clear:both; width:100%; border:0 none; border-bottom:1px solid #c9c9c9; } ul#navigation ul li a { background:none; padding:7px 15px; color:#616161; text-shadow:1px 1px 0px #fff; text-decoration:none; display:inline-block; border:0 none; float:left; clear:both; width:150px; } ul#navigation li a.first { border-left: 0 none; } ul#navigation li a.last { border-right: 0 none; } poradil by mi někdo prosím ? klidně dám i odměnu :) |
||
nethor Profil |
#2 · Zasláno: 4. 11. 2012, 22:50:24
Vždyť to funguje, menu je na středu stránky v ie 6 - 8, ffox, chrome,.. (pouze ie5.5 ne, ale to bych už asi neřešil.)
V čem je problém? |
||
Časová prodleva: 11 let
|
0