My "Products" bar isn't where is supposed to be. I am trying to put it near my sidebar in left. I don't want so much distance.
I have "float:left". I can't move it to the left using margin-left or right.
If I have "float:right", I can do this, but I don't want that.
I want to set it with "float:left" option.
Photo
tast.html
<!DOCTYPE html>
<html>
<!-- START HEAD -->
<head>
<meta charset="utf-8">
<title>xPeke</title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="images/favicon-16x16.png" sizes="16x16" type="image/png">
</head>
<!-- END HEAD -->
<!-- START BODY -->
<body>
<div class="content">
<!-- START TOPBAR -->
<div id="program">
<b style="color:black;">Program:</b> Luni-Vineri: 9:00-22:00 Sambata: 9:00–20:00 Duminica: Inchis
Login <span> / </span> Register
</div><br>
<!-- END TOPBAR -->
<!-- START SLIDESHOW -->
<div class="slideshow-container">
<img class="mySlides" src="images/logo1.png" alt="Logo1" width="1500" height="300">
<img class="mySlides" src="images/logo2.png" alt="Logo2" width="1500" height="300">
<img class="mySlides" src="images/logo3.png" alt="Logo3" width="1500" height="300">
<div class="butonpoza">
<button onclick="clearTimeout(timer)">Opreste Animatia</button>
<div class="dotts">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a><br>
</div>
<!-- END SLIDESHOW -->
<!-- START LOGO, SEARCH & SOCIAL BAR -->
<div>
<img src="images/logo.png" alt="Logo" width="180" height="45" style="float:left">
<input class="search" type="text" name="search" placeholder="Search..">
<div style="float:right">
<img class="socialmedia" src="images/facebook.png" alt="Facebook">
<img class="socialmedia" src="images/youtube.png" alt="Youtube">
<img class="socialmedia" src="images/reddit.png" alt="Reddit">
</div>
</div>
<!-- END LOGO, SEARCH & SOCIAL BAR -->
<!-- START NAVIGATION BAR -->
<div style="float:left"><br>
<ul>
<li class="dropdown"><a class="active" href="#home">Produse</a>
<div class="dropdown-content">
Laptop, Telefoane & Tablete
Televizoare & Desktop
Tehnologii Smart
Haine & Accesorii
Anime & Manga
Carti de Joc
Jocuri & Jucarii
</div>
</li>
<li>Articole</li>
<li>Promotii</li>
<li>Wishlist</li>
<li>FAQ</li>
<li style="padding: 0px 432.5px;"></li>
<li style="float:right">Cosul meu</li>
<li style="float:right">Contul meu</li>
</ul>
</div>
<!-- END NAVIGATION BAR -->
<!-- START SIDEBAR -->
<div style="float:left"><br>
Noutati
Cele mai populare
Cele mai vandute
Precomenzi
Oferte speciale
<h3>Anunturi</h3>
<aside class="sidebar">
<section class="articles">
<article class="article clearfix">
<img class="article__image" src="images/art1.png" alt="Hello World!">
<div class="article__content">
<h3 class="article__title">Hello Everyone!</h3>
<p class="pby">posted by xPeke</p>
</div>
</article>
<article class="article clearfix">
<img class="article__image" src="images/art2.png" alt="Yu-Gi-Oh!">
<div class="article__content">
<h3 class="article__title">We've added the newest Yu-Gi-Oh cards.</h3>
<p class="pby">posted by Rekkles</p>
</div>
</article>
<article class="article clearfix">
<img class="article__image" src="images/art3.png" alt="iPhone">
<div class="article__content">
<h3 class="article__title">A aparut noul iphone 8.</h3>
<p class="pby">posted by Soaz</p>
</div>
</article>
</section>
</aside>
<form class="twentyone">
<fieldset>
<legend>Newsletter</legend><br>
<div>
Daca vrei sa afli ultimele promotii si noutați aboneaza-te la newsletter-ul Fnatic!
</div><br>
<div>
<input class="newslt" type="text" name="newslt" placeholder="Email">
</div><br>
<div>
<button class="fltrgt" type="submit">Aboneaza-te!</button>
</div>
</fieldset>
</form><br>
</div>
<!-- END SIDEBAR -->
<!-- START PRODUSE RECOMANDATE BAR -->
<div class="prodrec">
<h2> Products </h2>
<table>
<tr>
<td>
<div id="1" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="2" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="3" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
</tr>
<!-- Spatiu-->
<tr>
<td></td>
<td><br></td>
</tr>
<!-- pana aici-->
<tr>
<td>
<div id="4" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="5" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="6" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
</tr>
<!-- Spatiu-->
<tr>
<td></td>
<td><br></td>
</tr>
<!-- pana aici-->
<tr>
<td>
<div id="7" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="8" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="9" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
</tr>
<!-- Spatiu-->
<tr>
<td></td>
<td><br></td>
</tr>
<!-- pana aici-->
</table>
</div>
<!-- END PRODUSE RECOMANDATE BAR -->
<div style="float:right">
<h1> RIGHT! </h1>
</div>
<!-- START SCRIPT ZONE -->
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 10000);
}
</script>
<!-- END SCRIPT ZONE -->
<!-- START FOOTER -->
<footer style="float:left">
<div class="skills">© Cat e facut din site pana acum: 60%</div>
</footer>
<!-- END FOOTER -->
</div>
</body>
<!-- END BODY -->
</html>
test.css
.prodrec{
float: left;
}
/* START BODY */
body{
background-image: url("images/bgd.png");
background-repeat: repeat;
}
.content {
max-width: 1500px;
margin: auto;
padding: 10px;
}
/* END BODY */
/* START TOPBAR */
#program{
font-size: 90%;
font-family: 'Oswald', sans-serif;
color: #2E2EFE;
font-style: normal;
font-weight: 700;
padding: 0;
border: 0;
text-transform: uppercase;
padding-bottom: 0;
}
a{
color: #2E2EFE;
text-decoration: none;
font-weight: 700;
}
/* END TOPBAR */
/* START SLIDESHOW */
.slideshow-container{
position: relative;
}
.mySlides{
display:none;
width:100%;
}
.butonpoza{
float: right;
margin-right: 10px;
margin-top: -30px;
position:relative;
}
/* END SLIDESHOW */
/* START SAGETI */
.prev, .next{
cursor: pointer;
position: absolute;
top: 50%;
width: 15px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 25px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
width: 15px;
right: 0px;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8);
}
/* END SAGETI */
/* START DOTTS */
.dot{
cursor:pointer;
height: 17px;
width: 17px;
margin: 0 10px;
background-color: black;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: white;
}
.dotts{
text-align: center;
margin-left: -1362px;
margin-top: -20px;
}
/* END DOTTS */
/* START SEARCH AND SOCIAL BAR */
.search{
width: 10px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("images/search.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-left: 32px;
width: 69%;
}
.socialmedia{
height: 50px;
width: 50px;
}
/* END SEARCH AND SOCIAL BAR */
/* START NAVIGATION BAR */
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active){
background-color: #111;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dropbtn{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.active{
background-color: #4CAF50;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover:not(.active){
background-color: #ddd;
}
.dropdown:hover .dropdown-content{
display: block;
}
/* END NAVIGATION BAR */
/* START SIDEBAR */
.da{
display: block;
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
background-color: #f9f9f9;
text-transform: uppercase;
box: 5px;
width: 250px;
border: 1px solid #555;
}
.da:hover:not(.active){
background-color: #fb2545;
}
.sidebar{
width: 50%;
float: left;
}
.sidebar .article__image{
float: left;
width: 35%;
}
.sidebar .article__content{
float: right;
width: 61%;
padding-left: 10px;
}
.sidebar .article__title{
display: block;
text-transform: uppercase !important;
line-height: 16px;
font-family: 'Oswald' !important;
}
.pby{
font-family: 'Play', sans-serif;
color: #995d08;
font-size: 13px;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.twentyone{
display: block;
width: 50%;
}
.newslt{
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("images/email.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
width: 100%;
}
.fltrgt{
float: right;
}
/* END SIDEBAR */
/* START PRODUSE RECOMANDATE BAR */
tr{
display: block;
}
td{
display: inline-block;
}
.items{
display: inline-block;
text-align: center;
width: 180px;
margin: 0 7px 0 7px;
padding-top: 10px;
border: 1px solid #999;
border-radius: 20px;
}
.items img{
width: 160px;
height: 140px;
border: 1px solid rgba(207, 207, 207, .7);
}
.items button{
background: #666;
width: 80px;
height: 26px;
float: right;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: none;
border-bottom: none;
outline: none;
cursor: pointer;
border-bottom-right-radius: 20px;
transition: background 0.2s ease-in;
}
.items button:hover{
background: #888;
}
.desc, .price, .other{
display: block;
margin-bottom: 10px;
}
/* END PRODUSE RECOMANDATE BAR */
/* START FOOTER */
footer{
height: 40px;
width: 60%;
text-align: center;
color: white;
background-color: #2196F3;
}
.skills{
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
/* END FOOTER */
Have you considered using bootstrap to create your layout? It makes things like this really easy.
Check it out here : http://getbootstrap.com/examples/grid/
You can use pull-right and pull-left within your columns to align your content and text-right and text-left for text.
I believe pull-right and pull-left have been replaced with float-right and float-left in Bootstrap 4.
Have fun experimenting with bootstrap!
This site lets you play around with your layouts also http://www.bootply.com
Related
I have created a discrete legend using HTML, but I am struggling with trying to get the legend title to align correctly, irrespective of the length of the text within the title.
Here is an example of what it looks like in my app for a short title
... whereas this is what it is like for a longer title
Below is an attempt at a minimal working example
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
}
/* Control the right side */
.right {
right: 0;
background-color: #999;
}
.box{
background-color: black;
height: 100%;
width: 100%;
}
.my-legend .legend-title {
text-align: center;
margin-bottom: 5px;
font-weight: bold;
font-size: 30px;
color: red;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
text-align: right;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
color: white;
font-size: 20px;
padding-bottom: 40px;
}
.my-legend ul.legend-labels li span {
display: block;
float: right;
height: 45px;
width: 20px;
margin-right: 0px;
margin-left: 5px;
border: 1px solid #999;
}
<div class="row" id="content">
<!-- Image Panel -->
<div class="split left" style="position: relative; height: 800px">
<!-- This is a dynamically generated panel ... but just black here as example -->
<div id="imagePanel" class="box"></div>
<!-- Legend entries -->
<div class='my-legend'
style="position:absolute;
right: 10%; top: 50%;
transform-box: fill-box;
transform: translate(0%,-50%);">
<div class='legend-scale'>
<ul class='legend-labels'>
<li> <b>0</b> <span style="background: rgb(128,64,0)"> </span> </li>
<li> <b>1</b> <span style="background: rgb(251,255,128)"></span> </li>
<li> <b>2</b> <span style="background: rgb(55,128,0)"> </span> </li>
<li> <b>3</b> <span style="background: rgb(128,255,140)"></span> </li>
<li> <b>4</b> <span style="background: rgb(0,128,81)"> </span> </li>
<li> <b>5</b> <span style="background: rgb(128,234,255)"></span> </li>
<li> <b>6</b> <span style="background: rgb(0,38,128)"> </span> </li>
<li> <b>7</b> <span style="background: rgb(157,128,255)"></span> </li>
<li> <b>8</b> <span style="background: rgb(98,0,128)"> </span> </li>
<li> <b>9</b> <span style="background: rgb(255,128,217)"></span> </li>
</ul>
</div>
</div>
<!-- Legend Title -->
<div class='my-legend'
style="position:absolute;
right: 0; top: 50%;
transform-box: fill-box;
transform: translate(0%,-50%);
transform: rotate(-90deg)">
<div class='legend-title' >True Label</div>
</div>
</div>
<!-- Controls -->
<div class="split right" id="controlsPanel" >
Some Other Panel will go here
</div>
</div>
writing-mode should sidestep the width/height headache caused by rotating, but I can't find a way to avoid having to rotate by 180 to flip it the way you want.
Edit: Replaced absolute/relative positioning with grid, positioned legend text without overlay.
/* Split the screen in half */
body {
margin: 0;
}
.row {
display: grid;
grid-template-columns: 50% 50%;
}
.left {
display: grid;
grid-template-columns: 4fr min-content 1fr;
background-color: black;
}
.right {
background-color: #999;
}
.legend-title {
max-height: 40ch;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
font-weight: bold;
font-size: 2rem;
color: red;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
text-align: right;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
color: white;
font-size: 20px;
padding-bottom: 40px;
}
.my-legend ul.legend-labels li span {
display: block;
float: right;
height: 45px;
width: 20px;
margin-right: 0px;
margin-left: 5px;
border: 1px solid #999;
}
<div class="row" id="content">
<!-- Image Panel -->
<div class="split left">
<!-- This is a dynamically generated panel ... but just black here as example -->
<div id="imagePanel" class="box"></div>
<!-- Legend entries -->
<div class='my-legend'>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><b>0</b> <span style="background: rgb(128,64,0)"></span></li>
<li><b>1</b> <span style="background: rgb(251,255,128)"></span></li>
<li><b>2</b> <span style="background: rgb(55,128,0)"></span></li>
<li><b>3</b> <span style="background: rgb(128,255,140)"></span></li>
<li><b>4</b> <span style="background: rgb(0,128,81)"></span></li>
<li><b>5</b> <span style="background: rgb(128,234,255)"></span></li>
<li><b>6</b> <span style="background: rgb(0,38,128)"></span></li>
<li><b>7</b> <span style="background: rgb(157,128,255)"></span></li>
<li><b>8</b> <span style="background: rgb(98,0,128)"></span></li>
<li><b>9</b> <span style="background: rgb(255,128,217)"></span> </li>
</ul>
</div>
</div>
<!-- Legend Title -->
<div class='legend-title'>True Label test test test test test test test test test test test test test test test test test test test</div>
</div>
<!-- Controls -->
<div id="controlsPanel" class="split right">
Some Other Panel will go here
</div>
</div>
I am trying to implement a fixed header on a relatively simple site I am working on. It works on every page except one with an image gallery I have co-opted where the fixed header appears behind the photos in the gallery. I have tried setting the z-index property but it is either not working or I don't quite understand how it works. Any help would be much appreciated.
CSS:
#charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
.clr{
clear: both;
}
.parallax {
background-image: url("../images/bg.jpg");
height: 1080px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
a{
text-decoration: none;
color:#000000;
}
a:hover{
color:#FF0004;
}
a:active{
color:#000000;
}
a:visited{
color:#000000;
}
.main-header{
background-color: #ffffff;
line-height: 1;
}
.main-header h1{
color: #F800FF;
font-size: 9vw;
padding: 0;
}
.navbar{
background-color:#BCBCBC;
color:#FFFFFF;
width:100%;
line-height: normal;
padding: 1vw;
}
.navbar ul{
padding: 0px;
list-style: none;
}
.navbar li{
display:inline;
}
.navbar a{
color: #FFFFFF;
text-decoration: none;
vertical-align: middle;
font-size: calc(10px + .6vw);
padding: 1.5vw;
}
.navbar a:hover{
*/border-top: #F800FF solid thick;*/
}
.footer-bar{
background-color:#BCBCBC;
color:#FFFFFF;
line-height: normal;
padding-top: 1vw;
padding-bottom: 1vw;
margin-top: 2vw;
}
.footer-bar ul{
padding: 0px;
list-style: none;
}
.footer-bar li{
display:inline;
margin-left: .5vw;
margin-right: .5vw;
}
body{
margin: 0;
/*background-image: url("");
background-size:cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;*/
background-color: #ffffff;
color: #000000;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 18px;
font-weight: normal;
line-height: 1.6em;
}
h1{
color:#000000;
font-size: 3vw;
padding-bottom: .5em;
padding-top: 1.5em;
}
h2{
font-size: 2vw;
color:#000000;
padding-bottom: .5em;
padding-top: .5em;
}
h3{
font-size: 2vw;
color:#000000;
padding-bottom: .5em;
padding-top: .5em;
}
.container{
}
.container{
width: 80%;
margin: auto;
text-align: center;
}
.container-h{
width: 95%;
margin: auto;
text-align: center;
}
.container-f{
width: 95%;
margin: auto;
text-align: center;
}
.box-1{
background-color: #ffffff;
color: #000000;
/*opacity: 0.9;*/
/*filter: alpha(opacity=90);*/
padding: 10px;
margin: 20px 0;
}
.categories{
background-color:#00FFE8;
color:#000000;
/*opacity: 0.9;*/
/*filter: alpha(opacity=90);*/
border: 10px solid #000000;
padding: 10px;
}
.categories ul{
padding: 0;
list-style: none;
}
.categories li{
padding-bottom: 4px;
border-bottom: 2px #000000 dashed;
}
/*FOR CSS IMAGE GALLERY*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.heading {
text-align: center;
font-size: 2.0em;
letter-spacing: 1px;
padding: 40px;
color: white;
}
.gallery-image {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery-image img {
height: 250px;
width: 350px;
transform: scale(1.0);
transition: transform 0.4s ease;
}
.gallery-image-c img {
height: 350px;
width: 350px;
transform: scale(1.0);
transition: transform 0.4s ease;
}
.img-box {
box-sizing: content-box;
margin: 10px;
height: 250px;
width: 350px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
}
.img-box-c {
box-sizing: content-box;
margin: 10px;
height: 350px;
width: 350px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
}
.caption {
position: absolute;
bottom: 5px;
left: 20px;
opacity: 0.0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.transparent-box {
height: 250px;
width: 350px;
background-color:rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
}
.transparent-box-c {
height: 350px;
width: 350px;
background-color:rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
}
.img-box:hover img {
transform: scale(1.1);
}
.img-box-c:hover img {
transform: scale(1.1);
}
.img-box:hover .transparent-box {
background-color:rgba(0, 0, 0, 0.5);
}
.img-box-c:hover .transparent-box-c {
background-color:rgba(0, 0, 0, 0.5);
}
.img-box:hover .caption {
transform: translateY(-20px);
opacity: 1.0;
}
.img-box-c:hover .caption {
transform: translateY(-20px);
opacity: 1.0;
}
.img-box:hover {
cursor: pointer;
}
.img-box-c:hover {
cursor: pointer;
}
.caption > p:nth-child(2) {
font-size: 0.8em;
}
.opacity-low {
opacity: 0.5;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<div class="container-h">
<h1>HEADING</h1>
</div>
</header>
<nav class="navbar" id="myNavbar">
<div class="container">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
</nav>
<div class="box-1">
<div class="container">
<div class="gallery-image">
<a href="images/bandpics/promo1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/promo1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p></p>
<p class="opacity-low"></p>
</div>
</div>
</div></a>
<a href="images/bandpics/poster.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/poster.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo2.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo2.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo3.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo3.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band2.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band2.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band1.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band1.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/band3.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/band3.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/falling.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/falling.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/terrorpromo.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/terrorpromo.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/mirror.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/mirror.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
<a href="images/bandpics/promo4.jpg" target="_blank"><div class="img-box">
<img src="images/bandpics/thumbs/promo4.jpg" alt="" />
<div class="transparent-box">
<div class="caption">
<p> </p>
<p class="opacity-low"> </p>
</div>
</div>
</div></a>
</div>
</div>
</div>
<div class="clr"></div>
<footer class="footer-bar">
<div class="container-f">
<ul>
<li><img src="images/socialmedia/instagram.png" alt="Instagram" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/facebook.png" alt="Facebook" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/twitter.png" alt="Twitter" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/spotify.png" alt="Spotify" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/apple.png" alt="Apple Music" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/youtube.png" alt="YouTube" style="width: calc(20px + 2vw)"</li>
<li><img src="images/socialmedia/soundcloud.png" alt="Soundcloud" style="width: calc(20px + 2vw)"</li>
</ul>
</div>
</footer>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myNavbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
Unless I misunderstood your question, but if you add z-index: 1: to navbar class it seems to fix your problem.
.navbar {
z-index: 1;
}
I'm new to .html, self taught, finishing up a website but I'm having some issues with my header.
I have some text that scales on hover, but if part of the text is obscured by the header the text will scale and appear on top of the header, how do I fix this?
I've included a snippet to show what I mean.
/************************** Header *******************/
header {
min-height: 150px;
background: #ccc;
position: fixed;
width: 100%;
}
header ul{
display: inline;
text-align: left;
}
header ul li{
margin-left: 0px;
padding: 2px;
}
header ul li:first-child{
margin-left: 0px;
padding: 2px;
}
header ul li:last-child{
margin-bottom: 30px;
padding: 2px;
}
.spacer{
height: 150px;
}
/********************* Table & Buttons ******************/
.select{
height: 100%;
background-color: #f2f2f2;
padding-top: 35px;
padding-bottom: 35px;
}
.category {
margin: 0 auto;
width: 90%;
border-collapse: collapse;
height: 10%;
background-color: #f2f2f2;
text-align: center;
font-size: xx-large;
}
.mb, .ce{
width: 50%;
}
.mb{
border-right: 2px solid #2F4858;
}
.mb:hover, .ce:hover{
transform: scale(1.1);
transition: transform .2s;
}
.sub{
text-align: center;
font-size: x-large;
width: 100%;
}
.btn {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.spacer2 {
height: 140px;
background: #f2f2f2;
}
<header>
<nav>
<ul>
<li>
<a>Home</a>
</li>
<li class="current">
Portfolio
</li>
<li>
<a>About</a>
</li>
<li>
<a>Contact / Services</a>
</li>
</ul>
</nav>
</header>
<section class="spacer">
</section>
<seciton>
<div class="sub">
<p> Links </p>
</div>
<div class="select">
<table class="category">
<tr>
<td class="mb" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number One</p>
</button>
</td>
<td class="ce" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number Two</p>
</button>
</td>
</tr>
</table>
</div>
</seciton>
<section class="spacer2">
</section>
Using z-index on your header and yours section (be carefull you have wrote seciton one time) did the trick:
/************************** Header *******************/
header {
min-height: 150px;
background: #ccc;
position: fixed;
width: 100%;
z-index: 1; /* ---Set a z-index here--- */
}
header ul{
display: inline;
text-align: left;
}
header ul li{
margin-left: 0px;
padding: 2px;
}
header ul li:first-child{
margin-left: 0px;
padding: 2px;
}
header ul li:last-child{
margin-bottom: 30px;
padding: 2px;
}
.spacer{
height: 150px;
}
/********************* Table & Buttons ******************/
.select{
height: 100%;
background-color: #f2f2f2;
padding-top: 35px;
padding-bottom: 35px;
}
.category {
margin: 0 auto;
width: 90%;
border-collapse: collapse;
height: 10%;
background-color: #f2f2f2;
text-align: center;
font-size: xx-large;
}
.mb, .ce{
width: 50%;
}
.mb{
border-right: 2px solid #2F4858;
}
section {
z-index: 0; /* ---And another here that is lower--- */
}
.mb:hover, .ce:hover{
transform: scale(1.1);
transition: transform .2s;
z-index: 0;
}
.sub{
text-align: center;
font-size: x-large;
width: 100%;
}
.btn {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.spacer2 {
height: 140px;
background: #f2f2f2;
}
<header>
<nav>
<ul>
<li>
<a>Home</a>
</li>
<li class="current">
Portfolio
</li>
<li>
<a>About</a>
</li>
<li>
<a>Contact / Services</a>
</li>
</ul>
</nav>
</header>
<section class="spacer">
</section>
<section>
<div class="sub">
<p> Links </p>
</div>
<div class="select">
<table class="category">
<tr>
<td class="mb" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number One</p>
</button>
</td>
<td class="ce" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number Two</p>
</button>
</td>
</tr>
</table>
</div>
</section>
<section class="spacer2">
</section>
⚠️I really recommand you to wrap all your content that is not in the header in a <main></main> component to easily write this type of cleaner css rules:
header {
z-index: 1;
}
main{
z-index: 0;
}
I am trying to position the "selected" hero on the right to be aligned with the gallery of heroes to the left so I can add information and a button below the selected hero later on. This page is only missing a paragraph of text that will go below both the gallery; The selected hero and a confirmation button that will go under the hero portrait on the right. Would it be easier to contain all of it in one huge section? Or am I making this too complicated?
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time{
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow:hidden;
background-color: black;
}
.navbar a{
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover{
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
#heroList{
width: 1000px;
margin: 0 50px;
margin-top: 200px;
}
.heroes{
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames{
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color:black;
}
.heroes img{
width: 175px;
height: 175px;
}
#chosenHero{
width: auto;
margin: 0 50px;
margin-top: 50px;
}
.myHero{
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you cannot use grid system, try following CSS modifications:
var d = new Date();
document.getElementById("practice").innerHTML = d.toDateString();
body {
background-color: lightsteelblue;
margin: 0;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 70px;
text-shadow: 3px 3px grey;
}
.time {
position: absolute;
top: 100%;
right: 0;
}
.navbar {
overflow: hidden;
background-color: black;
}
.navbar a {
float: left;
display: block;
color: White;
text-align: center;
padding: 10px 10px;
font-size: 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: white;
color: black;
}
.navbar a:active {
background-color: grey;
color: white;
}
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 12px;
}
.navbar:after {
clear: both;
content: "";
display: block;
}
#heroList {
width: calc(100% - 200px);
float: left;
}
.heroes {
margin: 5px;
border: 1px solid black;
width: 180px;
float: left;
}
.heroNames {
padding: 10px;
text-align: center;
color: white;
font-weight: bold;
background-color: black;
}
.heroes img {
width: 175px;
height: 175px;
}
#chosenHero {
width: 200px;
float: left;
}
.myHero {
border: 1px solid black;
width: 180px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="navbar">
Home
<a class="active" href="hero.html">Hero</a>
About
<input type="text" placeholder="Search..">
</div>
<h1>CHOOSE YOUR HERO</h1>
<!--Hero table goes here(10 heroes, 2x5)-->
<div id="heroList">
<!--Hero portraits go here(outlined, not selectable)-->
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/06/Heroes_Valter_Sprite_%283%2A%29.png/revision/latest?cb=20180427060005"><div class="heroNames"><a>Valter</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/6/65/Heroes_Walhart_Sprite_%283%2A%29.png/revision/latest?cb=20180811070849"><div class="heroNames"><a>Walhart</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/b/bc/Heroes_Zelgius_Sprite.png/revision/latest?cb=20180527163939"><div class="heroNames"><a>Zelgius</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/7/71/Heroes_Roy_Sprite_%283%2A%29.png/revision/latest?cb=20180512034742"><div class="heroNames"><a>Roy</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/8b/Heroes_Arvis_Sprite.png/revision/latest?cb=20180428141625"><div class="heroNames"><a>Arvis</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/51/Heroes_Cordelia_Sprite_%283%2A_%26_4%2A%29.png/revision/latest?cb=20180605063103"><div class="heroNames"><a>Cordelia</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/8/85/Heroes_Peri_Sprite_%283%2A%29.png/revision/latest?cb=20180612160011"><div class="heroNames"><a>Peri</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/0/04/Heroes_Effie_Sprite_%283%2A%29.png/revision/latest?cb=20180612034721"><div class="heroNames"><a>Effie</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/5/53/Heroes_Anna_Sprite_%28Default%29.png/revision/latest?cb=20180614160859"><div class="heroNames"><a>Anna</a></div>
</div>
<div class="heroes">
<img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--The chosen Hero goes here(selectable)-->
<div id="chosenHero">
<div class="myHero"><img src="https://vignette.wikia.nocookie.net/fireemblem/images/a/a5/Heroes_Ishtar_Sprite.png/revision/latest?cb=20180511072816"><div class="heroNames"><a>Ishtar</a></div>
</div>
</div>
<!--Button for confirmation goes here-->
</div>
<p id="practice" class="time"></p>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
This would be the proper way of doing it.
https://i.imgur.com/xIm2fbV.png
I can't position div's under my image slider. They all go above the slider as if the slider isn't within the container. Whenever I try to put another div under the wrapper the position is completely off. Is it because I have the slider in a wrapper div?
<body>
<div class="container" id="container-1">
<!--Navigation Begin-->
<div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="../Images/nav-logo.png" alt="Breakday Charters Logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>About</li>
<li>Booking</li>
<li>Report</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<h3 id="number-head">Get Hooked</h3>
<p id="nav-number">(252)xxx-xxxx</p>
<li><img src="../Images/hook.png" alt="hook" id="nav-hook"/></li>
</ul>
</ul><!-- end nav pull-right -->
</div><!-- end nav-collapse -->
</div><!-- end container -->
</div><!-- end navbar -->
<!--================Carousel===============-->
<div id="wrapper">
<div id="carousel">
<img src="../Images/Carousel/breakday-boat-lrg.png"alt="Breakday Charters Boat" width="990" height="450" class="img-responsive" />
<img src="../Images/Carousel/turtle.png" alt="turtle" width="990" height="450" class="img-responsive"/>
<img src="../Images/Carousel/justin-and-fish.png" alt="Captain Justin" width="990" height="450" class="img-responsive" />
<img src="../Images/Carousel/shark.png" alt="shark" width="990" height="450" class="img-responsive" />
</div>
<div id="pager"></div>
</div><!--wrapper div end-->
</div><!--container-->
CSS:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/*Navigation*/
#custom-nav {
min-height:85px;
background: #FFF;
border-bottom:#0e76bc medium solid;
}
.nav.navbar-nav li a {
color: #0E76BC;
margin-top:25px;
font-size:15px;
}
.nav.navbar-nav li a:hover {
color: #494238;
}
.nav.navbar-nav.pull-right li #nav-hook {
position: absolute;
z-index: 1031;
top: -40px;
}
.nav.navbar-nav.pull-right #nav-number {
font-size: 16px;
color: #333;
font-weight: bold;
}
.nav.navbar-nav.pull-right #number-head {
font-weight: bold;
color: #0e76bc;
}
.nav.navbar-nav.pull-right {
margin-top: 5px;
}
/* --------------------------------------
Carousel
-------------------------------------- */
#wrapper {
background-color: #fff;
width: 100%;
height: 450px;
margin-top: -225px;
overflow: hidden;
position: absolute;
top: 40%;
left: 0;
}
#carousel img {
display: block;
float: left;
clear:right;
}
#prev, #next {
background-color: rgba(255, 255, 255, 0.7);
display: block;
height: 450px;
width: 50%;
top: 0;
position: absolute;
}
#prev:hover, #next:hover {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
}
#prev {
left: -495px;
}
#next {
right: -495px;
}
#pager {
margin-left: -470px;
position: absolute;
left: 50%;
bottom: 10px;
}
#pager a {
border: 2px solid #fff;
border-radius: 10px;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px 0 0;
}
#pager a:hover {
background-color: rgba(255, 255, 255, 0.5);
}
#pager a span {
display: none;
}
#pager a.selected {
background-color: #fff;
}
For slider banner you can try this
html
<div class="banner">
<div class="bannerslider">
<div class="slidertxt">
<div class="slidernumber">
<div id="nav">
<ul>
<li><a class="active" href="#" onclick="goto('#1', this); return false">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bannerimage">
<div id="contentt">
<div class="contentbox-wrapper">
<div id="1" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png" title="Haani"> </p>
</div>
<div id="2" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
<div id="3" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
<div id="4" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
<div id="5" class="contentbox">
<p> <img border="0" src="../Images/Carousel/breakday-boat-lrg.png"> </p>
</div>
</div>
</div>
</div>
</div>
css :
.banner {
width: 900px;
height: 357px;
margin:0;
float: left;
}
.bannerslider {
width: 500px;
position: absolute;
height: 351px;
float: left;
z-index: 80;
background-size: 350px 351px;
margin: 0 0 0 2px;
}
.slidertxt {
font-family: 'AUdimat-Regular';
font-weight: normal;
text-shadow: 0 2px 1px #000000;
color: #fbfbfb;
font-size: 14px;
width: 500px;
margin: 60px 0 0 30px;
position: absolute;
}
#contentt {
overflow: hidden;
}
.contentbox-wrapper {
position: relative;
left: 0;
width: 5000px;
height: 100%;
}
.contentbox {
width: 975px;
height: 100%;
float: left;
}
.slidertxt p {
font-family: 'AUdimat-Bold';
color: #fbfbfb;
font-size: 30px;
width: 960px;
}
.slidernumber {
height: 30px;
margin-top: -40px;
position: relative;
z-index: 10000;
}
#nav {
margin-top: 0;
}
#nav ul li {
display: inline;
}
.slidernumber a {
color: #fbfbfb;
text-decoration: none;
font-size: 13px;
font-family: 'AUdimat-Regular';
padding: 0 5px 0 5px;
margin: 5px 5px 0 10px;
display: inline;
float: left;
}
#nav a.active {
background: #fbfbfb;
border: 1px solid #fbfbfb;
border-radius: 10px;
color: #8a0338;
}
.bannerimage {
width: 975px;
height: 350px;
z-index: 0;
margin: 1px 2px 0 5px;
float: right;
}
JS :
function goto(id, t){
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
$('#nav a').removeClass('active');
$(t).addClass('active');
}
you can also try slider banner