The test site is up at http://www.jayjaynet.com/jayjay/dev/index.htm
I created a few graphic squares, a few HTML links and a sliding menu. I have 3 stylesheets referenced (2 that the CSS Menu Creator builds, and one that I am trying to place all my items).
Below is my style sheet -- I know I must be doing something wrong but am just unsure what that is. (I have tried using the w3schools.com link to understand and am just not following items I guess. In looking at my style sheet, I attempt to position an item and use the position: relative; tag ... but I cannot figure out relative to what? Each time I move one thing, or resize a graphic, I seem to move other items and graphics as well. I would assume that the position: relative; tag would have a specific pixel on my site that all positions are relative to, but that certainly doesn't appear to be the case.
Here's my style sheet ... if someone can point me in the proper direction to understanding this better, I would very much be grateful. Thanks.
/* Begin Style Sheet */
body {
background-color: #FFFFFF;
text-align: center;
font-family: "Times New Roman";
font-size: 20px;
overflow-x: hidden;
}
#container {
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}
#logo_left {
position: relative;
top: 20px;
left: 1px;
}
#logo_top_right {
position: relative;
top: -55px;
left: 710px;
}
#logo_bot_right {
position: relative;
top: -50px;
left: 710px;
}
#park_photo {
position: relative;
top: -50px;
left: 1px;
margin-top: 1px;
color: white;
}
#menu {
position: relative;
top: -1524px;
left: 1px;
}
#officers {
position: relative;
top: 269px;
left: 2px;
}
#news {
position: relative;
top: -326px;
left: 182px;
}
#events {
position: relative;
top: -921px;
left: 812px;
}
#music_fest {
position: relative;
top: -928px;
left: 812px;
}
#footer {
position: relative;
top: -1277px;
left: 2px;
}
#footer_text {
position: relative;
top: -1357px;
left: 1px;
}
#copyright {
position: relative;
top: -25px;
left: 350px;
color: #F2F393;
}
/* End Style Sheet */
-- me
