ho menu orizzontale con sotto il menu delle grandi immagini che scorrono slideshow ma non riesco centrare sotto il menu margin e padding 0 ci sono.
inserisco il codice :
.protoshow,
.protoshow .show {
position:relative;
margin:0;
padding: 0;
list-style: none;
width: 900px;
height: 300px;
}
.slide {
position: absolute;
top: 0;
left: 0;
z-index: 90;
height: 100%;
}
.active-slide {
z-index: 100;
}
.protoshow .slide-caption {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
padding: 1em 10px;
background-color: #000;
background-color: rgba(0,0,0,.4);
color:#fff;
}
.proto-progress-timer {
position: absolute;
top: 7px;
right: 7px;
z-index: 9990;
}
/* TRANSITION SLIDE
------------------------------------------------*/
.transition-slide .show-window {
overflow: hidden;
position: relative;
}
.transition-slide .show {
position: absolute;
top: 0;
left: 0;
width: 999999px;
}
.transition-slide .slide {
position: static; /*overide*/
float: left;
display: block;
}
/* PROTO CONTROLS
------------------------------------------------*/
.proto-controls,
.proto-navigation {
margin: 0;
padding: 0;
list-style: none;
}
.proto-controls a:link,
.proto-controls a:visited,
.proto-navigation a:link,
.proto-navigation a:visited {
display: block;
text-indent: -9999px;
overflow: hidden;
}
.proto-controls li {
position: absolute;
top: 50%;
margin-top: -36px;
left: 10px;
width: 10%;
height: 100%;
z-index: 110;
}
.proto-controls .forward {
right: 10px;
left: auto;
}
.proto-controls a {
width: 100%;
height: 61px;
background: url(../img/proto_controls_bg.png) no-repeat 0 0;
opacity: 0.2;
-moz-opacity: 0.2;
filter:alpha(opacity=20);
}
.proto-controls a:hover,
.proto-controls a:focus {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
.proto-controls .forward a {
background-position: 100% -90px;
}
/* PROTO NAVIGATION
------------------------------------------------*/
.proto-navigation {
position: absolute;
top: 0;
right: 50%;
float: right;
z-index: 120;
}
.proto-navigation li {
float: left;
left: 50%;
padding: 12px 6px;
position: relative;
}
.proto-navigation a {
background-color: #fff;
background-color: rgba(0,0,0,.2);
height: 8px;
text-decoration: none;
width: 8px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow: inset 0 1px 0 1px rgba(0,0,0,.1);
-webkit-box-shadow: inset 0 1px 0 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 1px rgba(0,0,0,.1);
}
.proto-navigation a:hover,
.proto-navigation a:focus {
background-color: #999;
}
.proto-navigation .current-slide a {
background-color: #363F4E;
}
il file reset
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
Rispondi quotando
