You are viewing our Forum Archives. To view or take place in current topics click here.
[HTML & CSS] Nice Horizontal Menu.
Posted:

[HTML & CSS] Nice Horizontal Menu.Posted:

OriqinuhL
  • New Member
Status: Offline
Joined: Jul 07, 201212Year Member
Posts: 45
Reputation Power: 2
Status: Offline
Joined: Jul 07, 201212Year Member
Posts: 45
Reputation Power: 2
[ Register or Signin to view external links. ]

HTML Code:
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" href="style.css"/>
<title>Untitled Document</title>
</head>

<body>
   <div id="container">
   <h1>Heading</h1>
   <ul class="menu">
   <li class="selected"><a href="#">Home</a></li>
   <li><a href="#">Link #2</a></li>
   <li><a href="#">Link #3</a></li>
   <li><a href="#">Link #4</a></li>
   </ul>
   <p>Website content.</p>
   </div>
</body>

</html>


CSS Code:
body {
   background-color: gray;
}

#container {
   width:960px;
   margin:0 auto;
}

h1 {
   font:2em Georgia;
}

.menu {
   font:1em Georgia;
   list-style:none;
   padding:0;
   margin:0;
   background:#fff;
   text-transform:uppercase;
   border-bottom:3px solid #000;
}

.menu li {
   display:inline-block;
   zoom:1;
   *display:inline;
   padding:5px 15px 4px 15px;
}

.menu li a {
   color:#000;
   text-decoration:none;
   line-height:1.6em;
}


.menu li a:hover {
   color:maroon;
}

.menu li.selected {
   background:#000;
}

.menu li.selected a {
   color:#FFF;
}


All this does:

          zoom:1;
          *display:inline;

Is makes it compatible with older versions of internet explorer

Finally... For every page you save... You MUST make sure you rename the code in the html file... So if you save index.html first, make sure when you save contact.html or something you change the <li class="selected"><a href="index.html">Home</a> so that the index link is: <li><a href="index.html">Home</a> and the contact page is: <li class="selected><a href="contact.html">Contact</a>
#2. Posted:
SynicallyEvil
  • Christmas!
Status: Offline
Joined: Aug 25, 201212Year Member
Posts: 295
Reputation Power: 13
Status: Offline
Joined: Aug 25, 201212Year Member
Posts: 295
Reputation Power: 13
It's nice. If you put some animation in it, it would look better.
#3. Posted:
Shlohmo
  • New Member
Status: Offline
Joined: Mar 09, 201311Year Member
Posts: 15
Reputation Power: 0
Status: Offline
Joined: Mar 09, 201311Year Member
Posts: 15
Reputation Power: 0
Looks okay, simple. But

<!DOCTYPE html>
<html>


You can remove the second HTML tag. You already declared it with <!DOCTYPE html>
#4. Posted:
Bru
  • Summer 2018
Status: Offline
Joined: Jul 08, 201212Year Member
Posts: 2,772
Reputation Power: 228
Status: Offline
Joined: Jul 08, 201212Year Member
Posts: 2,772
Reputation Power: 228
Very simple if you need any help PM me
#5. Posted:
Z61
  • TTG Fanatic
Status: Offline
Joined: Apr 16, 201014Year Member
Posts: 4,309
Reputation Power: 179
Status: Offline
Joined: Apr 16, 201014Year Member
Posts: 4,309
Reputation Power: 179
Looks pretty ugly in my opinion, using CSS3 and making the heights match will drastically improve the way it looks.
#6. Posted:
AxonGrab
  • New Member
Status: Offline
Joined: Mar 08, 201311Year Member
Posts: 26
Reputation Power: 1
Status: Offline
Joined: Mar 08, 201311Year Member
Posts: 26
Reputation Power: 1
Looks really ugly and is easy to make. Why have you released this?
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.