Not sure what to do I've floated objects and cleared but...

Page 1 of 1

5 Replies - 866 Views - Last Post: 10 June 2013 - 02:14 PM

#1 StuartG90  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-June 13

Not sure what to do I've floated objects and cleared but...

Posted 10 June 2013 - 10:05 AM

I've been taking a course in web design, and I've designed a sort of "tester" site in Fireworks, now it's come to the coding and I'm a little bit lost.

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>&pound;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!

Is This A Good Question/Topic? 0
  • +

Replies To: Not sure what to do I've floated objects and cleared but...

#2 andrewsw  Icon User is offline

  • don't rely on secrecy
  • member icon

Reputation: 5952
  • View blog
  • Posts: 23,446
  • Joined: 12-December 12

Re: Not sure what to do I've floated objects and cleared but...

Posted 10 June 2013 - 11:08 AM

It would be helpful if:

You specified the height and width attributes for your images (which we don't have). You should always do this anyway, where possible, as it helps with the page-rendering;

Your posted HTML doesn't fully represent your screenshots. Please insert the missing text (or dummy text of a similar length);

Please describe the issue, rather than relying on someone to decipher it from your screenshots.

If possible, provide a link to the live site.

BTW If you are taking a (modern?) course in web design, where did you come across the term clearfix? This used to represent empty (non-semantic) spacer elements (more specifically, elements used to clear floats), which are (largely) no longer necessary, using modern css. (Using this as a classname seems a little disingenuous to me :))

This post has been edited by andrewsw: 10 June 2013 - 11:17 AM

Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is offline

  • don't rely on secrecy
  • member icon

Reputation: 5952
  • View blog
  • Posts: 23,446
  • Joined: 12-December 12

Re: Not sure what to do I've floated objects and cleared but...

Posted 10 June 2013 - 11:20 AM

Sorry! The terms clearfix and spacer (and 1px images) niggle me a little :bigsmile:

I do understand, however, that empty clear: both elements are still occasionally useful (and sometimes the easiest solution).

This post has been edited by andrewsw: 10 June 2013 - 11:23 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • don't rely on secrecy
  • member icon

Reputation: 5952
  • View blog
  • Posts: 23,446
  • Joined: 12-December 12

Re: Not sure what to do I've floated objects and cleared but...

Posted 10 June 2013 - 11:29 AM

BTWW

filter: alpha(opacity=50);/* IE7 and under */
-ms-filter: "alpha(opacity=50)"; /* IE8 */

Mmm might have to check the precise syntax, and order, of these ;)

http://www.quirksmod...ss/opacity.html

This post has been edited by andrewsw: 10 June 2013 - 11:38 AM

Was This Post Helpful? 1
  • +
  • -

#5 StuartG90  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 10-June 13

Re: Not sure what to do I've floated objects and cleared but...

Posted 10 June 2013 - 02:02 PM

I think the course was created in 2010 or 2011 so fairly modern (I've also tried Treehouse), I haven't put all the HTML code in yet because I am going bit by bit then doing the CSS so I know where I make mistakes. Thanks though, I did put in the height and it worked, but now I have another problem the background (grey one in the Fireworks image) has gone to the top and is now over the image and the large text floating to the right of it and the next bit of text, whilst now below the large text floated to the right isn't within the 960px range.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • don't rely on secrecy
  • member icon

Reputation: 5952
  • View blog
  • Posts: 23,446
  • Joined: 12-December 12

Re: Not sure what to do I've floated objects and cleared but...

Posted 10 June 2013 - 02:14 PM

I recommend that you read this page: all about floats. Also learn how to use your browsers console, there are links in my signature.

Sorry, I haven't the time at the moment to advise further. Someone else may come along ;)
Was This Post Helpful? 1
  • +
  • -
Page 1 of 1