I'm tidying up another developer's work who seems to have done a shoddy job with the CSS.
There is the main "wrapper" div on the page, and inside this is a logo and images for the navigation. The images are using "position: absolute" and using the CSS "top" property to offset them. However, Firefox and IE seem to start their offset from a different point, meaning the logo is about 100px above where it should be in IE.
Is this an IE CSS bug or known thing?
Example in question: http://barry.cityjoin.com/mccamb/
If you want to position elements absolutely within a wrapper using top, right, bottom and/or left, the position of the wrapper has to be set as relative explicitly. Otherwise the absolute elements will get positioned within the view port instead.
A little working example:
<style>
.wrapper
{
position: relative;
height: 100px;
width: 800px;
}
.absoluteLogo
{
position: absolute;
top: 10px;
left: 10px;
height: 60px;
width: 80px;
}
.absoluteElement
{
position: absolute;
top: 80px;
left: 320px;
height: 20px;
width: 80px;
}
</style>
<div class="wrapper">
<div class="absoluteLogo">Logo</div>
<div class="absoluteElement">Element</div>
</div>
Another possibility would be to position the absolute elements using margins:
<style>
.wrapper
{
height: 100px;
width: 800px;
}
.absoluteLogo
{
position: absolute;
margin: 10px 0 0 10px;
height: 60px;
width: 80px;
}
.absoluteElement
{
position: absolute;
margin: 80px 0 0 320px;
height: 20px;
width: 80px;
}
</style>
<div class="wrapper">
<div class="absoluteLogo">Logo</div>
<div class="absoluteElement">Element</div>
</div>
The result is the same and should be working across all browsers.
Related
I have an image located inside a div, I am trying to move it 50 px down and 50 px left in order to have everything complete. But I am not sure how to edit the image in the CSS since I don't know what code to put in to connect the photo to the css.
My code:
#OverviewText4 img:MoneyIcon.png {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
Thanks for helping
Remove the image name from your declaration and make sure your container is set to position: relative so that your image is absolutely positioned against the right containing element in this instance #OverviewText4
#OverviewText4 {
position: relative;
}
#OverviewText4 img {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
You have to add position:relative to parent <div> and then add position: absolute; to the <img>. Like this:
#OverviewText4{
position: relative;
}
#OverviewText4 img{
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
There are many ways to do this in CSS as per the multitude of answers. If I might suggest, since the image name in your example is related to iconography a slightly different approach:
#OverviewText4 {
position: relative;
}
#OverviewText4:before {
content: "";
background: transparent url(MoneyIcon.png) scroll no-repeat 0 0;
background-size: cover;
width: 150px;
height: 150px;
position: absolute;
display: block;
top: 50px;
left: 50px;
}
https://jsfiddle.net/zk8su1qw/
This way you don't even need an img tag in the HTML, which is desirable if its just presentational.
There is also an assumption in this answer that you want the image displayed over the top of any content in the OverviewText4 div, rather than having content flow around the image. If this is not the case you would want to use margins and keep the image position: static or relative.
Right, your CSS is fine but your selector is not. I think this is what you were going for.
#OverviewText4 img[src="MoneyIcon.png"] {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
I've changed img:MoneyIcon.png (which doesn't mean anything to CSS) to img[src="MoneyIcon.png"] which means an img tag where the src = MoneyIcon.png
The main problem here is if you change the src you have to change your CSS also, I'd recommend having a class like this:
#OverviewText4 img.money-icon {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img class="money-icon" src="http://placehold.it/150x150" />
</div>
I hope you find this helpful.
You can simpy do this with padding
#OverviewText4 img {
padding:50px 0 0 50px;
}
Use the marginattribute for creating a margin around an element. You can also use padding on the div element.
Try it like this:
#OverviewText4 img: MoneyIcon.png{
width: 150px;
height: 150px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
You can link an image to a CSS class by adding the class name inside the tag <img>
Working Example:
body {
background: #111
}
.OverviewText4 {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<body>
<img src="MoneyIcon.png" class="OverviewText4" />
</body>
If I understand your question correctly all you have to do is add this style to your div where the image is located.
div > img {
margin-top: 50px;
margin-left: 50px;
}
Examining this HTML:
<div class="wrapper">
<div class="content">
</div>
</div>
<div class="footer">
<hr />
<p>some text</p>
</div>
and CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
padding-bottom: 100px;
background-color: blue;
height: 100%;
}
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
html, body {
width: 100%;
height: 100%;
}
You can see that footer have position absolute and stay at the bottom of the page. wrapper will cover the remaining space and contain a content inside it. I want to vertical-align content without breaking the current layout. Do you have any suggestion?
Here is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath footer, this behavior doesn't occur when run the HTML file in browser).
Note: I don't want to use fixed height for wrapper, I want it covers all the remaining space, so please don't suggest me to use line-height
I tried the example here but it doesn't seem to work
NOTE I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on wrapper and content
NOTE 2 Sorry for not to clarify, actually, content doesn't have fixed size, its size depend on the content inside it, so the solution using negative margin doesn't work as I mentioned above
Here is one approach using the following CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
background-color: blue;
position: absolute;
top: 0;
bottom: 100px;
left: 0;
right: 0;
}
.content {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Use absolute positioning and then negative margins, since your content has well-defined
dimensions, this is relatively straightforward.
See demo at: http://jsfiddle.net/audetwebdesign/DgUV2/
For .wrapper, use the top, bottom, left and right offsets to stretch the div to the
full width and height, taking into account the 100px for the footer.
For .content, set top and left to 50%, the center point of the .wrapper and then adjust
for the center of the .content div using negative margins.
Remember to zero out the margin for the body or else you might see 10px whitespace
depending on your browser.
Add this to your .content
position: relative;
top: 50%;
transform: translateY(-50%);
Just 3 lines of code to vertical align
I was able to get it to work using Method 1 from the example you linked
I added the following:
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
/* THE BELOW WAS ADDED */
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
html, body {
width: 100%;
height: 100%;
/* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
margin: 0;
}
jsFiddle of working example
Assume, that I have three boxes (divs) on website (see image below):
header with logo
content with some text
footer with contact info
Each box have unique color (in order: yellow, orange and blue) and black border.
I would like to website always fills the entire screen, the logo was on the top and the footer was at the bottom. So if there is not enough text in content, content should be extended, so that the footer was on the bottom. And if will be a lot of text in content, slider should appear on the right.
How do this in CSS? Important is that boxes have backgrounds. I found many solutions, but none doesn't work properly with backgrounds.
Solution Explained
The black box in your diagram gets min-height 100%, is the scrolling container, and is position relative, to allow child positions to be respective to it.
The red box in your diagram is actually composed of 2 boxes:
one for your dynamically-sized content; this has sufficient top and bottom padding to make room for your header and footer, and force the scrolling container to expand
one for the background; this is position absolute, with top and bottom position specified relative to the black box, its parent.
The yellow and blue boxes in your diagram can be position: absolute, top: 0 and bottom: 0, respectively... or however you choose to position them.
Here's a fiddle of it: http://jsfiddle.net/syndicatedshannon/F5c6T/
And here is another version with explicit viewport elements just to clarify, matching colors, and borders added to replicate the OP graphics (although per the OP the black border is actually the window).
Sample HTML
<html>
<body>
<div class="background"></div>
<div class="content"></div>
<div class="header"></div>
<div class="footer"></div>
</body>
</html>
Sample CSS
html { position: absolute; height: 100%; left: 10px; right: 10px; overflow: auto; margin: 0; padding: 0; }
body { position: relative; width: 100%; min-height: 100%; margin: 0; padding: 0; }
.background { position: absolute; top: 120px; bottom: 120px; background-color: red; width: 100%; }
.content { position: relative; padding: 120px 0; }
.header { position: absolute; top: 10px; height: 100px; width: 100%; background-color: yellow; }
.footer { position: absolute; bottom: 10px; height: 100px; width: 100%; background-color: cyan; }
Also note that this assumes you cannot rely on CSS3 yet.
If you're only targeting modern browsers, you can use calc()
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
}
.footer {
height: 100px;
margin-top: 20px;
}
.content {
min-height: calc(100% - 50px - 10px - 100px - 20px);
}
The drawback is that you need to know the header and footer sizes and they need to be fixed. I don't know any way around this without using Javascript. For slightly less modern browsers, you can use border-box to get the same effect as above.
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
z-index: 5;
position: relative;
}
.footer {
height: 100px;
margin-top: -100px;
z-index: 5;
position: relative;
}
.content {
box-sizing: border-box;
padding: 60px 0 120px 0;
margin-top: -60px;
min-height: 100%;
z-index: 1;
position: relative;
}
Lastly, here is the JS solution:
$(function(){
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight() - $('.content').marginTop()
- $('.content').marginBottom());
});
EDIT: My JS solution assumed border-box and no border. This solution should be more robust:
function setContentSize() {
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight()
- ($('.content').outerHeight()
- $('.content').innerHeight()));
}
$(setContentSize);
$(window).on('resize', setContentSize);
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}
Ok I am running into a little problem positioning an image inside a DIV.
<div id="wholePage">
<img src="theImages/header_shadow_flip.png" id="hF" />
<div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
</div>
</div>
I have the following CSS for both DIVs
#wholePage {
position: relative;
width: 1000px;
padding: 0 10px;
padding-top: 35px;
margin: 0 auto;
}
#pageWrapper {
position: relative;
width: 960px;
padding: 0 10px;
padding-top: 37px;
margin: 0 auto;
}
The CSS for the top shadow, which works just fine. no need to change, is:
img#hF {
position: absolute;
left: 50px;
top: 56px;
z-index:2;
}
But the bottom footer image is giving me issue and the css is:
img#bF {
position: absolute;
left: 50px;
top: 1657px;
z-index:2;
}
Two examples of the page is below:
www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html
How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn't position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)
Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren't tied to your page being 1657px tall every time.
img#bF {
left: 50px;
position: absolute;
bottom: -4px;
z-index: 2;
}