Forums

  • # March 3, 2017 at 8:50 am

    Hey all,

    Im very new to coding and im practicing building my fisrt website. I have come to a problem though. I have a background image and i want to lay text over that. The way it would look on a basic bootstrap template. Everywhere i put my h2 tags the headings either ends up right under the navbar and pushing the background image down or it ends up under the background image. I want it to look like this http://logicart.pl/en just text over the image. Thank you to any replies in advance

    Heres the html code

    <DOCTYPE html>
    <html>
      <head>
        <title>Code Practice</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
      </head>
    
      <body>
      <!-- Start of Nav Bar-->
      <ul class="nav">
    
          <div>
            <a href="#">MUSICMAKER</a>
          </div>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Success</a></li>
          <li><a href="#">Social Media</a></li>
          <li><a href="#">Contact</a></li>
      </ul> <!--end of Nav Bar-->
    
      <!-- Start of Banner-->
      <div>
    
        <img src="img/splash3.jpg" />
        <h1>Its Time To Be A Rockstar</h1>
        <h2>All it takes is the perfect pitch</h2>
      </div>  <!--end of banner -->
    
      </body>
    </html>
    

    Heres the CSS

    * {
      padding: 0;
      margin: 0;
    }
    
    body {
      margin: 0;
      padding: 0;
    }
    
    .nav {
      background-color: #000000;
      color: #FFFFFF;
      list-style: none;
      text-align: right;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    
    .nav > li {
      display: inline-block;
      padding-right: 50px;
      font-size: 16px;
    }
    
    .nav> li > a {
      text-decoration: none;
      color: #72B095;
      font-family: "Arial Black", Gadget, sans-serif;
    
    }
    
    .nav > li > a:hover {
      color: #7FFFD4;
    }
    
    .logo {
      color: #7FFFD4;
      float: left;
      font-family: "Arial Black", Gadget, sans-serif;
      padding-left: 25px;
      font-size: 20px;
    }
    
    .logo > a {
      text-decoration: none;
      color:  #7FFFD4;
    }
    
    .logo a:hover {
      color: red;
    }
    .banner {
      width: 100%;
      display: block;
    }
    
    .banner > .banner-image {
      width: 100%;
      display: block;
    }
    
    
    
    .heading {
      text-align: center;
      font-family: "Arial Black", Gadget, sans-serif;
      font-size: 30px;
      Padding: 20 0 20 0;
    }
    
    # March 3, 2017 at 10:42 am

    Have you thought about using a background-image (in a div maybe) instead of the img element? https://css-tricks.com/almanac/properties/b/background-image/
    Then you could put text in the same div and the image would sit in the background.

    # March 3, 2017 at 11:43 am

    You HTML is invalid though

    A ul can only have li as direct children.

    # April 19, 2017 at 6:45 am

    It’s also worth mentioning that this:

      <ul class="nav">
    
          <div>
            <a href="#">MUSICMAKER</a>
          </div>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Success</a></li>
          <li><a href="#">Social Media</a></li>
          <li><a href="#">Contact</a></li>
      </ul> <!--end of Nav Bar-->
    

    Is invalid HTML.

    A ul can only have li as direct children.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag