Hello I have a simple html homepage and in my screen 21" looks great and in the center of my browser. At the users with lower monitors 17" the content looks more on the right channels and not center Does anyone knows how can i fix it? I want all content at the center for all monitor sizes. Thank you
you have to design in fixed width so that it looks same in all monitor sizes ie. from 1024x728 resolutions.
My index.html : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>SKAI TV</title> <style type="text/css"> body { background-color: #FFFFFF; color: #000000; } </style> </head> <body> <div id="wb_Image1" style="position:absolute;left:694px;top:0px;width:328px;height:253px;z-index:0;" align="left"> <img src="images/SGTRVG.png" id="Image1" alt="" align="top" border="0" style="width:328px;height:253px;"></div> <!-- SKAI --> <div id="Html1" style="position:absolute;left:503px;top:447px;width:720px;height:590px;z-index:1"> <embed height="590" align="middle" width="720" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowscriptaccess="sameDomain" allowfullscreen="true" devicefont="false" flashvars="scaleMode=fit&src=rtmp://cp76154.live.edgefcs.net/live/TV_LIVE_1@10773&videoTitle=UTV-Skai&videoTime=&symbol=2" scale="showall" loop="False" play="true" wmode="transparent" quality="high" menu="false" salign="lt" name="OEAU ?nuanaiia" id="SkaiPlayer" src="http://www.skai.gr/files/1/Flash/Shows/PlayerLive.swf"></div> <div id="wb_Text1" style="position:absolute;left:670px;top:1118px;width:404px;height:84px;z-index:2;" align="left"> <font style="font-size:11px" color="#000000" face="Arial"> <b>DISCLAIMER:<br> </b>UTV etc. <br> We <br> UTV sites.<br> If ers.</font></div> <div id="wb_Text2" style="position:absolute;left:794px;top:1085px;width:166px;height:14px;z-index:3;" align="left"> <font style="font-size:11px" color="#000000" face="Arial">Contact us: [email]@gmail.com[/email]</font></div> <a href="axeloos.html" title="ImageButton3" style="position:absolute;left:207px;top:387px;width:102px;height:51px;z-index:4"> <img src="images/aheloos.png" border="0"></a> <a href="boulh.html" title="ImageButton3" style="position:absolute;left:375px;top:378px;width:86px;height:64px;z-index:5"> <img src="images/voulitvlogo.jpg" border="0"></a> <a href="wordofgod.html" title="ImageButton6" style="position:absolute;left:211px;top:457px;width:92px;height:57px;z-index:6"> <img src="images/wordofgod.jpg" border="0"></a> <a href="omega.html" title="ImageButton26" style="position:absolute;left:370px;top:459px;width:98px;height:52px;z-index:7"> <img src="images/omegalogo.gif" border="0"></a> <a href="westchannel.html" title="ImageButton22" style="position:absolute;left:199px;top:528px;width:119px;height:55px;z-index:8"> <img src="images/west.jpg" border="0"></a> <a href="shop.html" title="ImageButton25" style="position:absolute;left:359px;top:528px;width:122px;height:46px;z-index:9"> <img src="images/shoptv.gif" border="0"></a> <a href="lyxnos.html" title="ImageButton28" style="position:absolute;left:205px;top:597px;width:107px;height:48px;z-index:10"> <img src="images/lyxnostvlogo.gif" border="0"></a> <a href="riksat.html" title="ImageButton29" style="position:absolute;left:366px;top:588px;width:108px;height:50px;z-index:11"> <img src="images/riksatlogo.gif" border="0"></a> <a href="astra.html" title="ImageButton11" style="position:absolute;left:216px;top:648px;width:82px;height:59px;z-index:12"> <img src="images/astratv.gif" border="0"></a> <a href="neathleorash.html" title="ImageButton10" style="position:absolute;left:357px;top:656px;width:121px;height:55px;z-index:13"> <img src="images/neatvlogo.gif" border="0"></a> <a href="kissamos.html" title="ImageButton16" style="position:absolute;left:181px;top:727px;width:153px;height:42px;z-index:14"> <img src="images/kissamos.png" border="0"></a> <a href="thrakhnet.html" title="ImageButton14" style="position:absolute;left:357px;top:722px;width:125px;height:50px;z-index:15"> <img src="images/thrakinet.jpg" border="0"></a> <a href="laos.html" title="ImageButton24" style="position:absolute;left:188px;top:790px;width:136px;height:39px;z-index:16"> <img src="images/laos.png" border="0"></a> <a href="kosmos.html" title="ImageButton32" style="position:absolute;left:357px;top:786px;width:135px;height:45px;z-index:17"> <img src="images/kosmosrod.jpg" border="0"></a> <a href="lampsh.html" title="ImageButton33" style="position:absolute;left:486px;top:386px;width:158px;height:45px;z-index:18"> <img src="images/lampsitvlogo.gif" border="0"></a> <a href="index.html" title="ImageButton30" style="position:absolute;left:655px;top:384px;width:95px;height:50px;z-index:19"> <img src="images/skailogo.gif" border="0"></a> <a href="alpha.html" title="ImageButton1" style="position:absolute;left:755px;top:385px;width:76px;height:46px;z-index:20"> <img src="images/alpha.png" border="0"></a> <a href="ert.html" title="ImageButton5" style="position:absolute;left:835px;top:384px;width:94px;height:48px;z-index:21"> <img src="images/et.png" border="0"></a> <a href="mad.html" title="ImageButton4" style="position:absolute;left:930px;top:384px;width:65px;height:50px;z-index:22"> <img src="images/madlogo.jpg" border="0"></a> <a href="sporttv.html" title="ImageButton7" style="position:absolute;left:1001px;top:383px;width:86px;height:54px;z-index:23"> <img src="images/sporttvlogo.gif" border="0"></a> <a href="sbctv.html" title="ImageButton21" style="position:absolute;left:1102px;top:385px;width:118px;height:54px;z-index:24"> <img src="images/sbctvlogo.gif" border="0"></a> <a href="kontilies.html" title="ImageButton17" style="position:absolute;left:1236px;top:388px;width:141px;height:45px;z-index:25"> <img src="images/kontilies.png" border="0"></a> <a href="fities.html" title="ImageButton23" style="position:absolute;left:1399px;top:387px;width:156px;height:46px;z-index:26"> <img src="images/fities.png" border="0"></a> <a href="stardramas.html" title="ImageButton18" style="position:absolute;left:1235px;top:454px;width:151px;height:52px;z-index:27"> <img src="images/stardramas.jpg" border="0"></a> <a href="voiceofgod.html" title="ImageButton15" style="position:absolute;left:1434px;top:450px;width:82px;height:55px;z-index:28"> <img src="images/voiceofgod.jpg" border="0"></a> <a href="ellada.html" title="ImageButton27" style="position:absolute;left:1246px;top:518px;width:119px;height:46px;z-index:29"> <img src="images/elladatv.jpg" border="0"></a> <a href="gra.html" title="ImageButton2" style="position:absolute;left:1419px;top:520px;width:125px;height:41px;z-index:30"> <img src="images/gratv.png" border="0"></a> <a href="bluesky.html" title="ImageButton20" style="position:absolute;left:1247px;top:582px;width:125px;height:50px;z-index:31"> <img src="images/kefalonian sky.png" border="0"></a> <a href="delta.html" title="ImageButton19" style="position:absolute;left:1415px;top:576px;width:135px;height:70px;z-index:32"> <img src="images/deltatv.jpg" border="0"></a> <a href="achaianews.html" title="ImageButton8" style="position:absolute;left:1411px;top:657px;width:149px;height:42px;z-index:33"> <img src="images/achaia.png" border="0"></a> <a href="4.html" title="ImageButton12" style="position:absolute;left:1267px;top:649px;width:88px;height:55px;z-index:34"> <img src="images/4elogo.gif" border="0"></a> <a href="rage.html" title="ImageButton13" style="position:absolute;left:1240px;top:723px;width:148px;height:56px;z-index:35"> <img src="images/ragetv.png" border="0"></a> <a href="egnatia.html" title="ImageButton9" style="position:absolute;left:1404px;top:722px;width:166px;height:57px;z-index:36"> <img src="images/egnatia.png" border="0"></a> <button id="AdvancedButton2" type="button" onclick="window.location.reload()" name="" value="" style="position:absolute;left:780px;top:266px;width:150px;height:46px;z-index:37;background-color:#32CD32;"><div><font style="font-size:11px" color="#000000" face="Arial"><b>PRESS HERE </b></font></div></button> <div id="wb_Text4" style="position:absolute;left:697px;top:331px;width:344px;height:42px;z-index:38;" align="left"> <font style="font-size:11px" color="#FF0000" face="Arial"><b>WE REC !</b></font></div> </body> </html> HTML:
Oh christmas on a cracker - what the ****. Ok, I don't know who told you to inline your style like that, or to use absolute positioning like that, but take a giant hammer upside their head until it's a bloody pulp. MY GOD WHAT THE **** IS THIS!?! Absolute positioning of content like that is such a miserable *** /FAIL/ at coding I don't even know where to begin. To center the page you shouldn't be aboslute positioning your outermost div, you should be centering it with margin:0 auto;.. But you don't even HAVE an outermost div, appear to be knee deep in presentational images (aka *** that belongs in the CSS)... Whoever has been teaching you to build HTML that way is in serious need of a beating with a wet trout. I'd have to see the page live, but am 100% certain that your markup ALL needs to be thrown away... You have a laundry list of how not to design a website there! FONT tag, images for text, no image replacement techniques, no alt tags, meaningless values in the TITLE attributes, inlined CSS positioning, absolute positioning of what are likely flow elements, non-breaking spaces doing text-align or padding's job, dicking with z-index on elements that don't even appear to overlap... No idea what you are trying to do, I'm just 100% certain it's all wrong. ... and are the retards just coming out of the woodwork at this point? No offense, but HURR-DURR!!! Not only should one NOT be designing fixed width or advocating it, designing to look the same on all displays is an effort in futility.
I think this page is generated with one of those WYSIWYG HTML Editor, what are you useing Astrapi ? Dreamweaver, or Frontpage ? Anyway, i'd say you need to read more about HTML & CSS. Sorry not much of a help, but a lot of things must be done to clean up this code and make it decent. Otherwise you'll get problems always breeding from such code. Good luck.