So I've been told (maybe this is wrong) that if you want to overide (go beyond) the margins of a parent div simply make the child position:absolute. The problem with this is that it will overlap text that is set below that div.
Is there a way to;
Override the margins of the parent div and have that div still push down the adjacent text?
Can this be executed by not applying a margin-top: to the first block of text? This solution seems sloppy, the layout would blow up while in mobile view.
Thanks for you help / opinion on this one.
The page in question can be found here.
remove the image background for the div has the position absolute and put the image as a background for the parent div with the following selector:
.entry-content {
padding: 0 40px 40px;
background: url('http://www.gridviper.com/phelan/wp-content/uploads/back-blue-top4.jpg') no-repeat;
background-size: 100% 219px;
}
and change the absolute div css to be as the following:
.content-masthead {
max-width: 100%;
min-height: 219px;
position: relative;
left: 0;
right: 0;
margin-left: 0px;
padding-left: 0px;
}
Few hinds to help you fixing this:
This this not the parent, but the first positioned ancestor (with position other than null, can be "relative").
You can define the size of this element in percentage relative to this ancestor.
You can use padding instead of margin to keep the space.
Related
just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.
Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it.
here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image.
What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word?
Below is my code and any help would be much appreciated!
<div id="history-content" class="clearfix">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px;
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp img {
width: 10%; /*not sure I'm doing the right thing here either*/
height: 40%; /*not sure I'm doing the right thing here either*/
float: right;
position: absolute;
right: 100px;
top: 20px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
Few things:
Absolutely positioned elements are taken out of normal flow, hence doesn't affect the size of their parent.
Since they're out of normal flow, float has no effect on them (as far as i know)
Absolutely positioned elements shrink wraps to fit it's contents unless width and height is set explicitly or stretched using the top, right, bottom & left properties.
Now your parent div #history-content doesn't have any height set, and all of it's content of are absolutely positioned, So it's not visible (height 0)
applying a proper height for the parent seems to fix the issues for me.
Side note: unlike what you think, you don't have two absolutely positioned<div>'s, #stamp img absolutely positions the <img> inside div#stamp, for the same reason mentioned above, div#stamp is also invisible (height 0) you'll get the same result with and without it. And without floats
As others have said, float doesn't have an effect on absolute positioned elements, and so technically you don't need clearfix in this case.
I'm not exactly sure why your logo is positioned outside the outermost container #history-content, but you could try to put a border around the #history-content to further troubleshoot.
EDIT: Maybe check your hero image dimension, is it smaller than 1608px in width?
<div id="history-content">
<div id="history-image-text">HISTORY</div>
<div id="stamp">
<img src="./images/logo.png">
</div>
</div>
I've changed your CSS below
#history-content {
background-image: url('./images/heroimage.jpg');
min-height: 307px; /*set whatever minimum height you wish*/
background-repeat: no-repeat;
position: relative;
}
#history-image-text {
color: #fff;
position: absolute;
top: 20px;
left: 50px;
font-size: 20px;
font-weight: bold;
}
#stamp {
display: block;
position: absolute;
right: 100px;
top: 20px;
width: 10%; /*set width of image in containter instead*/
height: auto;
}
#stamp img {
max-width: 100%; /*image width will not stretch beyond 100% of container*/
height: auto;
}
JSFiddle: http://jsfiddle.net/5L9WL/3/
I have a very teasing issue. I have a div positioned absolutely to a point. But when i resize the window, it is moved to other place and not pointed towards where i set it before. How can i resolve this problem?
Here is my HTML -
<div style="position:relative;">
<div id="intro_message">
content
</div>
</div>
And the CSS for "intro_message" div -
#intro_message
{
position: absolute;
left: 322px;
top: 0;
padding: 20px;
width: 505px;
}
You can clearly see even i used relative position to its parent it still doesn't work for me.
EDIT -
Here from 'clearly see..." means if i would have not tell that i used relative positioning then everyone here would suggest me to use it. Therefore i told you all in advance.
EDIT 2 -
#David - After reading you solution, i understood it, actually i had to do one little but crucial change in my css. Now, i have following css for my main container div -
margin: auto;
position: relative;
width: 505px;
and for the inner div #intro_message i have changed some values to position it fine -
#intro_message
{
position: absolute;
left: -137px;
top: -4px;
padding: 20px;
width: 505px;
}
Now it is placed nicely pointing towards a link where i wanted it to be. On resize it still well, but when i go on resizing it is moved again -
on full window by default -
on resize - issue arises again -
So how to solve it?
I assume that you do not actually want the div to be fixed to a coordinate point, because that is what absolute positioning relative to the window does: resizing the page will move everything but the div. So you must want it to be fixed relative to the document.
Though you mentioned you tried relative positioning and it didn't work for you, that is actually the answer to this problem. You used it incorrectly.
Let me explain:
Divs naturally fill the entire width of their parent containers, so placing your absolutely positioned element inside a plain div essentially did nothing. In order for it to matter, you need to have the parent container be in the right spot. I would assume that your parent container would probably be centered inside your page and be a fixed width.
To do this, you can create your div and assign a width and automatic margins to center it:
div[c]{
width: 400px;
margin: auto;
}
As you can see in the following fiddle, both the div positioned relative to the window and the div positioned relative to the yellow div end up in the same place because the div has the full width of the page, but the div positioned relative to the blue div is moved where it should be and will stay there if you resize the page.
JSFiddle
Just use this css:
<style type="text/css">
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 4%;
width: 505px;
}
</style>
In CSS
.contains{
position:relative;
margin:0 auto;
width:900px;//or whatever you want
}
Html:
<div class="contains">
<div id="intro_message">
you are not clearly define your problem so i assume that you have problem in left postion.
I think when you are resize the window inner div will be plot left will be change according to you.
There is no problem regarding to position but your logic was not cleared.
if you want left inner div perfectly than use "percentage" rather than "pixel"
example:
#intro_message
{
position: absolute;
left: 30%;
top: 0;
padding: 20px;
width: 505px;
}
Basically I've got a wrapper to which I've added the (relevant) css properties:
height: 100%; float: left; margin: 10px 10px; position: relative;
with a nested div styled as
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
with display: block; taking effect on hover of the parent, targeting the nested div.
The issue is that when it's hovered, the nested div overlaps the parent by about 4-5px. I can completely eliminate this issue by stating a set height on the parent element, but I would rather keep the height at 100% if possible!
JSFiddle:
http://jsfiddle.net/Trblestrife/Y9ztq/1/
EDIT If you know what's wrong but can't be bothered answering give me a hint and I'll do more research. I'm asking here because I've run out of ideas as to where to look
Thanks very much
The issue is probably that images, because they are inline elements, can add trailing whitespace at the bottom. Generally a fix is to give their parent element a line-height of nothing:
.featured-projectwrap{
line-height:0;
}
But this would mean any text nested would not be visible, so compensate by re-promoting the line-height at the caption level:
.caption{
line-height:1;
}
Here's your fiddle with the changes...
I'm trying to think of a clever way to deal with a part of a webpage where the image is going to be swapped out with different images (of varying widths, max being 620px wide), and a text caption is absolutely positioned over it. I want the text to absolutely position based on the width of the image rather than the width of the relatively positioned container.
I was thinking maybe something with background-image, rather than an image itself, but then I have to deal with the fact that it's an empty div with a background image, so I'd have to hardcode a height, which wouldn't work since some of these images would be taller than others.
Any solutions you guys can think of would be greatly appreciated. Thanks!
I'm not sure if I'm following 100%, but here's how to do what I think you're trying to do.
Create your container with position relative, set your widths and heights, and set overflow to hidden:
.container-outer {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
Next, create an inner container inside of it that simply has position: absolute
.container-inner {
position: absolute;
}
Finally, create your overlay text style to be 100% width and center horizontally (or however you want it to be positioned)
.overlay {
position: absolute;
text-align: center;
width: 100%;
margin: 0;
}
Here's the jsfiddle with an example: http://jsfiddle.net/BGvca/1/
Good luck!
I raise the previous answer with some more CSS
<div class="imageholder">
<div class="caption">Simon & Garfunkel</div>
<img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg">
</div>
.imageholder{
position: relative;
float: left;
}
.caption{
position: absolute;
top: 0;
left: 0;
right: 0;
font-family: Helvetica,sans-serif;
font-size: 1em;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 1em 2em;
}
See the jsFiddle for reference.
If you make the div containing the image inline-block, its width will scale to the size of its content, ie your image.
Once the container is sizing correctly, you can center other child elements, like your caption, inside it using a wrapper with text-align: center, or no wrapper and value of auto for the left and right margins.
Here's an example: http://jsbin.com/uyajaw/3/edit (with ugly borders and backgrounds to show where stuff is)
Click the image to resize it and see the caption still centered.
Note that if your caption is likely to be larger than your image, it will probably expand the width of the container div, throwing off the center alignment. You can avoid this by making the setting position: absolute; left: 0; right: 0; on the caption, or by giving it a width that you know will always be smaller than your image.
I don't know if I'm over-thinking this, but here's a way to do it. If you specifically don't want to align the caption with the wrapper div, then you'll need to also account for the imagesLoaded event (jQuery plugin). Otherwise, you will either have an img width of 0 if not loaded, or you'll have the previously loaded img width in there (unless you go back to it).
Take a look at this Fiddle that shows a fixed width wrapper div and the caption centered on it.
I have the following divs in my HTML:
<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>
which is directly inside my body.
With the following CSS:
body {
margin: 0;
padding: 20px 0;
}
.content {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.content {
position: relative;
z-index: 1;
border: #000 thin solid;
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
.bgimage {
position: absolute;
z-index: -1;
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
background-image: url(bg1.jpg);
}
Basically, I have a Div that with a display of a background image, and I will have another Div on top of this with transparency. This current code works, but my problem is when I am trying to take the content div down from the top.
When I add margin-top:100px, for example, is also brings the image down. I thought it would not touch it if it is not on the same z-index? Why does adding a margin also force the bgimage div down?
I have also tried making the div with class of content a position of absolute and a zindex, but then this won't centre. How should I solve this?
your CSS should be
.bgimage { position: relative; }
.content { position: absolute; }
so the .content will be positioned relative to the .bgimage
your current CSS makes the .bgimage position relative to the document.
see this link on CSS positioning
z-index has no relation to positioning: it only affects the rendering order of your elements. Position: relative tells the browser to render the element at the place it should be, and offset it by eventual left, right, top or bottom coordinates. Therefore, margins, paddings, etc. still affect it.
Only position: absolute guarantees position independance.
I see no need for "z-index"es or "position: absolute" in your code at all -- unless you have other complications that you have not revealed to us.
To center the background on the DIV class="main":
body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}
The "center top" places the center-top of the background image on the center-top of the element it's applied to. You may want to apply a
min-width:1024px;_width:1024px;
to the same element -- to prevent a narrower window from hiding the edges (this will change how the element is rendered if the "viewport" is narrower than the background's dimensions).
The only thing your pre-modified code it can do that my modified code can't:
Crop the background image (if it is not natively 1024px x 768px) by using the css "width" and "height" properties
If the class="main" element already has a background image set, most browsers don't support the CSS3 required to stack multiple backgrounds on the same element
Some of what was stated about "z-indexing" and the "position" property above was correct but failed to mention:
you've taken your class="content" element out of "the flow". The ancestor elements won't grow when the content of class="content" element grows. This is an important and fundamental difference between "z-index"ed elements and elements that remain "in the flow".
Other side notes:
elements with the same z-index are stacked according to their order in the HTML (later in the HTML means they are drawn above on the screen)
"z-index"ing requires "position: (absolute|relative)", "z-index: (valid value)", and IIRC "(top|left|bottom|right): (valid value)" to take the element "out of the flow"
CSS absolute positioning is always done "relative" to the most recent ancestor that has a "position: relative", otherwise it uses the body tag by default. If the CSS you included is all that affects those divs, then your .content div will be positioned relative to the .main div, but your .bgImage will be positioned based on the tag.
If you want both .content and .bgImage to move in lockstep, then you'll need to add a "position: relative" to div.main.