Autor Zpráva
michal454454
Profil
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>
CSS:
*
{
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
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
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
Tak ho v HTML přesuň před slider. Pořadí prvků se pomocí CSS nesnaž měnit.
michal454454
Profil
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
diky uz to jde... :) a co to je ten z-index? :) jen tak
Tomáš123
Profil
michal454454:
a co to je ten z-index?
A čo tak pohľadať? Mne stačili 3 kliky a mám to.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: