Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Patrick McDermott
Patrick McDermott
2,377 Points

Floating image

I have all my markup inside a div 'container' within of course the body. I have created a basic logo that I want to go above the container, at the moment I can only get it to float to the left or right. I have increased the margin-top of the container but I still cant get the logo to fit on top. Please advise on how I can do so and if my coding needs any improvement. If you can look at the markup for 'containter' and 'body' and my CSS selector p.logo. Cheers

HTML-------

<!DOCTYPE html> <html>

<head> <title>Home | P&R Designs</title> <link rel="stylesheet" href="normalise.css"> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Allan:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="color.css"> </head>

<body>

<p class="logo"><img src="img/logo.png" width="400" heigh="138"></p>

<div class="container">

        <ul class="nav">
            <li><a href="port.html">Portfolio</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="service.html">Services</a></li>
            <li><a href="aboutus.html">About us</a></li>
            <li><a href="home.html">Home</a></li>
        </ul>

    <div class="box">
    </div>

    <div class="main1">
        <h2>What do we have to offer?</h2>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>

    <div class="main2">
        <h2>What to we do?</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>

    <div id="footer">
        <p> <span id="email">Email:</span> macdermott_3@hotmail.com<br><span id="mobile">Mobile:</span> 07534934730<br><span id="work">Work:</span> 01789 268479</p>
    </div>

</div>

</body> </html>

CSS-----------

html { background: #fff; } body { height: 100%; margin: auto; }

a { text-decoration: none; }

.nav { width: 96%; }

ul.nav { list-style-type: none; float: left; }

ul.nav li { float: right; font-size: 24px; margin-right: 10px; }

ul.nav li a{ color: #FFF; padding: 5px 10px 5px 5px; text-shadow: .5px 2px 10px #000; }

p.logo { margin: auto; float: top; }

.container { width: 1000px; height: 100%; font-family: 'Roboto Condensed', sans-serif; line-height: 1.8; border-left: solid; border-right: solid; border-width: 1px; border-color: #DAE6F2; margin: auto; margin-top: 180px;

background: -webkit-linear-gradient(90deg, #fff, #fff 60%, #15324F);

}

h2 { font-family: 'Allan', sans-serif; color: #000; text-transform: uppercase; /text-shadow: 3px 3px 10px black;/ }

.box { width: 1000px; height: 300px; margin: 0px 0px; background: black; clear: both; }

footer {

clear: both;
position: center;
background: #15324F;
margin: 0 auto;
padding: 10px 30px;

}

footer p {

margin: 0px 0px;

}

footer span {

font-size: 1.2em;
color: #fff;

}

p.logo { clear:both; margin: 0px; padding: 0px; float: right;

}

/* body width: 800px column width: 390px gutter width: 20px

*/

.main1 { width: 410px; height: 600px; float: left; padding: 10px 20px; margin: 10px 20px 10px 20px; /background: #3398FF;/ color: #000; /border-radius: 5px; box-shadow: 0px 10px 40px -5px #000;/ letter-spacing: .9px;

}

.main2 {
width: 410px; height: 600px; float: right; padding: 10px 20px; margin: 10px 20px 10px 20px; /background: #3398FF;/ color: #000; /border-radius: 5px; box-shadow: 00px 10px 40px -5px #000;/ }

1 Answer

Brian Pirouet
PLUS
Brian Pirouet
Courses Plus Student 1,653 Points
Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

you could try putting your logo inside a header div? so something like:

<div id="header"></div>

if you don't then try changing 

<p class="logo"><img src="img/logo.png" width="400" heigh="138"></p>

to 

<p class="logo"><img src="img/logo.png" width="400px" height="138px"></p>

could you post a live preview of the site if possible? so much easier to look at your code that way.

Patrick McDermott
Patrick McDermott
2,377 Points

just did and working :) cheers bud!

Brian Pirouet
Brian Pirouet
Courses Plus Student 1,653 Points

No problem glad it solved your problem