I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.
The HTML looks as such
<div id='banner'>
<div class='slides_container'>
<div>
<a href='#'><img src='images/banner.png'></a>
</div>
<div>
<a href='#'><img src='images/banner2.png'></a>
</div>
</div>
</div>
And the CSS to match this is:
#banner {
width:100%;
margin-bottom:50px;
}
.slides_container {
width:100%;
height:500px;
}
.slides_container div {
width:1100px;
height:500px;
text-align:center;
}
I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!
Any replies are extremely appreciated.
You should make sure the .slides_container div is centered within its parent, i.e.
.slides_container div {
margin: 0px auto; // center
width:1100px;
height:500px;
text-align:center;
}
If that doesn't work, you need to make sure the parent container is width 100% of the page.
If the parent is not width 100% of the page, the parent needs to have this property also:
.slides_container {
margin: 0px auto;
}
If that doesn't work, then you need to make sure its parent is 100% width of the page.
Hope this helps.
Edit
I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.
By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px auto won't work here.
The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:
.slides_control div {
width: 1280px;
text-align: center;
}
Add .slides_container img and margin:0 auto
#banner { width:100%; margin-bottom:50px; }
.slides_container {
width:100%;
height:500px;
}
.slides_container div, .slides_container img {
width:1100px;
height:500px;
text-align:center;
margin:0 auto; }
Normally they use margin:0 auto; to handle this. text-align won't do you good for div.
Related
I have an image that I want to resize when the width of the page/screen changes.
This code almost does what I want:
.section
{
position:relative;
min-width:600px;
max-width:1200px;
height:auto;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
.image
{
position:relative;
display:inline-block;
vertical-align:top;
width:100%;
height:auto;
}
<div class="section">
<img src="long_img.jpg" class="image"/>
</div>
The problem is, the image is 2560px wide, and the section is only 1200px. The image gets squashed horizontally to fit, which scales the height down. But, when the page is at it's max width(1200) I want the image to be at full height(400). So I need the image to hang over the edge, but still automatically resize.
The reason I don't just crop the image is because I want to scroll it with a css animation.
I've tried .image{ margin-right:-1360; } but it had no effect.
Use a media query after the css that you have there. This will remove the 100% declaration and let the image be it's natural size.
#media(min-width:1200px) {
.section img {
width: auto;
display: block;
}
}
Also, take away the overflow:hidden from the containing div.
See this fiddle for an example.
I am I using percentages based grid system to build a page for my personal website which uses a relative positioned banner and an absolute positioned div that falls in the center horizontally and at the bottom of the banner vertically. However, because said div is a screenshot of a webpage it is important to keep its height and its width relative to one another so that the image doesn't distort.
Below is a little code and a jsfiddle -
<div id="aps-group-banner">
<div id="aps-group-banner-wrap">
<div class="screenshot-banner"></div>
</div>
</div>
#banner {
height:100%;
background:red;
}
#banner-wrap {
position:relative;
width:67%; height:100%;
}
.screenshot {
position:absolute;
background:url(/img/case-study/aps-group/screenshot-banner.jpg) top left;
background-size:100% 100%;
width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}
http://jsfiddle.net/sHanf/
Hope you guys can help! Thanks in advance
Liam
Maybe I don't understand the question completely, but is this what you need?
http://jsfiddle.net/RpW4r/
I just changed the background-size to 100% auto;
Give this a try:
.screenshot {
position:absolute;
background: url(http://liamhodnett.com/img/case-study/aps-group/screenshot-banner.jpg) bottom left no-repeat;
background-size:100% auto;
width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}
This will scale the background to 100% width and adjust its height to be proportional, plus move it to the bottom of the .screenshot element.
Fiddle link: http://jsfiddle.net/sHanf/7/
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
If my browser window is large enough, the web page is fine. If it is smaller and I scroll to the right, my backgrounds don't go horizontally across the entire browser window. They stop inside the webpage. I have made the body background blue so you can see where the background is ending. I want to make it so the actual content and background pictures end where the browser window ends and have there be no blue. The site is up at avidest.com/schneer. Here is the CSS:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px;}
.header { background:url(images/slider_bgpng200.png); background-repeat: repeat-x; padding:0; margin:0 auto; width: 100%; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
And here is the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="slider">
<div class="gallery">
</div>
</div>
</div>
</div>
Thanks.
You have contents that go beyond the .main div.
If you add in your div.main { overflow: hidden; } you will see that it works as expected, because nothing is pushing it to a bigger width than expected.
for 100% height, you need html and body tags to be 100% also
add this to your CSS
html, body { height: 100%; width: 100%; }
you would then have to create a fake background out of a 100% by 100% wrapper div and place your background within that to get the effect you are looking for
Why do you have .main class? Didnt you forgot some elements?
In your .header, you set up background and width 100%. so the width of element with .header class will be 100% of its parent element. Whats the parent element of <div class="header">?
I see a huge amount of variance in your widths. I would think "main" "header" "block_header" all would be the same width. Also note that 100% is not 100% of the parent element it is 100% of the window size especially when the parent element is larger than the window. Set the widths to a definitive numbers. If you want the content to fill the users screen then set the parent to 100% first and then all the child element can be set to 100% to fit the parent elements width.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.