So I want to include a side legend that need so remain fixed on the screen. The problem is that I need it to position it relative to another element, in this case a table. I did put it on the right side but if I do it my way if I move to a larger screen it moves all to way to the edge of the screen which is annoying
<div style="position:relative;min-width:960px; max-width:1000px">
<img src="img/untitled.png" style="position: fixed; right:0;" />
</div>
<table align="center" cellpadding="0" style="width: 800px; background-color: #E8E8E8;">
<tr>
<td>
</td>
<tr>
</table>
Your best bet for this is to hack around how a fix element works, by fixed positioning a container, and then absolutely positioning the element you want to be relative to the table.
Set you fixed element to have the same width as your table width. Something like:
HTML
<div id="fixedElemContainer">
<div id="innerElem"></div>
</div>
CSS
#fixedElemContainer{
height:1px; /* make this 0 if you like, its really just so it doesnt cover the page content*/
top:0;
width: 100%;
max-width:960px;
position:fixed;
right:0; /* by setting both this will move the element to the middle when we have a max-width*/
left:0;
}
#fixedElemContainer #innerElement{
position:absolute;
right:0;
top:0;
}
If I understood you right u want to hava a two tiled Screeen, on one side the navigation and on the other the tabel/content/whatever? Then I would work with %.
Step 1:
Create one DIV around all other elements:
<div id="allContent">...</div>
Step 2:
Create a Style section in your header - thats mutch cleaner:
<head>.. <style>[css]</style></head>
Step 3:
Write tell the contDiv that it's the full size of the window (in the CSS section [CSS]):
#allContent{ position: absolute; top: 0px; left: 0px; width:100%; height: 100% }
Step 4:
Create 2 DIV's in the #allCont DIV which will be the left and the right side:
<div id="left"></div> <div id="right"></div>
Css:
#left{ position: absolute; top: 0px; left: 0px; width: 20%; height: 100% }
#right{ position: absolute; top: 0px; left: 0px; width: 80%; height: 100% }
now throw ur stuff in there..
EDIT:
For make the left side / navigation scroll with set the position of the left to fixed:
#left{ position: fixed; top: 0px; left: 0px; width: 20%; height: 100%}
now the left side / navigation will scroll with and the right will stay at position.
Related
I have created a few divs inside divs:). The problem is that the FOOTER div is printed above the div which contains absolute divs and is not dipalyed as last (at the bottom).
I tried a few combinations for footer div like: "position: absolute; top: 0px; left:0px", but it still displyed at the top of page.
How to move it to the bottom with current divs?
http://jsfiddle.net/hsbgpmus/2/
Where is the problem?
ADDED:
I want to have footer div not at the bottom of web browser window, but as last div right after div containing BBBB string.
You have used "position:static" in your example fiddle. Static means the element will flow into the page as it normally would.
For more info. about positioning element using css refer this link.
Positioning element absolutely and setting top and left to 0px means you want to align it at the top. To align element at the bottom of the parent element, you have to set bottom property (not top property)
CSS code :
<footer_element_class_or_id> {
position: absolute;
bottom: 0px;
left: 0px;
}
Hope it helps.
try this
<div style="position:relative; height:600px">
<div style="width: 100px">
<h1>HEaDER</h1>
<div>
<div style="position: static">
<div style="padding: 10px; position: absolute; top: 100px; left: 100px; background-color: yellow;">aaaaa</div>
<div style="padding: 10px; position: absolute; top: 200px; background-color: yellow;">cccc</div>
<div style="padding: 10px; position: absolute; top: 300px; background-color: yellow;">bbbb</div>
</div>
<div style="position: absolute; bottom:0">
<h1>FOOTER</h1>
</DIV>
</div>
http://jsfiddle.net/anjum121/xmox7pjq/
you need to wrapp your parent div to relative position
try this fiddle
http://jsfiddle.net/hsbgpmus/3/
.footer{
position:absolute;
bottom:0;
}
html
<div class ="footer"><h1>FOOTER</h1></DIV>
use below code for footer,
position: absolute; bottom: 0px; left:0px
I have a really difficult CSS problem. I have the following layout (this is just a fast mockup in Paint):
I need to float the red box to the bottom of it's container. Normally I would use position: absolute; bottom: 0; but that results in the text overlapping with the div, which I don't want. I want the box to behave like in the second image (same situation, but with more text)
Is this even possible? I don't mind dumping support for very old browsers.
Don't abandon position: absolute. Simply add padding to the bottom of the container equal to the height of the footer div.
#outer{
position: relative;
padding-bottom: 55px;
}
#foot{
position: absolute;
height: 55px;
width: 100%;
bottom: 0;
left: 0;
}
Without padding: http://jsfiddle.net/cG5EH/2
With padding: http://jsfiddle.net/cG5EH/1
Try this. calc allows you to make calculations within your css. In the example I am forcing the height to be 100% but this can be any value it could even be height: calc(100% + 80px). Note the spaces around the maths operator.
see http://css-tricks.com/a-couple-of-use-cases-for-calc/ for more details
<html>
<header>
<style type="text/css">
.container{
height:100%;
padding-bottom: 80px;
box-sizing: border-box; //ensures the padding is part of the 100% height.
position:relative;
background-color: blue;
}
.base{
position:absolute;
top:calc(100% - 80px);/*80px arbitary height of the element*/
height:80px;
width:100%;
background-color: yellow;
}
</style>
</header>
<body>
<div class="container">
<div class="base">
sdfgsdfg
</div>
</div>
</body>
I have tried many things but I still haven't found a decent solution.
Whilst desiging a webpage, I'm using this lay-out (lay-out using different full length colored stripes in the background as sections):
<body>
<div id="wrap_banner" class="bg_banner">
<div id="wrapcentering_banner">
<p>Here comes banner</p>
</div>
</div>
<div id="wrap_middle" class="bg_middle">
<div id="wrapcentering_middle">
<p>text</p>
</div>
</div>
<div id="wrap_footer" class="bg_footer">
<div id="wrapcentering_footer">
<table width="879" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text_webmade">
<p>
Company</p></td>
</tr>
</table>
</div>
</div>
</body>
CSS contains following:
#wrap_banner, #wrap_middle, #wrap_footer {
position: relative;
height: auto;
}
#wrapcentering_footer {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: 100%;
top: 0px;
}
#wrapcentering_middle{
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: auto;
top: 0px;
}
#wrapcentering_banner {
position: relative;
width: 1000px;
left: 50%;
margin-left: -500px;
height: 200px;
top: 0px;
}
.bg_middle, .bg_footer, .bg_banner {
width: 100%;
position: relative;
background-color:#FFF
}
PROBLEM:
Any div I'm putting in the wrapcentering_banner containing an automatic height is NOT pushing the footer div down. Depending on the Z-index, it's putting the content either behind the footer div er on top of the footer div, but it never pushes the div's.
I tried to put some relative divs in one container div ( inside the wrapcentering div ) using automatic heights and float lefts, but still nothing is pushing the divs down. Offcourse absolute divs are not working either.
The only solution I have to get the content shown is giving the wrapcentering div a specific height and making sure the contents is made for that height. Or I have to use a table in wrapcentering div. Tables pushes the footer divs down.
Since I'm not a big fan of tables, is there a way to push these divs down?
Thanks.
You can try giving automatic heights and floats to the wrapcentering_banner div and clearing the float for the footer div. This will make sure the footer div does not float along with the upper divs and will position it below the other divs.
In all the posts I've been able to find a deal with either centering a div inside another div or putting a div at the bottom of another div, and the advice has been great but I haven't been able to find anything to do both.
My code is:
<body style="text-align:center; margin:0; padding:0;">
<div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
<div>
<div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;">
<div style="float:left; position:relative; left:30px; top:15px">
<img src="logo.png" width="88" height="38">
</div>
<div style="margin-top:15px">
<h1>Product Form</h1>
</div>
</div>
</div>
</div>
</body>
All I want to do is to put the formtop.png div at the bottom and center of the containing div. I can do one or the other but I can't do both. If I change position:absolute to position:relative then the image centers itself but its too high. When I change it back to absolute then it sits nicely at the bottom of its containing div but in IE it's way off the right and in firefox it's at the left side of the page.
Any advice?
You can do it by setting the formtop.png <div> to 100% width and centering the background image using CSS:
<!-- div with the formtop.png background -->
<div style="
height:75px;
width:100%;
background:url(formtop.png) no-repeat 50% 0;
bottom:0;
position: absolute;">
As an aside, if you move all your inline styles into a .css file, your code will be a lot easier to work with and maintain:
<div class="formTop">
.formTop {
position: absolute;
bottom: 0;
left: 0;
height: 75px;
width: 100%;
/* Set the background image to centered in this element */
background: url(formtop.png) no-repeat 50% 0;
}
Have you tried left:0; right:0; trick for absolutely positioned elements? It does not work for IE7 nor IE6, but it does for the rest of the browsers and later versions.
This is an example http://jsfiddle.net/6w6VR/
Try to avoid html elements that are only used for style, because you might wish to change your style later.
See this example, which uses the :after pseudoclass:
div {
width:100%;
position: relative;
background-image: url(header.png);
}
div:after {
display: block;
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 20px;
background: url(http://upload.wikimedia.org/wikipedia/commons/3/38/Wiktionary-ico-de.png);
background-repeat: no-repeat;
background-position: center 0px;
}
You can set your header.png as background for div.
I have 2 images that I need to slightly overlap. My first image is logo.png, and my second image is form.png
My html is:
<body id="wrapper">
<div id="main" method="post" action="">
<img src="images/logo.png" align="middle" id="Smarty" />
</div>
<div id="box" method="post" action="">
<img id="Form" src="images/form.png" />
</div>
And my CSS is:
#wrapper #main {
margin-top: 8%;
margin-right: auto;
margin-left: auto;
text-align:center;
display:block;
z-index: 1;}
#wrapper #box{
margin-top: 8%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align:center;
top: 8%;
display:block;
z-index: -1;}
Basically I need both images to be centered relative to screen size, and I need the 2 to overlap. With this code, both images center, but my form seems to be 8% down from my logo, rather than 8% down from the top of the screen. Is this how I am supposed to be overlapping the 2, or am I way off?
Thanks!
How about something like this?
Live Demo
Or using position: absolute, if that's what you want:
Live Demo
CSS:
#main {
margin: 8% auto 0 auto;
text-align:center;
/*
only include this next rule
if you want the first image to be over the second
*/
position: relative
}
#box {
text-align: center;
margin: -12px 0 0 0;
padding: 0
}
HTML:
<div id="main" method="post" action="">
<img src="http://dummyimage.com/200x80/f0f/fff" align="middle" id="Smarty" />
</div>
<form id="box" method="post" action="">
<img id="Form" src="http://dummyimage.com/200x40/f90/fff" />
</form>
Use the following CSS code to do it. The 2 images will overlap each other and will be centered to the screen both horizontally and vertically.
#main, #box{
position:absolute;
left:50%;
top:50%;
margin-left:-150px; /* negative half the width of the image */
margin-top:-150px; /* negative half the height of the image */
}
Check working example at http://jsfiddle.net/gVQc3/1/
If you want the images to overlap each other by certain amount of pixels, then see the following link.
Check working example at http://jsfiddle.net/gVQc3/2/
for the #wrapper #box change the position: relative; to position: absolute;. This should fix the issue
As far as I can see, you’re not doing anything that would make the images overlap each other.
For that to happen, you’d need to apply position: absolute; to them, and position them at the top of the page:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
}
To horizontally center them when positioned absolutely, I think you’ll need to know their width. If they were both 100 pixels wide, you’d need:
#wrapper #main,
#wrapper #box {
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
I wouldn’t recommend a z-index of -1 either, I don‘t think that makes sense. If you want #main to be on top, then I’d suggest:
#wrapper #main {
z-index: 2;
}
#wrapper #box {
z-index: 1;
}
Note also that in your HTML, you’ve got method and action attributes on <div>s. These won’t have any effect: those attributes go on the <form> tag.
You should play around with fixed, static and absolute positions instead of relative.
See this link http://www.w3schools.com/Css/pr_class_position.asp