...

View Full Version : 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




<!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.php?p=1080027&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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum