I have been wanting to create a simple text based navigation for my website in the making. All the tutorials I come across make buttons and stuff. All I want is text for Home Services Portfolio Contact... I have no idea how to make such a thing. I don't want someone to code it for me but if you could give example code to show me what to do, or just tell me that would be great. Hear is an example of what I want.
Hear is my code so far, but that might be useless in this case.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Goldfi sh Graphics</title>
<link type="text/css" rel="stylesheet " href="Goldfish. css" />
</head>
<body>
<div id="container" >
<div id="banner">
<a href="index.htm l">
<img src="images/banner.jpg" alt= "Goldfish Graphics Banner Image" border="0"/>
</a>
</div>
<div id="navigation" >
<img src="images/navigation.jpg" alt= "navigation background image" />
<div id="navtext">
<p>
</p>
</div>
</div>
<div id="sidebar">
<div id="text2">
<h5>Testimonies </h5>
<p>
""
</p>
<p>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</p>
</div>
</div>
<div id="content">
<div id="text">
<h2>Home</h2>
<p id="home">
Based in the Midwest, Goldfish Graphics is a freelance design business. Goldfish Graphics is
dedicated to working with clients to turn their ideas into unique designs. By communicating
with our clients, we produce quality websites, layouts, print graphics, and logos
that are affordable.
</p>
<h4>News (7/02/07)</h4>
<p id="news">
Although the Goldfish Graphics site is up and running, I am still currently learning how to better make web sites.
Because I am still learning, all web based projects I take on now will be 50% of the price they should be. With a little patience you can have quality web designs for half the price.
</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
***************
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: .8em;
color: #eea103
}
/*Divs*/
#content {
height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
margin-top: 4%;
margin-left: 27.2%;
}
#sidebar {
height: 505px;
width: 153px;
background-image: url(images/sidebar.jpg);
background-repeat: no-repeat;
margin-top: 4%;
padding-top: 3%;
padding-left: 3.5%;
margin-left: auto;
float: left;
}
#navigation {
margin: 0%;
padding-top: 0%;
border-width: 0%;
height: 28px;
}
#banner {
border-width: 0%;
margin: 0%;
padding: 0%;
margin-top: 0%;
height: 119px;
}
#footer {
height: 28px;
width: 712px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
margin-top: 4.2%;
}
#container {
width: 712px;
margin: auto;
position: relative;
padding: 0%;
background-color: #3c4246;
}
#home {
width: 442px;
}
#news {
width: 442px;
}
#text2 {
padding-left: 3%;
padding-top: 5%;
}
#text {
padding-left: 5.5%;
padding-top: 5%;
}
#footer {
padding-top: .01%;
padding-left: 3%;
font-size: .7em;
}
a:link {
}
a: hover {
}
#links {
padding: %;
margin: 0%;
}
Hear is my code so far, but that might be useless in this case.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Goldfi sh Graphics</title>
<link type="text/css" rel="stylesheet " href="Goldfish. css" />
</head>
<body>
<div id="container" >
<div id="banner">
<a href="index.htm l">
<img src="images/banner.jpg" alt= "Goldfish Graphics Banner Image" border="0"/>
</a>
</div>
<div id="navigation" >
<img src="images/navigation.jpg" alt= "navigation background image" />
<div id="navtext">
<p>
</p>
</div>
</div>
<div id="sidebar">
<div id="text2">
<h5>Testimonies </h5>
<p>
""
</p>
<p>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</p>
</div>
</div>
<div id="content">
<div id="text">
<h2>Home</h2>
<p id="home">
Based in the Midwest, Goldfish Graphics is a freelance design business. Goldfish Graphics is
dedicated to working with clients to turn their ideas into unique designs. By communicating
with our clients, we produce quality websites, layouts, print graphics, and logos
that are affordable.
</p>
<h4>News (7/02/07)</h4>
<p id="news">
Although the Goldfish Graphics site is up and running, I am still currently learning how to better make web sites.
Because I am still learning, all web based projects I take on now will be 50% of the price they should be. With a little patience you can have quality web designs for half the price.
</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
***************
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: .8em;
color: #eea103
}
/*Divs*/
#content {
height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
margin-top: 4%;
margin-left: 27.2%;
}
#sidebar {
height: 505px;
width: 153px;
background-image: url(images/sidebar.jpg);
background-repeat: no-repeat;
margin-top: 4%;
padding-top: 3%;
padding-left: 3.5%;
margin-left: auto;
float: left;
}
#navigation {
margin: 0%;
padding-top: 0%;
border-width: 0%;
height: 28px;
}
#banner {
border-width: 0%;
margin: 0%;
padding: 0%;
margin-top: 0%;
height: 119px;
}
#footer {
height: 28px;
width: 712px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
margin-top: 4.2%;
}
#container {
width: 712px;
margin: auto;
position: relative;
padding: 0%;
background-color: #3c4246;
}
#home {
width: 442px;
}
#news {
width: 442px;
}
#text2 {
padding-left: 3%;
padding-top: 5%;
}
#text {
padding-left: 5.5%;
padding-top: 5%;
}
#footer {
padding-top: .01%;
padding-left: 3%;
font-size: .7em;
}
a:link {
}
a: hover {
}
#links {
padding: %;
margin: 0%;
}
Comment