I'm really stuck here...
I have a site layout with a central layout (it's about 922px width, centered on the page)... I have a little logo that is to the top left of this, but it sticks about 10 pixels to the left of the central design. If you can imagine, it sort of sticks out to the left of the design...
Now, I was told that absolute positioning would make this happen. But I can't see how the logo would work with absolute positioning if the design itself it in the center of the page. I think this is to make sure it works in IE6... I have tried floating the logo in the central header, and then applying a negative margin of margin-left: -10px; which does work, but I've read this doesn't work in IE6.
Without a snippet of code its hard to tell, but it's probably an issue with where your element is getting it's 'absolute' positioning from. 'Absolute' is a misnomer. It really means "absolute...relative to the nearest positioned parent". So if in your design, you don't have a parent element with the css "position" style on it, it's going to take its position from the body element (which may have some margin/padding on it depending on your browser).
Adding a position: relative; to the element that you want to be the "outermost" container will allow you to specify position: absolute on an item within it, and specify your exact coordinates from there.
Set "position: relative" on a container div.
<style type="text/css">
div.page {
position: relative;
margin: 0 auto;
width: 922px;
}
div.page img.logo {
position: absolute;
left: -10px; top: 0;
}
</style>
<div class="page">
<img class="logo" ... />
</div>
Though.. I would rather make it work without absolute positioning.
When you position your logo absolutely it needs to be placed relative to something. That something is normally the viewport edge. If the logo is inside an element that is positioned relatively then it will instead be positioned relative to that element. So the answer is to make your centered page div display:relative; so the logo always aligns to the page not to the edge of the browser window. Here is an example:
The HTML:
<div id="centeredpage">
<img id="logo"... />
</div>
The CSS:
body {
text-align:center;
}
#centeredpage {
width:922px;
margin:0 auto;
text-align:left;
position:relative;
}
#logo {
position:absolute;
top:0;
left:-10px;
}
I hope that helps.
Related
I have a site with an absolute positioned logo div on the top. It's parent is a relative div with 100% width.
I managed to get my position:absolute div where I want with next code:
css:
position:absolute;
top:0;
left:50%;
margin-left:-455px;
background:url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width:206px;
height:99px;
z-index:999;
However I ran into problem: when the browser window width is less than the site width, the logo starts to move to the left side of screen.
My question:
How do I absolutely position my div related to the center of the site page, in other words I need my logo to be positiond X px away from the middle of the site...
The parent of the #headlogo element on your site is #wrapper and it is not relatively positioned.
You should therefore add
#wrapper{
position: relative;
}
Or put the #headlogo inside the #header element which is relatively positioned.
The reason that requires the above change (position: relative; in a wrapper element) is that absolute positioning will only function if the first parent element is NOT static (default). If it's anything other than static, it should function correctly!
You can do it easily with jQuery.
$(function()
{
var logo_width = width of your logo;
var window_width = $(window).width();
$('#id_of_your_logo').css('left', window_width / 2 - logo width / 2);
}
That should do fine :).
I took at the link of your site. One option is if you put your .headlogo inside the #header div instead (as below):
<div id="header">
<div class="headlogo"></div>
<!-- rest of the #header content here -->
</div>
...then change your css to:
position: absolute;
top: 0;
left: 0;
margin-left: 25px;
background: url('http://www.anylivery.com/wp-content/themes/ugrb/images/logo.png');
width: 206px;
height: 99px;
z-index: 999;
Because your #header div as position:relative, any position:absolute div inside of it will be relative to it rather than the body. Therefore, when the window size reduces, it will still be relative to the header, not the body.
I've created a JSFiddle here:
http://jsfiddle.net/AsHW6/
What I'm attempting to do is get the down_arrow.png's centered in their containing divs. I was able to center the up_arrow.png's using auto margins. I'm using the fixed property to use them as footers, as I want them to be at the bottom of the div regardless of resolution.
My question is what is the best way to center a bottom fixed image within the width of its containing div?
Some code from the fiddle (I'm having trouble with the StackOverflow formatting):
.scroll-arrow-down {
position: fixed;
bottom:0;
}
I should add that I don't care about IE hacks/workarounds at all, this application will not be targeting IE in any way.
Any comments and answers are appreciated.
If you used fixed position it will be fixed to the viewport (which I don't think you want). Using absolute positioning will position the images in reference to the item that contains them.
I added a left:45%; which pretty much centers things, but depending on the width of your arrows that may need to be updated.
.scroll-arrow-down {
position: absolute;
bottom:0;
left: 45%;
}
http://jsfiddle.net/AsHW6/1/
You can wrap the arrow-down images in a div that gets aligned to the bottom. The div can then be set to have its content centered.
Wrapping in HTML:
<div id="list1">
<img src="image/up_arrow.png" class="scroll-arrow-up">
<p class="list-title" id="list-title1">Autonomous Behaviors</p>
<div class=".scroll-arrow-down">
<img src="image/down_arrow.png">
</div>
</div>
and the css:
.scroll-arrow-down {
position: absolute;
bottom: 0;
background-color: red;
width: 100%;
text-align: center;
}
I have an absolute div inside a relative div. It's essentially a container for a absolute positioned corner banner, on the top right side of the page.
It works fine with Chrome, but not with IE. In IE it appears positioned absolutely, but inside its container. I'd like to override this, if possible, due to the way this site is built (complete template on a CMS):
#corner-banner a {
position: absolute;
right: 0;
top: 0;
display: block;
height: 200px;
width: 200px;
background: url(../images/down.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}
#corner-banner a:hover {
background: url(../images/up.png) no-repeat;
}
Thanks for reading and for any input.
Cheers!
That is correct behavior. Absolute position inside a relatively positioned element will be absolutely positioned relative to the containing element.
Are you sure that the parent relative container is a div and not a td ?
EDIT
ok
This is not a CSS problem, but a bad HTML organization.
So, if you want your element to be positioned by the window, and not by his relative parent coordonates, you must put it outside the relative element.
Something like that :
<body>
<div id="corner-banner" class="norelative_element">
<!-- Your content with absolute position by the window !-->
<a>...</a>
</div>
<div class="relative_element">
<!-- Your content with relative position !-->
</div>
</body>
Im trying to float an element right outside of the main page content and want to avoid the horizontal scroll bar from cutting it off
Example
http://www.warface.co.uk/clients/warface.co.uk/test
I've noticed its been achieved in the footer here, but can't figure it out how
http://www.webdesignerdepot.com/
HTML
<div class="wrapper">
wrapper
<div class="imageright">
</div><!-- imageright END -->
</div><!-- wrapper END -->
CSS
.wrapper {
background: yellow;
margin:0 auto;
max-width: 1140px;
height:500px;
}
.imageright {
background: aqua;
width:520px;
height:285px;
display:block;
position: absolute;
float:right;
right:-100px;
}
The position: absolute; and the right:-100px; is pushing your element past the right edge of the viewport. Floating does not affect absolutely positioned elements.
If you want the element to be 100px away from the edge, make that a positive 100px. Or, if you want it right up against the edge, make it 0. If you truly want to float it, remove the absolute positioning.
Hopefully I understood the question, and I hope this helps!
Edit: I re-read the question and think an even better solution would be to add position: relative; to the wrapper. Right now, your absolutely position element is positioned relative to the viewport. If you give wrapper relative positioning, it will cause imageright to be positioned relative to wrapper.
you can apply overflow:hidden; to the body, which is how you get what you're after, but it's highly inadvisable. Another way to take the div "out of flow" is to make it position: fixed; but that will mean it will be visible as you scroll down.
I'm trying to get a jquery carousel centered on the screen, even when the clipping area is wider than the viewport. This will basically always give the element a negative left margin -- how can I specify this? The clipping area is a fixed width but of course the viewport area is variable.
Here's the best solution I've been able to find uses a wrapping element around your-fixed-width content, then a -50% margin on the content itself. This is off the top of my head, but it should be enough to get you started. Here's the code snippet:
div.wrapper {
position: absolute;
left: 50%;
}
.content {
position: relative;
margin-left: -50%;
}
<div class="wrapper">
<div class="content">JQUERY BIZ-NASS HERE</div>
</div>
Of course, this assumes that your div here is a direct descendant of the body tag, and that your browser specifies body to have a width of 100% and no margin or padding.