The Gang of Five
Beyond the Mysterious Beyond => Hobbies and Recreation => Computer and Electronics => Topic started by: landbeforetimelover on March 08, 2008, 04:41:35 PM
-
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/austindame (http://www.freewebs.com/austindame)
and 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:
(http://i203.photobucket.com/albums/aa146/tlordame/goodsite.jpg)
However, this is how the site looks in IE on a 1024X768 resolution:
(http://i203.photobucket.com/albums/aa146/tlordame/laptop.jpg)
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!
-
Ummm....you're asking for a ton of trouble with that "schedule" link. Wouldn't take much for your identity to be stolen.
I know nothing about css, have no intention of ever learning it, and don't waste your time trying to make it work in Opera (the bottom piece doesn't load at all). Since most of your school computers probably have IE installed, shoot for that, in 1024 x 768 since a lot of computer monitors are restricted from going higher.
-
CSS is almost entirely incompatible with MSIE
and semitransparency is incompatible as well, you can only do like 1 color... it's very picky, the site works fine with Firefox though, you have it written correctly, but IE does NOT like CSS, try the Javascript for it
Opera reads CSS better than MSIE, but I think CSS is mainly for Firefox in today's world
CSS works with the order, try putting position next to float, it may work better
-
Ummm....you're asking for a ton of trouble with that "schedule" link. Wouldn't take much for your identity to be stolen.
There's nothing wrong with the schedule link. All it shows is my days off of school. The classes link only shows my first and last name as well as my school password (who'd want that? All you can do is see my grades with it.)
and semitransparency is incompatible as well, you can only do like 1 color... it's very picky, the site works fine with Firefox though, you have it written correctly, but IE does NOT like CSS, try the Javascript for it
Where did I use simitransparancy? I can't use javascript cuz my school totally blocks it.
CSS is almost entirely incompatible with MSIE
That's strange, seeing as in my web design class (where we're required to learn CSS) the only browser they use is IE. Of course, that was a really easy class cuz I already knew CSS. :rolleyes:
and don't waste your time trying to make it work in Opera (the bottom piece doesn't load at all)
I don't know what's wrong with your computer. This is opera viewing my site on a computer with a 1024X1024 resolution. It looks great. It looks a heck of a lot better than IE:
(http://i203.photobucket.com/albums/aa146/tlordame/opera.jpg)
-
the only things that are usually transparent in MSIE are GIFs...
and there are only a small few CSS things that work, simple coloring, scrollbar adjust (not Firefox compatible,) custom cursors (not Firefox compatible,) some sizing things, and a little bit of other adjustment, Firefox has a TON of CSS options on the other hand
-
the only things that are usually transparent in MSIE are GIFs...
Oh, that's what you meant. I have actually had a lot of experience with this. IE 6 will only display gif and first generation png images (which are almost impossible to make nowadays without windows 98) with transparency. IE 7 will display gif, first generation png's, and second generation png's. The reason the png image isn't transparent in my screenshot of IE is because it's IE 6 and the image is a generation 2 png, which IE 6 is incapable of displaying with transparency.
Can you tell my why when I change my navlist's positioning to absolute why it disappears except for one cell?
-
did you move position and float to the top (in that exact order)
and you may need a top and left tag just in case -shrug- I don't use absolute much, I probably should
-
It kind of works on my computer, but as soon as the page loads up, all but a small strip of the website becomes completely obscured by a large blue tab, advertising to join Freewebs.
-
The old version of Opera doesn't handle freeweb's javascript banner that they place on everyone's webpage. -_-
-
I'm using the latest version of Opera.
-
on a fairly unrelated note, Littlefoot's eyes are brown
-
I have the latest version of Opera, Austin. There must be something you have enabled that I don't, because I get the same thing as Kacie.
-
remember to base your statistics off of the middle of the road, not the highest standards sir
(by sir I mean LBTL)
-
I switched resolutions to 1024X768 and it still shows up fine. All I've done with Opera is download it and install it. I don't even have any favorites in there. I just installed it today.
-
Doesn't load for us and we've done the same as you. *shrugs*
On the other shoe, I can get it to load fine in Firefox (Portable Version 2.0.11)