New Topic/Question
Reply
This is what's happening in my HTML & CSS version http://imageshack.us...lcssdesign.png/
And this is what I'd like to happen (FW version) http://imageshack.us...6/fwdesign.png/
I'm not sure what I've done wrong I've gone over the code and I noticed I've used a class clear (clear:both in css) and a .clearfix but the button wouldn't drop unless I used the first method...
Anyway, I'd really appreciate it if you could point me in the right direction and tell me what's wrong so I can see if I can fix the problem.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Millionhairs</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<header id="header_container">
<div id="header_container2">
<div id="mh_logo"> <a href="index.html"><img src="images/logo.png"></a> </div>
<nav id="nav">
<ul class="clearfix">
<li class="clearfix"><a href="index.html">Home</a></li>
<li class="clearfix"><a href="about.html">About</a></li>
<li class="clearfix"><a href="services.html">Services</a></li>
<li class="clearfix"><a href="gallery.html">Gallery</a></li>
<li class="clearfix"><a href="testimonial.html">Testimonials</a></li>
<li class="clearfix"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section>
<article id="billboard_container">
<div id="billboard_container_image" class="clearfix"> <img src="images/home_image.jpg" alt="Grooming Room"> </div>
<div id="billboard_cta_container" class="clearfix">
<div id="container_line1"><p>Top quality</p></div>
<div id="container_line2"><p>Dog grooming</p></div>
<div id="container_line3"><p>From as little</p></div>
<div id="container_line4"><p>As</p></div>
<div id="container_line5"><p>£15</p></div>
<div class="clear"></div>
<div id="container_line6"> <a href="services.html"><img src="images/btn_services.png"></a> </div>
</div>
</article>
<article id="boxes">
<p>sss</p>
</article>
</section>
</body>
</html>
/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* GLOBAL STYLES */
body {
}
.clear {
clear: both;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
header#header_container {
background: url(../images/bg_header.jpg) repeat-x top;
height: 100px;
}
#header_container2 {
width: 960px;
margin: 0 auto;
}
#mh_logo {
position: absolute;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 0 15px;
color: #fff;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
line-height: 100px;
font-family: arial, helvetica, sans-serif;
}
#nav ul li a:hover {
background: #000;
color: #fff;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
#billboard_container {
margin: 0 auto;
padding-top: 10px;
width: 960px;
}
#billboard_container_image {
width: 610px;
margin-top: 10px;
float: left;
}
#billboard_cta_container {
width: 340px;
margin-top: 5px;
float: right;
}
#container_line1 {
text-transform: uppercase;
font-family: arial, helvetica, sans-serif;
font-size: 25px;
margin-bottom: 7px;
color: #666;
}
#container_line2 {
text-transform: uppercase;
font-family: arial, helvetica, sans-serif;
font-size: 30px;
margin-bottom: 7px;
color: #404040;
}
#container_line3 {
text-transform: uppercase;
font-family: arial, helvetica, sans-serif;
font-size: 20px;
margin-bottom: 7px;
color: #666;
}
#container_line4 {
text-transform: uppercase;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
float: left;
margin-right: 10px;
color: #666;
}
#container_line5 {
text-transform: uppercase;
font-family: arial, helvetica, sans-serif;
font-size: 30px;
float: left;
margin-bottom: 7px;
color: #404040;
}
article#boxes {
}
Thanks!
MultiQuote
)
| 
