I am trying to make the Images in "fullwidthbanner" as fully responsive. May be the problem is that it has two images which I want it to transform with size.
This is my HTML
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std"><div class="sub-container"><div class="fullwidthbanner-container">
<div class="fullwidthbanner>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
</div>
</div>
</div>
</div>
</div>
CSS
.sub-container {overflow:auto;}
.main-container {background:#fafafa; }
.main { margin:0 auto; position: relative; z-index:1; }
.sub-container div.item{ background-color:red; float:left;}
.sub-container div.item:hover{ background-color:green;}
.sub-container div.item img{ width:100% !important; display:block;}
For some reason, it does everything I want it to, but both the Images are fully extending in terms of width. The width always remain the same and when the window size increases, it just shows an empty space in front of both images.
Assuming this is the html:
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std">
<div class="sub-container">
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Does this css do what you want?
.sub-container div.item {
background-color: red;
float: left;
width: 100%;
}
Although I would suggest using max-width, instead of width -- this will make it adapt to smaller screens, and on larger screens it won't get blurry.
Related
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height.
The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 100%.
<div id="wrapper">
<div id="first" class="row">
<div>
first
</div>
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="first" class="row">
<div>
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper{
width:300px;
height:100%;
display:table;
}
.row
{
display:table-row;
}
#first
{
height:50px;
margin-bottom:5px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second > div{
height:100%;
border: 1px solid red;
overflow-y: auto;
}
It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/
Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table).
But resize it in firefox and it will have this unexpected behavior.
Maybe I'm wrong and I'm taking good part of a chrome's bug.
I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome.
Thanks.
I made it work on both firefox, chrome.
Don't use display: table for this, not necessary
You had the id "first" two times.
You don't need divs inside divs
Use 'calc' it's a life saver.
http://jsfiddle.net/foreyez/p3rcyofk/
<div id="wrapper">
<div id="first" class="row">
first
</div>
<div id="second" class="row">
<div>
<div style="height:50px">
cont0
</div>
<div style="height:50px">
cont1
</div>
<div style="height:50px">
cont2
</div>
<div style="height:50px">
cont3
</div>
<div style="height:50px">
cont4
</div>
<div style="height:50px">
cont5
</div>
</div>
</div>
<div id="last" class="row">
last
</div>
</div>
html, body {height:100%; margin:0; padding:0;}
#wrapper
{
width:300px;
height:100%;
}
#first,#last
{
height:50px;
background-color:#F5DEB3;
}
#second{
background-color:#9ACD32;
}
#second {
height:calc(100% - 100px);
border: 1px solid red;
overflow-y: auto;
}
I am stuck on how to arrange images for my gallery.php page so that there are 4 images per line. My first thought was to use 2 divs, one as column 1 and one as column 2, and then have two spans inside the divs labeled left and right, and float the span left float left, and the other span right. I made sure two make the widths of each of the column divs 50% and each image width 25% however it still did not work.
Here is the HTML portion of my code, and below the HTML is CSS.
<p id="service">Gallery of Completed Sabers</p>
<div class="col1">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
<div class="col2">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
CSS
div.col1 {
width:50%;
}
div.col2 {
width:50%;
}
span.left {
float:left;;
}
span.right {
float:right;
}
img {
width: 25%;
}
I am going to keep messing around, and see, maybe I will try 4 different columns.
Thank you
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
*{
margin: 0px;
padding: 0px;
}
.column{
width:100%;
min-height:200px;
background:red;
border-bottom:1px solid blue;
}
.image-container{
width: 25%;
height: 200px;
float: left;
}
.image-container img{
max-height: 200px;
width: 100%;
}
I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?
<style>
div.product{
width:90%;
margin:10px auto;
height: 200px;
transition: all 0.1s ease;
background-color: #069;
}
div.product:hover{
margin-top:-5px;
}
.img_box{
width:50%;
height:100%;
padding: 10px;
float:left;
box-sizing: border-box;
}
.desc_box{
width:50%;
height:100%;
float:left;
padding: 10px;
box-sizing: border-box;
}
.img{
background-color: #b65050;
height: 100%;
}
.desc{
background-color: chocolate;
height: 100%;
}
</style>
HTML:
<div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
</div>
heres my fiddle: MY FIDDLE
This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.
What you need is this:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative basically takes up the original space but lets the div to be rendered elsewhere.
I have this on my page. i wanted the container divs to align at the center. so i gave display:inline-block. but it didn't work. why is this happening? is there a way to display the containers as inline-block elements so that they appear exactly at the center?
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
css
#container {
vertical-align:top;
}
#image {
height:30%;
width:30%;
position: absolute;
overflow: hidden;
}
#definition {
width: 30%;
height: 30%;
position: absolute;
background-color: red;
}
Using display: table and display: table-cell this code will centre the divs on the page: Fiddle. Hopefully this is the effect you want.