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 */
}
Related
i'm using this simple css, but elements move on screen re-size, and differentiate monitor resolutions.
.header {
position: fixed;
top: 15px;
left: 20px;
}
I think you are looking for the em unit instead of pixels.
.header {
position: fixed;
top: 15em;
left: 20em;
}
1 em is the height of the default font. It is defined by the browser.
Based on your comment to your question I would like to add that you maybe should have a look at the display:flex layout property or just on how to center the content of a(n) (div-)element.
In responce to your comment "'same place' means, on a widescreen its on middle of the page, on an old screen its on the right side."(I cannot comment)
I do not understand where you want it to be. If you want to make it appear to be the same distance from the left of the page when the page is re-sized, use left: some%;
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
Working with a Wordpress theme, and needed to have the blue blur background stay with the slider when the browser window is re-sized. I have achieved that goal, but I have noticed that when you narrow the browser, everything does not stay centered there is a large space on the left. What would be the best way to remedy this?
http://www.stringcreative.ca/wp/
The sites a bit of a mess, you need to have the wrappers with the image, then the containers the same size centered
#wrapper {
background: #000b1a url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat fixed top center;
}
#header_container {
margin: 0 auto;
height: 117px;
width: 960px;
position: relative;
}
dont need a lot of the position's set to absolute, and margins at - to get it to fit.
also look into the 960 Grid System. i use it all the time, and saves me loads of time getting the site to fit. hope this helps
It's because your solution for centered the slider is inelegant, and relies on fixed widths and absolute positioning to make it look right.
To fix it, you need to change a few things.
Change #homebgw to:
#homebgw {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% -117px transparent;
height: 411px;
width: 100%;
}
Change #header to:
#header {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% 0;
height: 100px;
margin: 0 auto;
padding-bottom: 35px;
width: 1400px;
}
Quite simply, you don't need absolute positioning to solve the issues you posted above. If you're using absolute positioning and negative margins to correct center alignment issues, you're probably doing something wrong. Keep it simple, and Google how to achieve the results you desire. The net is full of helpful documentation to achieve these basic results without hacking up your code with fixes ;)
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.
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. */
}