2 Replies - 2213 Views - Last Post: 25 September 2013 - 07:28 PM

#1 Jont828  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 14-September 13

HTML/CSS Drop Down Navigation Bar

Posted 25 September 2013 - 05:33 PM

Okay, so I'm making a website in class with links some cool places to learn to code different languages, and I'm trying to make the navigation bar. It seems to be working fine, but the code seems kinda messy and I am also feeling the need to turn it into a drop down navigation bar so that I can fit more sub categories. I've looked up lots of things on the internet on how to do this, and it usually ends up being unclear, doesn't explain what each CSS element does, and just leaves me feeling lost. So here is my original code that I put together with the help of some buddys and many online tutorials, and I was wondering if I could get some help cleaning it up by getting rid of hacky/bad code and also have some one help teach me into making a drop down menu with just HTML/CSS. Thanks!

HTML:

<!DOCTYPE html>

<html>

<head>
		<title>Jonathan's Webpage</title>
		<link type="text/css" rel="stylesheet" href="My Webpage CSS.css">
		
			<h1 id="title">Welcome to Operation Code</h1>
			
			<div>
			<span>
			<ul class="nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Web Development</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
						<li><a href="#">Javascript</a></li>
						<li><a href="#">PHP</a></li>
					</ul>
				</li>
				
				<li><a href="#">The "C" Languages</a>
					<ul>
						<li><a href="#">C</a></li>
						<li><a href="#">C++</a></li>
						<li><a href="#">C#</a></li>
						<li><a href="#">Objective C</a></li>
					</ul>
				</li>
				<li><a href="#">Contact Us</a></li>
				<li><form>Search <input type="text" name="search" placeholder="Google" /></form></li>
			</ul>
			</span>
			</div>
</head>
	
<body>
	
<p id="p1">Welcome to my website! It's still a work in progress, but it has some links to some cool places that teach you how to code! Hope you like it! :)/>/></p>

</body>

</html>



CSS:

#title {
	color: #232323;
	font-family: Calibri;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
}

div {
	text-align: center;
}

span {
	display: inline-block;
}

h1,
h2,
h3,
p {
	font-family: Calibri;
}

#p1 {
	color: #47423F;
	font-family: Calibri;
	padding-top: 10px;
}

table {
	margin-left: auto;
	margin-right: auto;
}

td {
	text-align: center;
	padding: 5px;
}

.pstv {
	color: #0099FF;
	font-family: Calibri;
}

.ph {
	color: #CC0000;
	font-family: Calibri;
}

.psrv {
	color: #00DD00;
	font-family: Calibri;
}

head {
	background-color: #F2F2F2;
}

body {
	background-color: #F2F2F2;
	margin-right: 200px;
	margin-left: 200px;
}

a {
	text-decoration: none;
}

.nav a:hover {
	color: #FFFFFF;
}

.nav {
	border: 1px solid #232323;
	border-width: 2px 2px;
	padding: 0;
    background-color: #232323;
    text-align: center;
	list-style: none
} 

.nav a,
.nav form {
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #A0A0A0;
}

.nav li {	
	display: inline;
	font-family: Calibri;
	font-size: 20px;
	font-weight: normal;
	width: auto;
}

.nav li form {
	display: inline;
	font-family: Calibri;
	font-size: 20px;
	font-weight: normal;
	width: auto;
	padding-right: 10px;
}

.nav li input {
	display: inline;
	font-family: Calibri;
	font-size: 15px;
	font-weight: normal;
	width: 150px;
	
}


Is This A Good Question/Topic? 0
  • +

Replies To: HTML/CSS Drop Down Navigation Bar

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,774
  • Joined: 12-December 12

Re: HTML/CSS Drop Down Navigation Bar

Posted 25 September 2013 - 07:09 PM

All the content of the page (h1, divs, spans, etc.) should be in the body-tag, none of this should be in the head-tag.
href="My Webpage CSS.css"

Web pages should not have spaces in their names.

There are many (many!) tutorials on navigation bars and drop-down menus. You might also search through the tutorials here @DIC; click the Tutorials link at the top of this page.

No-one here will guide you through the full process of creating a navigation bar. That's what tutorials, and teachers, are for. However, if you encounter a specific problem, you are welcome to post a question.

This post has been edited by andrewsw: 25 September 2013 - 07:11 PM

Was This Post Helpful? 0
  • +
  • -

#3 Jont828  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 14-September 13

Re: HTML/CSS Drop Down Navigation Bar

Posted 25 September 2013 - 07:28 PM

I'll move the nav bar back to the body and get rid of the spaces, but does the rest of the code in general seem messy or just reek of a beginner? There are no "experts" in my school besides my peers who have declared themselves that, so I wanted to have some others take a look at my code and see if there are any good practices that I'm not doing.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1