I'm confused here... Here's my site that I'm working on: http://s361608839.websitehome.co.uk/marbleenergy/
The div #main is sitting about 10px below #navigation and I've tried bringing it up 10px by adding:
#main {
margin-top: -10px;
}
Had no luck there unfortunately. I'm learning CSS here, what is it I need to do?
Thanks
using absolute positioning isn't so flexible since you're aligning your div's in hard pixel measure. This will probably cause some error on several browser
Use relative positioning instead, and use top attribute to lift that div up
this is the code
#main{ position: relative; top: -10px; }
Add the following to the #main div
#main {
position: relative;
top:-10px;
}
position: relative; Will position the element relative to where it normally sits and aligning -10px from where it would sit will bring it into the gap you have made in your menu div. Haven't checked your site but can't see any reason why this won't work. I prefer not to set my elements to position: absolute; as the above member answered as any content under the div will be pulled up under the absolutely positioned div.
As the other answer more clearly details, you need to make sure that positioning is absolute, in order for any 'px' CSS specification to make sense, if not, it defaults to relative (to nearest parent container) I believe.
USE
#main {
position relative;
margin-top:-10px;
}
See Demo: http://jsfiddle.net/rathoreahsan/fSDpJ/
I browse your website in your case you need to use the following css:
#main {
position absolute;
margin:-10px 0 0 12px;
}
OR
#main {
position relative;
margin:0 0 0 12px;
top: -10px;
}
Related
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
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.
It works in chrome , and not in ff/opera.
Demo here: http://booksnearby.in/browse_items.php . The 'location: Dhoolsiras Village, delhi' line 'hangs' in the middle. I am trying to make it stay at the bottom of its container.
For this I tried
Child span tag- {
bottom: -5px;
font-size: 11px;
left: 115px;
line-height: 20px;
position: absolute;
}
Parent:- element.style {
height: 100%;
position: relative;
}
But it doesn't work, except in chrome. Please help
Thanks.
Do you have to use a table? Because your problems come from the td element's height. Tables have the worst cross browsers support out of all the html elements :)
Is it possible to change the structure to use div elements instead?
OR you could give the position: relative to your .listtd instead of the div (which means remove the position property from the div). This solution will do the trick.
OK there is an image in a centered div, which is placed at the center of a page. Its width is 400px.
What I'm trying to achieve is:
to place another div - inside of that div with alignment right via CSS.
Due to various screen resolution, I wish to avoid commands "top:, right:".
How to achieve that?
<div class="non"><div class="info">Go top right</div><img src="images/top.jpg"></div>
CSS..
.non { width:400px; background-color:#d20000; }
.info { position:absolute;float:right; background-color:#efefef; }
Example here
Just do this, it should work:
.non { width:400px; background-color:#d20000; position: relative; }
.info { position:absolute; top: 0px; right: 0px; background-color:#efefef; }
I know you want to avoid using top and right, but if you do this, the .info class is positioned perfect top right corner of the .non class div, not the whole page :)
I'm afraid I don't really know how to do this save for float: position or right: 0. I managed to achieve what you want using two positions.. relative of the containing div, and absolute of the inner div:
.non {
width:400px;
background-color:#d20000;
position: relative;
}
.info {
position:absolute;
background-color:#efefef;
right: 0;
}
Other than that, as #HashemQolami has said, just remove the position: absolute from your code, and it works fine.
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block