Autor | Zpráva | ||
---|---|---|---|
michal454454 Profil |
#1 · Zasláno: 12. 7. 2014, 10:49:36
Zdravim nevi prosim někdo jak zarovnat tenhle slider na stred stranky abych nemusel používat margin-left a tak a aby byl vzhledem k meny pod nim a menu nad nim a dalose normalne rozklikavat...? diky moc :)
HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="jssslider.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>WEST SANDWICH ALBION</title> </head> <body> <div id="nadpis"> <a href="index.html"><img src="zahlavi.png" style="margin-top:0px; margin-left:0px; " width="1000" height="200" /></a> </div> <div id="slider"> <a href="#" class="control_next">>></a> <a href="#" class="control_prev"><</a> <ul> <li>SLIDE 1</li> <li style="background:url(limba.jpg);">SLIDE 2</li> <li>SLIDE 3</li> <li style="background: #aaa;">SLIDE 4</li> </ul> </div> <div id="wrapper"> <ul id ="navMenu"> <li><a href="#">Tym</a></li> <li><a href="#">link2</a></li> <li><a href="#">Tym</a> <ul id="InnerU1"> <li><a href="#">Stat</a></li> <li><a href="#">Soup</a></li> <li><a href="#">adsad</a> <ul id="InnerU12"> <li><a href="#">Soupiska</a></li> <li><a href="#">Statistiky</a></li> <li><a href="#">Dalsi</a> </li> <li><a href="#">link4</a></li> <li><a href="#">link5</a></li> </ul> </li> <li><a href="#">link4</a></li> <li><a href="#">link5</a></li> </ul> </li> <li><a href="#">link4</a></li> <li><a href="#">link5</a></li> </ul> </div> <div id="hlavnitelo"> </div> </body> </html> * { float:none; font-family:Verdana; } body{ background-color:#F5F5F5; text-align:center; } #nadpis{ background-color:white; width:1000px; height:200px; margin: auto; box-shadow:0 0 5px rgba(50,50,50,25); border-top-left-radius:10px; border-top-right-radius:10px; margin-top:25px; } *{ padding:0; margin:auto; font-family: tahoma; } div#wrapper{ width:760px; height:200px; margin:0 auto; margin-top:5px; } ul#navMenu li{ list-style-type:none; width:150px; height:33px; border:1px solid #fff; text-align:center; float:left; position:relative; } ul#navMenu li a{ width:150px; height:35px; display:block; text-decoration:none; line-height:35px; color:#fff; background:url("tlacitko menu.png"); } ul#InnerU1{ display:none; position:absolute; left:0; top:35px; } ul#InnerU1 li{ position:relative; } ul#InnerU1 li:hover ul#InnerU12{ display:block; } ul#navMenu li:hover ul#InnerU1{ display:block; } ul#InnerU12{ display:none; position:absolute; left:150px; top:0; } ul#navMenu li:hover a:hover { background:url("tlacitko menu hover.png"); color:#158; } ul#navMenu li:hover > a { background:url("tlacitko menu.png"); color:white; } #hlavnitelo { width:1000px; height:1500px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; box-shadow:0 0 5px rgba(50,50,50,25); margin: auto; margin-top:200px; background-color:white; } @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); #slider { position: absolute; overflow: hidden; margin:0 auto; margin-top:50px; margin-left:130px; } #slider ul { position: relative; margin:0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 1000px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.1s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } |
||
juriad Profil |
#2 · Zasláno: 12. 7. 2014, 11:44:36
michal454454:
Prosím tě, když chceš poradit, nedávej sem stovky řádek kódu. Nikomu se nechce to replikovat. Můžeš to přece hodit na hosting a dodat odkaz. Změň #slider { height: 300px; /* nastav výšku */ width: 1000px; /* a šířku */ overflow: hidden; /* skryj ostatní slidy, které se nevejdou */ margin: auto; /* vystředí */ position: relative; /* pro počítání umístění šipek vpřed a vzad */ } |
||
michal454454 Profil |
#3 · Zasláno: 12. 7. 2014, 12:47:27
juriad:
Dobry ted mi to hodilo slider na stred akorát mam problém ještě s tim meny to se dalo pod nej a ja ho potrebuju nad tim sliderem.. poradíš ještě prosim :) diky |
||
juriad Profil |
#4 · Zasláno: 12. 7. 2014, 12:57:37
Tak ho v HTML přesuň před slider. Pořadí prvků se pomocí CSS nesnaž měnit.
|
||
michal454454 Profil |
#5 · Zasláno: 12. 7. 2014, 13:06:42
juriad:
tak jsem ho presunul ale ted to meny je jakoby v pozadi toho slideru, ze není videt, ze je pod nim... takze bych ho asi potreboval dostat do popredi jakoby... :) a nechci ten slidet pomoci margin-top posouvat neka hrozne dolu.. dik :) |
||
juriad Profil |
dej tomu menu
z-index: 1; |
||
michal454454 Profil |
#7 · Zasláno: 12. 7. 2014, 13:20:39
diky uz to jde... :) a co to je ten z-index? :) jen tak
|
||
Tomáš123 Profil |
#8 · Zasláno: 12. 7. 2014, 13:29:10
|
||
Časová prodleva: 10 let
|
0