CODEWITHSUNDEEP
htmlcss
James Bennett
James Bennett

Reputation: 35

Cannot get my Webpage to center with different resolutions

I have created a webpage, (I am fairly new coding and web design) and I am having issues with the content being centered when viewing on different size monitors. I think its because i am using Absolute positioning, but not 100% sure and not sure how to correct it. Any help or advice will be much appreciated! :)

Here is my HTML....

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
    <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
    <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
    <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!-->
    <html lang="en">
    <!--<![endif]-->
    <head>
    <!-- Basic Page Needs
     ================================================== -->
    <meta charset="utf-8" />
    <title>BUZZ FEED</title>
<meta http-equiv="refresh" content="60" >


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->



<!-- CSS
================================================== -->

<link rel="stylesheet" href="css4/main.css" />

<html>
<head>
    <title>BUZZ Feed</title>
</head>
<body>
<div id="wrap">
<!-- Weather -->

<TABLE BORDER="0" style="position:absolute; TOP:25px; LEFT:320px; WIDTH:50px; HEIGHT:50px">
<TR>


   <TD><span style="display: block !important; width: 180px; text-align: center;      font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:90745.1.99999&bannertypeclick=wu_blueglass" title="Long Beach, California Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KLGB&ForcedCity=Long Beach&ForcedState=CA&zip=90745&language=EN" alt="Find more about Weather in Long Beach, CA" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:90745.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:98011.1.99999&bannertypeclick=wu_blueglass" title="Bothell, Washington Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KPAE&ForcedCity=Bothell&ForcedState=WA&zip=98011&language=EN" alt="Find more about Weather in Bothell, WA" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:98011.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:87101.1.99999&bannertypeclick=wu_blueglass" title="Albuquerque, New Mexico Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KABQ&ForcedCity=Albuquerque&ForcedState=NM&zip=87101&language=EN" alt="Find more about Weather in Albuquerque, NM" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:87101.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><form action="http://molinaintranet/apps/noc/_layouts/15/Molina.NOC.IncidentTimeline/TimeLineStatus.aspx">
<button type="submit" class="Button" style=";margin-left:auto;margin-right:auto;display:block;margin-top:10%;margin-bottom:0%"/>NOC Status Page</a>
</form></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:43081.1.99999&bannertypeclick=wu_blueglass" title="Westerville, Ohio Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KCMH&ForcedCity=Westerville&ForcedState=OH&zip=43081&language=EN" alt="Find more about Weather in Westerville, OH" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:43081.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:48007.1.99999&bannertypeclick=wu_blueglass" title="Troy, Michigan Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=KVLL&ForcedCity=Troy&ForcedState=MI&zip=48007&language=EN" alt="Find more about Weather in Troy, MI" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:48007.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>
<TD><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:00901.1.99999&bannertypeclick=wu_blueglass" title="San Juan, Puerto Rico Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_blueglass&airportcode=TJSJ&ForcedCity=San Juan&ForcedState=PR&zip=00901&language=EN" alt="Find more about Weather in San Juan, PR" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:00901.1.99999&bannertypeclick=wu_blueglass" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></TD>

<!-- Time --->


<div style="position:absolute; TOP:150px; LEFT:355px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/California/Long_Beach/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=California&city=Long Beach&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=117"></script></div>
<div style="position:absolute; TOP:150px; LEFT:540px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Washington/Bothell/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Washington&city=Bothell&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=117"></script></div>
<div style="position:absolute; TOP:150px; LEFT:725px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/New_Mexico/Albuquerque/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=New Mexico&city=Albuquerque&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=117"></script></div>
<div style="position:absolute; TOP:150px; LEFT:1045px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Ohio/Westerville/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Ohio&city=Westerville&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=100"></script></div>
<div style="position:absolute; TOP:150px; LEFT:1230px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Michigan/Troy/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Michigan&city=Troy&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=100"></script></div>
<div style="position:absolute; TOP:150px; LEFT:1415px; WIDTH:50px; HEIGHT:50px"><div style="display: inline-block; padding: 2px 4px; margin: 0px 0px 5px; text-align: center; background-color: rgb(255, 255, 255);"><a href="http://localtimes.info/North_America/United_States/Puerto_Rico/San_Juan/" style="text-decoration: none; font-size: 13px; color: rgb(0, 0, 0);"></a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=North America&country=United States&province=Puerto Rico&city=San Juan&cp1_Hex=000000&cp2_Hex=FFFFFF&cp3_Hex=000000&fwdt=118&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=100"></script></div>



