• 0
bluemoonredsun

HTML code help "Menu"

Question

So this is the website I am working at http://shizzle.uphero.com ...

And this is the HTML code , So what I wanna do , is making a little menu at the top that goes horizontal like

Home -o- Blog -o- Forum -o-

could someone please help me ? :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<html>

<div id="menu">

<ul>

<li><a href="https://www.google.com/">Google</a></li>

<li><a href="http://www.youtube.com">Youtube</a></li>

</ul></div>

<body bgcolor=grey>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SHIZZLE</title>

<link href="/images/favicon.ico" rel="icon" type="image/x-icon" />

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body onload="UR_Start()" bgcolor="FFFFFF">

<font face="Comic Sans MS" size="6" color="#190707">

<br /> Welcome to my Website ;D

</font>

</body>

</html>

Share this post


Link to post
Share on other sites

17 answers to this question

Recommended Posts

  • 0

I would recommend using a Content Management System.

But if you do want to continue making it in HTML go ahead. Also for forums you would probably have to use a free forum software and also you would need an MySQL database for a forum

Share this post


Link to post
Share on other sites
  • 0

You can use the following CSS on the list:

ul {

list-style-type : none;

}


ul li {

display : inline;

margin-right : 5px;

}


ul li a {

text-decoration : none;

color: #333;

}


ul li a:hover {

color: #555;

}


If something is wrong, let me know... I have a suspicion I missed something.

Share this post


Link to post
Share on other sites
  • 0

There is no CSS file , Only HTML :L

Yeah, you'll need an entirely separate file for your CSS sheet, and then you need to reference it in the header of the html page (each one) so it knows to use it.

What Flaw said isn't a complete CSS sheet, but it is a good start.

You can use the following CSS on the list:

ul {
list-style-type : none;
}

ul li {
display : inline;
margin-right : 5px;
}

ul li a {
text-decoration : none;
color: #333;
}

ul li a:hover {
color: #555;
}

[/CODE]

If something is wrong, let me know... I have a suspicion I missed something.

EDIT: Wow... Flaw said the same thing and only had to hit the Quote button twice... XD

Edited by Tim

Share this post


Link to post
Share on other sites
  • 0

I'm actually in between classes at the moment, but later on this evening, I can try to work out what is wrong with your code @bluemoonredsun.

Whatever I do, I'll put it up here. If you'd like me to help you, I only need your code - just send it to me (Tim@.Net) or just zip it up and stick it in a post here as an attachment :3

EDIT: I won't be creating an entire CSS Sheet though - that takes a good deal of time. If you just search for "free CSS templates" or something of the nature, you'll get a full webpage designed with a CSS sheet that you can then use to manipulate as you see fit. You only need to keep a link to the original author in the footer (usually in the footer, although anywhere will work generally).

Share this post


Link to post
Share on other sites
  • 0

For the menu's ul and li use this:


ul {display:inline-block;
margin:0px;}
li {padding-right:10px;
margin:0px;}
[/CODE] To style the links use this:
[CODE]
#menu a{ color:#(6 digit hex code);
text-decoration: none;}
#menu a:hover{ color:#(6 digit hex code);
text-decoration: none;}
#menu a:visited{ color:#(6 digit hex code);
text-decoration: none;}

For the visited, I generally put it the same as the normal a. Do you have PHP? I could really help you with your menu if you have PHP :P Also remember for the menu, never saw you had it on the html code you showed above:

<div id="menu">
<ul>
<li><a href="link.html">Test</a></li>
<li><a href="link.html">Test</a></li>
</ul>
</div>
[/code]

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...