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.
Related
I can't seem to get the Leaflet full screen plugin to work appropriately in Google Chrome when I set the CSS position property for the map div.
Here's a JS Bin to demonstrate my problem.
See the code:
#map { position:absolute; top:100px; bottom:50px; width:100%; }
On Firefox and IE, the map correctly goes to full screen (i.e. expands beyond the dimensions of the map div), but on Chrome, the full screen gets constrained by the top and bottom properties of the map div.
Any ideas on how to overcome this problem?
Thanks!
Eli
Edited 8/14/14: Thanks #FranceImage for the great answer, which worked like a charm. I'm still learning CSS and thus I'm sure there are always better ways to do things than I have done. For example, I'm not sure how to use the float property to achieve the same effect that I have with position: absolute on my page here.
How do I change the following code to use the float property instead of position: absolute to achieve the desired effect of having my map NOT overlap the header and sidebar? Thank you!
#map2 {
height: 100%;
width: 100%;
}
#mapcontain {
position: absolute;
top: 125px;
bottom: 50px;
left: 16%;
right: 0;
width: 100%;
}
For the plugin to work, you can't change the following
#map { position:absolute; top:0; bottom:0; width:100%; }
You will have to wrap the in a container (another div) where you will apply your positioning css
<div id="content">
<div id="map"></div>
</div>
Note: I would not use absolute positioning for a page layout.
Absolute position benefit is that the element is taken out of the normal flow and can cover other elements. It is usually used for dialog boxes and popups.
Go for float position.
I'm wondering how to go about creating a div with an arrow attached to the bottom pointing downwards. I can achieve that effect like so: http://jsfiddle.net/hyH48/.
However, I'm not sure how to ensure that the arrow is in the centre of the div? In the fiddle, it is positioned using:
left: 20px;
But can I dynamically set this to appear in the centre? Obviously with people viewing the page on different screen resolutions I can't know in advance the integer to put here.
Please help?
If you know how wide the arrow will be, you can do this (fiddle):
left: 50%;
margin-left: -20px; /* -(width/2)px */
Otherwise, you can use transforms with left: 50%:
left: 50%;
transform: translateX(-50%);
What you what to do is add left:50%; and margin-left:20px;to #mybox:after. See http://jsfiddle.net/hyH48/1470/
I need some stuff that´s inside a specific div element, to float in a specific place.
Naturally, I get different positions according to screen resolutions and browsers.
I need this block of content to appear on the top right corner, but not at the very very top, but about 3 centimeters from the top.
How can I get the position fixed?
I´ve tried this:
#sidebars {
margin: -37% 1% 0 0;
width: 35%;
}
And it works in one page with a specific browser only (I´m using latest firefox version to test this).
So, I´ve tried a fixed position, only to get a result that does not respect the margins. So, I´ve added some float to the right, with no consequence:
#sidebars {
float: right;
margin: -37% 1% 0 0;
position: fixed;
width: 35%;
}
Any ideas? Thank you very much in advance for your insight!!
Rosamunda
Sounds like you do want a fixed position, but I'm pretty sure you don't need the margins. To be clear, position: fixed; will position an element with the window (whereas absolute is to the document). I'm betting you're looking for something like this:
#sidebars {
position: fixed;
width: 35%;
right:0px;
top:0px; /* or whatever spacing you said you need from the top of the window */
}
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. */
}
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.