I am having a problem with my positioning. All of the items in my website are absolute positioned. They look completely fine when my web-brower is at it's full size, but when I shorten the (safari) browser then some items in my website move over others. At first I thought the problem was that absolute positioning does that automatically, but when I looked into it further I found some of my items that were in absolute positioning stayed at the same place even when my web page got smaller. It looks extremely bad and i would really appreciate help with my problem. How do I get things on my website to stay in the same place even when the web-browser shrinks.
#imagerotator
{
position:absolute;
right:118px;
top:65px;
}
Related
I am working on this page: https://www.rogersartwork.co.uk/404 - and the layout works at 100% and I want it to fit in and work at other zoom levels. However, all the items overlap and it messes up.
Does anyone know how to fix this?
Remove the absolute values from .centeredimage, and put the IMG into some DIV.
I'm making a page with HTML and CSS and the width of the page is growing as I use
position:relative;
left:100px;
When I put this code in CSS, the page is pushed to the right 100px making a huge blank area to the right of my website which looks horrible.
Here is a link to my website: Wagicalmales
If you side scroll right you'll see what I mean.
Thanks in advance,
Alex
That is the correct behaviour when using position: relative (the position is set relative to where it would have been).
I'm assuming the element you are having issues with is the h1 with the 'WagicalMales' text it. To fix your problem change left:200px to margin-left:200px.
I'm trying to create some cool CSS animated clouds. It works perfectly on modern desktop web browsers, but has issues with MobileSafari on iOS 7.
The code I'm using involves cycling clouds from margin-left 0% to 100%, to -100%, and back to 0%. This causes the browser window to be stretched, with a horizontal scrollbar appearing at the bottom. overflow-x: hidden solved it.
However, MobileSafari doesn't seem to support overflow-x properly, resulting in a stretched screen with an unneeded scrollbar on iOS. The clouds currently have position: absolute to move independently of each other, but I'm noticing setting position to relative fixes this issue on iOS. However, that brings me back to the original problem that absolute position fixed, which was randomly overlapping clouds. I'm wondering if there's anyway to have elements move independently of each other without absolute positioning.
The website is http://team178.github.io/DreamNext
Let me know if this explanation needs to be clearer. Thanks.
The solution was to make a container with relative positioning. MobileSafari stopped stretching after that.
Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!
Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.
You'll need to use z-index to set the layering, something like this:
.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}
Then you can fine tune it by using numbers in between.
My page is displaying properly on desktop browsers, but not on mobile devices. The url is [removed after question solved]. The logo in the top left is absolutely positioned. The divs underneath the header are also absolutely positioned with left: 0. Currently div#page has position:relative, but I've tried putting the relative positioning on many wrapper divs with no success. I also have php output buffers in each individual php file (e.g. header.php, body.php).
The slideshow uses a WordPress plugin that calls the jQuery Cycle plugin, and also declares absolute and relative positioning, so it may be causing confusion as to what is relative and what is absolute. But I've tried attaching relative and absolute positioning to elements in seemingly every combination and still have had no luck.
p.s. I know the CSS is a mess, I plan on going through and refactoring after I figure out this positioning issue.
Looks like you have a media query in there that is adding the following css at a certain break point that would be affecting the mobile size.
#main #content {
margin: 0 7.6%;
width: auto;
}
If you could clarify exactly what you feel is wrong with the mobile version it would help us give a better answer. Are you looking for the description text to bump under the slider images?