Well, I'm trying to create a new website for school but it isn't working out as well as I had hoped. I want to make this site as universal as possible so it will work with the following resolutions:
1024X768
1024X1024
1280X1024
as well as these browsers:
Firefox
IE
Opera
I have been using CSS2 in order to make my website as universal as possible, but it just doesn't look right in every browser or every resolution. The alignment is always screwed up. I'm not the best in CSS, so if there are any suggestions, that'd be great. Here's the site:
http://www.freewebs.com/austindameand here's the code:
<html>
<style>
body
{
background-image: url('
http://i203.photobucket.com/albums/aa146/tlordame/extreme.jpg');background-repeat: no-repeat
background-attachment: fixed;
}
.test{
text-align: center;
position:absolute;
left:29%;
top:9%;
}
.border{
border:thin solid red;
margin: 2%;
padding: 2%;
width: 140px;
height:450px;
overflow: hidden;
background:url(
http://i203.photobucket.com/albums/aa146/tlordame/littlecentered_1.jpg);background-repeat: no-repeat;
background-position:left;
color:white;
text-align:center;
font-weight:bold;
position:absolute;
left:15%;
top:25%;
}
a:link{
color:black;
}
a:visited{
color:blue;
}
.box2{
border:thin solid red;
margin: 2%;
padding: 2%;
width: 140px;
height:450px;
overflow: hidden;
background:url(
http://i203.photobucket.com/albums/aa146/tlordame/littlebanner2_1.jpg);background-repeat: no-repeat;
background-position:right;
color:white;
text-align:center;
font-weight:bold;
position:absolute;
left:70%;
top:25%;
}
#navList {
list-style-type: none;
margin-left: 0;
}
#navList li {
float: left;
width: 9em;
border: 4px solid black;
text-align: center;
padding: 0.25em;
background: green;
font-weight: bold;
position:relative;
left:31%;
top:19%;
}
#navList a{
color: red;
text-decoration: none;
}
#navList a:hover {
color: #0066cc;
font-weight: bold;
text-decoration: underline;
}
.blinking{
text-decoration:blink underline;
}
a:hover{
background:yellow;
}
.mainimage{
position:absolute;
left:35%;
top:35%;
}
</style>
<body>
<h1 class="test"><img src="
http://i203.photobucket.com/albums/aa146/tlordame/schoolwebsitebanner.jpg"></h1>
<ul id="navlist">
<li><a href="
http://www.driveway.com/o0v3v2k6y1">Download Portfolio</a>
<li><a href="
http://i237.photobucket.com/albums/ff144/bellinghamcomputerrepair/days.jpg">Schedule</a>
<li><a href="
http://i237.photobucket.com/albums/ff144/bellinghamcomputerrepair/classes.jpg">Classes</a>
</ul>
<p>
<br>
<br>
<div class="border"><u class="blinking"><font size="6">Classes</font></u><hr>
<p><a href="
http://www1.freewebs.com/austindame/Spanish.htm"><font size="4">Spanish</font></a><hr>
<p><a href="
http://www1.freewebs.com/austindame/English.htm"><font size="4">English 10</font></a><hr>
<p><a href="
http://www1.freewebs.com/austindame/History.htm"><font size="4">US History</font></a><hr>
<p><a href="
http://www1.freewebs.com/austindame/web design.htm"><font size="4">T-Web Design</font><hr></a>
<p><a href="
http://www1.freewebs.com/austindame/Biology.htm"><font size="4">Biology</font></a><hr>
<p><a href="
http://www1.freewebs.com/austindame/Geomatry.htm"><font size="4">Integrated Geometry</font></a><hr>
<p><a href="
http://www.freewebs.com/austindame/Art.htm"><font size="4">Art</font></a></center></div>
<div class="box2"><u class="blinking"><font size="6">Special Projects</font></u><hr>
<p><a href="
http://www.civilwar.mirrorz.com"><font size="4">Civil War Website</font></a><hr></div>
<div class="mainimage"><img src="
http://i203.photobucket.com/albums/aa146/tlordame/transcase.png" width="368" height="368"></div>
<!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";_uff=false;urchinTracker();}</script><!-- --><script type="text/javascript" src="/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="freewebs.com";_uff=false;urchinTracker();}</script></body>
</html>
It looks pretty bad in a resolution of 1024X768 or lower. I wish to change this. Is there anything more universal than percentage rates? My main problem is the size of the 2 boxes with links in them. I have to make them huge on a monitor with a large resolution to make them large enough to see all the links on a smaller resolution.
This site will look best if you're using firefox with a 1024X1024 resolution or higher.
This is what really confuses me though. When I turn this element to position:absolute, the navbar no longer exists:
#navList li {
float: left;
width: 9em;
border: 4px solid black;
text-align: center;
padding: 0.25em;
background: green;
font-weight: bold;
position:relative;
left:31%;
top:19%;
This is ideally how the site should look:
However, this is how the site looks in IE on a 1024X768 resolution:
The image is still transparent in the newer version of IE which my school has though. Everything still works, but it's so ugly! Any way I could make my site more universal?
I HATE CSS!!!!!!!!!!!!!!!!! I swear to god, this really sucks!