<!-- ESD Marquee -->

<marquee behavior="slide" width="60%" style="position:absolute; TOP:320px; LEFT:875px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="50" direction=""><b><FONT COLOR="#004C4C">Log File</font></b> = <b><FONT COLOR="#E65C00"> 9152</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:340px; LEFT:800px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="40" direction=""><b><FONT COLOR="#004C4C">Configuration Item</font></b> = <b><FONT COLOR="#E65C00"> Microsoft Outlook</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:360px; LEFT:749px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="35" direction=""><b><FONT COLOR="#004C4C">BUZZ word for current CI</font></b> =<b><FONT COLOR="#E65C00"> Outlook - MS Exchange Issue</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:380px; LEFT:761px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="25" direction=""><b><FONT COLOR="#004C4C">Date/Time of Occurrence</font></b> = <b><FONT COLOR="#E65C00"> Friday 09/30/15 @ 8:50 AM PST</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:400px; LEFT:790px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="20" direction=""><b><FONT COLOR="#004C4C">Date/Time of Posting</font></b> = <b><FONT COLOR="#E65C00"> Friday 09/30/15 @ 9:05 AM PST</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:420px; LEFT:858px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="18" direction=""><b><FONT COLOR="#004C4C">Tier Status</font></b> =<b><FONT COLOR="#E65C00"> Tier 1</font></b></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:460px; LEFT:858px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="17" direction=""><i><FONT COLOR="#007C7C">IVR HAS BEEN SET</font></i></marquee>
<marquee behavior="slide" width="60%" style="position:absolute; TOP:480px; LEFT:858px; WIDTH:50px; HEIGHT:50px"style="font-family:Cursive;font-size:42pt;height:66;"
scrollamount="16" direction=""><i><FONT COLOR="#007C7C">NOC HAS BEEN NOTIFIED</font></i></marquee>

</div>
</body>
</html>

And here is my CSS.....

/* "auto" makes the left and right margins center the wrapper */
#wrap { 
    width: 900px; 
    margin: 0 auto; 
}





.Button {
    -moz-box-shadow: 0px 10px 14px -7px #276873;
    -webkit-box-shadow: 0px 10px 14px -7px #276873;
    box-shadow: 0px 10px 14px -7px #276873;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
}
.Button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
    background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
    background-color:#408c99;
}
.Button:active {
    position:relative;
    top:1px;
}
#page-wrap {
     width: 800px;
     margin: 0 auto;
}

Thanks again for any help!

Upvotes: 2

Views: 86

Answers (3)

cal2u
cal2u

Reputation: 68

When you use absolute positioning, you're telling the browser that you know exactly where to layout your elements. To center content, you need to let the browser automatically determine margins (the spacing between elements) for you.

You tried to do this with a wrapper CSS class, but because the children of your wrapper <div> use absolute positioning, the browser ignores them when computing your wrapper's margins (because you said that you knew where to lay them out by using absolute positioning).

To make your website centered on different displays, instead set your weather-indicator divs to display: inline-block; and use margins for spacing.

Upvotes: 1

James Reimer
James Reimer

Reputation: 196

First off, don't use tables for layout. Let's use the weather boxes as an example. Instead of putting each of those in a table cell, you could wrap each in a div and place them all in a wrapper div, as such...

    <div class="weatherwrapper">
      <div class="weatheritem">...</div>
      <div class="weatheritem">...</div>
      <div class="weatheritem">...</div>
    </div>

Then apply the following styles to center the items...

    .weatherwrapper {
      text-align: center;
    }
    .weatheritem {
      display: inline-block;
    }

Upvotes: 2

Dcoto
Dcoto

Reputation: 143

You might find it easier to use percentage width and height values. also viewport values instead of fixed pixels. eg.

    width: 100%;
    height: 80%;
    text-align: center;
    font-size: 2.5vw;

You should find you get a much more responsive page when changing resolutions.

Upvotes: 0

Related Questions