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.
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 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.
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>
This might seem rather easy to solve, but I couldn't find an answer on stackoverflow nor anywhere on the internet to solve my little problem..
I need these http://prntscr.com/a0y8jm words to be more in the middle of the screen, and I need to be able to put the words more appart from eachother, I first used Padding, but I don't really think that works out so well, and the words aren't responding on padding anymore eighter (because I made the layout different)
anyone got any tips on how to make this work, and if you have some tips for the other parts of my code, those are always welcome too. I am not in programming that long yet, so I could use all the information I can get :)
This is my code,
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
.img {
width: 25%;
height: 30%;
background-color:#f0f0f0;
float: left;
}
.antwoord {
float: left;
width: 95%;
height: 25px;
background-color: white;
border-style: solid;
border-color: #000000;
border-width: 4px;
}
.move1 {
}
.move2 {
margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}
.word, .word .tekst, .word p {
display: inline;
}
.my-row{
clear: both;
}
.answers .word, .answers .word2{
float: left;
padding: 3px;
width: 100px;
}
footer {
border-top: thick solid grey;
height: 5%;
display : table-row;
vertical-align : bottom;
}
.points {
float: right;
}
.container {
height:100%;
border-collapse:collapse;
display : table;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div class="img" id="img1">
<div class="plaatje" id="plaatje1"><center><img src="img/cat.jpg" alt="cat" width="50%;"></div>
<div class="move1"><div class="antwoord" id="antwoord1"></div></div>
</div>
<div class="img" id="img2">
<div class="plaatje" id="plaatje1"><center><img src="img/beak.jpg" alt="beak" width="50%;"></div>
<div class="move2"><div class="antwoord" id="antwoord2"></div></div>
</div>
<div class="img" id="img3">
<div class="plaatje" id="plaatje3"><center><img src="img/spoon.jpg" alt="spoon" width="50%;"></div>
<div class="move3"><div class="antwoord" id="antwoord3"></div></div>
</div>
<div class="img" id="img4">
<div class="plaatje" id="plaatje4"><center><img src="img/milk.jpg" alt="milk" width="50%;"></div>
<div class="move4"><div class="antwoord" id="antwoord4"></div></div>
</div>
<div class="img" id="img5">
<div class="plaatje" id="plaatje5"><center><img src="img/egg.jpg" alt="egg" width="50%;"></div>
<div class="move5"><div class="antwoord" id="antwoord5"></div></div>
</div>
<div class="img" id="img6">
<div class="plaatje" id="plaatje6"><center><img src="img/thee.jpg" alt="tea" width="50%;"></div>
<div class="move6"><div class="antwoord" id="antwoord6"></div></div>
</div>
<div class="img" id="img7">
<div class="plaatje" id="plaatje7"><center><img src="img/meel.jpg" alt="meel" width="50%;"></div>
<div class="move7"><div class="antwoord" id="antwoord7"></div></div>
</div>
<div class="img" id="img8">
<div class="plaatje" id="plaatje8"><center><img src="img/passport.jpg" alt="passport" width="50%;"></div>
<div class="move8"><div class="antwoord" id="antwoord8"></div></div>
</div>
<div class="answers">
<div class="my-row">
<div class="word" id="word1">
<div class="tekst" id="tekst1"> <p>Cat</p> </div>
</div>
<div class="word" id="word2">
<div class="tekst" id="tekst2"> <p>spoon</p> </div>
</div>
<div class="word" id="word3">
<div class="tekst" id="tekst3"> <p>meal</p> </div>
</div>
<div class="word" id="word4">
<div class="tekst" id="tekst4"> <p>passport</p> </div>
</div>
</div>
<div class="my-row">
<div class="word2" id="word5">
<div class="tekst" id="tekst5"> <p>egg</p> </div>
</div>
<div class="word2" id="word6">
<div class="tekst" id="tekst6"> <p>beak</p> </div>
</div>
<div class="word2" id="word7">
<div class="tekst" id="tekst7"> <p>tea</p> </div>
</div>
<div class="word2" id="word8">
<div class="tekst" id="tekst8"> <p>milk</p> </div>
</div>
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
I have to display a list of products and on hover show some additional information. But on hover, it is flickering a lot. I am not able to understand how to remove that. Any help will be appreciated to remove flickering a lot on hover.
.fixed-width-200 {
width: 200px;
}
.img-responsiveExtended {
display: block;
height: 550px;
max-width: 100%;
overflow: hidden;
text-align: center;
vertical-align: central;
padding-top: 20px;
margin: 0 auto;
}
.parentContent {
position: relative;
/*border:outset;
border-width:thin;
margin:0px;*/
}
.contentWithMargin {
padding: 20px;
height: 200px;
position: absolute;
bottom:150px;
z-index: 1;
background-color:antiquewhite;
opacity:0.8;
}
.imageContentStyle {
z-index: 0;
float:left;
}
.columnBorder {
border: outset;
}
.divWithCenterImgStyle {
text-align:center;
}
.dealPriceStyle {
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 parentContent" id="parentDiv">
<div class="imageContentStyle">
<div>
<div class="row">
<div class="divWithCenterImgStyle">
<center>
<img class=
"img-responsiveExtended img-container" src=
"http://ecx.images-amazon.com/images/I/A15JTuUMDOL._UY679_.jpg">
</center>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div style="text-align:right">
<strike>
</strike>
<span class=
"dealPriceStyle">
<mark>
<label>$
</label>58.00
</mark>
</span>
</div>
</div>
</div>
</div>
<div>
<h5>Calvin Klein Women's Two-Color Fringe Scarf
<small>
<a href=
"/DreamsNDeals/Home/DealsByVendor?vendorId=1">Amazon
</a>
</small>
</h5>
</div>
</div>
<div class="contentWithMargin collapse" id="38">
<div>
<div class="row modal-body">
<h6>
<span class="label label-warning">
<span class=
"glyphicon glyphicon-time">
</span>
</span>
</h6>
<h5>
<small>
</small>
</h5>
<!-- this text is coming as a flickering effect -->
<p class="text-primary">100% Acrylic Imported
Machine Wash 16" wide Color-blocked scarf with
fringe trim Made in China
</p>
<p class="text-info">Free Shipping
</p>
<div class="col-xs-6">
<p>
<a class="btn btn-primary" href=
"http://www.amazon.com/gp/product/B00Z69JVR8/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B00Z69JVR8&linkCode=as2&tag=dreamsndeal02-20&linkId=CAQNU4JFUUNNWPUB"
target="_blank">Get Deal »
</a>
</p>
</div>
<div class="col-xs-6">
<p class="text-primary">
</p>
</div>
</div>
</div>
</div>
</div>
</div>.
</div>
</body>
</html>
You can see the main HTML code and the CSS code as above.