So I have a nav menu that I have floating on the left. I would like to move it more to the right without affecting the container. When I use padding or margin it moves it, when I try
position: absolute;
It just moves the container to the left and minimizes it.
[RESOLVED]
All help is appreciated, still pretty new to html/css.
On Menu
position: absolute;
margin-left: 100px;
You are looking for
position: relative;
left: 100px; /* or however far you want to move it to the right */
Related
By ghosting my CSS elements I can see that my mouth image is creating addtional white space but I dont know how to remove it. I've tried hiding the overflow in the hope that it might work but it hasnt? Link to codepen
.mouth{
top: 268px;
left: 273px;
position: relative;
overflow-x:hidden;
}
Use absolute positioning instead.
.trumpframe{
position: relative;
}
.mouth {
position: absolute;
}
You'll need to tweak the top and left values since I can't see the image it has to overlap.
I am weak in css and can you please help with this problem. You can see problem by clicking on Login/Register link in the below url.
Test box url
This is done in drupal. I am not able get the css to make the div with id "toboggan-login" to appear under the "Login/Register" link
Forgot to mention. I put the below css code. It works in small resolution systems. But its does not work in my 22'' monitor.
div#toboggan-login {
position: absolute;
top: 23px;
left: 74em;
}
This will fix your issue:
CSS:
div#toboggan-login {
position:absolute;
left: 50%;
margin-left: 310px;
width: 160px;
}
Than if you want to distance it a bit from the Login/Register top, just add:
top:10px; or how much px you want!
To explain the above lines:
The left:50%; pushes your element in the middle of the screen, so even at window resize your element will stay there, centered.
But to set it appropriately to some center-left position than we add position-left that will adjust the element position to a desired amount of px left from the center.
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
I have some text at the bottom of my page saying Built By Me in it. I have this in a fixed position 35px away from the bottom and left of the window so it moves as you scroll. What i actually want is to fix it vertically, so it moves as you scroll up and down and is always 35px away from the bottom of the window, but have it positioned 35px away from the left edge of the page (not screen) so it does not move when you scroll horizontally.I checked out this solution Position element fixed vertically, absolute horizontally but it does not seem to work for me unfortunately. FYI i am currently using the following code to fix it top and bottom which works fine (but also moves when you scroll horizontally):
#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}
*html #sticky {
position: absolute;
bottom: 0px;
}
<div id="sticky">
Built by Me
</div>
Thanks so much for any pointers you could give as i can't for the life of me work out how to fix it on only one axis?
Dave
Keep the fixed div.
And have the following javascript code which will take care of horizontal moving.
$(window).scroll(function(){
$('.fixed_div').css('left',-$(window).scrollLeft());
});
I believe the only way to achieve this is to use position: fixed; and calculate the value of left on page load or resize by determining where the left edge of the "page" falls and then adding 35px to it. Let me know if you would like me to elaborate.
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}