![]() |
![]() ![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 49 Pomógł: 1 Dołączył: 13.08.2011 Ostrzeżenie: (0%) ![]() ![]() |
Witam,
rozpoczynam swoją zabawę z CSS i mam taki problem. Robię rozwijane menu, ale nie chcę na tło takiego zwykłego kolorku, tylko mam zrobione tło. Korzystam z edytora i tam jest narzędzie do tworzenia takich menu, tyle, że nie z takim tłem jakbym chciał. Stworzyłem sobie to menu. Wszedłem w skrypt. Zamieniłem zwykłe background, na background-image i tło było, ale menu było źle ustawione, więc zacząłem je pozycjonować. Teraz menu jest dobrze ustawione, ale znikło tło. Ktoś może pomóc tu jest kod menu: Kod /*** ESSENTIAL STYLES ***/ .menu-menu, .menu-menu * { margin:0; padding:0; list-style:none; } .menu-menu { margin:2px 0 0 1px; /* top right bottom left */ line-height:1.0; } .menu-menu ul { position:absolute; top:-999em; width:110px; /* submenu item width - offest below must match */ } .menu-menu li { width:70px; /* Default to 'auto'. If specified, the submenu item width and offset must match */ .menu-menu li a { text-align:center; } .menu-menu li li a { text-align:center; } .menu-menu ul li { width:100%; } .menu-menu li ul { display:inline; } .menu-menu li:hover ul { display:inline; } .menu-menu li li ul { display:inline; } .menu-menu li:hover li:hover ul { display:inline; } .menu-menu li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } .menu-menu li { left:100px; position:relative; } .menu-menu a { display:inline; position:relative; } .menu-menu li:hover ul, .menu-menu li.sfHover ul { left:0; top:39px; /* match top ul list item height */ z-index:2; } ul.menu-menu li:hover li ul, ul.menu-menu li.sfHover li ul { top:-999em; } ul.menu-menu li li:hover ul, ul.menu-menu li li.sfHover ul { left:110px; /* submenu offest - must match ul width above */ top:0; } ul.menu-menu li li:hover li ul, ul.menu-menu li li.sfHover li ul { top:-999em; } ul.menu-menu li li li:hover ul, ul.menu-menu li li li.sfHover ul { left:100px; /* submenu offest - must match ul width above */ top:0; } .menu-menu { background-image:url('hader.png'); top:-10px; position:relative; margin-bottom:1em; font-family:Monotype Corsiva; font-size:13px; font-weight:normal; /* bold or normal */ font-style:italic; /* italic or normal */ } .menu-menu a { padding:20px 18px; text-decoration:none; margin-bottom:32px; } .menu-menu li.first a { } .menu-menu a, .menu-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#5555FF; } .menu-menu a:hover, .menu-menu a:active { /* visited pseudo selector so IE6 applies text colour*/ color:#000000; } .menu-menu li li a { border-top-width:0; } .menu-menu li li li.first a { } .menu-menu li { background-image:url('hader.png'); } .menu-menu li li { } .menu-menu li li li { } .menu-menu li:hover, .menu-menu li.sfHover, .menu-menu a:focus, .menu-menu a:hover, .menu-menu a:active { outline:0; } .menu-menu li li a, .menu-menu li li a:visited { color:#5555FF; } .menu-menu li li a:hover, .menu-menu li li a:active, .menu-menu li li a:focus { color: #000000; } /*** arrows **/ .menu-menu a.sf-with-ul { padding-right:2.25em; min-width:1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position:absolute; display:block; right:.75em; top:1.05em; /* IE6 only */ width:10px; height:10px; text-indent:-999em; overflow:hidden; background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top:.8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position:-10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .menu-menu ul .sf-sub-indicator { background-position:-10px 0; } .menu-menu ul a > .sf-sub-indicator { background-position:0 0; } /* apply hovers to modern browsers */ .menu-menu ul a:focus > .sf-sub-indicator, .menu-menu ul a:hover > .sf-sub-indicator, .menu-menu ul a:active > .sf-sub-indicator, .menu-menu ul li:hover > a > .sf-sub-indicator, .menu-menu ul li.sfHover > a > .sf-sub-indicator { background-position:-10px 0; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul { background:url('../images/shadow.png') no-repeat bottom right; padding:0 8px 9px 0; -moz-border-radius-bottomleft:17px; -moz-border-radius-topright:17px; -webkit-border-top-right-radius:17px; -webkit-border-bottom-left-radius:17px; } .sf-shadow ul.sf-shadow-off { background:transparent; } a tu strony: Kod <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=unicode"/> <meta content="Tu wpisz opis zawartości strony" name="Description"/> <meta content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" name="Keywords"/> <meta content="CoffeeCup HTML Editor (www.coffeecup.com)" name="generator"/> <style type="text/css"> body {background-image:url('tlo.jpg'); background-repeat:no-repeat; background-attachment:fixed;} </style> <style type="text/css"> ul { list-style-type:none; } li { display:inline; font-size: 20px; font-style: oblique; font-family: Monotype Corsiva; margin:0; } </style> <link media="screen" href="css/menu-menu.css" type="text/css" rel="stylesheet"/> </head> <body> <center> <img src="file://D:\mulino strona\logo.png"/> </center> <ul class="menu-menu"> <li class="first"> <a href="http:///">Home</a> </li> <li> <a href="http:///">O nas</a> </li> <li> <a href="http:///">Galeria</a> </li> <li> <a href="http:///">Cennik</a> </li> <li> <a href="http:///">Menu</a> </li> <li> <a href="http:///">Kontakt</a> <ul> <li class="first"> <a href="http:///">Dane Kontaktowe</a> </li> <li> <a href="http:///">Mapa Dojazdu</a> </li> </ul></li> </ul> </body> </html> |
|
|
![]() ![]() |
![]() |
Wersja Lo-Fi | Aktualny czas: 17.06.2025 - 20:02 |