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 & conditions</a></li>
</ul>
<p>©2010 <a href="mailto:your-email-
address@kingston.ac.uk">k0903881@kingston.ac.uk</a>, All Rights
Reserved</p>
</div>
<!-- end footer -->
</body>
</html>
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 & conditions</a></li>
</ul>
<p>©2010 <a href="mailto:your-email-
address@kingston.ac.uk">k0903881@kingston.ac.uk</a>, All Rights
Reserved</p>
</div>
<!-- end footer -->
</body>
</html>