Webpage displays incorrectly on different resolutions due to incorrect css

Problem

I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems

I'm still learning css, html, php... etc so please bare with me if I've made any mistakes in my code but please feel free to advise me on better/different ways to doing things as every little bit of help will for sure teach me a thing or two :)

HTML: http://pastebin.com/raw.php?i=bbFsMcwT

CSS: http://pastebin.com/raw.php?i=SGMwt3cs

JSFiddle: http://jsfiddle.net/D8SJD/

  • Issue 1 - Left/Right Scroll Image Buttons
    • Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"

  • Issue 2 - Dynamic Resolution(s)
    • The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
    • On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
    • On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
    • On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
    • On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns) .
  • The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
  • Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
  • Please see images at bottom of this post

For the mobile devices I tried things like below just for testing but none of them worked...

@media (max-width: 640px) {
    #header > a img {
        display: none;
    }
}

EDIT 14/11/2013 @ 01:58GMT

On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below: http://i.imgur.com/vWoEpK8.png

On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above. http://i.imgur.com/SEppf7n.png

On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right. http://i.imgur.com/QcRhW3B.png

Problem courtesy of: Dennis Sylvian

Solution

Okay I've tried to filter out all of the irrelevant code for this solution.

See the solution here.

Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.

By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.

For example, what you had:

#footer .footmid
{

    position: absolute;
    top: 50%;
    left: 50%;
}

Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:

enter image description here

This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.

What you can do is use relative positioning!

Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:

enter image description here

You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.


As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.

.element //Native and mouseout
{} 

.element:hover //onmouseover
{}

Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.

.element
{color:red;}

.element
{color:black;}

If you have any additional questions on the arrows, let me know and I'll revise my answer.

Solution courtesy of: David

Discussion

http://jsfiddle.net/D8SJD/4/

Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.

If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.

Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.

#footer .footimage {
    display:inline;
    position:relative;
    top:-10px;
}

#footer .footmid {
    top: 50%;
    width:100%;
    position: absolute;
    font-size: 15px;
}

#footer .footmidtwo {
    top: 70%;
    width:100%;
    position: absolute;
    font-size: 15px;
}
Discussion courtesy of: davidbuttar

As per issue 2, i could be wrong but when targeting the image through the structure of the site i.e.

headImg a img{...}

The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.

<div class="headimage">
    <a href="url" target="_blank"><img class="placeholder" src="http://placehold.it/300x80"/></a>
</div>

@media screen and (max-width: 640px) {
    .placeholder {
        display: none;
    }
}

JsFiddle here - http://jsfiddle.net/Q5bEb/

Discussion courtesy of: Jack Tuck

I see a border around your links, remove from your links:

a{
    border:none ;
}

for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:

<div class="footleft">
   <a class="def" href="javascript: void(0);">

   </a>
</div>

create image buttons like this:

enter image description here enter image description here

then set background to <a> tag like this:

#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}

#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}

#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}

second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.

and if your want to centerize headmid and footmid and footmidtwo you have two choices,

First: set fixed width to them and use CSS like this:

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}

Second: if you need to have dynamic width you can use this CSS and JQuery:

CSS:

#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}

#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}

JQuery:

var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();

$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));

jsFiddle is here

Discussion courtesy of: Mohsen Safari

Type

@media screen and (max-width:640px) {
  /* Your specific styles go here */
}

and dont forget to add

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Hope that helps :-)

Discussion courtesy of: Carlo Mercado

This recipe can be found in it's original form on Stack Over Flow.