• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

WOW-Slider-Position

Flexi

Neues Mitglied
Hallo,
ich bin noch ein Anfänger mit HTML und wollte mir einen eigenen Slider erstellen.
Ich habe alles gut hinbekommen, nun stellt sich mir nur die Frage, wie ich den Slider positionieren kann.
Ich hänge mal den CSS Text an, da blicke ich leider nicht mehr durch.
Ich möchte den Slider genau zentriert in der Mitte haben und den Abstand von oben einstellen können.
Code:
/* bottom center */
#wowslider-container1  .ws_bullets {
    top:0;
    right: 0;
}

#wowslider-container1 { 
    /*overflow: hidden; */
    zoom: 1; 
    position: relative; 
    width:1300px;
    margin:0 auto;
    z-index:100;
    border:1px solid #FFFFFF;
}
#wowslider-container1 .ws_images{
    width:1300px;
    height:450px;
    overflow:hidden;
    position:relative;
}
#wowslider-container1 .ws_images a{
    color:transparent;
}

#wowslider-container1 .ws_images img{
    top:0;
    left:0;
    border:none 0;
    max-width: none;
}
#wowslider-container1 a{ 
    text-decoration: none; 
    outline: none; 
    border: none; 
}

#wowslider-container1  .ws_bullets { 
    font-size: 0px; 
    padding: 5px; 
    float: left;
    position:absolute;
    z-index:70;
}
#wowslider-container1  .ws_bullets div{
    position:relative;
    float:left;
}
#wowslider-container1 .ws_bullets a { 
    width:22px;
    height:20px;
    background: url(./bullet.png) left top;
    float: left; 
    text-indent: -1000px; 
    position:relative;
    color:transparent;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
    background-position: 0 100%; 
}

#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
    position:absolute;
    display:block;
    top:50%;
    margin-top:-16px;
    z-index:60;
    height: 50px;
    width: 39px;
    background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
    background-position: 100% 0; 
    right:0px;
}
#wowslider-container1 a.ws_prev {
    left:0px;
    background-position: 0 0;  
}
#wowslider-container1 .ws-title{
    position: absolute;
    bottom:7%;
    left: 0;
    margin-right:5px;
    z-index: 50;
    background: #FFF;
    color: #000;
    padding: 10px;
    font-size: 19px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-shadow: 1px 1px 0 #fff;
    opacity: 0.7;    
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
#wowslider-container1 .ws-title div{
    padding-top:5px;
    font-size: 13px;
}#wowslider-container1 .ws_bullets  a img{
    text-indent:0;
    display:block;
    top:18px;
    left:-130px;
    visibility:hidden;
    position:absolute;
    border: 1px solid #FFFFFF;
}
#wowslider-container1 .ws_bullets a:hover img{
    visibility:visible;
}

#wowslider-container1 .ws_bulframe div div{
    height:90px;
    overflow:visible;
    position:relative;
}
#wowslider-container1 .ws_bulframe div {
    left:0;
    overflow:hidden;
    position:relative;
    width:260px;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
    display:none;
    top:20px;
    overflow:visible;
    position:absolute;
    cursor:pointer;
    border: 1px solid #FFFFFF;
}
#wowslider-container1 .ws_bulframe span{
    display:block;
    position:absolute;
    top:-7px;
    margin-left:3px;
    left:130px;
    background:url(./triangle.png);
    width:15px;
    height:6px;
}
Hoffe, das hier mir jemand helfen kann..
 
Werbung:
ich glaube nicht, das du ihn selber 'erstellt' hast.
mit margin:0 auto; kannst du einen Container zentrieren.

Allerdings fehlt hier der HTML Code, und es wäre in diesem Fall sicher besser es live sehen zu können (es gibt genug Freehoster[sogar Dropbox geht])
 
Werbung:
Zurück
Oben