I have an image slider which is positioned absolute and has a width of 1280px. The margin-left is -160px to center it in its parent. The parent width is 960px with margin set to '0 auto' to achieve a centered affect.
The image slider should only take up width:960px so that the overflow doesn't cause the browser to handle it with scrollers. Is it possible to achieve something like overflow:hidden while still showing the overflow content at high screen resolutions?
problem example: http://almightyidea.com/test/slider/
basic css:
.slide-wrapper {
position:relative;
width:960px;
margin:0 auto;
}
.slideshow{
position:absolute !important;
margin-left:-160px;
}
I think you should use relative widths for the wrapper. So let it expand wider when the is room to do so. You could also use JavaScript to calculate the width of the viweport for you and set that width to the wrapper.
You could also just use an existing jQuery plugin to do all the heavy lifting. I use Cycle when I need to do stuff like this. http://jquery.malsup.com/cycle/
Related
I am trying to figure out the best way to center my content and sidebar on the page. Nothing I've tried is working (I'm very new to CSS & HTML).
I tried setting the widths to percentages, and set the margin at auto, but something's just not working. I don't want it to have a fixed width because it will look different on different screens. Not sure what the best way to go about this is, any help would be appreciated!
I also tried overflow: auto but that takes away the border-radius on my home page...
http://flashandshine.com/port/?page_id=73
You can tray this CSS in your container:
.container {
width:80%;
display:table;
margin: 0 auto;
}
If the content you're trying to center is a fluid width, you can do some simple math to center it. For example, if your content is 90% wide, there is a remainder of 10% in the parent container, meaning a left and right margin of 5% would center it.
It looks like from your example the problem is that your <ul> has padding and margin, and isn't set to a specific width.
I have a div that I wish to position at the bottom of the webpage. I can achieve this using position:absolute. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to position:relative however as expected it does not stay on the bottom of the page on bigger screens.
Is there a way in which this is possible?
Current CSS
position:relative;
bottom:0;
background-image:url('.......');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
An example of what I was explaining.
As for me, the best idea is through creating a container DIV for all page content (stretch it to fit all screen using popular practices). Then you can put your footer to the bottom of this container by setting position: absolute and bottom: 0, and don't forget to set padding-bottom: height of your footer to the container. This will prevent overlapping your footer by content of the page.
Try giving min-height to DIV above footer DIV.
When the window becomes smaller, use media queries for that particular resolution or a resolution lesser than that and apply a display:none; to that div with the class that has a position absolute, if you do not want it to display or z-index:0; or z-index:-1; if you want to show it below the contents div.
Hope this helps.
You could set a margin-bottom of the height of the absolute element on the upper div. This way, your absolute positioned element will overflow with the margin instead of the element itself.
The way I see it, you should revert back to position: absolute, then try giving it a low z-index value, such as z-index: -1
I am trying to center this JS/jquery/ajax app screen here, such that no matter what size the user's screen is, it will all remain centered. Right now it is all left-aligned:
http://www.funtrivia.com/html5/indexc.cfm?qid=361927
No matter what I try, it simply does not center. When I do manage to center the outermost div, all of the inner stuff gets messed up.
your html is built wrong. everything seems to be positioned absolute and has a left/top defined. It does not help that your body tag has width: 790px;
This can be solved with just css. Try removing all the positioning styles from the markup and set #game to be margin: 0 auto (the centering trick)
Remove the width settings on your body tag
Use "margin: 0 auto" on your gameheader and game divs
and set your gameheader div and game div to use position:relative
A quick Google Search reveals How to Centre a DIV Block Using CSS
Use the following CSS where #content is the id of your main div element
#content {
margin-left: auto ;
margin-right: auto ;
}
The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.
jsFiddle
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.
I'm trying to make a div assume 100% of it's parent div. The parent div acts as a page wrapper, so it's already assuming 100% of the page width. I've tried adding width: 100%, but this did not seem to work. I'm a little baffled, because this seems like a relatively simply thing to do.
Don't specify a width at all. For a div element (or any block level element for that matter), this will make it assume 100% width regardless what padding/margin settings it has set.
Depending on the box model, explicitly setting 100% width can actually make the element too wide because paddings are calculated into it.
If this doesn't work, there is some other CSS setting interfering and you need to show more of your layout and HTML code.
display: block;
width: auto;
Should work for you.
You need to show more of your existing css code as normally, a div takes by default the whole space available to it, provided it has some content.
Other than that, make sure you set margin and padding of the parent div to 0.
.parent{
margin:0;
padding:0;
overflow:auto;
}
.child{
margin:0;
padding:0;
}