I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}
Related
I'm trying to center a breakout div at the bottom of my page using the following CSS:
#footer {
clear: both;
position: absolute;
bottom: 0;
left: 0;
}
I've bee working on this for hours and what's really frustrating is that I got it to work earlier but broke some other things with my other two divs and made some changes that fixed the problem but since then I've been completely unable to center the footer. It just doesn't look right aligned to the left or right.
I've tried suggestions from other web sites such as setting the left and right margin to 100% and margin: 0 auto; among other things. Nothing is working and my head is spinning.
How should I approach this seemingly easy problem?
Here is my footer, in case it helps:
<footer id="footer">
<address>webmaster#mydomain.net</address>
</footer>
I also tried using align-text: center both inline and in the external stylesheet that I'm using. Before I was able to get it working using that CSS in the external stylesheet. Then I make a bunch of changes really fast without keeping a record of what I was doing.
Please help?
once you define position:absolute;left: 0; then margin:0 auto; will not work obviously..
i think following trick will work for you...
#footer {
clear:both;
position: absolute;
bottom: 0;
left:50%;
margin-left: -100px;
}
As you are using position: absolute; you cant use margin:0 auto;..in such cases left:50%;margin-left: -100px; is used generally to center a div horizontally
example:: FIDDLE
if you want to center div with position absolute than try this
#footer {
clear: both;
width:80%;
position: absolute;
bottom: 0;
left: 50%;
margin-left:-40%; /*should be half of footer width and it should be in -margin*/
}
I'm trying to set images in this style: one on top and other below this.
Actually I do something wrong and in my result images are one under other. Here is jsFiddle.
The second image is hidden by overflow:hidden in slider class.
Question:
Where I make mistake? I'm sure there is easy solution but I lost some time and can't find it.
P.S. If is it possible I'm looking solution with css changes only.
Change the css for your images to simply this:
img{
display:block;
}
that does the trick.
EDIT after comments:
img{
position: absolute;
z-index: -1;
top: 0px;
left:0;
}
That staples all your images over each other in the top left corner.
i think your img must
img
{
display:block; /*if you want top to bottom use display:inline;*/
}
I see you already marked an answer, but I already typed this up so here ya go :)
You can simplify your CSS a bit here as well by removing the floats and if you're only using images for your slider (no text beside the images), you can even simplify the HTML by removing the whole .photo div.
Simplified code:
<div class="slider">
<img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
<img src="http://placehold.it/754x453" alt="Top Image" />
</div>
.slider {
overflow: hidden;
position: absolute;
top: 1px;
left: 371px;
width: 754px;
height: 453px;
}
img{
position: absolute;
z-index: -1;
top: 0px;
left:0px;
}
http://jsfiddle.net/daCrosby/MP6qN/8/
I have web pages on http://rygol.cz/qlife/ and when I zoom out, the id="contacts" goes anywhere every iteration when I zoom out. I need something like
border: 0;
Because I need that text of will be every of bottom of
any ideas how to do that?
To align a div at the bottom of the content add {position: relative;} to the content div and {position: absolute; bottom: 26px;} to the div you want to align.
CSS:
#content-wrapper {
position: relative;
}
#leftcolumn {
padding-bottom: 110px; /* this will prevent the normal content in the left column to go under the aligned div */
}
#contacts {
margin-top: 0;
position: absolute;
bottom: 26px;
}
Demo: http://jsfiddle.net/NMDCF/
First of all, try to validate your HTML by using the following link : HTML Validation
try to fix those errors before trying to fix your id="contact"
as for the id="contact" use position:absolute or position:relative; that may solve your problem. if that did not work, use this display:block; or display:inline-block; both could help you achieve your goals.
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
Hey all - I've been googling this as much as possible, but nothing I do seems to help.
I've been working on a website (www.philipdukes.co.uk), and although the nav seems to work fine in FF, Safari, chrome, even IE6 (miraculously), on my system here it fails miserably in IE8: the navigation links don't work.
I hover on them, get the rollover animation, but they're not "clickable". They're basic text links, text-aligned off the screen, and then the area that they represent should be clickable. The image that fills the space isn't the link. If I remove the image I can click the area, and if I remove the text-align I can click the link text (but only the link text).
It's driving me nuts, as its the last thing I need to sort before everythings fully working...
The code for the nav bar is here:
<div class="navHolder">
<div class="nav current-home">
<div id="home"><img src="images/nav/home.png" alt="home." />home.</div>
<div id="bio"><img src="images/nav/bio.png" alt="biography." />biography.</div>
<div id="media"><img src="images/nav/media.png" alt="media." />media.</div>
</div>
<div class="nav2 current-home">
<div id="press"><img src="images/nav/press.png" alt="press." />press.</div>
<div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." />Plane Dukes Rahman Trio.</div>
<div id="contact"><img src="images/nav/contact.png" alt="contact." />contact.</div>
</div>
and the css styling is here (any optimization here is also welcome!):
/*
*
* BEGIN NAV SECTION
*
*/
.navHolder{
position: relative;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.nav, .nav2 {
width: 600px;
height: 50px;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0;
top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
position: absolute;
top: 0px;
overflow: hidden;
width: 200px;
height: 50px;
background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
position: absolute;
z-index: 100;
display: block;
top: 0px;
height: 50px;
width: 200px;
text-indent: -9000px;
}
.nav img, .nav2 img{
position: relative;
z-index: 50;
width: 200px;
height: 50px;
}
#home, #press{
left: 0;
}
#bio, #pdr{
left: 200px;
}
#media, #contact{
left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
background-position: 0 -246px;
}
You are missing:
.nav a, .nav2 a {
left: 0;
}
That should fix the problem. Always set a vertical (top or bottom) and horizontal (left or right) placement when using position:absolute.
UPDATE
Anytime a background is set, it starts working as expected. Through a lot of testing, you will probably find a different way of fixing the problem. But this is what I would do:
BEST WAY:
Either get rid of the img tags or hide them, and instead apply them as background-image to your a tags.
Change the position on the a tags to relative instead of absolute as they would be the only visible child of the parent div
QUICK WAY
.nav a, .nav 2 { background: url(/images/shim.png) }
Where shim.png is a 8-bit fully transparent, one pixel PNG. A 8-bit PNG shim is smaller than the same dimension (1 pixel) gif, and everything will still work as planned.
Serve the same styles to IE8 that you serve to IE7, and then put the following element in the document head:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This will make IE8 emulate IE7. Because you are having no issues with IE7, I presume this would work for you.
Not entirely sure what's going on there, but seems to be some kind of problem (maybe an IE8 bug) with the layering of the link and image elements. When I change the z-index of .nav img, .nav2 img to any negative value instead of 50, then the links become clickable.
I'm not sure if that is a practical possibility in this case, though, since the negative z-index might cause the images to no longer be visible.