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.
Related
I made 3 columns with the bootstrap framework. In the second column there is a div with some text. I would like to move that div to the top left corner of the document (not on the top left corner of the parent).
I cannot just add a div above the columns or add jquery or javascript because I am using other software. It is very stricted and I can only add custom CSS to it.
An example. The purple div should be on the space of the left arrow:
I tried position absolute but with no success.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4"><h3>Title 1 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavender;"><h3>Title 3 - col-sm-4</h3></div>
</div>
</div>
</body>
</html>
.section-topleft{
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
I also do not want position: fixed. I am really curious if this is even possible. If it's not possible it's also fine.
In the real example it does not work yet
Here you can see the css of the div with class "test". The div that should be placed on the top left corner
So here is the code of the HTML from the 3rd row (relevant html):
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
<!-- Nav (Logged in) -->
<div class="main-logo">
<a href="https://google.com">
<img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/df60389c3caec18e6d856beca7c8_logo_black.png">
</a>
</div>
<div class="navi-left">
<ul>
<li class="active">
<a href="/affiliate">
<span id="affiliate-nav-homepage"><span class="default">Home Page</span></span>
</a>
</li>
<li>
<a href="/affiliate/content">
<span id="affiliate-nav-marketing-materials"><span class="default">Marketing Materials</span></span>
</a>
</li>
<li>
<a href="/affiliate/analytics">
<span id="affiliate-nav-analytics"><span class="default">Analytics</span></span>
</a>
</li>
<li>
<a href="/affiliate/invite">
<span id="affiliate-nav-invite-others"><span class="default">Invite Others</span></span>
</a>
</li>
<li>
<a href="/affiliate/children">
<span id="affiliate-nav-your-network"><span class="default">Your Network</span></span>
</a>
</li>
<li>
<a href="/affiliate/subids">
<span id="affiliate-nav-sub-ids"><span class="default">SubIDs/Channels</span></span>
</a>
</li>
<li>
<a href="/affiliate/landing_pages">
<span id="affiliate-nav-landing-pages"><span class="default">Landing Pages</span></span>
</a>
</li>
<li>
<a href="/affiliate/commission_details">
<span id="affiliate-nav-commission-details"><span class="default">Commissions</span></span>
</a>
</li>
</ul>
<ul class="navi-mobile-lower">
<li>
<i>
<hr>
</i>
</li>
<li>
Create Password
</li>
<li>
Update Account Email
</li>
<li>
Update Paypal Email
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="main-content">
<!-- header -->
<div class="custom-header">
<div class="default-title" id="default-title">
<figure><img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/374c2ace96edb5866ba9e7aa079bbc202232c4e8_Brand%20advocates%20banner%20%283%29.png" data-image="foo"></figure>
</div>
</div>
<div>
<div class="v2-alerts">
</div>
<div class="row">
<div class="col-md-3" style="
position: static;
">
<div class="left-panel">
<div>
<div class="test">
<h1>test</h1>
</div>
<p>We are excited to have you as part of the studio team!</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="right-panel">
<div id="sharing-div">
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="affiliate-link-title"><span class="default">Your Referral Link</span></span>
</div>
<div class="aff-link">
<span><i>
http://studio.com?afmc=1b
</i></span>
</div>
<div class="row">
<div class="col-md-12">
<div>
<div class="pull-right">
<a class="copy-link" data-clipboard-text="http://studio.com?afc=1b">copy link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="primary-social-links-title"><span class="default">your primary social links</span></span>
<div class="pull-right">
view all links
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="links">
<div class="share-btn">
<a data-share-type="email" data-link-id="9937727" href="/share/email">
<div>
<img src="/assets/primary-email-c415b75ea87907f28155ecb8b66b5fc42686c773f6315e8a9151d8b61dbe385c.png">
</div>
Email
</a>
</div>
<div class="share-btn">
<a href="/share/facebook" target="_blank" data-share-type="facebook" data-link-id="9937727">
<div>
<img src="/assets/primary-facebook-70e1f3176145c920e2423ffe0c06a15eece6e56cd51172582ea4d5571e0b0ab3.png">
</div>
Facebook
</a>
</div>
<div class="share-btn">
<a data-share-type="twitter" data-link-id="9937727" target="_blank" href="/share/tweet">
<div>
<img src="/assets/primary-twitter-2130572d07fd2cd1604a59dd16498c4e267ddf5c8ed1a82fcc826f7c6511dee0.png">
</div>
Twitter
</a>
</div>
<div id="whatsapp_share" class="share-btn">
<a data-share-type="whatsapp" data-link-id="9937727" target="_blank" href="/share/whatsapp">
<div>
<img src="/assets/primary-whatsapp-283a25d6a61b76686118d7f2f5866a0ba21c520ff4404a3b248523b7b7d396bd.png">
</div>
Whatsapp
</a>
</div>
<div id="text_share" class="share-btn">
<a data-share-type="text" data-link-id="9937727" target="_blank" href="/share/text">
<div>
<img src="/assets/primary-sms-2ee17bddcfbb89a98c68fdcf8282df2e5920c135ebe62595e77dc0cfc6a0622c.png">
</div>
Text
</a>
</div>
<div id="linked_in_share" class="share-btn">
<a data-share-type="linkedin" data-link-id="9937727" target="_blank" href="/share/linkedin">
<div>
<img src="/assets/primary-linkedin-5bc3ba7bbfda5051d5d0d82ebc9b397ac17778b21fa7936ba7b0db3bbbc22d92.png">
</div>
LinkedIn
</a>
</div>
<div class="share-btn">
<a ic-action="slideToggle" ic-target="#instagram-sharing-instructions" data-share-type="instagram" data-link-id="9937727" ic-trigger-on="default">
<div>
<img src="/assets/primary-instagram-826dae8b5dbccbce3a5a2e4ed0936c96fb6a24e3eb32006f3e5ebf4c51e9dc32.png">
</div>
Instagram
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="instagram-sharing-instructions" style="display: none;">
<div class="col-md-12">
<div class="fs18">
<span id="affiliate-instagram-sharing-instructions"><span class="default">Instagram Sharing Instructions</span></span>
</div>
</div>
<div class="col-md-12">
<ol>
<li>
<span class="instagram-badge">1</span>
<a class="copy-link" data-clipboard-text="http://studio.com?afmc=1b">copy link</a>
</li>
<li>
<span class="instagram-badge">2</span>
<a id="instagram-launch" class="" href="https://instagram.com/_n/mainfeed/" target="_blank"><span></span><b>Click here to launch Instagram</b></a>
<script>
$(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("#instagram-launch").attr('href', "instagram://");
} else if(navigator.userAgent.match(/android/i)) {
$("#instagram-launch").attr('href', "intent://instagram.com/_n/mainfeed/#Intent;package=com.instagram.android;scheme=https;end")
} else {
$("#instagram-launch").attr('href', "https://instagram.com/_n/mainfeed/");
$("#instagram-launch").attr('target', "_blank")
}
})
</script>
</li>
<li><span class="instagram-badge">3</span>Paste the link into your Profile, Story or Reels</li>
</ol>
</div>
</div>
</div>
<!--<div class="divider"></div>-->
<div>
<div class="title">
<span id="your-progress-title"><span class="default">Your Progress</span></span>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>2</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-visitors-title"><span class="default">Friends have visited us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-sign-up-title"><span class="default">Friends have signed up with us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-purchase-title"><span class="default">Purchases made by friends</span></span>
</span>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="title">
<span id="affiliate-payments-title"><span class="default">Your Payments</span></span>
</div>
<div class="dash-instructions">
<p>You will receive a 30% commission for each referral. For monthly and annual subscriptions, you will receive recurring commissions as long as the member is subscribed. </p>
</div>
<div class="table-scrollable-wrapper">
<table class="table">
<thead>
<tr>
<th>
<span id="affiliate-payments-compensation"><span class="default">Compensation</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-due"><span class="default">Due</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-upcoming"><span class="default">Upcoming</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-paid"><span class="default">Paid</span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-muted text-center">
<span style="opacity: 0.5;"> nothing to show yet </span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the css(most of the important css is from bootstrap itself):
body {
background: #ffffff url(https://forge.swap-studio.com/assets/bg-polygon-dd7097463c1102fbf7fe55f6e00595256861740bba73750be91902f955f41f1e.png) no-repeat bottom center; /* fallback for old browsers */
background-size: cover;
background-attachment: fixed;
}
.grad-text {
background: -webkit-linear-gradient(0deg, #555555 0, #555555 70%);
}
a{
color: #002929;
}
/*.aff-link {*/
/*border: 1px solid #002929;*/
/*}*/
/*.aff-link-2 {*/
/*border: 1px solid #cdcdcd;*/
/*}*/
.aff-link-2 .copy-link {
background-color: #cdcdcd;
border: 1px solid #cdcdcd;
}
.aff-link-2 .btn-alt {
color: #cdcdcd !important;
}
.copy-link {
background-color: #002929;
border: 1px solid #002929;
}
.copy-link-wide {
background-color: #002929;
border: 1px solid #002929;
}
.aff-progress b {
color: #002929;
}
.change-url {
color: #002929;
}
.change-url-field .btn {
background-color: #002929;
}
.change-url-field .btn-alt {
/*background-color: #002929;*/
}
.aff-invite input {
border: 1px solid #002929;
}
.dot {
border: (10 / 5) solid #002929;
}
#affiliate-invite-who {
color: #002929;
font-size: 1.2em;
}
.dash-primary-color {
color: #002929 !important;
}
.button-primary {
background-color: #002929;
border: 1px solid #002929;
}
.email-input {
border: 1px solid #002929;
}
.button-primary-fullwidth {
background-color: #002929;
border: 1px solid #002929;
/*border-bottom: 3px solid #cdcdcd >;*/
}
.button-primary-flat-fullwidth {
color: #002929;
border: 1px solid #002929;
}
.comp-stats-figure {
color: #002929;
}
.top-to-bottom {
/*border-width: 6px;*/
/*border-style: solid;*/
/*border-color: #002929;*/
/*-webkit-border-image:*/
/*-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff)) 1 100%;*/
/*-webkit-border-image:*/
/*-webkit-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-moz-border-image:*/
/*-moz-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-o-border-image:*/
/*-o-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*border-image:*/
/*linear-gradient(to bottom, #ffffff, #ffffff) 1 100%;*/
/*border-right: 0px;*/
/*border-top: 0px;*/
/*border-bottom: 0px;*/
}
/* Logged in page */
.test{
position: absolute;
background-color:purple;
top: 0;
left: 0;
width:100%;
}
It depends a bit on exactly what you want for other items, but concentrating on the purple-background element it is currently placed relative to the second child of the row element as that is given position: relative by the bootstrap CSS.
This snippet sets that second child to have position: static so the purple element is not positioned relative to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.section-topleft {
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
.container-fluid .row :nth-child(2) {
position: static;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4">
<h3>Title 1 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavender;">
<h3>Title 3 - col-sm-4</h3>
</div>
</div>
</div>
</body>
</html>
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>
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'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.