tengo esta web
E insertado desde el psd e sacado el background el login menu content etc
Lo estado colocando con html mediante <div id"nombre"</div>
Ahora ya que saque toda las iamegenes las estaba colocando y decidi colocar un slider en la web.
El porbleman lo pueden ver en la imagen no esta centrado y desde el css nose que tocar por que no echo yo el slider y ni idea
dejare el css+html+scripts
CSS
Código:
HTML*{
margin:0;
padding:0;
}
body{
background-color:orangered;
font-family: 'Pathway Gothic One', sans-serif;
}
header{
background: gray;
text-align: center;
box-shadow: 0 .1em 1em black;
height: 30px;
line-height: 30px;
vertical-align: middle;
position: absolute;
}
header a{
color:whitesmoke;
text-decoration:none;
}
header a:hover{
color:#ddd;
}
#slider{
margin:150px auto;
box-shadow: 0 .1em 1em black;
-webkit-box-shadow: 0 .1em 1em black;
-moz-box-shadow: 0 .1em 1em black;
-o-box-shadow: 0 .1em 1em black;
}
/* ESTILOS DEL SLIDESHOW */
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
.bjqs-caption{
color:black;
background:whitesmoke;
opacity:.75;
}
/* BOTONERA UBICADA AL PIE DEL SLIDESHOW */
ol.bjqs-markers{
margin-top:35px;
}
ol.bjqs-markers li a{
padding: 5px 10px;
background: #000;
color: #fff;
margin: 5px;
text-decoration: none;
transition:background .5s ease;
-webkit-transition:background .5s ease;
-moz-transition:background .5s ease;
-o-transition:background .5s ease;
}
li.active-marker a, ol.bjqs-markers li a:hover{
background:gray!important;
}
/* CONTROLES ATRAS Y ADELANTE */
ul.bjqs-controls.v-centered li a {
display: block;
padding: 10px;
background: whitesmoke;
color: #000;
text-decoration: none;
opacity:.75;
transition:color .5s ease, background .5s ease;
-webkit-transition:color .5s ease, background .5s ease;
-moz-transition:color .5s ease, background .5s ease;
-o-transition:color .5s ease, background .5s ease;
}
ul.bjqs-controls.v-centered li a:hover{
background:#000;
color:#fff;
}
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>RevolutionMT2|FreeMMORPG</title> <link href="css/stile.css" rel="stylesheet" type="text/css" /> <!-- Incluimos la libreria jQuery --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Incluimos el plugin --> <script src="js/bjqs.min.js"></script> <script src="js/script.js"></script> <!-- Opcional, importamos una fuente a gusto --> <link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'> <!-- Importamos nuestra hoja de estilos CSS --> <link rel="stylesheet" href="css/estilos.css" /> </head> <div id="contenedor"> <body> <div id="contenedor"> <div id="ryen_menu"> </div> <div id="ryen_content"></div> <div id="ryen_bg1"> <div id="slider"> <ul class="bjqs"> <li> <img src="img/1.jpg" alt="" title="IMAGEN1" /> </li> <li> <img src="img/2.jpg" alt="" title="IMAGEN2" /> </li> <li> <img src="img/3.jpg" alt="" title="IMAGEN3" /> </li> </ul> </div> <div id="ryen_butons"></div> <div id="login"></div> </div> </div> </body> </div> </html>
[CODE]jQuery(document).ready(function($) {
$('#slider').bjqs({
// PARAMETROS OPCIONALES QUE NOS OFRECE EL PLUGIN
width : 500,
height : 300,
// animation values
animtype : 'fade', // accepts 'fade' or 'slide'
animduration : 500, // how fast the animation are
animspeed : 4000, // the delay between each slide
automatic : true, // automatic
// control and marker configuration
showcontrols : true, // show next and prev controls
centercontrols : true, // center controls verically
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev', // Text for 'previous' button (can use HTML)
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally
// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover
// presentational options
usecaptions : true, // show captions for images using the image title tag
responsive : true // enable responsive capabilities (beta)
});
});
Más dudas
Tambien querria saber como puedo añadir las funcide login menu y esas cosas daod que solamente las imagenes colocadas.
Saludos y gracias
