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!
Related
My html is as follows:
<html>
<head></head>
<body>
<div id="board">
<div class="person"></div>
</div>
</body>
</html>
Now here is my css:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
#board{
position:relative;
height:500px;
width:500px;
background:yellow;
top:5rem;
left:8rem;
}
.person{
position:absolute;
top:34rem;
left:20px;
padding:1rem;
background-color:blue;
}
Now my question is why does the div with .person not positioned absolute to the div with #board? I feel like it should work since the parent element is positioned relative and then the child should position itself absolute to that parent element because of that. When I give .person div a crazy top, it still manages to break out of the parent div. Why is that? Thanks for any feedback.
I checked your code and it seems to be working fine, it's just on the .person you have top:34rem;
If you set .person top:0rem; and change the #board's top:#rem to any other rem value, you will see the .person moving with the #board
Also, using absolute position removes that element from the document workflow, so you can place it anywhere you like on the page. Negative values work as well. The only thing is, it looks for the first non-static element (the default position for elements) as a place to start, so you can use that one as a marker instead of the window itself. If you didn't put relative on the #person and had no other non-static elements surrounding it, it would go to the outermost element and basically use the webpage as the marker for its initial positioning. Since you used relative it starts its absolute positioning there because it is the first non-static element. You can still move it anywhere, it just starts there though.
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>
This is how i designed the layout for my header
<div id="DivHeader">
<div id="DivTop">
</div>
<div id="DivBottom">
</div>
</div>
Initially i had set the top property for the DivBottom as 35px.At that time i did not have DivTop. So now, after adding it, the top for the DivBottom has been calculated from the new child(DivTop) as DivTop's height + DivBottom's top. As a result the layout got collapsed like this. I need to place DivTop without affecting the DivBottom's Top, Any ideas.?
[Note : I did not use absolute positioning for my divs, Because in that case margin:0 auto wont work.]
You're using relative positioning, for which this is the expected behavior. See the W3 on relative positioning:
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning.
So if you insert something above a relatively positioned element, it will first position according to the "normal flow", and then be repositioned according to your CSS.
You'll need to change the position to another value if you want the behavior you specified.
You would need to use absolute positioning:
#first
{
position:absolute;
left:50%;
margin-left:-5px; /* half the width value */
width:10px;
height:10px;
background-color:yellow;
}
http://jsfiddle.net/3u3gz/1/
I can't for the life of me seem to get my links to vertically align inside of my div tag. I have tried with li and ul tags, but from what I read, it is even more difficult. Ideally, I want to be able to add more links and have them automatically align themselves as links are added/removed.
Here is my HTML: http://pastebin.com/9q4tzCpQ
Here is my CSS: http://pastebin.com/pBYxME7p
Thanks for any help I can get!
Vertical align doesn't work unless you are inside of a table. If its absolutely critical, and the content is static, use position absolute.
Position absolute fixes the position of a tag such as p, relative to its next non-static ancestor. So basically, in your div tag, put
position:relative;
and in your p tag use
position:absolute;
top:90%;
left:5%
remember: position:absolute specifies distance from so top:20px, moves it down 20px.
google: position attribute.
Good Luck!
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