I have a div, it needs to have position:relative;. I want that div to not push other content out of the way, so bascially I want the content in the same places as if the div wasn't there, without having to use position:absolute;. How can I do this?
Thanks.
img {
position: absolute;
}
Demo
Related
I noticed the glitch that i can't remove somehow, on all pages of the website the grey footer is not sticked to the bottom of the screen...
Here is the small page:
As i can see the white space under footer belongs to <body> tag but i can't fix this.
I tried:
position: absolute;
bottom:0;
But in did not help, also as changing padding, margin styles of body, content or footer.
Help please.
You seem to have a button there.
Find the following line:
<button id="authorize-button" style="visibility: hidden">Authorize</button>
and remove it, or do something about it. Perhaps move it up
The problem I'm finding has to do with the line-height property set on your body tag. Removing that property seems to fix the issue.
I would recommend using line-height only where necessary (ex. If you need to use it on your nav or in your content tag, do it).
Hope that helps!
EDIT: Setting position: absolute will work if its parent container is position: relative.
I got it to work like so:
.b-footer {
position: absolute;
width: 100%;
}
and you want to add position: relative to your .b-content container so the absolute works. I see it working in Chrome right now.
I'm quite new to css, divs and everything in between.
So, i created a basic layout for my band, didn't want a bunch of useless links like bio, merch store and all that. So i just decided to arrange separate spaces for our video, a player and a facebook window.
I managed to create a div for the youtube iframe, but i can't get it to stay in its place when i resize the window. I've tried changing the positioning a bunch of times to absolute, fixed, relative...etc. No luck.
Keep in my mind that the layout is nothing fancy, just something quick to look at, and get some basic info of the band.
Here's the link: http://silentcellmusic.com/test.html
Thx in advance!
First you should remove the image from the markup, and set it as background of the body, or html, for example. Set it to position top center.
Then, set the div #wrapper to { width: 960px; margin 0 auto; }. This way it will always be in the center of screen, so as your background.
Third, create four divs:
social
listen
video
Float them to the left, set their widths and margins, accordingly.
Finally add a div for your footer (social links and mailto).
Best of luck.
What you need to do is use positions. What fixed does is determine the position in relation to the window (or browser) top left corner, so it will always stay in the same place no matter how you resize it. The right way to go is to use absolute and relative.
First you need a relative container. Your image is already centered, so you could do something like:
<div id="container">...</div>
#container {width:960px; margin:0 auto; position:relative;}
Then you want your video to be in an absolutely positioned div, but INSIDE the relative one. SO your html would be:
<div id="container">
<div id="videoDiv">
your video here
</div>
</div>
And your css for the videoDiv:
#videoDIv {position:absolute; top:200px; left:200px; }
Look por css position online to understand how it works, it's actually quite simple but you need the right structure. In your case, your center tag should be the one with position relative, but make sure you change it to a div, otherwise some browsers will give a validation error.
Having said that, there are a lot of things you can do to improve your site. Once you know how to handle positions, you could re-do the layout using different images (so it's faster to load), and you can use actual text. This is quite important for search engines to recognise your site, so try at least to have keywords spread around.
Here is your CSS for the video div:
#apDiv1 {
position:absolute;
left:747px;
top:535px;
width:400px;
height:223px;
z-index:1;
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Did you mean to declare width twice? Is the width:960px throwing off your positioning?
Get rid of the <center> tag altogether and change the css for #apDiv1 to:
#apDiv1 {
position: absolute;
left: 597px;
top: 489px;
width: 400px;
height: 223px;
z-index: 1;
}
i want my div of menu to appear on the top left of the div for my header image. The backgrounds used for the menu blocks are transparent and translucent and i want that the image of the header should be visible under through translucent and transparent backgrounds.. How can i do it using css??
the class for div of menu is divmenu and for header is divmainimg
div.divmainimg {
position: relative;
}
div.divmenu {
position: absolute;
top: 0;
left: 0;
}
Consider changing the class names to mainimg and menu, respectively.
Set position: relative; on the parent object of your menus that you want them to be positioned relative to, and set position: absolute; on the menu divs. Often you can get away without specifying the exact position - if the divs appear in the DOM where you want them to be visually. E.g. this could be enough:
body {
position: relative;
}
div.menu {
position: absolute;
}
Edit: Forget about z-index for now - it is rarely needed.
HTH
try to use absolute position, and set a high z-index for the div you want over others..
You could also now Just simply put the div you want to be over the other div inside the div you want to be under for example:
pretend your div class="a" is the one you want on top, Then div class="b" you want on bottom.
that would put A on top then B under it.
I believe what you are wanting is z-index. Rather than explaining it here, just do a Google search for it. It is simple to understand.
If you have a background image in a div with a (drawn) button in the middle and some other drawings around it. How do you make the button clickable but not the whole div because I don't want the user to click the drawings around it, if that makes sense!? I am I wasting my time playing with padding and margins? Should I just create two divs? My boss says he has managed to make it using one div before.
Cheers
Try this code:
#container { width:200px; height:100px; position:relative }
#clicker { display:block; width:20px; height:10px; position:absolute; top:20px; left:100px; }
<div id="container">
<a id="clicker" href="#link"></a>
</div>
Obviously change all dimensions to match the area you want to make clickable.
In short — you don't.
Backgrounds are backgrounds. They aren't content. They aren't interactive.
It is possible to hack around that, but you shouldn't. If you have some content for the user to interact with, then present it as content. Use an <img>.
Put an element which is transparent and relatively positioned inside the div. Position it at the top of the button and make it the same size as the button. Make the element click able.
You could make the div "position: relative" and then place an <a> tag on the drawing using
display: block;
width: your_width;
height: your_height;
position: absolute;
left: your_position_x;
top: your_position_y;
That would be the cleanest way.
I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.
Currently its:
<div style="float: right;">
...
</div>
I tried z-index as I thought that would be the answer, but I couldn't get it going.
I know it's something simple I'm missing, but I just can't seem to nail it.
What do you mean by impacts? Content will flow around a float. That's how they work.
If you want it to appear above your design, try setting:
z-index: 10;
position: absolute;
right: 0;
top: 0;
If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:
position:absolute;
right:0;
top:0;
If you want it to float at the right of a particular parent section, you can add position: relative to that section.
Try setting its position to absolute. That takes it out of the flow of the document.