In this my footer takes and covers my con div an I don't know why.
I need to make this as responsive webpage.
How to achieve that?
I googled and found that most of them are using media queries but I am not able to understand.
If I take footer right:0; then footer disappears completely. Any solution?
body {
margin: 0 px;
}
#wrapper {
width: 100 % ;
height: auto;
margin: 0 px;
background - color: orange;
}
#header, #footer {
width: 100 % ;
height: 50 px;
position: fixed;
background - color: black;
right: 0 px;
z - index: 100;
}
#header {
top: 0;
}
#footer {
bottom: 0;
left: 0;
right: 0;
padding: 10 px;
color: white;
clear: both;
}
#footer img {
float: right;
margin: 5 px;
padding: 5 px;
}
#navbar {
height: 60 px;
width: 100 % ;
background - color: black;
color: white;
float: left;
overflow: hidden;
}
ul li {
display: block;
position: relative;
padding: 20 px 20 px;
float: left;
}
ul li a {
color: white;
}
#navbar a: hover {
border - bottom: 3 px solid red;
padding: 19 px;
}
.active {
background - color: gray;
}
#myCarousel {
background - color: white;
height: 370 px;
width: 100 % ;
float: left;
}
.carousel - inner > .item > img,
.carousel - inner > .item > a > img {
width: 70 % ;
height: 15 % ;
margin: auto;
background - color: white;
}
.thumbnail {
height: 300 px;
width: 300 px;
padding: 25 px auto;
margin: 5 px;
}
#con {
width: 100 % ;
height: 300 px;
}
.contact {
width: 60 % ;
height: 300 px;
background - color: grey;
padding: 100 px 25 px;
float: left;
}
.enquiry {
width: 40 % ;
height: 300 px;
background - color: seagreen;
float: left;
padding - left: 5 px;
}
input[type = text]: focus {
border: 3 px solid red;
}
input[type = "text"] {
margin: 0 0 15 px 0;
}
<!doctype html>
<html>
<head>
<title>student</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
<!--start wrapper-->
<div id="header">
<!--start header-->
<div class="navbar">
<!--start nav-->
<ul>
<li><a class="active" href="home.html">Home</li>
<li><a href="about.html">About us</li>
<li><a href="services.html">Services</li>
<li><a href="products.html">Products</li>
<li><a href="contact.html">Contact us</li>
</ul>
</div>
<!--end nav-->
</div>
<!--end header-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--carasel start-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!--start carosel inner-->
<div class="item active">
<img src="../task/photo/h.jpg" alt="Home">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/as.jpg" alt="About us">
<div class="carousel-caption">
<h3>About us</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/s.jpg" alt="Services">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/p.jpg" alt="Products">
<div class="carousel-caption">
<h3>products</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/c.jpg" alt="Contact us">
<div class="carousel-caption">
<h3>Contact us</h3>
</div>
</div>
</div>
<!--carosel inner end-->
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--end carosel-->
<div class="container-fluid text-center bg-grey">
<!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p> <strong>Innovation</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p> <strong>Creativity</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p>
<strong>Positivity</strong>
</p>
</div>
</div>
</div>
<!--end boxes-->
<div id="con">
<!--start con-->
<div class="contact">
<!-- start contact-->
<h1>Address</h1>
<p>
<span class="glyphicon glyphicon-map-marker"></span>
Abc private limited no54,2ndstreet, madipakkam, chennai-67.
</p>
<p>
<span class="glyphicon glyphicon-envelope"></span>
ABCPVT#gmail.com
</p>
</div>
<!--end contact-->
<div class="enquiry">
<!--start enquiry-->
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td><input name="name" placeholder="Name" type="text" value=""></td>
</tr>
<<tr>
<td>Email</td>
<td><input name="email" placeholder="Email" type="text" value=""></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="msg" placeholder="Type your text here..."></textarea>
</td>
</tr>
<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
</tr>
</form>
</table>
</div>
<!--end enquiry-->
</div>
<!--end con-->
<div id="footer">
<!--start footer-->
copyrights © to WWW.abcpvt.com
<img src="../task/photo/fb.png" alt="fb" />
<img src="../task/photo/ln.png" alt="tweet" />
<img src="../task/photo/tw.png" alt="linkedin" />
</div>
<!--end footer-->
</div>
<!--end wrapper-->
</div>
</body>
</html>
You need to put it into the column structure that you're using with bootstrap, the bootstrap framework you are using is fully responsive please see http://getbootstrap.com and look at their tuts
This will do,
Add the following css element:
#footer{
position:relative;
}
You are using bootstrap but you are not using the classes that comes with it. You do not need those many css and you can still have a responsive webpage in no time. Please follow this tutorial on bootstrap: http://www.w3schools.com/bootstrap/
Hope this helps,
Thanks
I think all you're needing is padding: 50px 0 for the body tag. Let me know if you're looking for something different.
body {
margin: 0px;
padding: 50px 0;
}
#wrapper {
width: 100%;
height: auto;
margin: 0px;
background-color: orange;
}
#header,
#footer {
width: 100%;
height: 50px;
position: fixed;
background-color: black;
right: 0px;
z-index: 100;
}
#header {
top: 0;
}
#footer {
bottom: 0;
left: 0;
right: 0;
padding: 10px;
color: white;
clear: both;
}
#footer img {
float: right;
margin: 5px;
padding: 5px;
}
#navbar {
height: 60px;
width: 100%;
background-color: black;
color: white;
float: left;
overflow: hidden;
}
ul li {
display: block;
position: relative;
padding: 20 px 20 px;
float: left;
}
ul li a {
color: white;
}
#navbar a:hover {
border-bottom: 3px solid red;
padding: 19px;
}
.active {
background-color: gray;
}
#myCarousel {
background-color: white;
height: 370px;
width: 100%;
float: left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
height: 15%;
margin: auto;
background-color: white;
}
.thumbnail {
height: 300px;
width: 300px;
padding: 25px auto;
margin: 5px;
}
#con {
width: 100%;
height: 300px;
}
.contact {
width: 60%;
height: 300px;
background-color: grey;
padding: 100px 25px;
float: left;
}
.enquiry {
width: 40%;
height: 300px;
background-color: seagreen;
float: left;
padding-left: 5px;
}
input[type=text]:focus {
border: 3px solid red;
}
input[type="text"] {
margin: 0 0 15px 0;
}
<html>
<head>
<title>student</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
<!--start wrapper-->
<div id="header">
<!--start header-->
<div class="navbar">
<!--start nav-->
<ul>
<li><a class="active" href="home.html">Home</li>
<li><a href="about.html">About us</li>
<li><a href="services.html">Services</li>
<li><a href="products.html">Products</li>
<li><a href="contact.html">Contact us</li>
</ul>
</div>
<!--end nav-->
</div>
<!--end header-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--carasel start-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!--start carosel inner-->
<div class="item active">
<img src="../task/photo/h.jpg" alt="Home">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/as.jpg" alt="About us">
<div class="carousel-caption">
<h3>About us</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/s.jpg" alt="Services">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/p.jpg" alt="Products">
<div class="carousel-caption">
<h3>products</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/c.jpg" alt="Contact us">
<div class="carousel-caption">
<h3>Contact us</h3>
</div>
</div>
</div>
<!--carosel inner end-->
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--end carosel-->
<div class="container-fluid text-center bg-grey">
<!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p> <strong>Innovation</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p> <strong>Creativity</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p>
<strong>Positivity</strong>
</p>
</div>
</div>
</div>
<!--end boxes-->
<div id="con">
<!--start con-->
<div class="contact">
<!-- start contact-->
<h1>Address</h1>
<p>
<span class="glyphicon glyphicon-map-marker"></span>
Abc private limited no54,2ndstreet, madipakkam, chennai-67.
</p>
<p>
<span class="glyphicon glyphicon-envelope"></span>
ABCPVT#gmail.com
</p>
</div>
<!--end contact-->
<div class="enquiry">
<!--start enquiry-->
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td><input name="name" placeholder="Name" type="text" value=""></td>
</tr>
<<tr>
<td>Email</td>
<td><input name="email" placeholder="Email" type="text" value=""></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="msg" placeholder="Type your text here..."></textarea>
</td>
</tr>
<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
</tr>
</form>
</table>
</div>
<!--end enquiry-->
</div>
<!--end con-->
<div id="footer">
<!--start footer-->
copyrights © to WWW.abcpvt.com
<img src="../task/photo/fb.png" alt="fb" />
<img src="../task/photo/ln.png" alt="tweet" />
<img src="../task/photo/tw.png" alt="linkedin" />
</div>
<!--end footer-->
</div>
<!--end wrapper-->
</div>
</body>
</html>
Related
in this the line hover which i have given to a tag is not working.even when when i give hover to li its not working.at the last my footer in which i have set width to 100% is not taking full width.may i know why and wats the fault in my coding.
body {
margin: 0px;
}
#wrapper {
width: 100%;
height: auto;
margin: 0px;
background-color: orange;
}
#header {
width: 100%;
height: 50px;
position: fixed;
background-color: black;
right: 0px;
z-index: 100;
}
#header {
top: 0;
}
#footer {
left: 0;
right: 0;
z-index: : 100;
width: 100%;
height: 50px;
background-color: black;
color: white;
}
#footer img {
float: right;
margin: 5px;
padding: 5px;
}
.company {
width: 50%;
height: 60px;
color: white;
float: left;
text-align: center;
padding: 15px;
}
#navbar {
height: 60px;
width: 50% background-color: black;
color: white;
float: left;
overflow: hidden;
}
ul li {
display: block;
position: relative;
padding: 10px 15px;
float: left;
}
ul li a {
color: white;
}
#navbar a:hover {
border-bottom: 2px solid red;
}
.active {} #myCarousel {
background-color: white;
height: 370px;
width: 100%;
float: left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
height: 15%;
margin: auto;
background-color: white;
}
.thumbnail {
height: 300px;
width: 300px;
padding: 25px auto;
margin: 5px;
}
#con {
width: 100%;
height: 300px;
padding-bottom: 15px;
}
.contact {
width: 60%;
height: 300px;
background-color: grey;
padding: 100px 25px;
float: left;
}
.enquiry {
width: 40%;
height: 300px;
background-color: seagreen;
float: left;
padding-left: 5px;
}
input[type=text]:focus {
border: 3px solid red;
}
input[type="text"] {
margin: 0 0 15px 0;
}
<!doctype html>
<html>
<head>
<title>student</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
#media only screen and (max-device-width:320px) #media only screen and (min-width:321px) and (max-device-width:480px) #media only screen and (min-width:768px) and (max-device-width:1024px) #media only screen and (min-device-width:1224px)
</head>
<body>
<div id="wrapper">
<!--start wrapper-->
<div id="header">
<!--start header-->
<div class="company">
<!--start company-->
ABC PVT LIMITED
</div>
<!--end company-->
<div class="navbar">
<!--start nav-->
<ul>
<li><a class="active" href="home.html" />Home</li>
<li><a href="about.html" />About us</li>
<li><a href="services.html" />Services</li>
<li><a href="products.html" />Products</li>
<li><a href="contact.html" />Contact us</li>
</ul>
</div>
<!--end nav-->
</div>
<!--end header-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--carasel start-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!--start carosel inner-->
<div class="item active">
<img src="../task/photo/h.jpg" alt="Home">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/as.jpg" alt="About us">
<div class="carousel-caption">
<h3>About Us</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/s.jpg" alt="Services">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/p.jpg" alt="Products">
<div class="carousel-caption">
<h3>Products</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/c.jpg" alt="Contact us">
<div class="carousel-caption">
<h3>Contact Us</h3>
</div>
</div>
</div>
<!--carosel inner end-->
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--end carosel-->
<div class="container-fluid text-center bg-grey">
<!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong>
</p>
</div>
</div>
</div>
<!--end boxes-->
<div id="con">
<!--start con-->
<div class="contact">
<!-- start contact-->
<h1>Address</h1>
<p><span class="glyphicon glyphicon-map-marker"></span>
Abc private limited no54,2ndstreet, madipakkam, chennai-67.
</p>
<p><span class="glyphicon glyphicon-envelope"></span> ABCPVT#gmail.com</p>
</div>
<!--end contact-->
<div class="enquiry">
<!--start enquiry-->
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td>
<input name="name" placeholder="Name" type="text" value="">
</td>
</tr>
<<tr>
<td>Email</td>
<td>
<input name="email" placeholder="Email" type="text" value="">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input name="phone" placeholder="phonenumber" type="text" value="">
</td>
</tr>
<tr>
<td>Message</td>
<td>
<textarea name="msg" placeholder="Type your text here..."></textarea>
</td>
</tr>
<td colspan="2" style="text-align:center">
<input id="send" name="submit" type="submit" value="Submit">
</td>
</tr>
</form>
</table>
</div>
<!--end enquiry-->
</div>
<!--end con-->
<div id="footer">
<!--start footer-->
copyrights © to WWW.abcpvt.com
<img src="../task/photo/fb.png" alt="fb" />
<img src="../task/photo/ln.png" alt="tweet" />
<img src="../task/photo/tw.png" alt="linkedin" />
</div>
<!--end footer-->
</div>
<!--end wrapper-->
</body>
</html>
The reasons for the footer not been 100%.
Its 100% per say but it becomes more than 100% after adding padding:10px;. To solve this you have to options. Its either you use width:100%; and add no padding, or you add padding and use display:block; instead of width:100%;
Secondly, you have a closing div missing for the box.
You have
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!--end boxes-->
Instead of:
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!-- this is the missing closing div-->
</div><!--end boxes-->
Then lastly. You have to take away float:left; from the footer and use clear:both; instead. Doing this you will notice you have a better result.
here the problem is when i gave the header and footer to be fixed i am not able to see the header and footer which is not 100%.can anyone solve this or help me out.another thing is i need to make this as responsive can i achieve that by using media query.
body {
margin: 0px;
}
#wrapper {
width: 100%;
height: auto;
margin: 0px;
background-color: orange;
}
#header, footer {
width: 100%;
height: 60px;
position: fixed;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#navbar {
height: 60px;
width: 100%;
background-color: black;
color: white;
float: left;
overflow: hidden;
}
ul li {
display: block;
position: relative;
padding: 20px 20px;
float: left;
}
ul li a {
color: white;
}
#navbar a:hover {
border-bottom: 3px solid red;
padding: 19px;
}
.active {
background-color: gray;
}
#myCarousel {
background-color: white;
height: 370px;
width: 100%;
float: left;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 70%;
height: 15%;
margin: auto;
background-color: white;
}
.thumbnail {
height: 300px;
width: 300px;
padding: 25px auto;
margin: 5px;
}
#con {
width: 100%;
height: 300px;
}
.contact {
width: 60%;
height: 300px;
background-color: grey;
padding: 100px 25px;
float: left;
}
.enquiry {
width: 40%;
height: 300px;
background-color: seagreen;
float: left;
padding-left: 5px;
}
input[type=text]:focus {
border: 3px solid red;
}
input[type="text"] {
margin: 0 0 15px 0;
}
#footer {
height: 60px;
width: 100%;
background-color: black;
padding: 10px;
color: white;
float: left;
}
#footer img {
float: right;
margin: 5px;
padding: 5px;
}
<!doctype html>
<html>
<head>
<title>student</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
<!--start wrapper-->
<div id="header">
<div id="navbar"><!--start nav-->
<ul>
<li><a class="active" href="home.html">Home</li>
<li><a href="about.html">About us</li>
<li><a href="services.html">Services</li>
<li><a href="products.html">Products</li>
<li><a href="contact.html">Contact us</li>
</ul>
</div>
<!--end nav-->
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!--carasel start-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="D:\task\photo\h.jpg" alt="Home">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item"> <img src="D:\task\photo\as.jpg" alt="About us">
<div class="carousel-caption">
<h3>About us</h3>
</div>
</div>
<div class="item"> <img src="D:\task\photo\s.jpg" alt="Services">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item"> <img src="D:\task\photo\p.jpg" alt="Products">
<div class="carousel-caption">
<h3>products</h3>
</div>
</div>
<div class="item"> <img src="D:\task\photo\c.jpg" alt="Contact us">
<div class="carousel-caption">
<h3>Contact us</h3>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<!--end carosel-->
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail"> <img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail"> <img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail"> <img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div>
<!--end boxes-->
<div id="con">
<div class="contact">
<h1>Address</h1>
<p><span class="glyphicon glyphicon-map-marker"></span> Abc private limited
no54,2ndstreet,
madipakkam,
chennai-67. </p>
<p><span class="glyphicon glyphicon-envelope"></span> ABCPVT#gmail.com</p>
</div>
<div class="enquiry">
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td><input name="name" placeholder="Name" type="text" value=""></td>
</tr>
<
<tr>
<td>Email</td>
<td><input name="email" placeholder="Email" type="text" value=""></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="msg" placeholder="Type your text here..."></textarea></td>
</tr>
<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
</tr>
</form>
</table>
</div>
</div>
<div id="footer"> copyrights © to WWW.abcpvt.com <img src="E:\photos\fb.png" alt="fb"/> <img src="E:\photos\ln.png" alt="tweet"/> <img src="E:\photos\tw.png" alt="linkedin"/> </div>
</div>
<!--end wrapper-->
</body>
</html>
You forgot the hashtag (#) symobol to denote a div with id="footer" instead of the footer tag (which you do not use). And you should add left: 0; (otherwise the left position will be inherited from the parent). See updated snuppet below.
body
{
margin:0px;
}
#wrapper
{
width:100%;
height:auto;
margin:0px;
background-color:orange;
}
#header,#footer
{
width:100%;
height:60px;
position:fixed;
}
#header
{
top:0;
}
#footer
{
left:0;
bottom:0;
}
#navbar
{
height:60px;
width:100%;
background-color:black;
color:white;
float:left;
overflow: hidden;
}
ul li
{
display: block;
position: relative;
padding:20px 20px;
float:left;
}
ul li a
{
color:white;
}
#navbar a:hover
{
border-bottom:3px solid red;
padding:19px;
}
.active
{
background-color:gray;
}
#myCarousel
{
background-color:white;
height:370px;
width:100%;
float:left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
{
width: 70%;
height:15%;
margin: auto;
background-color:white;
}
.thumbnail
{
height:300px;
width:300px;
padding:25px auto;
margin:5px;
}
#con
{
width:100%;
height:300px;
}
.contact
{
width:60%;
height:300px;
background-color:grey;
padding:100px 25px;
float:left;
}
.enquiry
{
width:40%;
height:300px;
background-color:seagreen;
float:left;
padding-left:5px;
}
input[type=text]:focus {
border: 3px solid red;
}
input[type="text"]
{
margin: 0 0 15px 0;
}
#footer
{
height:60px;
width:100%;
background-color:black;
padding:10px;
color:white;
float:left;
}
#footer img
{
float:right;
margin:5px;
padding:5px;
}
<!doctype html>
<html>
<head>
<title>student</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper"><!--start wrapper-->
<div id="header">
<div id="navbar"><!--start nav-->
<ul>
<li><a class="active" href="home.html">Home</li>
<li><a href="about.html">About us</li>
<li><a href="services.html">Services</li>
<li><a href="products.html">Products</li>
<li><a href="contact.html">Contact us</li>
</ul>
</div><!--end nav-->
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!--carasel start-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="D:\task\photo\h.jpg" alt="Home">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\as.jpg" alt="About us">
<div class="carousel-caption">
<h3>About us</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\s.jpg" alt="Services">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\p.jpg" alt="Products">
<div class="carousel-caption">
<h3>products</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\c.jpg" alt="Contact us">
<div class="carousel-caption">
<h3>Contact us</h3>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!--end carosel-->
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!--end boxes-->
<div id="con">
<div class="contact">
<h1>Address</h1>
<p><span class="glyphicon glyphicon-map-marker"></span>
Abc private limited
no54,2ndstreet,
madipakkam,
chennai-67.
</p>
<p><span class="glyphicon glyphicon-envelope"></span> ABCPVT#gmail.com</p>
</div>
<div class="enquiry">
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td><input name="name" placeholder="Name" type="text" value=""></td>
</tr>
<<tr>
<td>Email</td>
<td><input name="email" placeholder="Email" type="text" value=""></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="msg" placeholder="Type your text here..."></textarea></td>
</tr>
<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
</tr>
</form>
</table>
</div>
</div>
<div id="footer">
copyrights © to WWW.abcpvt.com
<img src="E:\photos\fb.png" alt="fb"/>
<img src="E:\photos\ln.png" alt="tweet"/>
<img src="E:\photos\tw.png" alt="linkedin"/>
</div>
</div><!--end wrapper-->
</body>
</html>
You are using bootstrap
Use this <div class="navbar-inverse navbar-fixed-top"> insted of <div id="header">
no need to add any style for this
body
{
margin:0px;
}
#wrapper
{
width:100%;
height:auto;
margin:0px;
background-color:orange;
}
#header,footer
{
width:100%;
height:60px;
position:fixed;
}
#header
{
top:0;
}
#footer
{
bottom:0;
}
#navbar
{
height:60px;
width:100%;
background-color:black;
color:white;
float:left;
overflow: hidden;
}
ul li
{
display: block;
position: relative;
padding:20px 20px;
float:left;
}
ul li a
{
color:white;
}
#navbar a:hover
{
border-bottom:3px solid red;
padding:19px;
}
.active
{
background-color:gray;
}
#myCarousel
{
background-color:white;
height:370px;
width:100%;
float:left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img
{
width: 70%;
height:15%;
margin: auto;
background-color:white;
}
.thumbnail
{
height:300px;
width:300px;
padding:25px auto;
margin:5px;
}
#con
{
width:100%;
height:300px;
}
.contact
{
width:60%;
height:300px;
background-color:grey;
padding:100px 25px;
float:left;
}
.enquiry
{
width:40%;
height:300px;
background-color:seagreen;
float:left;
padding-left:5px;
}
input[type=text]:focus {
border: 3px solid red;
}
input[type="text"]
{
margin: 0 0 15px 0;
}
#footer
{
height:60px;
width:100%;
background-color:black;
padding:10px;
color:white;
float:left;
}
#footer img
{
float:right;
margin:5px;
padding:5px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper"><!--start wrapper-->
<div class="navbar-inverse navbar-fixed-top">
<div id="navbar"><!--start nav-->
<ul>
<li><a class="active" href="home.html">Home</li>
<li><a href="about.html">About us</li>
<li><a href="services.html">Services</li>
<li><a href="products.html">Products</li>
<li><a href="contact.html">Contact us</li>
</ul>
</div><!--end nav-->
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!--carasel start-->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="D:\task\photo\h.jpg" alt="Home">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\as.jpg" alt="About us">
<div class="carousel-caption">
<h3>About us</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\s.jpg" alt="Services">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\p.jpg" alt="Products">
<div class="carousel-caption">
<h3>products</h3>
</div>
</div>
<div class="item">
<img src="D:\task\photo\c.jpg" alt="Contact us">
<div class="carousel-caption">
<h3>Contact us</h3>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!--end carosel-->
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!--end boxes-->
<div id="con">
<div class="contact">
<h1>Address</h1>
<p><span class="glyphicon glyphicon-map-marker"></span>
Abc private limited
no54,2ndstreet,
madipakkam,
chennai-67.
</p>
<p><span class="glyphicon glyphicon-envelope"></span> ABCPVT#gmail.com</p>
</div>
<div class="enquiry">
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td><input name="name" placeholder="Name" type="text" value=""></td>
</tr>
<<tr>
<td>Email</td>
<td><input name="email" placeholder="Email" type="text" value=""></td>
</tr>
<tr>
<td>Phone</td>
<td><input name="phone" placeholder="phonenumber" type="text" value=""></td>
</tr>
<tr>
<td>Message</td>
<td><textarea name="msg" placeholder="Type your text here..."></textarea></td>
</tr>
<td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td>
</tr>
</form>
</table>
</div>
</div>
<div id="footer">
copyrights © to WWW.abcpvt.com
<img src="E:\photos\fb.png" alt="fb"/>
<img src="E:\photos\ln.png" alt="tweet"/>
<img src="E:\photos\tw.png" alt="linkedin"/>
</div>
</div><!--end wrapper-->
I am making a website with 3 boxes with content.
Box 1 is my header, box 2 is a sidebar and box 3 is the page content.
So it looks like this:
| HEADER
----|--------------------------
|
S | PAGE CONTENT
I |
D |
E |
B |
A |
R |
|
What I got now as sidebar code is this:
https://jsfiddle.net/zr90fk05/
Homepage:
<div style="z-index: 5; margin-left: 30.5% !important; width: 780px !important; height: 215px;" id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img style="width: 780px; height: 215px;" src="#" alt="...">
<div class="carousel-caption">
<div class="carousel-caption"><p style="font-size: 20px; margin-left: -100%; margin-bottom: 40%;">Design is not for philosophy, it's for life.</p></div>
</div>
</div>
<div class="item">
<img style="width: 780px; height: 215px;" src="#" alt="...">
<div class="carousel-caption">
<p style="font-size: 20px;">Fashion is architecture: it is a matter of proportions.</p>
</div>
</div>
<div class="item">
<img style="width: 780px; height: 215px;" src="#" alt="...">
<div class="carousel-caption">
<p style="font-size: 20px; margin-left: -20%;">The details are not the details. They make the design.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#" class="carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#" class="carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 4 blocks to sub pages -->
<div style="z-index: 5; width: 1024px; margin: 0 auto;">
<div style="float: left; margin-left: 20%;"><a href="huiden"><img style="padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt="" /></div>
</a>
<div style="float: right; margin-right: 40px;"><a href="geweien"><img style="padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt=""/></div>
</a>
<br />
<br />
<div style="float: left; margin-left: 20%;"><img style="margin-top: 40px; margin-bottom: 1%; background: #C6A970; padding: 10px; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt="" /></div>
<div style="float: right; margin-right: 40px;"><a href="accessoires"><img style="margin-top: 40px; margin-bottom: 1%; padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt="" /></div>
</a></div>
<br />
<br />
</div>
But my page content has this CSS:
<div style="margin-left: 30% position: relative;">
And I think that this is my problem that creates that I can't click my links in the sidebar.
What am I doing wrong? Or what do I need to change?
Thanks in advance!
I fixed my problem by adding this:
.sidebar {
position: absolute;
}
I'm using the basic fullscreen carousel from Bootstrap. It's working great, full screen. The issue is I need to add a custom header and footer to it (along with a little bit of text in the center). I want the header and footer to overlap the carousel (as if the carousel is in the background). Is this possible? I've tried playing around with z-index a bit, no success so far.
Here's the code for the carousel.
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
Update 1.0
I already adjust from my template.Hope you learn something from my coding.
HTML
<div class="wrapper">
<div class="nav-bar-area">
<div class="menu">
<div id="text">Menu</div>
<div id="image"><img src="http://www.rcunlocks.com/IMG_0468.PNG" /></div>
</div>
<div class="nav-bar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Careers</li>
<li>Contact US</li>
</ul>
</div>
</div>
<div class="container--head">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-tooltip">
<div class="caraousel-tooltip-item active" data-index="0">
<a href="#" class="tooltip-carousel" style="top:100px;left: 100px;padding:5px 10px;background:#f00;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Wicked Sick">
<span class="fa fa-heart"></span>
</a>
<a href="#" class="tooltip-carousel" style="top:120px;left: 400px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="First Blood">
<span class="fa fa-star"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="1">
<a href="#" class="tooltip-carousel" style="top:120px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="top" data-content="NeverMore">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="2">
<a href="#" class="tooltip-carousel" style="top:100px;left: 500px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Pudge">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="3">
<a href="#" class="tooltip-carousel" style="top:20px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="right" data-content="Hello World">
<span class="fa fa-plus"></span>
</a>
</div>
<div class="caraousel-tooltip-item" data-index="4">
<a href="#" class="tooltip-carousel" style="top:180px;left: 200px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" >
<span class="fa fa-plus"></span>
</a>
</div>
</div>
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://blogs-images.forbes.com/rogerkay/files/2014/06/dell-background-2.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Dell</h3>
Bring The Game
</div>
</div>
<div class="item">
<img src="http://www.techarena.co.ke/wp-content/uploads/2015/02/acer-on-black-wallpapers_30230_1920x1080.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Acerr</h3>
Just Starting
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Lorem ipsum dolor</h3>
Lorem ipsum dolor sit amet, tharsiam eam est in.
</div>
</div>
<div class="item">
<img src="http://orig08.deviantart.net/3f83/f/2012/097/c/b/hp_in_dark_by_yarinsl45-d4vak5s.png" alt="..." style="width:100%">
<div class="carousel-caption">
<h3>Hello World</h3>
The Taste Can't Describe
</div>
</div>
</div>
<!-- Controls -->
</div>
</div>
</div>
<!-- Fontawesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS
.body {
background-color: #bbb;
}
.container--head {
background: #BF3E11;
}
.tooltip-carousel {
position: absolute;
z-index: 11;
border-radius: 50%;
}
.caraousel-tooltip-item {
display: none;
}
.caraousel-tooltip-item.active {
display: block;
}
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
.nav-bar-area{
width: 100%;
height: 60px;
background-color: #000;
padding: 0;
margin:0 auto;
position:relative;
}
ul{
margin: 0 auto;
padding: 0;
width: 600px;
height: 60px;
}
ul li{
display:inline;
float:left;
padding: 10px 10px 10px 8px;
margin: 0 3% 0 0;
color: #fff;
cursor:pointer;
line-height: 225%;
}
li:hover{
background-color: #888888;
}
.menu{
display:none;
color:#fff;
font-weight:bold;
}
#text{
float:left;
}
#image{
float:right;
cursor:pointer;
}
#media screen and (max-width: 600px){
.nav-bar-area{
height:auto;
overflow:auto;
}
ul{
width: 100%;
height: auto;
display:block;
overflow: hidden;
}
ul li{
width: 50%;
float:left;
position: relative;
display:block;
margin: -1px;
padding: 10px 0 10px 0;
text-indent: 25px;
border-bottom: 1px solid #888888;
border-right: 1px solid #888888;
}
.nav-bar{
display:block;
}
}
#media screen and (max-width: 480px){
.menu{
display:block;
padding: 20px 0 40px 0;
border-bottom: 1px solid #fff;
}
#text{
margin: 0 0 0 20px;
}
#image{
margin: 0 30px 0 0;
}
.nav-bar{
display:none;
}
.nav-bar{
font-size: 0.8em;
}
}
JS
$(function(){
$('.tooltip-carousel').popover();
$('#carousel-example-generic').on('slide.bs.carousel', function () {
$('.tooltip-carousel').popover('hide');
$(this).find('.caraousel-tooltip-item.active').fadeOut(function(){
$(this).removeClass('active');
});
});
$('#carousel-example-generic').on('slid.bs.carousel', function () {
var index = $(this).find('.carousel-inner > .item.active').index();
$(this).find('.caraousel-tooltip-item').eq(index).fadeIn(function(){
$(this).addClass('active');
});
//alert(index);
});
$('.tooltip-carousel').mouseenter(function(){
$(this).popover('show');
}).mouseleave(function(){
$(this).popover('hide');
});
});
Here is the DEMO.
I'm not sure if this is enough information, please let me know if you need more. I'm very inexperienced so not sure what is necessary.
I have a section that is displayed on various web pages. For some reason it is not wrapping...the images and corresponding text areas all just keep running off the pages.
Here is the HTML. The are where I'm having trouble is just under <hr style=" width: 114%;">, the Block NewProducts, id: "HomeNewProducts".
/* Product Listings */
.ProductList,
.ProductList li {
horizontal-align: center;
list-style: none;
padding: 0px;
margin: 0;
}
.Content .ProductList,
.Content .ProductList li {}
.ProductList li {
list-style: none;
min-height: 250px;
width: 260px !important;
display: table-cell;
font-size: 1em;
/*margin-right: -1px;*/
padding-bottom: 1px;
overflow: hidden;
}
#home .Content ul.ProductList li {
width: 260px !important;
}
.ProductList .ProductPriceRating {
padding-bottom: 0px;
}
.ProductList .ProductImage,
.brand-img {
padding: 0px;
text-align: center;
overflow: hidden;
vertical-align: middle;
/* border: 1px solid #d4d3d3; */
}
.ProductList .ProductImage img {
vertical-align: bottom;
max-width: 270px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- HEAD GOES HERE -->
<body>
<div id="Container">
<div><img src="http://www.somethingorother.com" /> LoadingPleaseWait
</div>
<div id="Outer">
<div id="TopMenu">
<ul>
<li>
<div class="phoneIcon">CALL US</div>
</li>
<li>Some line of other</li>
<li class="last CartLink" style="display:HideCartOptions">
<i class="icon" title="View Cart"> </i><span>Items / $0.00</span>
</li>
</ul>
<br class="Clear">
</div>
<div id="Header" class="clearfix">
<div id="Logo">
HeaderLogoGoesHere
</div>
<div class="right">
<div id="SearchForm">
<form action=".../search.php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query">Search</label>
<input type="text" name="search_query" id="search_query" class="Textbox autobox" value="Search" />
<input type="submit" class="Button" value="" name="Search" title="Search" />
</form>
</div>
<script type="text/javascript">
var QuickSearchAlignment = 'right';
var QuickSearchWidth = '390px';
lang.EmptySmallSearch = "EmptySmallSearch";
</script>
</div>
</div>
<div id="Wrapper">
<div class="Left fleft" id="LayoutColumn1">
<div class="CategoryList" id="SideCategoryList">
<div class="BlockContent">
<div class="SideCategoryListClass">
<li class="LastChildClass">CategoryName
</li>
</div>
</div>
</div>
</div>
<div class="Content Wide" id="LayoutColumn2">
<script type="text/javascript" src=".../javascript/jquery/plugins/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.slide-show').flexslider({
slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000,
animation: "slide",
pauseOnHover: true,
controlNav: true,
directionNav: true
});
});
</script>
<div class="slide-show slide-show-render slide-show-render-full" id="HomeSlideShow">
<ol class="slides">
<li class="slide" xmlns="http://www.w3.org/1999/html">
<a href="Slide_Link_Url">
<div class="slide-content">
<div class="slide-overlay">
<h2 class="slide-heading" style="color: #000">Slide_Heading_Text</h2>
<p class="slide-text" style="color: #000">Slide_Text_Text</p>
<p class="slide-button" style="Slide_Button_Hide"><span style="color: #000">Slide_Button_Text</span></p>
</div>
<span class="slide-image-wrapper">
<img class="slide-image" src="Slide_Image_Url" alt="Slide_Image_AlternateText">
</span>
</div>
</a>
</li>
</ol>
</div>
<hr style="width: 114%;">
<div class="Block NewProducts Moveable Panel" id="HomeNewProducts" style="display:HideHomeNewProductsPanel">
<div class="BlockContent">
<ul class="ProductList">
<li class="AlternateClass">
<div class="ProductImage" data-product="ProductId">
<img src="http://www.somethingorother.com" />
</div>
<div class="ProductDetails">
ProductName
<em class="p-price">ProductPrice</em>
<div class="ProductPriceRating">
<span class="Rating Rating4"><img src=".../ProductRating.png" alt="" /></span>
</div>
<div class="ProductActionAdd" style="display: HideActionAdd;">
ProductAddText
</div>
</div>
</li>%
</ul>
<br class="Clear" />
</div>
<br class="Clear" />
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Finally figured this out....was just a matter of my Wrapper and Container dimensions being out of whack. Adjusted the sizes and everything now lines up perfectly.