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.
Related
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'm really not sure how to word this question, but here goes... I have a navigation bar at the top of my web page with a position of "fixed" so that it stays at the top even if I scroll down. However, I have a box that will hold all of my text/blogs that overlaps with this navigation bar whenever I scroll down.
Is there a way to "delete" a few pixels of the box (the one that holds all of my stuff) so that the navigation bar never overlaps with it? I'm sorry if this is confusing, but like I said, I'm not sure how to word it.
Screenshots:
When I'm not scrolled down-
When I am (overlapping)-
So I want to get rid of the overlapped area of my content container (and maybe 5px below it).
The other answers are spot on. I'd check the margins, and the overflow setting.
If the div's have absolute, relative, or fixed positioning, you can also play around with the z-index.
The higher the value of the z-index, the higher up in the stack an element is. So an element with a z-index of 2 will be displayed in front of an element with a z-index of 1.
On the box that contains your main content, add a margin-top equal to the height of the navigation bar. For example, if this is your html:
<div id="navbar">...</div>
<div id="content">...</div>
Then your css would be something like this:
#navbar {
position: fixed;
top: 0;
left: 0;
height: 50px;
}
#content {
margin-top: 50px;
}
Ok, thanks for the screen shots.
#navbar_id {
position: absolute;
top: 0;
left: 0;
height: 50px;
z-index: 25;
}
#main_stuff_id {
z-index: 24;
/*other
style
rules*/
}
keep in mind the "css box model" too: http://www.w3schools.com/css/box-model.gif
It sounds like you want to enforce a margin on an element with position: fixed; set. I don't think this will work, but you could put a fixed-position container around the element which you want to actually be fixed. This container can have padding, which will then give the desired effect.
<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box">
<!-- don't fix the inner element -->
<div style="background-color:red">The content you want to be fixed.</div>
</div>
Working Fiddle: http://jsfiddle.net/qtHtY/
Or if you are using position you can then use top: #px; and left: #px
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.
This is a very simple layout, and the menu and navigation are suppose to stay fixed to the left, use any modern browser appart from IE to see how its suppose to look.
IE7 seems to fix the div's but pushes there position to the right, im not sure if this is a Position: fixed problem, or a float problem, or something else...
http://snapclicker.com/
Thanks.
It's a problem with position: fixed.
#sandeep has the right idea (explicitly define top and left), but I'm going to add specifics, because I just found them.
To #header, add left: 5px and top: 5px.
To #nav, add left: 5px and top: 151px. Remove the margin-top rule.
Hey, gods
if given position:fixed .so, there is no need to given float .Basically define position attributes.
try this:
position:fixed;
top:0px;
left:0px;
both sandeep and thirtydot are right.. to avoid re-calculating position though.. wrap the left column (both the fixed divs) in a div and float it at 233px width, then add position: relative to it too - also remove the floats from the fixed divs, they aren't doing anything
#sidebar {
float: left;
width: 233px;
position: relative;
}
the your existing fixed divs should still work and you can change the padding (on the #container) without re-calculating
Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.
What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.
However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.
Here's what it should look like http://www.binarymark.com/layexp.png
Can you help me please?
Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.
Thanks.
position: fixed;
right: 0;
top: 50%;
Edit: try inserting this div as the first child of your <div id="content">...
<div class="right-tab">TEXT</div>
CSS:
.right-tab {
position: fixed;
top: 50%;
width: 1100px;
background-color: red;
text-align: right;
}
That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.