[REQ]Fix This Code - 500 credits

Status
Not open for further replies.
Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
Hello :]
I am in need of a little help with my CSS coding.
Here's my problem:
attachment.php

You see, the "blog" and "contact" links are supposed to be on the same row as the "divisions" link and fit in between the lines on top.

Here is my HTML/CSS code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>sb | technology meets lifestyle</title>
  <style type="text/css">
body {
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-color: #31A5CC;
font-family: Lucida Sans;
}
#temp {
margin-top: -8px;
width: 823px;
height: 626px;
background-image: url(temp2.jpg);
margin-left: auto;
margin-right: auto;
}
#nav1 {
font-size: 15px;
margin-left: 172px;
width: 147px;
height: 82px;
text-align: center;
}
#nav1 a {
display: block;
color: black;
text-decoration: underline;
height: 82px;
}
#nav1 a:hover {
color: white;
background-image: url(nav_over.png);
background-repeat: repeat-x;
}
#nav2 {
font-size: 15px;
margin-left: 320px;
width: 147px;
height: 82px;
text-align: center;
}
#nav2 a {
display: block;
color: black;
text-decoration: underline;
height: 82px;
}
#nav2 a:hover {
color: white;
background-image: url(nav_over.png);
background-repeat: repeat-x;
}
#nav3 {
font-size: 15px;
margin-left: 468px;
width: 147px;
height: 82px;
text-align: center;
}
#nav3 a {
display: block;
color: black;
text-decoration: underline;
height: 82px;
}
#nav3 a:hover {
color: white;
background-image: url(nav_over.png);
background-repeat: repeat-x;
}
  </style>
</head>
<body>
<div id="temp">
<div id="nav1"><a href="divisions.php"><br>
<br>
divisions</a></div>
<div id="nav2"><a href="blog"><br>
<br>
blog</a></div>
<div id="nav3"><a href="contact.php"><br>
<br>
contact</a></div>
</div>
</body>
</html>
If you can find a fix for this I will give you 500 credits. If you need the image files PM me.
 

Attachments

  • ss.jpg
    ss.jpg
    37.1 KB · Views: 36
xPlozion

xPlozion

New Member
Messages
868
Reaction score
1
Points
0
[edit]
should have tested it before hand, currently working on a fix :)

this puts it all on the same line, just alter your margin-top in .temp to push all the links down to where you want them to display ;)
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>sb | technology meets lifestyle</title>
  <style type="text/css">
body {
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-color: #31A5CC;
font-family: Lucida Sans;
}
.temp {
margin-top: -8px;
width: 823px;
height: 626px;
background-image: url(temp2.jpg);
margin-left: auto;
margin-right: auto;
}
.nav {
font-size: 15px;
margin-left: 172px;
width: 147px;
height: 82px;
text-align: center;
display:inline;
}
.nav a {
display: inline;
color: black;
text-decoration: underline;
height: 82px;
width: 147px;
}
.nav a:hover {
color: white;
background-image: url(nav_over.png);
background-repeat: repeat-x;
}
  </style>
</head>
<body>
<div class="temp">
<div class="nav"><a href="divisions.php">divisions</a></div>
<div class="nav"><a href="blog">blog</a></div>
<div class="nav"><a href="contact.php">contact</a></div>
</div>
</body>
</html>

-xP
 
Last edited:
Scott B

Scott B

New Member
Messages
844
Reaction score
0
Points
0
xPlozion, your method didn't work so well since the text was not aligned properly and messing with margin-top in .temp brought the whole page and not the text down, but I am sending you 250 credits for your effort
I created my own fix and am closing this thread.
 
Status
Not open for further replies.
Top