Forum Moderators: not2easy
Here is the CSS. I apologize for any nightmares i give people with my terrible coding. I am a newbie in every sense of the word and everything i've learned has been a trial and error education.
body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-color: black;
background-position: center;
margin-top: 20px;
z-index: -1;
}
h1 {
font: 500% "GothicE";
text-align: center;
color: red;
}
#wws {
font: 200% "GothicE";
text-align: center;
margin-top: 400px;
margin-left: -600px;
padding: 0px;
}
a {
color: red;
text-decoration: none;
}
a:visited {
color: red;
}
a:hover {
color: #fff;
background-color:#707070;
text-decoration: none;
}
#members {
font: 200% "GothicE";
text-align: center;
margin-top: 150px;
margin-left: -400px;
padding: 0px;
}
#forum {
font: 200% "GothicE";
text-align: center;
margin-top: -67px;
margin-right: -300px;
padding: 0px;
}
#application {
font: 200% "GothicE";
text-align: center;
margin-top: -67px;
margin-right: -600px;
padding: 0px;
}
As for my doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I dont know if it makes a difference but i am using Ruby on Rails to develop the html code. For the links part, it comes out:
<h2 id="wws"><a href="http://www.example.com">WWStats</a></h2>
<h2 id="application"><a href="http://www.example.com">Application</a></h2>
<h2 id="members"><a href="internal_page">Members</a></h2>
<h2 id="forum"><a href="http://www.example.com">Forums</a></h2>
I'm thinking its just my complete inexperience with CSS and web development thats causing the issue so i figured i should ask the veterans.
With your large negative margins (to move things around presumably) it looks like you might be moving your H2s on top of each other - the covered anchor will then not be clickable? Add a temporary border to your H2s (or any other elements) to check for any overlaps:
h2 {border:1px solid #f00}
I thought it could be the margins but wasn't sure. When i get home i will try the borders. If it is the margin issue, can you suggest an easier or cleaner way of positioning links? Again I'm pretty new at this stuff so even the simplest solutions are hidden to me.
Thanks for the reply
...can you suggest an easier or cleaner way of positioning links?
It really depends on what you are trying to do with them. But it is not normally correct to mark them up as level 2 headings. Often a list of links are just that... an unordered list...
<ul>
<li id="wws"><a href="http://www.example.com">WWStats</a></li>
<li id="application"><a href="http://www.example.com">Application</a></li>
<li id="members"><a href="internal_page">Members</a></li>
<li id="forum"><a href="http://www.example.com">Forums</a></li>
</ul>
The LI's can be styled any way you like - much like you are trying to style your H2s.
Allowing the links to flow with the rest of the page content would perhaps be best for a flexible layout. However, you could opt to position:relative (your LIs) and set left, top, width and height? Or even position:absolute? If you set position then you can control overlapping by setting the elements z-index.
Your idea of changing from margin management to position:absolute was what i was looking for. I applied a div for each h2 and presto, everything worked perfectly.
Thanks again penders for helping me out.
Seriously: you can position the <li> where you want and the added advantage is that your code when rendered unstyled makes sense just as well as that making it a more traditional menu should you want that down the road can be done without changing the html all over the place.
