HTML problem, on every monitor resolution diferent

Nov

2011

So I wanted to make a site on my forum, something like a new section on the forum, but something went wrong. So my resolution is 1280x1024 but if i set it to 1024x768 or any else resoltion then I see the site about 200px to the right, better to say just open to link and set your resolution to mine's or to any other and you'll se the diference.

http://forum-owners.forumotion.in/h3-skola
The link on wich I'm testing it :S

Any help ?

Here's the HTML :

Code:: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Skolska Svakodnevnica</title> <style>  </style> </head> <body bgcolor="#ebebeb"> <div style="position: relative; width: 1000px; height: 150px; left: 117px; top: -8px" id="head"> <map name="FPMap0"> <area href="#facebook" shape="rect" coords="18, 78, 63, 123"> <area href="#mail" shape="rect" coords="68, 79, 115, 125"> </map> <img border="0" src="http://www.dodaj.rs/f/11/yO/3aXQdXYA/head.png" width="1000" height="175" usemap="#FPMap0"> </div><div style="position: relative; width: 978px; height: ; left: 125px; top: 26px; border-style: solid; border-width: 0; padding: 5px; background-color: #FFFFFF; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 8px 10px #d3d3d3; -webkit-box-shadow: 0px 8px 10px #d3d3d3; box-shadow: 0px 8px 10px #d3d3d3" id="content"> <p class="naslov">DOBRODOSLI</p> <p class="sadrzaj">Dobrodosli na stranicu koja je prvobitno namjenjena ucenicima, studentima te naravno i svakom ko je zainteresiran za skolsku svakodnevnicu. Na stranici cete moci vecinom naci teme koje ce sadrzavati olaksice i trikove u ucenju, u komunikaciji sa profesorima, nastavnicima i opce sa ucenicima. Na stranici ce se takodjer i razradjivati teme vezane za "kreativnu nastavu". Sve sto nije jasno mozete upitati na nasoj facebook stranici ili putem e-mail forme te tako posalji vase komentare/sugestije.</p> <p class="sadrzaj"> </p> <p class="sadrzaj" align="right"><i>Administrator stranice - Komic Mirza</i></div> <div style="position: relative; width: 859px; height: 31px; left: 196px; top: -193px" id="menu"> <p align="center" style="margin-top: 0; margin-bottom: 0"><a href="/index.htm">POCETNA</a> - <a href="/teme/index.htm"> TEME</a> - <a href="/linkovi.htm">LINKOVI</a> - <a href="/omeni.htm">O MENI</a> - <a href="/kontakt.htm">KONTAKT </a></div> </body> </html>

1 green7izard, on 28/11/2011 at 23h30

ITs simple... in line 23 you have:

Code:: left: 117px; top: -8px

You should try this in that line:

Code:: float: middle;

(dont forget to delete the left thingsy...)

That will make it float nice and simply in the middle of the screen, no matter the resolution.
You could also make width like "80%" insted of "1000px"
makes your site more dynamical.
Hope this helped you out Smile

2 Drogba921, on 28/11/2011 at 23h40

The above wont work.

Code:: margin: auto;

will center it. Remove the left: 117px;

3 mirza.mejkem.converse, on 29/11/2011 at 10h59

Thanks Drogba It worked Smile

4 Jophy, on 29/11/2011 at 16h32

Topic Solved & Moved

Note: You can also help the staff member's work by EDITING your topic and marking it as solved.