I am building a website for my tennis club: http://users.aber.ac.uk/dwd/aut/
Can anyone tell me why it looks zoomed in and push to the right? Click view source to see the HTML/CSS/Javascript as its quite a lot to post in the comment thread.
If you zoom out once that's what the site SHOULD look like.
Any ideas guys?
Dan
You've set the content to have an above average width and absolutely positioned it some distance from the left of the page.
It looks lopsided because it's not properly centre-aligned (if you use the Ctrl+- shortcut it becomes more obvious)
If you remove position: absolute; from #wrapper it displays correctly centred for me (in Chrome)
Remove the font-size from the body CSS, and then remove position: absolute and left: 12em from your #wrapper div.
Others have pointed out why this is happening. Here's some more points, though:
to truly centre a container, use a value of auto on the margin X/Y axes. You are doing this currently, but it's being undermined by the fact that you have also specified absolute positioning, so remove the latter
incidentally, your current attempt to centre may work on your screen, but on a different resolution it will not, since you're essentially just bumping the page to the right by an arbitrary number of pixels
whilst a target resolution is something every site designer has to decide for him/herself, the standard is to make the page work in 1024 * 768. Your page container is currently 1024 pixels in width along, with a further 32px padding added either side. Either reduce your width or take advantage of the CSS property box-sizing, which means any specified padding eats into your element's width, rather than adding to it
Related
Per the GIF below, as you can see as I increase/decrease the window size the image on the left grows and shrinks as it 's supposed to. What I've done is include the line inside of the "image wrapper" that I have set up. My goal here is when the image shrinks I have the line line up with its respected block of text you see on the right. Right now I have the line positioned as absolute with percentage values for left and top. Is there a way to adjust the rotation of the line for what I'm trying to accomplish? How can I get that line to line up with the title no matter what? Are percentages possible for rotation? (I don't think so)
This raises one concern of mine. Sure, a CSS only solution would be great, but the concern is compatibility with browsers. If the solution can be in JavaScript that would be just as perfect, but I wouldn't know where to start with something like this for JS.
Any other suggestions are welcome.
GIF Example:
Code example used: https://jsfiddle.net/01sxrjkr/ *Make sure the preview window is <768px
You are rotating from the wrong end of the line. Try this instead, then just use media queries to alter the number of rotation degrees in relation to the text on the right for each of the most common media widths. Remember, people don't go around re-sizing their screens, so having it perfect at every single pixel of width is unnecessary and really not possible with what you have going on there. You're image is responsive and your text, of course, is not. therefor as the width of the screen is reduced, your left column decreases in height as your image gets smaller while your right column increases in height as more text wraps.
.line.line-1 {
left: 62%;
top: 39%;
transform: rotate(14deg);
width: 40%;
}
I don't even know if I'm asking the question correctly. I have to host a third party game without using an iframe, but I have a hard requirement to include a banner for the hosting entity. That takes up 60 pixels at the top of the viewport that the code (which I do not have access to) was counting on using. That banner at the top causes the content to extend below the bottom of the viewport into overflow territory. So I add styling to the canvas element to compensate for the lost space at the top:
max-height:calc(100vh - 60px);
But that screws up the vertical centering, so I also need:
position:absolute;
top:60px;
There. Now all looks great. Until you need to point your mouse at something and you find that the only way you can click is to point it ~60px below the visible click target.
So my question is: How can I "trick" the code that I can't see into thinking that the viewport is 60px shorter (vertically) than it is in reality, so that the click regions line up with their visible counterparts?
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
I have a site, elemovements.com, where, on the home page, you can click to view an archive of the news and a little popout appears. I have taken advantage of jQuery Waypoints so that, when scrolling, the popout will follow you down the page. Unfortunately, the way I have it set up, I have its position styled with CSS which works appropriately under the resolution I am using. Unfortunately, not everyone uses 1600x900. My question is (and I know there is no such thing in CSS): is there any way for an element to have fixed positioning relative to another element? In my code, I created a JavaScript object which handles most of the operations for this archive popout called objArchive, and in it, a function called getRight() which I was attempting to use to remedy this situation whenever a person scrolled or resized under suitable conditions. Alas, I could not get it to work. You can take a look at the site here and a majority of the code for it here. Whoever can help, I will definitely give you some credit in the code comments :)
By the way, to open it, look at the right hand side of the title bar for the "Latest News" box and there will be an "Archive" link. Thanks!
When you make an element fixed it positions it relative to the browser window, and only the browser window. However, since your website is centered, you have the center of the window as a constant and can position it relative to that center line. If you give your .sticky class these rules, you will have the position you're looking for.
.sticky {
position: fixed !important;
right: 50% !important;
margin-right: -592px;
}
These rules positions the .sticky element so it's right edge is at the center line of the browser's width, then moves it 592 pixels to the right (which is half of you're containers width + the width of the element).
I'm writing a web page with Javascript. I have to somehow work with my DIV layer properties refer to page scaling.
How can I do this? You can find the example at apple page. Try to scale it and look at top menu.
EDIT: I thought scaling meant re-sizing the window. You meant zooming in and out, my bad.
The top menu on the apple site is a fixed with and will not scale with the re-sizing of the browser window. If you wanted to have that feature, you would have to assign a:
div {
width: %; //percentage value you want
min-width: px; //the minimum pixel value you want
}
This way it expands and decreases with the page width, yet maintains a min width for readability
Also, using em as a font-size will help keep the text size dynamic as well.
You will encounter this (or similar) behavior on virtually any site. Havent tested it in any other browsers but here is my answer to the same question concerning firefox.
You should use EM's for all you dimensions, so all you elements will scale (when font-size only scaling is enabled). So you can measure the font-size on elements to know it the text-zoom was modified or not.
There is no way to know if the page was zoomed by the browser or not (as i wrote, only if the text zoom is used)
here is a workaroud: it will only work if the font-size is zoomed
http://jsfiddle.net/gGdAq/4/
Basically if the width in Pixel of the element your interested in, is not the base font size * the width in em the page was zoomed.
Maybe this question helps:
Catch browser's "zoom" event in JavaScript