1 reply [Last post]
Techbuilder
Techbuilder's picture
Offline
Regular
Last seen: 2 years 37 weeks ago
Timezone: GMT-8
Joined: 2011-01-06
Posts: 14
Points: 18

Hi everybody I'm still new to this whole building website stuff but any help will be much appreciated
and I'm still learning so bear with me if my code looks horrible.

Basically Previous and Next images are supposed to be on the same line closes to the left and one closes to the right,
I have a hover over previous and next to add some contrast when you go over it. When you go over the Next image it doesn't switch the image
nor can you click the link all the time but the previous does. My theory is that I'm not spacing them properly and it's creating an html/css mess.

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Style7.css">
<style type="text/css">
</style>
 
</head>
<body>
 
<div id="container">
 
    <div id="header">
 
    </div>
 
    <ul id="navbar">
        <li><a href="index.html" id="home">Home</a></li>
        <li><a href="manufacturing.html" id="manufacturing">Manufacturing</a></li>
        <li><a href="services.html" id="services">Services</a></li>
        <li><a href="aboutus.html" id="aboutus">AboutUs</a></li>
        <li><a href="contactus.html" id="contactus">ContactUs</a></li>
        <li><a href="mailto:[email protected]" id="requestforquote">RequestforQuote</a></li>
    </ul>
 
    <div class="imgwrap">
    <h1>Precision Machining</h1>   
    <p><strong>Custom Product Development Corporation features CNC machining for both prototyping and large volume production work on Metal and Plastic.            CPD produces  and machines to tight, more consistent, tolerances.  Resulting in an improvement in quality at a comparable or even lower total cost.  We provide a plethora of services not always available from other sheet metal and machining manufacturers.</strong></p>
    <p id="qoute"><a href="mailto:[email protected]"></a></p>
    <p id="next"><a href="precisionsheetmetal.html"></a></p>
    <p id="prev"><a href="precisionsheetmetal.html"></a></p>
</div>    
 
 
<div id="footer">
        <p>All contents copyright © 2011, Custom Product Development Corporation. All Rights Reserved</p>
    </div>
 
</div><!-- end container-->
 
</body>
</html>

Css

body {
    margin: 0;
    padding: 0;
    font: 100%/1.3 calibri, arial, helvetica, sans-serif;
    background: #000;
}
a img {border:0 none}
 
#container {
    width: 897px;
    margin: 0 auto;
    padding:20px 0;
}
#header {
    height: 158px;
    background: url(Banner.png) no-repeat ;
    overflow:hidden;/*uncollapse child margins*/
}
 
/*===== Begin Nav Bar ======*/
#navbar {
    margin: 20px 0 0;
    padding: 0px;
    list-style: none;
    overflow:hidden;/*contain floats*/
	background:#000;
   }
#navbar li {
    float: left;
}
#navbar a {
    float: left;
    height: 58px;/*group common rules*/
    text-decoration: none;
	text-indent: -5000px;
    /*text-indent: -5000px;*/
}
#navbar #home {
    width: 120px;
    background: url(Home.png) no-repeat 0 0;
}
#navbar #manufacturing {
    width: 154px;    
    background: url(Manufacturing.png) no-repeat 0 0;
}
#navbar #services {
    width: 121px;
    background: url(Services.png) no-repeat 0 0;
}
#navbar #aboutus {
    width: 129px;
    background: url(About-Us.png) no-repeat 0 0;
}
#navbar #contactus {
    width: 132px;
    background: url(ContactUs.png) no-repeat 0 0;
}
#navbar #requestforquote {
    width: 229px;
    background: url(RequestForQuote.png) no-repeat 0 0;
}
#navbar #home:hover,
#navbar #manufacturing:hover,
#navbar #services:hover,
#navbar #aboutus:hover,
#navbar #contactus:hover,
#navbar #requestforquote:hover {
    background-position: 0 -58px;
 
}
 
.imgwrap {
    width:798px;/*470px total w/padding*/
    height:960px;/*270px total w/padding*/
    margin:20px;
	background:url(Templatemachining.jpg);	
    padding:20px;
 
}
.imgwrap p {
color:#FFF;
font-size: 19px;
font:"Myriad Pro";
width: 600px;
margin: -520px 100px;
font-weight:100;
text-align:center;
}
h1 { 
color:#FFF;
font-size: 32px;
font:"Myriad Pro";
margin: 530px 265px ;
font-weight:100;
width: 600px;
}
 
ul { 
color:#FFF;
font-size: 17px;
font:"Myriad Pro";
text-align:center;
list-style: none;
font-weight:800;
 
}
 
#qoute {
float:right;
margin:565px -330px 0;/*set margins as you choose*/
display:inline;/*fix ie6 bug*/
}
#qoute a {
display:block;
width:176px;
height:31px;
background: url(Requestqoute.png) no-repeat;
}
#qoute a:hover {
	background:url(Request-for-qoute.png) no-repeat;}
 
	#footer {
    width:100%;
    margin-top:20px;    
    text-align:center;
    overflow:hidden;
}
 
#next {
float:right;
margin:665px -395px 0;/*set margins as you choose*/
display:inline;/*fix ie6 bug*/
}
 
#next a {
display:block;
width:111px;
height:31px;
background: url(Next.png) no-repeat;
}
 
#next a:hover {
	background:url(Next1.png) no-repeat;}
 
	#footer {
    width:100%;
    margin-top:20px;    
    text-align:center;
    overflow:hidden;
}
#prev {
float:right;
margin:664px 110px 0;/*set margins as you choose*/
display:inline;/*fix ie6 bug*/
}
 
#prev a {
display:block;
width:148px;
height:30px;
background: url(Previous.png) no-repeat;
}
 
#prev a:hover {
	background:url(Previous1.png) no-repeat;}
 
	#footer {
    width:100%;
    margin-top:20px;    
    text-align:center;
    overflow:hidden;
}
#footer p {
        margin: 0;
        font: 15px/15px calibri,arial;
        color: #FFF;
 
    }	

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 3 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5120
Points: 2717

Hi Techbuilder, It's always

Hi Techbuilder,
It's always good practice to give floated elements a width.
Look at fixing that so the margins can be more manageable an giving the floats a width.
Hope that helps