I'm in need for some pointers on positioning.
I've got this square which should be centered on the page. And with a logo and a logo font image kinda wrapped around the square. Now, I want this as dynamic as possible, because I use both the square and images elsewhere as well. So I can't really use stiff static positioning.
This is the site:
www.matkalenderen.no
How should I do this? I want to logo to appear on the left side of the square. And the font to appear above the square. And the square itself should be centered. You probably get the picture :) Right now I've got a wrapper around everything, which is also centered.
HTML
<div id="loginWrapper">
<img class="LogoChef" alt="Logo" src="img/LogoKokk.png"/>
<img class="LogoMatkalender" alt="Logo" src="img/MatkalenderLogo.png"/>
<div id="content" style="width: 250px;"></div>
</div>
CSS
#loginWrapper {
margin-left:auto;
margin-right:auto;
padding-top:80px;
width:600px;
}
#content {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#EADCBA;
background-image:url(img/KalendarRedTint.png);
background-position:right top;
background-repeat:no-repeat;
border:5px solid #F1E9D5;
margin-left:auto;
margin-right:auto;
padding:5px;
}
you'll have to use absolute positioning inside a relative positioned div. so you're logo and font needs to be absolute positioned inside the wrapper (which needs to be relative positioned).
elements that have absolute position within a relatively positioned element are treated with respect to the parent element. this gives you control to position the logo and font relative to the wrapper.
see this link
Related
Here is a jsfiddle:
https://jsfiddle.net/mcgfhL10/
#description{ /*Just a breif description of the product. */
font-family:"microsoft sans serif";
font-size:22px;
position:relative;
overflow-y:scroll;
bottom:40px;
width:400px;
height:150px;
background:black;
}
I would like the div with id description to fall to the bottom of the div with id shelf. However, it falls to the bottom of the image, which is a sibbling? how is this working?
The problem with your code is that your description is positioned relatively and your parent has no positioning set at all. This means that the description basically doesn't know that it lives inside the shelf and is instead calculating its position relative to the image, which is the closest element. (If you set the bottom: 40px to 0px in description, you will notice that it will sit snugly under the image).
You have to make the child absolute and the parent relative. If you position a child element relative and then set the child bottom to 0px, it won't stick either. You're basically telling it to not move anywhere. (Relative means relative to its current center).
Here is a demo for reference: jsFiddle Demo
.shelf {
position: relative;
}
.description {
position: absolute;
}
I strongly suggest you read up on CSS positioning and display before you go any further. It will help you a lot if you know the foundations well.
CSS Tricks
A List Apart
Your description needs to be positioned absolute, because it is not relative to the other elements, but absolute within the parent container. You also need to move your description div on top of the image.
So your HTML becomes:
<div id="description"><p>foobar</p></div>
<img id="image" src = "image.jpg">
and your CSS addition is:
#description{
position: absolute;
}
Here's a fiddle: https://jsfiddle.net/jgghpcmy/1/
I'm trying to position text to be centered, and at a certain distance from the top of the web page.
The problem occurring is that setting the position to absolute overrides the text-align: centered; command.
I also am not able to relocate the text upwards.
Why is this happening?
h1 {
position:absolute;
top:10px;
text-align:center;
font-family:impact;
font-size:80px;
}
Setting your h1 position to absolute makes the h1 element take it's parent's relative position. Text-align will set the text to the center of it's parents relative position. So they are contradicting each other and absolute positioning will always win.
It's a bad idea to have an h1 tag take an absolute position. I would instead create a parent div for the h1 element to take the absolute position. Check out this jsfiddle as an example. Also, play around with the various ways absolute positioning effects the different elements.
<div id="test">
<div id="abs">
<p class="text"> Hello </p>
</div>
</div>
https://jsfiddle.net/alexflores67/wb1dh7h9/2/#&togetherjs=C1mAFQldMN
Good luck!
I need to position a text element at the bottom of a background-image.
<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px">
<p class="caption">Test</p>
</div>
.caption{
position: absolute;
bottom:0;
}
As you can see here: http://jsfiddle.net/K98CR/
This will position the element at the bottom of the page and not at the bottom of the background image. My understanding of the "bottom" property is that it can be relative to its parent element, but it is not working in this case.
Anything I am missing? Or any other way to accomplish this? Using a margin-top is not an option as I am creating a fluid layout and that would depend on screen ratio and I do not want that.
What I want is a way to position an element at the bottom of its parent element. In this case, I want to position text at the bottom of an image styled with "background-image".
Using postion: relative; to your background image div will fix it.
<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px; position: relative;">
<p class="caption">Test</p>
</div>
LIVE EXAMPLE
w3schools:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
I have the following.
If u see, the "asdasdasd" text is not near the top of the div.
I have a div with two divs inside
<div id="widget">
<div id="header"> </div>
<div id="content"> </div>
</div>
The header div have a fixed height, and this background image.
If you see what is in red, that part of the background make me need the div to be bigger, but it moves the content div down.
I tried to pull it up using margin-bottom: -Ypx; but I think its a ugly fix. I can't find something that works for me.
somebody can help (:?
Yeah you can use the position:absolute to keep out the div header you need this properties:
#widget {
position:relative;
}
Make the parent relative, that way the position absolute of the header will be relative to this container
#header {
position:absolute;
top:0;
left:0;
}
Position absolute to the top ande left of his container
I am trying to stack two divs A and B.
Div A - will be scrollable but its height needs to be determined by the div underneath it, Div B so if the content in Div B changes, and it's height changes the height of Div A also changes.
Div B - needs to be aligned to the bottom of page on top of a absolute positioned footer. Its content needs to be aligned to the bottom.
I've tried using position relative and float by wrapping these divs in a wrapper, but the whole thing breaks when I try to keep the Div B aligned or positioned absolutely above the footer.
I've got a feeling this needs to go back to basics, any help would be greatly appreciated
thanks
Here's a basic example. I think I have correctly understood your requirement. This example has them appear to be stacked but in the HTML they are not actually stacked, they are nested. I wasn't sure if you could allow that in your solution but fingers crossed.
Example: http://jsfiddle.net/jyR2A/1/
CSS:
#divA {overflow-y:scroll;position:absolute;height:100%;top:-100%;background:green;width:100%;}
#divB {position:absolute;bottom:0;background:blue;width:100%;color:white;}
HTML:
<div id="divB">
<!-- Div A is nested so we can use divB's height -->
<div id="divA">
</div>
<!-- Div B content -->
<div id="divBinnerContent">
Line 1 <br />
Line 2 <br />
..Keep adding more lines to test how it works <br />
</div>
</div>
How it works:
divB is the parent element defining the height of divA. So if we set divB position relative or absolute and place divA inside then we can set divA's height to 100% to give it the height of parent element divB.
Now to position divA we make sure it has position:absolute and set top:-100% which will move it up the same distance as the height of its container divB. Position absolute not only allows us to position it correctly but it also removes it from affecting the height of its parent, divB.
And the content for divB I have made a nice container for it but it is not neccessary. Simply put it anywhere inside divB (but not inside divA) and it will be OK.
You can use the content to define the height,as I have, or use an absolute height set in CSS.
Hope this is what you were after.
Le-roy
I managed to achieve this with help from this question and fiddle.
Stack div elements in css vertically (with dynamic height)
http://jsfiddle.net/nCrEc/334/
Essentially the answer was giving my Div A a height without using the height parameter but instead using absolute positioning on top and bottom. Which meant changes to Div B changed the location of the Div A's bottom (oo er) which pushed the middle div up whenever another populates the bottom area.
<div class="con">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
then using this CSS
.con {
width:200px;
top:50px;
bottom:0;
left:0;
position:absolute;
background:#ff0;
}
.top {
width:200px;
height:20px;
position:absolute;
top:0;
left:0;
background:#f60;
}
.bottom {
width:200px;
height:50px;
position:absolute;
bottom:0;
left:0;
background:#f60;
}
.middle {
overflow-y:auto;
min-height:1px;
position:absolute;
bottom:50px;
top:20px;
left:0;
background:#06f;
}