| 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: 12 let
|
|||
0