navigation/image/clickable

leah2704 · 04-20-2011, 12:01 AM

hi can anyone help me?
whats the code to insert 3 gif images (navigation buttons) into a design using html and css as well. i have uploaded the images to give you an idea.

thanks

HTML/CSS code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Layout</title>
<style type="text/css">
<!--
#navigation {
	padding: 0;
}

#navigation li {
	float:left;
	list-style:none;
}

#navigation li span{
	display:block;
/*
	text-indent:-4200px;
*/	
}

#navigation a {
	display:block;
	background-color:#b3b3b3;
	width:80px;
	height:28px;
}

#nav-what a{

}

#nav-case a{
}

#nav-contact a{
}

#case {
	clear:left;
	width:400px;
	padding:5px;
	background-color:#E6E6E6;
}

#case h2{
	margin-top:20px;
}


#case p{
	margin-left:147px;
}

#case img{
	float:left;
}

#footer {
	width:400px;
	padding:5px;
	background:url(footer-bg.gif) repeat-x bottom #b3b3b3;
}

#footer ul {
	padding:0px;
	margin:0 0 5px 0;
	width:100%;
}
#footer  li {
	margin: 0 5px 0 0;
	display:inline;
	list-style:none;
}

-->
</style>
</head>

<body>


<!-- navigation -->
<ul id="navigation">
  <li id="nav-what"><a href="#"><span>What we do</span></a></li>  <li 

id="nav-case"><a href="#"><span>Case studies</span></a></li>
  <li id="nav-contact"><a href="#"><span>Contact us</span></a></li>
</ul>
<!-- end navigation -->


<!-- case -->
<div id="case">
<img src="photo.gif" width="137" height="137" />
<h2>Sample case study</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam 

ull Introduction: Lorem ipsum dolor sit amet, consectetuer adipiscing 

elit. nonummy arcu. </p>
<p><a href="#">See the full case >></a></p>
</div>
<!-- end case -->

<!-- footer -->
<div id="footer">
  <ul>
    <li><a href="#">What we do</a></li>
    <li><a href="#">Case studies</a></li>
    <li><a href="#">Contact us </a></li>
  </ul>
    
  <ul>
    <li><a href="#">Privacy policy</a></li>
    <li><a href="#">Terms &amp; conditions</a></li>
  </ul>
  <p>&copy;2010 <a href="mailto:your-email-

address@kingston.ac.uk">k0903881@kingston.ac.uk</a>,  All Rights 

Reserved</p>
</div>
<!-- end footer -->

</body>
</html>

oesxyl · 04-20-2011, 01:48 AM

- why don't you put your code between code tags?

http://www.codingforums.com/showpost...27&postcount=2

- what you did to solve your problem?

best regards

leah2704 · 04-20-2011, 01:58 AM

o yh i had totally 4gtn thx