I want to create a set of the newest messages that have been posted on my page. Those boxes should always be the same size (as they're in a row, instead of below each other) and consist of three parts:
Heading (h3)
Content (no specific tag)
Author (span)
While it isn't that difficult to keep the heading always at the same position, I couldn't really think of a method of having the author to be always on the bottom of the box, no matter how much content there is above.
Perhaps I just think too complicated.
Thanks in advance for any help!
position: relative on the parent box, position: absolute; bottom: 0; on the author box.
I won't give you a full solution, because that would not really help.
CSS Positioning 101
you can use a wrapper set to relative from css and the span positioned absolute
HTML
<div class="wrapper">
<h3>Title</h3>
<p>Title</p>
<span class="author">Title</span>
CSS
.wrapper{position: relative; padding-bottom: 1em;}
.author{position: absolute; bottom: 0; right: 0
Related
Whenever I want to be able to make two things overlap (like an image over another image or something), using margin or padding works but it can make other things not work properly (like text not going to the next line or not being able to make other things overlap anymore). I want to know this for future use in any project, not really a specific one so I don't have a code snippet.
I would go with position: relative for both (or at least one of the) elements in question.
That does not affect the position of the other elements of that document, because is isn't removing the elements from the normal document flow.
The overlap of the relatively positioned elements is then realized by offsetting each of them relative to itself based on the values of top, right, bottom, and left.
CSS to make 2 divs overlap vertically 10px:
div {
border: 1px solid red;
}
.overlap {
position: relative;
}
.overlap.one {
bottom: -5px;
}
.overlap.two {
top: -5px;
}
<div>Before</div>
<div class="one">Div One - without overlap</div>
<div class="two">Div Two - without overlap</div>
<div>After</div>
<hr>
<div>Before</div>
<div class="overlap one">Div One - overlapping downwards</div>
<div class="overlap two">Div Two - overlapping upwards</div>
<div>After</div>
<hr>
is there any solution how to move text around in header section?
I have an <h1> tag whith email and I would like to move like 20% from left side of page and 50% form right side but all I can found is text-align:right,left, etc.
I add image so you can see on top of page there is this dark box whith email and view basket. How can I move that text the way I like?
There's a couple of ways you can position things like that...
Positioning
You are able to position elements using absolute and relative positioning, as seen in the example below, you can use position: relative for the parent container and position: absolute for the child and then use: top, right, bottom or left and define how far away you want the child element to be from its parent. As seen in my example below.
http://jsfiddle.net/8aL05tey/4/
header.header {
position: relative;
}
header.header h1 {
position: absolute;
left: 20%;
}
<header class="header">
<h1>
email#email.com
</h1>
</header>
Flexbox
You can also responsively position elements with flexbox. Flexbox can be relatively hard to understand if you've never messed around with it, there are plenty of SO questions with explanations in it. You can also read a bit about the properties here.
Floats
Alongside with positioning, you can float divs and other elements left and right using float: left and float: right. You can ready more about floats here. :)
There are plenty of options for what you want to achieve and no real "right" answer, it's about exploring what works for you!
Have a great day!
Is it possible to make element absolutely positioned to bottom in its relative parent, and retain the flow of its text content from top to bottom?
This is roughly the layout I am talking about ---
<div class="relative" style="padding-bottom: 2em;">
<div style="position: absolute; bottom: 0;">Bottom! Can I have normal text flow, plz?</div>
<div style="height: 10em;"></div>
</div>
--- and here is the Fiddle: https://jsfiddle.net/x507Ljyh/
Also I am opened to any creative solutions, such as pseudoelements etc. Just no changes to orders of elements in markup, please.
Thank you!
Edit
I know, that elements with absolute position "do not take up space" and that's ok - the gray article element has generous padding-bottom because of that.
I just need the h1 element text to flow from top to bottom, as would normal element do. So the scary long title "The Idler Wheel Is Wiser Than the Driver of the Screw and Whipping Cords Will Serve You More Than Ropes Will Ever Do" would end up at the bottom end of gray article element (and, sometimes, overflow it to bottom).
This would be similar question for floats: HTML float right element order
Does that make sense?
Edit 2
Flexbox solves my issue, thanks #RoToRa! However I am still interested if flow of text content of absolute elements can be reversed to normal somehow, so I am leaving the question opened.
If you are fine only supporting newest browsers you could use flexbox layout, and change the order of the elements:
article {
display: flex;
flex-direction: column;
}
article > h1 {
order: 2;
}
article > blockquote {
order: 1;
}
https://jsfiddle.net/8pqs49qf/
Once you make an element "position: absolute;" its space is no longer taken into consideration when the page is generated. That is why your paragraph text and header text overlap. The best way to avoid this is to add padding to the bottom of your blockquote element to make the article large enough to accommodate the space the header requires.
blockquote {
padding-bottom: 100px;
}
The issue with this solution is it isn't very dynamic if you have multiple headers of different sizes.
I've taken code from my site and simplified it and put in on jsfiddle to describe my problem a little better.
http://jsfiddle.net/5vMHC/3/
So what I'm tryin to do is have a border line seperating the left column from the right column, however I want the line to stretch to the height of the column with the most content. The way I have it setup now, I put border-left on the right column content, so if the content is smaller than the content in the left column, it only stretches to the height of the right column.
How can I make it stretch to length of the longest content? Would I have to make both columns equal to the longest? How do I go about doing this? Is my html structure okay? Thanks!
The easiest way to do this is to add a filler type element with the border and position it absolutely:
CSS
.filler {
border-right:1px solid #CDE;
width: 209px; /* width of #sub_page_left_column */
position: absolute;
bottom: 0;
top: 0;
}
/* add position relative so filler is positioned in respect to this div */
#content {
....
position: relative;
....
}
HTML
<div id="content">
<!-- add the new filler element -->
<div class="filler"></div>
<div id="sub_page_left_column">...</div>
<div id="sub_page_right_column">...</div>
</div>
Right longer: http://jsfiddle.net/5vMHC/5/
Left longer: http://jsfiddle.net/5vMHC/6/
hope this links can help you!
http://positioniseverything.net/articles/onetruelayout/equalheight
How to have two columns that are the same height in HTML?
Setting a div's height in HTML with CSS
good luck!
There is no simple included way to achieve your goal.
When you read this article, then you will learn 4 possible ways to do it and you can then decide what is the best way for your project.
I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.
You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.
position: absolute;
left: 50%;
transform: translate(-50%,0)
Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.
Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)
u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}
Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.