Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

First website for a game


  • Please log in to reply
2 replies to this topic

#1 Sphinxter

Sphinxter

  • Members
  • 6 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:03:07 AM

Posted 29 December 2012 - 05:24 PM

Alright so, i am trying to create a website using HTML/CSS, im Very new to both and i would like to know how to create a horizontal navigation menu and style it like This website <---Click! I was wondering how i could do it, with the shading as well, please help! Thank you!




Edit: Also I would like help probably over the course of building this website, so if you will answer the above question and would still like to help with future problems please add or message me. Thanks!

Edited by Sphinxter, 29 December 2012 - 06:02 PM.


BC AdBot (Login to Remove)

 


#2 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:08:07 PM

Posted 29 December 2012 - 08:35 PM

What code have you got already? Have you learnt any HTML or CSS?

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#3 Sphinxter

Sphinxter
  • Topic Starter

  • Members
  • 6 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:03:07 AM

Posted 29 December 2012 - 09:13 PM

Right now this is my HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>Sphinxter</title>
	<link rel="stylesheet" href="style.css">
	<style type="text/css">
	body {
	background-color: #999999;
}
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<div id="banner"><h1>Sphinxter's webpage</h1></div>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home</a>
  <li><a href="Register.html">Register</a>
  <li><a href="downloads.html">Downloads</a>
  <li><a href="contact.html">Contact us</a>
  <li><a href="screenshot.html">Screenshots</a>
  <li><a href="videos.html">Videos</a>
  <li><a href="fourms.html">Fourm</a>
</ul>

<!-- Main content -->

<p>This is my webpage, this will be a webpage for a game soon but i am just practicing on how to create a website using HTML...
<div class="boxed">
	This is inside a box, does this work?
</div>

<p>

<!-- Sign and date the page, it's only polite! -->
<address>Created by Sphinxter</address>

</body>
</html>

And here is the CSS

body {
	padding-left: 11em;
      font-family: Georgia, "Times New Roman",
          Times, serif;
    color: black;
    background-color: #888888 }
	  ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 3em;
	left: 1em;
	width: 132px;
	height: 63px;
}
	h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
		  ul.navbar li {
    background: #cccccc;
	border: 1px solid black;
    margin: 0.75em 0;
    padding: 0.6em;
    border-right: .5em solid black
	}
.boxed {
	padding: 0.6em;
	margin: 0;
	border: 2px solid black;
	color: white;
}
#banner {
	margin:0 auto;
	Width:1000px;
	Height: 125px;
	border: #ff0000;
	background: #000000;
	color:#ffffff;
	font-size: 18px;
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
}
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: black }
  a:visited {
    color: #123456 }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }

I would like to change the nav bar so it is horizontal below the banner and above the body, how would i go about doing that?

Edited by Sphinxter, 29 December 2012 - 09:20 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users