So far this is just a prototype, meaning static HTML, I'll hack up something dynamic with PHP once I'm satisfied with it.
Here's how it looks in Opera:
And in Konqueror (same basic rendering engine as Apple's Safari, possibly a different revision):
(I prob. have larger fonts configured which is why the fonts are larger)
Could someone post shots from Firefox and IE?
Anyways, need a bit of help with the following things:
- How do I make it so that the two columns of boxes start at exactly, meaning to the pixel, same place from the top?
- How about to control how much of the screen each of them takes up horizontally? ie, I'd like to set one column to use the left 70% of the screen, and the other the remaining 30%.
- Is there any way to make the borders below the headers and above the footers get the hover effect when the mouse is hovered over the box they're in, and not just when it's over the borders themselves?
- Konqueror seems to like putting a lot of extra space in the headers/footers, and wouldn't be surprised if other rendering engines do as well... is there any way to explicitly tell them not to?
EDIT - One more. What's the difference between cellpadding and cellspacing? I noticed differences in the output, but not enough to determine what's the difference in what they're actually supposed to be doing.
Any other suggestions are also welcomed... though I mostly like the design/layout as it is, I'm more interested in the 'how', rather than the 'what' side of things.
Here's the HTML for reference:
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<meta name="description" content="This is Illissius's website.">
<link rel="stylesheet" type="text/css" href="style/default.css" />
<title>Illissius's website</title>
</head>
<body>
<table width=100%>
<tr><td colspan=10>
<h1><a href="http://illissius.uw.hu">Illissius's site</a></h1>
</td></tr>
<tr><td width=100% align=center colspan=10>
<h6 class="navigation"><a href="index.php">main</a> | <a href="news.php">news</a> | <a href="quotes.php">quotes</a> | <a href="links.php">links</a> | <a href="about.php">about</a></h6>
</td></tr>
<tr><td>
<table colspan=7 width=100% cellpadding=20>
<tr><td>
<table class=boxed>
<tr><td class=underborder><h6>This is the header</h6></td></tr>
<tr><td><h3>This is the title</h3></td></tr>
<tr><td><p>This is the body</p></td></tr>
<tr><td class=overborder><h6>This is the footer</h6></td></tr>
</table>
</td></tr>
<tr><td>
<table class=boxed>
<tr><td class=underborder><h6>21:49, Wednesday, September 8, 2004. by Illissius</h6></td></tr>
<tr><td><h3>Random post</h3></td></tr>
<tr><td><p>Bla, bla, bla.</p></td></tr>
<tr><td class=overborder><h6>This space for rent.</h6></td></tr>
</table>
</td></tr>
</table>
</td>
<td>
<table colspan=3 width=100% cellpadding=20>
<tr><td>
<table class=boxed>
<tr><td class=underborder><h4>Random Quote of the Pageload</h4></td></tr>
<tr><td>
<h6>this is supposed be <em>funny</em></h6>
<blockquote>Bla, bla, bla.</blockquote><br>
</td></tr>
<tr><td class=overborder><h6>Source: N/A</h6></td></tr>
</table>
</td></tr>
<tr><td>
<table class=boxed>
<tr><td class=underborder><h4>A random box on the side</h4></td></tr>
<tr><td>This is the contents</td></tr>
<tr><td class=overborder><h6>And this is the footer</h6></td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>And the CSS:
Code: Select all
body {
background-color: black;
color: white;
font-family: "bitstream vera sans", "sans serif", tahoma, verdana, sans-serif;
}
a { text-decoration: none; }
a:link { color: #007FFF; }
a:visited { color: #005FBF; }
a:hover { color: #2FBFFF; }
a:active { color: #2FBFFF; }
*.navigation {
border-style: solid;
border-bottom-width: 2px;
border-top-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-color: #0070E0;
color: #0070E0;
}
*.navigation:hover {
border-style: solid;
border-bottom-width: 2px;
border-top-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-color: #2FBFFF;
color: #2FBFFF;
}
*.boxed {
width: 100%;
border-style: solid;
border-width: 2px;
border-color: #0070E0;
}
*.boxed:hover {
width: 100%;
border-style: solid;
border-width: 2px;
border-color: #2FBFFF;
}
*.overborder {
width: 100%;
border-style: solid;
border-top-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-color: #0070E0;
}
*.overborder:hover {
width: 100%;
border-style: solid;
border-top-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-color: #2FBFFF;
}
*.underborder {
width: 100%;
border-style: solid;
border-bottom-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-color: #0070E0;
}
*.underborder:hover {
width: 100%;
border-style: solid;
border-bottom-width: 2px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-color: #2FBFFF;
}
.
, the site is still 
