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.
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 downloaded a CSS Menu from here and trying to make some changes, here is fiddle file jsfiddle and the full screen result.
Now I trying to do 2 things:
Make Logo text/image not to have hover
Fix the width, I put 100% but if you look at full screen result you will notice what is wrong
Change line 42 to: #navbar li:not(:first-child):hover {
This will make sure the hover effect is not applied to the first <li> which in your case contains the logo. jsFiddle
This is called CSS Selectors Level 3
To fix your nav position use:
#nav {
width: 100%;
position: fixed;
margin: 0 auto;
left: 0px;
}
EDIT: if you still want the little margin on each side use:
#nav {
position: fixed;
margin: 0;
left: 1%; /* you can change this to whatever margin you like */
right: 1%;
}
and add:
#navbar {
width: auto;
}
Try #navbar>li:first-child~li:hover. I updated your fiddle at
http://jsfiddle.net/PHPglue/h4uL6/7/
If you do need a fixed position for some reason, wrap the entire code in a <div>, position:absolute; it and give it the same width and margins as I gave #nav to this <div> then make #nav's position:fixed;.
The red footer gets up in the middle. How to make it keep it self at bottom? Like clear: both and overflow: hidden.
I have tried many things, is there something I am doing wrong?
Demo
The code is too large to be pasted here (30000 chars limit). Please, send me working fiddle.
update: it works now.
#footer {
position: relative;
height: 274px
bottom: 0;
margin-top: 274px;
}
You have
#footer {
margin:-274px 0 0;
}
Which is giving it a negative top margin and moving the footer up. Try removing that line. Though you may also need to tweak the content of the page. You should use the clearfix on the content so it doesnt go behind the footer.
Try this :
#footer {
position:fixed;
bottom:0;
}
clear: both is invalid with position: absolute elements, because they are out of the normal flow.
set a position: absolute; bottom: 0; style on the div.gallery element and it will be on the bottom of its container.
But it won't be enough for you, you should yet move your <div class="gallery"> to move out of its container div.
I'm having CSS question on aligning an element vertically.
Please take a look at this URL:
http://leisureonly.com/gravedigger/grow-up [Possibly NSFW]
If you look at the sidebar to the right, at the bottom there's a block with an image saying 'Grave Digger'. I want this block to be aligned at the bottom of the sidebar.
I've tried wrapping it in a div and applying vertical-align: bottom to the grave-digger element, but that doesn't offer the desired results.
What is the correct way of doing this?
Well, beginning with, sidebar_gravedigger is at the bottom of the side_bar, so, the first problem is that the sidebar is that long. If you want that element positioned at the bottom of the container (the parent container of the side_bar), I recommend this:
.sidebar_gravedigger {
position: absolute;
bottom: 20px; /*container padding*/
}
#sidebar {
padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}
.container{
position: relative;
}
Something like this might help:
.sidebar {
position: relative;
height: 100%;
}
.module {
position: absolute;
bottom: 0;
}
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;
}