I am making a simple slideshow and I have got the javascript working very easily. However the layout is not going as well. The current image is display in big with a fixed width of 80% and the height can change to keep its aspect ratio.
The problem with this is that I want the the current image to be displayed in its correct aspect ratio (which it is) and I want the thumbnail bar on the right to have a scrollbar if it overflows this height.
Here is a demo on jsfiddle: http://jsfiddle.net/ZTBNR/1/
Here is the code:
CSS
div.slideshow{
width: 100%;
background: #B8B8B8;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #000;
overflow: hidden;
}
div.slideshow > div.current-slide_wrapper{
padding: 10px;
float: left;
width: 80%;
display: inline-block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
border-right: 1px solid #000;
}
div.slideshow > div.current-slide_wrapper img{
width: 100%;
vertical-align: bottom;
cursor: pointer;
}
div.slideshow > div.other-slides_wrapper{
padding: 10px 15px;
float: right;
width: 20%;
height: 100%;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
div.slideshow > div.other-slides_wrapper img{
border: 5px solid #FFF;
width: 100%;
cursor: pointer;
margin-left: -5px;
}
div.slideshow > div.other-slides_wrapper img:hover{
border: 5px solid #EAEAEA;
}
div.slideshow > div.other-slides_wrapper img.current{
border: 5px solid #000;
}
HTML
<h3>Screenshots</h3>
<div id="slideshow-1" class="slideshow_wrapper">
<div class="slideshow">
<div class="current-slide_wrapper">
<img class="current-slide" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
</div>
<div class="other-slides_wrapper">
<img class="other-slide current" data-slide="1" src="/path/to/image/website-screenshot1.jpg"/>
<img class="other-slide" data-slide="2" src="/path/to/image/website-screenshot2.jpg"/>
<img class="other-slide" data-slide="3" src="/path/to/image/website-screenshot3.jpg"/>
<img class="other-slide" data-slide="4" src="/path/to/image/website-screenshot4.jpg"/>
<img class="other-slide" data-slide="5" src="/path/to/image/website-screenshot5.jpg"/>
</div>
</div>
</div>
I solved it! I set div.slideshow to display: block; position: relative; and div.current-slide_wrapper is no longer floated.
I then set div.other-slides_wrapper to position: absolute; top: 0; right: 0; height: 100%;. This worked perfectly!
Related
hello guys i have a div which contains a link and a div , i gave a width of 70% to the link and a width of 30% to the div (summing it up to 100%). its working fine in chrome , but its not working in safari ..the width property of the link is not taking any effect in safari.Please help
.rec-p-b {
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
}
.rec-p-b1 {
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
}
<div class="recomment_profile_b_view">
<a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
<button class="recomment_button rec-p-b1">
<img src="images/recommend.png" alt="recomment">
</button>
</div>
The link tag is an inline element, so you should set it display: block, or inline-block, or float: left to floating it as block element.
You had added the padding beside adding the width, the total size will be equal padding + width. To fix it, you should add box-sizing: border-box; to your css to merge the with as 100% of the size:
.rec-p-b {
float: left;
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
box-sizing: border-box;
}
.rec-p-b1 {
float: left;
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
box-sizing: border-box;
}
I think the problem is the padding you add. Try use box-sizing: border-box
* { box-sizing: border-box }
.rec-p-b {
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
}
.rec-p-b1 {
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
}
<div class="recomment_profile_b_view">
<a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
<button class="recomment_button rec-p-b1">
<img src="images/recommend.png" alt="recomment">
</button>
</div>
Apply display: block to anchor tag
Apply following properties to both(anchor & div):
box-sizing: border-box;
float: left;
I have the fiddle here: https://jsfiddle.net/ufLpqdtj/
My problem is trying to get my search box and button to always sit full width on the page regardless of the device it is running on.
In Javascript I could always make the text box width 100% minus the pixel width of the button (the button is always the same size) but I feel as if im missing something and that it can be done natively in CSS.
Any thoughts or suggestions?
#commonSearchContainer {
display: block;
clear: both;
width: 100%;
position: relative;
}
#commonSearchTerm {
width: 100%;
margin: 25px 0px 0px 0px;
padding: 5px;
border: 1px solid #999999;
height: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-term-wrapper {
width: 90%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-button {
background-color: #E9700D;
border: 1px solid #ccc;
display: inline-block;
margin: 25px 0px 0px 10px;
width: 80px;
color: #fff;
padding: 7px;
font-style: italic;
cursor: pointer;
}
<div id="searchSection" class="common-search-section">
<div class="common-search-term-wrapper">
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
</div>
<div id="commonSearchSubmit" class="common-search-button">
Search
<div style="clear: both;"></div>
</div>
</div>
What I typically do for that sort of layout is make a parent container around the elements (like you have) and give it position: relative and width: 100%.
Then I use position: absolute and display: inline-block on the inner elements. Set the width for the fixed-sized elements and use left or right to position all of the elements.
In your case, it would be something like this: https://jsfiddle.net/ufLpqdtj/1/
Well you shouldn't use the div as a button. There are html elements for that.
If correctly understood what you want to achieve...
form {
width: 100%;
display: inline-flex;
justify-content: center;
}
#commonSearchTerm {
width: 80%;
}
#searchButton {
width: 80px;
border-radius: 0;
background-color: red;
border: none;
padding: 2px;
color: white;
}
<form >
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
<input id="searchButton" type="submit">
</form>
This is using flexbox which is is more flexible when creating responsive stuff.
I've got 3 div's that I want to look like this:
Here's the HTML:
<section class="main-window">
<div id="topdiv"></div>
<div id="middiv"></div>
<div id="botdiv"></div>
</section>
And the CSS:
.main-window
{
vertical-align: middle;
border: 2px solid gray;
border-radius: 5px;
width: 90%;
height: 70%;
background-color: White;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topdiv {
background-color: beige;
height: 40%;
border: 2px solid black;
}
#middiv {
background-color: lightblue;
height: 40%;
border: 2px solid black;
}
#botdiv {
background-color: lightgreen;
height: 20%;
border: 2px solid black;
}
Here's the fiddle.
Notice that I've added heights to the divs of 40%, 40% and 20% so that they fill the 100% of the parent div. However, after I added a border to each div, the total height is increased slightly beyond the parents boundaries.
My question is: can I set heights of 40% for the two top divs and make the bottom div stretch until the bottom of its parent div?
You should add this css to each child element:
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
Working Fiddle
and if you make adjustments in border, it seems to look nice.
Updated Fiddle
include jQuery and write below jQuery for third div
$(document).ready(function () {
$("#botdiv").height($(".main-window").height() - $("#topdiv").height() - $("#middiv").height());
});
On a site I'm building I want to have a 3 coloured border example here for the body.
What is the easiest way to create this?
I tried the following but it didn't work out how I expected it to:
<div id="red">
<div id="white">
<div id="blue">
<!--SITE GOES HERE-->
</div>
</div>
</div>
#red {
width: 100%;
height: 100%;
padding: 16px;
background: #CC092F;
}
#white {
width: 100%;
height: 100%;
padding: 16px;
background: white;
position: absolute;
z-index: 2;
}
#blue{
width: 100%;
height: 100%;
padding: 16px;
background: #0C144E;
position: absolute;
z-index: 3;
}
The problem with that is the padding pushes the divs offscreen, I realise I'm going about it the wrong way… (If i use percentages i.e. 98% it obviously scales, which I do not want) but I can't think of an alternative. Thanks in advance.
try this (SEE FIDDLE):
<div id="red" class="site-border">
<div id="white" class="site-border">
<div id="blue" class="site-border">
<div id="content"></div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
height: 500px;
background: #e3e3e3;
padding: 16px;
}
.site-border {
width:100%;
}
#red {
border: 16px solid #CC092F;
}
#white {
border: 16px solid #fff;
}
#blue {
border: 16px solid #0C144E;
}
Instead of scaling, you should use the below properties in your CSS, this way, the borders and paddings will be counted inside the element instead of outside as normal box model does.
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Also, you shouldn't use position: absolute; cuz I don't see any reason of using that over here.
You could try this css:
div {
width: 100px;
height: 200px;
border: 3px solid navy;
outline: 3px solid #fff;
box-shadow: 0 0 0px 6px darkred;
}
Fiddle: http://jsfiddle.net/BXFUk/2/
I have a layout defined through CSS that has three columns. It displays correctly through Chrome, but in Firefox, the third (right) column wraps around to the bottom. Am I defining the layout incorrectly?
<style type="text/css">
.content {
position: relative;
border-top-width: 1px;
width: 100%;
min-width: 960px;
margin-top: -1px;
}
.content-container {
border: 0;
position: relative;
width: 960px;
border-radius: 0 0 0 0;
margin: auto;
}
.left-menu-container {
width: 188px;
padding: 0 20px 0 0;
border: 0;
box-sizing: border-box;
vertical-align: top;
position: relative;
display: inline-block;
}
.center-content-container {
vertical-align: top;
display: inline-block;
min-height: 900px;
width: 500px;
border-left: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
height: 100%;
position: relative;
padding: 15px 0 0 0;
}
.center-content-subcontainer {
padding: 0 0 0 5px;
}
.right-menu-container {
vertical-align: top;
display: inline-block;
width: 260px;
border: solid;
position: relative;
}
.right-menu-subcontainer {
margin: 16px 0 0 0;
}
#slideshow {
position:relative;
height:250px;
width: 250px;
overflow: hidden;
background-color: #ffffff;
}
</style>
How can I get this to display correctly across browsers?
<body>
<div class="content">
<div class="content-container">
<div class="left-menu-container"></div>
<div class="center-content-container">
<div class="center-content-subcontainer"></div>
</div>
<div class="right-menu-container">
<div class="right-menu-subcontainer">
<div id="slideshow" align="center">
<img src="" alt="Slideshow" title="Slideshow" width="250" height="100">
</div>
</div>
</div>
</div>
</div>
</body>
In FF 5.x the box widths are this:
Left: 188 + 20 (width+ padding)
Center: 500 + 1 + 1 (width + L & R borders)
Right: 260 + 3 + 3 (width + L & R borders)
Total: 976
Firebug's Layout Inspector is your friend here.
I think the problem is with this line of CSS:
box-sizing: border-box;
What version of Firefox are you using? Because even as late as version 4 (possibly later, I'm not sure), Firefox only supports -moz-box-sizing. And if Firefox isn't changing its box-sizing, then that means it thinks you're trying to stick 968px worth of content into 960px worth of space.
Try this on your left-container:
.left-menu-container {
width: 188px;
padding: 0 20px 0 0;
border: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
position: relative;
display: inline-block;
}
Probably worth a read:
https://developer.mozilla.org/en/CSS/box-sizing