How do make my site work on all resolutions ?

**djd206** · 12-08-2011 01:41 PM

Hi, i just learnt html and css and made a nice little website, but it only seems to work on my resolution , 1440x900 the text gets messed up when i zoom in and out. Please help me, Is there a certain way i should make them, special script or something ? my site is www.grooveofmusic.com (this is just a temp domain)

**nacort** · 12-08-2011 08:19 PM

any reason why you are using absolute positioning so much?

You need to put a container div around everything.
give the div a set width and center it
get rid of all that absolute positioning.

Use the code below for your css.review it for changes I made to it. Just add a <div class="container"> right after your <body> tag and a </div> right before your </body>

If you have any questions after feel free to ask.

body
{
color:white;
background-image:url(background.jpg);
font-family:Tahoma;
text-align: center;
}
.container
{
width: 960px;
margin-left:auto;
margin-right: auto;
}
a:link
{
color:white;
text-decoration:none;
}
a:visited
{
color:white;
}
a:hover
{
color:white;
text-decoration:underline;
}
#header
{
width: 960px;
font-size:20px;
text-align:right;
margin-left:auto;
margin-right: auto;
clear: both;
letter-spacing: 1px;
padding-top: 10px;
}
.top
{
text-align:right
}
#body
{
width: 940px;
margin-left:auto;
margin-right: auto;
border:2px solid black;
background-image:url(background.png);
color:black;
font-size:25px;
padding-left:10px;
padding-right:10px;
text-align:center;
color:white;
}
h1
{
font-size:30px;
}
h2
{
font-size: 20px;
}
p {font-size:25px;}

#topimage
{
float: right;
}
#logo
{
float: left;
}
#footer
{
color:white;
text-align:right;
}

Thread: How do make my site work on all resolutions ?

Thread Tools

Display

How do make my site work on all resolutions ?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions