I have a DIV which I want to insert into my HTML content. Whenever I do, the content moves down from where the DIV WOULD have appeared in the content. It moves down the height of the div. I sat 'WOULD have appeared' because its position is set to relative.
Here is some code: (THE DIV I MEAN IS THE ONE WITH ID="pop"
<table border="0" align="center">
<tr>
<td><div id="pop" style="position:relative; z-index:20; top:100px; left:480px; width:208px; height:52px;"><img src="../Graphics/valj_oxo_komm.png"></div>
<div class="nav_container" id="nav_container">
<div id="nav_container2" style="position: relative; left: 0%; top: 13%;">
HERE IS ALL THE CONTENT
and some css:
nav_container{
width:720px;
height:180px;
background-image:blablabla;
}
If you need more input tell me and I will update this Q.
The content moves down although I can actually position the div ('pop') where I want, But I dont want the content moved down.
I mean, everything looks good, except content is ALL moved down 52px.
Thanks
If I understand correctly you want DIV to appear on top of the rest of the content, being completely independent of the rest of your site. To do that you need to set position: absolute rather than position: relative. relative basically allows moving element from its original position, but the space that element was occupying is still there and that's why all the content moved down in your case.
If you apply position: absolute element will be taken out of the flow of the page and the following elements shouldn't move down. But then you might need to make sure that DIV#pop moves in correct context but that's something to worry about later ;)
Hope my explanation makes sense, but you also might find this this link useful
What you describe is the intended behaviour of position: relative.
I'm not sure about what you want to achieve but try putting a wrapper outside pop with position: relative and give pop position: absolute. That should make you able to move pop without moving the rest of the content.
If you use only position: absolute the positioning will be relative to the viewport's top left corner and not the table's which probably is not what you want.
You will have to set the position to 'absolute' to get the ability to place the div wherever you want (and also the ability to use z-indexes).
Try to add below css or try to decrease top size you have specified for the div eg top:100px
<style type="text/css">
#pop
{
display:inline;
}
</style>
Related
I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}
I have a banner-image, on that image I've placed a link. This page is not getting aligned properly when I zoom-in or zoom-out the browser window or when I resize it.
The link is not getting aligned properly with respect to the image as it was showing in the default view(100% zoom ).
How to make this link responsive? I want the Read More button to be aligned exactly below the text Driving Value creation with ..... text, and the Read More link to be responsive with respect to the image on which it is present. How can I do that?
Here's my JSFiddle
<p class="homeImageLink">
<span>Read More</span>
</p>
Please help.
I am not sure this will work, but I think it would:
.image_container span
{
margin-left:-100px;
}
DEMO
DEMO1
You need to tweak your css so that the positioning is a bit more clear, I've fixed it somewhat here.
The important parts are here:
.image_container {
position: relative;
}
.homeImageLink {
position: absolute;
bottom: 10%;
right: 3%;
}
On the container, position: relative; means that any internal positioning will work from this container. Any positioning apart from static would do here and it's important no intermediate elements in the tree have position set or it will work from that element instead.
The the link container itself is position: absolute; with % values used to keep it proportional to the size of the container. Note also that right is used instead of left so the element appears relative to the right of the container. Now it will never go off the right hand side of the image.
To make this clearer I've removed all the other css from the example and as you can see it still demonstrates the effect you desire.
I have assigned a fixed positioned menubar a high z-index, yet it still appears below other elements on my website. Is there an alternative technique I could use or something wrong with the code I have written. My website with the issue is here (note: you need to scroll up after scrolling down for the navbar to appear). The menu bar that is not appearing properly has the following code
#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;
}
but, for some reason, the z-index does not work. Elements like the "NinjaWarrior.info" image in the front and center, with a lower z-index appears in front of the navbar. The code for that image is below
<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">
Add this css:
#header {
position: relative;
z-index: 10000;
}
z-index works on containers with the same stacking context.
In your code, the DIVs header and content are siblings, and that's a condition for z-index numbers to apply.
The most easy way of memorizing this rule is by "code versioning":
<DIV with z-index=1>
<DIV with z-index=3/>
</DIV>
<DIV with z-index=2>
So, like decimals, or versioning number, 1.3 will never be greater than 2, and therefore the inner DIV will be always rendered below the second outer DIV.
Other than that, you need to apply positioning to each DIV which sets z-index.
I just set a big number because I was lazy, you can find a good feasible number by yourself if you want =), but this code works as I tested it on your website.
Thank you.
Be sure to read: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
z-index is not working for me on child elements because of width and height which is declared ,I started adding {display :Inline} on my parent div on hover of child div.
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test
I am constructing a website based off of the Fluid 960 GS System. I want to overlay an image in the header so that it stays put relative to the header image without disrupting the header itself. If I use the following CSS, I get halfway there:
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
<div class="grid_16">
<h1 id="branding">
<img src="img/logo.png" />
<img src="img/float.png" class="imgFloat" />
</h1>
</div>
The only "issue" (not really since the CSS is doing what it is supposed to) with this code is that the image stays put rather than being staying x pixels away from the header image like I want.
If I change the position to relative, it breaks the size of the header and thus the layout of the header itself, but it will position the image like I want.
Is there a happy medium CSS "trick" that I can apply to achieve this result?
Thanks in advanced!
You just need to make sure that the absolute positioned element is inside the element you want it to be relative to. Then just add position: relative to that element and it should work.
So:
tag(position:relative)
ag(position:absolute; left:2px)
Should work
I'm just guessing here since the code you're showing is not detailed enough ;)
Update:
#branding {position:relative}
.imgFloat {
position:absolute;
left:400px;
top:-2px;
z-index:1;
}
set position: relative on the header element that wraps the .imgFloat element that should lock an absolutely positioned element to the wrapper.
Also you'll need to change your positions since the left will be relative to the 0,0 coordinate of the wrapper element.