Laying an image over my banner?

Question

Hello, I am not sure if I am approaching this in the right way but I am trying to move the logo in the banner section banner-logo so it sits just to the right of the text in the banner (approximately 2/3 of the page accross). For some reason whatever I attempt I can not get it to move part way accross the page either goes all the way to the right or stays on the left. Can anyone help me to achieve this please and tell me what I am doing wrong?

<!DOCTYPE html5>
<head>
    <title>BodyWorks Hair and Beauty Salon></title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <div class="grid-container">
        <header class="main-header group">
            <img class="banner-logo" src="img\bodyworks-blackbg.png" alt="Bodyworks Logo">
            <img class="banner" src="img\banner.png" alt="BodyWorks Banner" title="Bodyworks Banner">
            <ul class="main-nav group">
                <li><a href="#">Home</a></li>
                <li><a href="#">The Team</a></li>
                <li><a href="#">Price List</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
    </div>
        </header>
    <div class="grid group">
            <div id="left" class="column">
                        <h1>About Us</h1>
                    <p>At Bodyworks Hair and Beauty Clinic our aim is to make you feel special. <br>
                        We offer a wide range of the latest services and therapies including:
                        <ul>
                            <li>the latest cuts and colours</li>
                            <li>hot stone massage</li>
                            <li>St Tropez tanning</li>
                            <li>luxury manicures and pedicures</li>
                            <li>fast tanning booth</li>
                            <li>personalised gift vouchers</li>
                            <li>special wedding services</li>
                        </ul>

                        To experience our friendly, professional atmosphere then please call us on 02392 486116. Or pay us a visit for more information.

                    </p>
            </div>          
                <div id="center" class="column">
                    <img class="team" src="img\team.jpg" alt="body works team picture" title="The awesome Bodyworks Team" style="width:180px:height:135px">
                    <img class="logo" src="img\bodyworks-blackbg.png" alt="Bodyworks Salon picture" title="Bodyworks Salon Picture" style="width:108px;height:108px">
                    <img class="award" src="img\awards.jpg" alt="Bodyworks Awards" title="Bodyworks awards 2013" style="108px";height="108px">

                </div>
                        <div id="right" class="column">
                            <h1>Award Winning Salon and Staff</h1>

                            <p>This salon and it's multi-talented team have been nominated for many awards and in 2013 won Best Success story for businesswoman of the year at the woman of the year awards. We went on to win Beauty Therapist of the year at the Hair and Beauty Awards. We were also nominated for Hair Salon of the year, Beauty Salon of the year. Our stylist Katie Merry was nominated for Stylist of the year, and stylist Eve Hoar was nominated for Colour Technician of the year. </p>
                        </div>      
    </div>
    <footer class="footer">
        <p>&copy;2014 Site designed by Wiggys Web Designs</p>
    </footer>
</body>
</html>

/* Font Face */

@font-face {
      font-family: diavlo;
      src: url(fonts/Diavlo.otf);

}

/* Styling */

body {
  font-family: diavlo;
  background-color: black;
  color: white;
  min-width: 650px;
}

.grid-container {
  position: relative;
  min-height: 200px;

}

.grid {
  clear: both;
  padding: 0px;
  margin: 0px;
}

img.banner {
  margin-top: 50px;
  left: 0px;
}

img.banner,
img.banner-logo,
img.team,
img.logo,
img.award {
  display: block;
  margin-left: auto;
  margin-right: auto;  
}

img.banner-logo {
  max-width: 20%;

}

img.team,
img.logo,
img.award {
  width: 100%;
  height: 100%;
  max-width: 108px;
}

img.team {
  max-height: 81px;
}

img.award {
  max-height: 108px;
}

/* Navigation Bar */

.main-nav {
  display: table;
  margin: 0 auto;
  text-align: center;
}

.main-nav ul {
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 50%;
}

.main-nav ul {
  display: inline;
}

.main-nav a {
  float: left;
  text-decoration: none;
  padding: 0 30px;
}

.main-nav li {
  display: inline;
  margin: 15px 10px;
}

a:link, a:visited {
  display: block;
  font-weight: bold;
  background-color: black;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  color: #989a99;
}

a:hover, a:active {
  background-color: #989a99;
  color: black;
}

/* Column Styling */

.grid {
  display: relative;
  margin: 2% 5% 3% 5%;
}

.column {
  float: left;

}

.grid:first-child {margin-left: 0;}

#right {
  margin-right: 5%;
  padding: 5% 0 0 5%;
  width: 30%;
}

#center {
  padding-top: 5%;
  width: 20%;
}

#left {
  padding: 5% 5% 0 0;
  margin-left: 5%;
  width: 30%;
}

.footer {
  clear: both;
}

/* Clearfix */

.group::before,
.group::after {
  content: " ";
  display: table;
}

.group::after {
  clear: both;
}

.group {
  zoom:1;
}


/* Media Query */

@media (max-width: 768px) {
  .grid-container,
  .main-nav li,
  .banner {
    width: initial;
    height: initial;
    float: initial;
  }

  .banner {
    margin-right: 0;
  }
}

Answer 1 · 2014-10-31T16:14:18Z

October 31, 2014 4:14pm

Your doctype looks wrong <!DOCTYPE html5> should be <!DOCTYPE html>

Welcome to the Treehouse Community

Looking to learn something new?

Stephen Roberts

Stephen Roberts

Laying an image over my banner?

1 Answer

John Donnell

John Donnell