In a page I work on I have a div that contains an animation with changing images (with CSS) and below it is a wrapper div for the content, like that:
<div id="animation">
<img ...>
...
<img ...>
</div>
<div id="content">
Some content
</div>
I've tried different methods: floats, clear, position, but I cannot make the content div to stay where it should, below the animation div - it overlaps it. The only solutions I found to partially work are to give the first div the height of the images (they all have equal width and height), but when I do that it breaks on different resolutions, or to give the images height of 100% and apply the above, but then the images look incredibly ugly on different resolutions.
How can I achieve my goal, preferably using CSS only?
Edit: JSFiddle
Edit 2: I used this tutorial for the changing images.
the problem is that you have all the content in the top div as position:absolute. That way, the top div doesn't know how high it needs to be (i.e. it will be 0px high).
So the solution is to have one img not positioned; then the div is as high as this img and the content div will move down below it.
#cf4a img {
position: absolute;
left:0; top:0;
width: 100%;
}
#cf4a img:first-child { /* one non-positioned child */
position: static;
}
Updated fiddle
Related
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
I am having a problem with my footer. I have a page with some content and on some devices (like mobile - in zoomed out view), my page content does not fill parent device height while on some devices, it does.
The footer is creating a problem with these different heights. When the content doesn't fill the parent device height, the footer is shown correctly at the bottom of the page but when the content fills the parent device height and overflows, the footer is shown over the content.
Footer with content not filling Parent height (shows correctly)
Footer with overflown content (doesn't show correctly)
Picture quality is not that clear but the issue is clearly visible.
This is the CSS code I have been using till now.
#footer{
display:block;
margin-right:auto;
margin-left:auto;
position:absolute;
bottom:0;
height:100px;
width: 60%;
text-align:center;
color:green;
font-size:18px;
font-family:Times;
}
How can this be fixed? I want to show the footer at the end of the page when content is overflown.
on your #main element right before the footer (assuming you are using id="main" for the item with the green border, do the following:
#main {
margin-bottom: 100px;
}
EDIT:
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
#wrapper {
position: relative;
padding-bottom: 110px;
}
whenever you position something absolute you take it outside of the DOM, meaning in this case it sits bottom 0 (based on your css) to the the nearest relatively positioned element. I put the footer html after your wrap or content block and just have it centered by saying
margin 0 auto;
If you need the footer to be absolutely positioned, you could always add a margin-bottom or padding-bottom to the body element. Just make it the 100px of your absolutely positioned element and it should force the content above your positioned element.
Alternatively, you could just set the footer to be positioned static, but you'll lose the ability for the footer to be at the bottom of the screen when your content is too short.
I've been working on a website with a pretty standard layout, header, content, footer, each being a DIV with a 900px width inside of a page-wide DIV, just like the one described in this question:
Full width background, without a wrapper
Now the problem itself is that whenever the browser window becomes less wide than the specified DIV width (900px) the background of the wrapper seems to disappear, showing the background color of the website itself. This also happens while using the code in the aforementioned question.
This is the CSS code:
#headerwrapper {
height: 229px;
background: url(imagenes/header.gif);
background-repeat: repeat;}
#header {
width:900px;
height:229px;
padding:0px;
margin:0 auto;
}
And this one is the HTML code:
<div id="headerwrapper">
<div id="header">
Content goes here.
</div>
</div>
Any suggestions are appreciated.
you probably can't see the background in the scrollarea. You need to set min-width: 900px; or max-width: 900px; so that the background will be shown in the scrollarea.
If you do not specify width for the #headerwrapper, browser makes it 100% of parent container (div or body). So if width of view area is less than 900px - #header becomes wider than #headerwrapper, so background is not showed for overlapped part. You may add overflow:auto; to #headerwrapper so scrollbars will appear, but i do not think that is a solution. So it is better to add background for the #header or add min-width for #headerwrapper.
P.S. Specifying
min-width:900px;
width:auto !important;
for #headerwrapper should do the trick.
I am trying to design a fluid layout with %, featuring books at 50% of the window height, with a quarter of the next book just visible, tempting one to scroll down.
Resizing the window should not change the layout, so the image size of the books, the margins, etc. should be given in %.
However, setting .books {position: absolute} for the containing divs, the size of the contained image shrinks to thumbnail size, although the images themselves are fairly large...
How does % as unit work? I figured 100% always is 100% of its containing element. Why would position: absolute change this?
A second question, even when working with %, changing only the window width changes the vertical layout. I had assumed that a the vertical and horizontal directions are independent.
Here are some code snippets.
<div id="container">
<div class="books">
<img src="..." />
</div>
<div class="books">
<img src="..." />
</div>
<div class="books">
<img src="..." />
</div>
</div>
#container {
height: 200%;
}
.books {
height: 25%; /* =50% of window height */
}
EDIT: I found the culprit: I assigned a top margin in %, but all (top bottom left right) margin values are defined as % of the width of the parent... Strange.
add this to your css
.books img {width:100%; height:100%}
To answer your question about position: absolute, The element is positioned relative to its first positioned (not static) ancestor element, therefore the % change of the containing div will affect the image size. Source: click here
From experience you'll end up running into a few issues with various browsers using % width and height. Fixing sizes and supplying multiple style sheets based on the detected device being used is probably the better way to go.
You'll need to specify the heights of all parents, right up to html i.e.
html, body{
height: 100%;
}
#container {
height: 200%;
}
.books{
height: 25%; /* =50% of window height */
}
.books img{
height: 100%;
}
If you change to position: absolute, then the parent will be the next positional parent, which you can specify by making it position: relative (or position: absolute).
The above code will mean that resizing the window will change the layout. But you could set a specific size at some point in the chain, or do it with javascript?
I have a div with two nested divs inside, the (float:left) one is the menu bar, and the right (float:right) should display whatever content the page has, it works fine when the window is at a maximum, but when i resize it the content is collapsed until it can no longer has any space, at which it is forced to be displayed BELOW the left menu bar, how can I make the width fixed so that the user may scroll when resized?
(css width didn't work, i alternated between floating the right content and not), here is the code:
<div style="width:100%">
<div style="float:left; background:#f5f5f5; border-right:1px solid black; height:170%; width:120px;"></div>
<div style="margin-right:2px;margin-top:15px; margin-bottom:5px; width:100%; border:1px solid #f5f5f5"></div>
</div>
I only need to have this working on Interner Explorer for now.
This should do it (container is the parent div containing that 2 divs):
.container {
width: 1024px;
display: block;
}
You may want to set a width on the containing div and set your overflow property
#containing_div {
width: 200px;
overflow: auto;
}
Also use the min-width property on the page if that makes sense, however that CSS property doesn't really work with IE6, this is usually what I do in that situation (supporting Firefox, IE7, IE6, etc)
#container {
min-width: 1000px;
_width: 1000px; /* This property is only read by IE6, which gives a fixed width */
}
Well, putting a width or min-width property is the way to go.
Now, without an example, or a link of the actual page, it's a bit tricky to answer.
Simply don't make the right div floating. Menu is already floating left of any other content. Just set a left-margin for the right div so the content in that div won't be wrapped around the floating div.
if the two divs are taking up 100% of the available width, could try to use percentage width and display: inline with a further div with a fixed min-width/width (boo IE) inside where required.
this is rather difficult without some HTML to go on
Your containing div should have a width wide enough to contain both inner div's
So if your two inner div's are 300px each and assuming you have no margin/padding on them then you should set the outer div to be 600px;
I'm a bit confused:
Fixed width means the width of a node will not change. Never.
You say you want to scroll when the screen gets too small for your content, so I think you mean the exact oposite of fixed width.
If my assumption is right, you could as mentioned before go for the percentual widths.
Watch out width the suggested "min-width" solution because it is not supported all that well.
<div id="container" style="width:100%">
<div id="primaryNav" style="float:left; width:150px; background-color: Orange">someNav</div>
<div id="content" style="margin-left: 10px; background-color: Red; overflow: auto;">
loadsOfSuperInterestingContentI'mSuperSerious<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Seriously
</div>
</div>
This should be pretty cross browser