WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Text based navigation (no buttons or images)

Reply
  Thread Tools Display Modes
Old 8th July 07, 01:05 AM   #1
Bouzy
WLC Member
 
Join Date: Jun 2007
Posts: 34
Default Text based navigation (no buttons or images)

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.

http://i93.photobucket.com/albums/l7..._Bouzy/nav.jpg
(Note I don't get if it would be like an unordered list or what and how you would position the text over the navigation image so it looked good.

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>Goldfish Graphics</title>

<link type="text/css" rel="stylesheet" href="Goldfish.css" />

</head>
<body>

<div id="container">

<div id="banner">
<a href="index.html">
<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%;

}
Bouzy is offline   Reply With Quote
Old 11th July 07, 10:03 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: Text based navigation (no buttons or images)

Set the image as a background to the container
chrishirst is offline   Reply With Quote
Old 12th July 07, 05:31 AM   #3
tominated
WLC Lover
 
Join Date: May 2007
Location: Queensland, Australia
Posts: 65
Default Re: Text based navigation (no buttons or images)

make the nav a ul with an li tag that has a anchor tag and the link text. the code would look something not too dissimilar to this:

Code:
<!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>Goldfish Graphics</title>

<link type="text/css" rel="stylesheet" href="Goldfish.css" />

</head>
<body>

<div id="container">

<div id="banner">
<a href="index.html">
<img src="images/banner.jpg" alt= "Goldfish Graphics Banner Image"/>
</a>
</div>


<ul id="navigation">
<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 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 class="clear"></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>
css:
Code:
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: .8em;
color: #eea103
}

.clear {
clear: both;
}

/*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;
list-style: none;
background: #999;
}

#navigation li {
display: inline;
}

#navigation li a {
display: block;
line-height: 28px;
height: 28px;
padding: 0 10px 0 10px;
color: #ff0000;
text-decoration: none;
}

#navigation li a:hover {
text-decoration: underline;
background: #ccc;
}

#banner {
border-width: 0%;
margin: 0%;
padding: 0%;
margin-top: 0%;
height: 119px;
}

#footer {
height: 28px;
width: 712px;
background: url(images/footer.jpg) no-repeat;
margin-top: 4.2%;
}

#container {
width: 712px;
margin: 0 auto;
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%;
}
tominated is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
dotted a:link on text, not on images lovesdesign CSS 2 15th July 07 06:27 PM


All times are GMT. The time now is 02:09 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.