HTML Help Please.
Maybe this should've gone under "Layout and Design" but here goes. Please check out my work in progress at http://softball.at/charlotte . Now ignore the fact that none of my graphics match the background color, and I've got several questions:
1. Along the right side, how do I make the white go all the way to the edge of the screen? Along with that, I may have the top a different color and want to know how to make that color go all the way to the left, top and right of the graphic.
2. In the left-side menu, what's the best way to indent my subsections a bit (the links)? I've tried using the definition list tags but that indents it way too far. and using nbsp; four or five times seems inefficient.
3. I set my links to a shade of orange to look good in the menu but they look like crap in the white section (look for the text "Open Forum") Can I / how can I change the link colors for different areas of my layout (and can I change my hover CSS too)?
Thanks a bunch!
P.S. I apologize ahead of time for the "right-mouse disabled" function. Thanks.
mairving posted this at 18:37 — 17th February 2002.
They have: 2,256 posts
Joined: Feb 2001
1.) To remove the margins add to your Body tag:
The first 2 only work in IE, the second 2 in NS, Opera. This will also remove the space at the top before the logo.
2.)The best way to indent is to use cellpadding in your table like:
3.) Make an external stylesheet for this one, save it as a .css file. You can control a lot of the text formatting with a stylesheet. Here is a sample from a section of one that I use:
<?php
A:link {
text-decoration:none;
color:#336699}
A:visited { text-decoration:none;
color:#336699 }
A:active { text-decoration:none;
color:#336699 }
A:hover {
text-decoration: underline;
color:#000000;
font-size : 11px;
}
.nav {text-decoration:none;
font-weight:9;
font-size : 11px;
color:#336699;
}
.nav:active {text-decoration:none;
color:#336699;
font-size : 11px;
}
.nav:link {text-decoration:none;
color:#336699;
font-size: 11px
}
.nav:visited {text-decoration:none;
color:#336699;
font-size: 11px
}
.nav:hover {text-decoration:underline;
color:#000000;
font-size : 11px;}
?>
Link to the external sytlesheet by putting this in the section of your pages:
Then in your navlinks call the .nav class like so:
You can learn a lot about stylesheets by picking up ones out of your browser cache and seeing what is going on.
Mark Irving
I have a mind like a steel trap; it is rusty and illegal in 47 states
fifeclub posted this at 21:13 — 17th February 2002.
He has: 688 posts
Joined: Feb 2001
That will help alot. Just one other question about "#2". I want to indent the links but keep the text above it aligned left. Sort of like a definition list but to a lesser degree, being indented in relation to the text above it. I also thought about a transparent 10pixel wide gif. Anything else?
Thanks again for the other advice. I'm gonna go add that now.
mairving posted this at 21:55 — 17th February 2002.
They have: 2,256 posts
Joined: Feb 2001
A couple of ways to do it. One would be to left align the header and center the other links.
<?php<table>
<tr>
<td>Leagues</td>
</tr>
<tr>
<td>Home/News, etc.</td>
</tr>
</table>
?>
The other would be to use different tables.
<?php<table cellpadding=0>
<tr>
<td>Leagues</td>
</tr>
</table>
<table cellpadding=5>
<tr>
<td>Home/News, etc.</td>
</tr>
</table>
?>
The second method looks better since I don't like centered text.
Mark Irving
I have a mind like a steel trap; it is rusty and illegal in 47 states
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.