1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help DIV stacking.

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, Dec 13, 2016.

0
  1. #1
    Hi,

    I am having two problems, the div for my footer seems to be overlapping with the body div and how can I make this website more responsive and mobile friendly.

    Regards,
    Chris

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
    name="viewport"
    content="width=device-width,height=device-height,initial-scale=1"
>
<link
   rel="stylesheet" href="screen.css" media="screen,projection,tv">
<link
   rel="shortcut icon" href="images\favicon.png">
<title>
Guitar Uni
</title>
</head><body>
     <div class="header">
     <div class="logo"></div>
<ul class="navigation">
  <li class="nav1"><a class="nav2" href="#home">Home</a></li>
  <li class="nav1"><a class="nav2"href="#aboutus">Abous Us</a></li>
  <li class="nav1"><a class="nav2"href="#onlineguitarlessons">Online Guitar Lessons</a></li>
  <li class="nav1"><a class="nav2"href="#contact-us">Contact Us</a></li>
</ul>
     </div>
<hr>    
<div class="body">
<h1>    
Welcome to Guitar Uni!
</h1>
<p>
To start learning how to play the guitar navigate to our online guitar lessons via the main navigation menu located at the top of the website or via lessons located on the right hand-side.
</p>
<h2>
Guitar Uni’s Online Lessons
</h2>
<p>
Anyone that has an interest in the guitar will benefit from this website. We teach basic to advance lessons. Our online guitar lessons are broken down to step-by-step instruction. Each lesson is concise and pictorial to ensure easy learning.
</p>
<p class="centertext"><strong><em>
Each Lesson Contains Picture Graphs
</em></strong></p>
<div class="center"><img class="imagesize" src="images\stringnames.gif" alt="The names of the 6 open strings on the guitar."></div>
<p>
Concise information is comprehensive, but to the point. This will ensure that lessons are not long winded, but short and easy to understand. Each lesson contains pictures and graphs that can be downloaded and printed which is essential for practice. Finally, each lesson will contain a video demonstration so you can see exactly how it’s done.
</p>
<p class="centertext"><strong><em>
Each Lesson Contains Video Demonstrations!
</em></strong></p>
<div class="center"><iframe class="videosize"src="https://drive.google.com/file/d/0Bw9gG4EOCeKTVGR6MUYzQ0lkZW8/preview"></iframe></div>
<p>
Guitar Uni was birthed out of pure passion to teach people who have an interest in learning the guitar but are unsure where to start. Our organized lessons will provide everything you need to learn, have fun and become an impressive guitarist as quickly, fast and easiest as possible.
</p>
<p>
Navigate to our online guitar lessons via the main navigation menu located at the top of the website or via lessons located on the right hand-side.
</p>
<p>
Thank you for visiting and enjoy your stay!
</p>
</div>
<hr>
<div class="footer">
fdg
</div>
</body></html>
    HTML:
    /* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
   margin: 0;
   padding: 0;
}
* { //specific settings applied to all elements
   background-repeat: no-repeat;
}
hr {
     display: none;
}
.header{
     padding: 0;
     margin: 1% auto;
     width: 50%;    
}
.navigation {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #F1F1F1;
     border: 1px solid #333333;
     border-left: none;
     border-right: none;
}
.nav1 {
      float: left;
}
.nav2{
     display: block;
     color: #000;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
}
.nav2:hover {
      background-color: #FFFFFF;
     color:#0645AD;
}
.logo{
     width: 600px;
     height: 234px;
     background-image: url("images/header.png");
}
.body{
     padding: 0;
     margin: 1% auto;
     width: 50%;
     height: 100px;
}
.body h1,h2,h3,h4,h5,h6{
     padding: 1em;
     padding-bottom: 5px;
     padding-left:15px;
     text-align: center;
}
.body p{
     padding:1em;
}
.body iframe{
     margin-top:1em;
}
.centertext{
     text-align:center;
     background-color:#FF0
}
p.centertext{
     padding:0;
}
.imagesize{
     width: 400px;
     height:300px;
}
  .videosize{
     width: 400px;
     height:300px;
}
.center{
     margin-left: 25%;
     margin-right: 25%;
}
.footer{
     padding: 0em;
     border-top:1px solid #333;
     margin: 1% auto;
     width: 50%;
     height: 50px;
     clear:both;
}
    Code (CSS):
     
    Web_Dev_Chris, Dec 13, 2016 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #2
    ketting00, Dec 13, 2016 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    First off, might be nice if you had indentation and comments on the BODY area so we can actually be sure all the DIV are being closed properly. Second, your LOGO (or more accurately the TEXT the logo represents) should probably be your H1, not some goofy informal "welcome" text nonsense. (I'm not a fan of "welcome" lines on sites, waste of space). Third, what's with the endless pointless classes for nothing in your menu? You've got a perfectly good class on the parent, why in blazes do all the like child tags need the exact same huffing class on each and every joe-blasted one of them?

    You don't really need the HR if the next content tag is a heading, that's a pointless redundancy... avoid using class names like "body" that are the same as tags or attributes, that can get confusing in the stylesheet... (see the idiocy some people do in menus of class="active" for the pinnacle of such derpitude)... don't use presentational classes like "center" instead say WHAT the element IS and WHY it's getting a style, NOT what that style is. (at that point you might as well go back to using HTML 3.2 with <center> and <font> tags!)... typically if you're using EM and STRONG at the same time on text you're doing something wrong (suspect that should be a H3), you have an invalid slash in the image path, you're missing spaces that are NOT optional between a number of your attributes...

    But as to the unexpected behavior:

    height: 100px;

    on your ".body" -- lose that line. The overflow default is "visible" which with that fixed height means the footer only sees "div.body" as 100px tall, hence the ride-up. AVOID declaring heights on things that shouldn't have fixed heights.
     
    deathshadow, Dec 14, 2016 IP
  4. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #4
    Haha thanks,

    I just realised it was the height, than read your message. Thank you for the feedback, I will improve.

    This site start out as wordpress (super slow) and I decided I'm going to code it all myself which will present a challenge to develop my already limited HTML and CSS knowledge.
     
    Web_Dev_Chris, Dec 15, 2016 IP
  5. Web_Dev_Chris

    Web_Dev_Chris Well-Known Member

    Messages:
    222
    Likes Received:
    12
    Best Answers:
    1
    Trophy Points:
    105
    #5
    Also, a quick question. Instead of a logo, I want text to display on a mobile device. Should I create a second stylesheet specifically for mobile which hides the header and displays the text and for my main website I will use the existing stylesheet to show the header but hide the text? Or can this all be done under the one stylesheet?

    Regards,
    Chris
     
    Web_Dev_Chris, Dec 15, 2016 IP
  6. badger_

    badger_ Greenhorn

    Messages:
    52
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    20
    #6
    In that case I'd do a Gilder/Levin image replacement, disabling the background for small displays. Check this code:

    
<h1>
    My Company<span></span>
</h1>
    Code (markup):
    
h1 {
        position:relative;  /* allow span to be absolute positioned over h1 */
}

h1 span { 
        position:absolute;
        top:0;
        left:0;
        width:300px;   /* logo width - REAL metric for IE */
        height:200px;   /* logo height - REAL metric for IE */
        background-image:url(images/h1logo.png);
}
    Code (markup):
    If you want to move the image you can use margins.

    It's convenient to have two versions of the logo in different sizes. I recommend you to follow this tutorial: http://cutcodedown.com/tutorial/css_tile_sheets
     
    Last edited: Dec 15, 2016
    badger_, Dec 15, 2016 IP