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.

Fixing Section Layout (html5)

Discussion in 'HTML & Website Design' started by EchoedTruth, Jan 30, 2013.

0
  1. #1
    Hey everyone,

    I have been scouring the internet trying to solve this layout problem but I haven't found a solution - I just want my article/main content section to not go under or above the nav bar. Here is my code:

    Edit: Using CMNS's recommendation I added the <float> attribute to my article, which kept it from going behind the nav section, but instead moved it below it instead of them lining up properly. 
    
 
 
<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <title> My Magical World </title>
     
      <style>
 
  html, body { margin: 0px; padding: 0px; border: 0px }
  body { background-color: silver }
  article { margin: 20px; padding: 15px; border: 2px solid black;  }
  footer {  clear:both; background-color: red; border:5px solid black; text-align:center;  }
 
  .b { border:5px solid black; text-align: center; background-color: red; }
  .field { border:2px solid black; text-align: center; background-color: red; }
  .navlink { border:1px solid #FFF; }
    </style>
    </head>
 
  <body>
 
<div id="content-wrapper"> <!-- Content Wrapper Start -->
 
      <header class="b">
 
      <h1>
 
        Hello World!
 
      </h1>
 
      <h2>
 
      Welcome to a magic world
 
      </h2>
 
    </header>
 
<section id="main-content-area"> <!-- Section Main Content Area Start -->
 
 
    <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; ">
   
      <fieldset class="field"><a href="BTSMain.html"><b>Home</b> </a></fieldset>
      <fieldset class="field"><a href="BTSServices.html"><b>Services We Offer</b></a></fieldset>
      <fieldset class="field"><a href="BTSAboutUs.html"><b>Request Service</b></a></fieldset>
      <fieldset class="field"><a href="BTSTestPage.html"><b>Contact Us</b></a></fieldset>
      <fieldset class="field"><a href="BTSTestPage2.html"><b>About BTS</b></a></fieldset>
     
    </nav>
   
 
    <article style="float: left">
 
      My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss........... Lllaaaammmmmmmmaaaaaaassssssssssssssss
 
      <h4> <b> Llamas...... </b> </h4>
 
    </article>
   
 
 
</section><!-- # Section Main Content Area End -->
 
    <footer>
 
    <h1> <a href="BTSAboutUs.html"><b>About My World </b></h1>
 
    </footer>
 
</div><!-- # Content Wrapper End -->
 
  </body>
 
 
 
</html>
    HTML:

    Thanks!
     
    Solved! View solution.
    Last edited: Jan 30, 2013
    EchoedTruth, Jan 30, 2013 IP
  2. CMNS

    CMNS Well-Known Member

    Messages:
    95
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    100
    #2
    Article: either make the <article> float, or add left margin to it.
    Footer: http://ryanfait.com/resources/footer-stick-to-bottom-of-page
     
    CMNS, Jan 30, 2013 IP
    TwitTwit likes this.
  3. EchoedTruth

    EchoedTruth Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks for the quick reply! The sticky footer website = great. The <article> float thing seemed to work, but when I added more text it ended up moving my whole article beneath my nav box. I tried pasting the <article> section above the <nav> but it just moved the whole thing above it. For some reason I can't get my nav and article to stay next to each other: 


    <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title> My Magical World </title>
       
        <style>
 
  html, body { margin: 0px; padding: 0px; border: 0px }
  body { background-color: silver }
  article { margin: 20px; padding: 15px; border: 2px solid black;  }
  footer {  clear:both; background-color: red; border:5px solid black; text-align:center;  }
 
  .b { border:5px solid black; text-align: center; background-color: red; }
  .field { border:2px solid black; text-align: center; background-color: red; }
  .navlink { border:1px solid #FFF; }
    </style>
    </head>
   
  <body>
 
<div id="content-wrapper"> <!-- Content Wrapper Start -->
 
      <header class="b">
 
      <h1>
 
        Hello World!
 
      </h1>
 
      <h2>
 
      Welcome to a magic world
 
      </h2>
 
    </header>
 
<section id="main-content-area"> <!-- Section Main Content Area Start -->
 
 
    <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; ">
   
      <fieldset class="field"><a href="BTSMain.html"><b>Home</b> </a></fieldset>
      <fieldset class="field"><a href="BTSServices.html"><b>Services We Offer</b></a></fieldset>
      <fieldset class="field"><a href="BTSAboutUs.html"><b>Request Service</b></a></fieldset>
      <fieldset class="field"><a href="BTSTestPage.html"><b>Contact Us</b></a></fieldset>
      <fieldset class="field"><a href="BTSTestPage2.html"><b>About BTS</b></a></fieldset>
       
    </nav>
   
 
    <article style="float: left">
 
      My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss........... Lllaaaammmmmmmmaaaaaaassssssssssssssss
 
      <h4> <b> Llamas...... </b> </h4>
 
    </article>
   
 
 
</section><!-- # Section Main Content Area End -->
 
    <footer>
 
    <h1> <a href="BTSAboutUs.html"><b>About My World </b></h1>
 
    </footer>
 
</div><!-- # Content Wrapper End -->
 
  </body>
   
   
   
</html>
    HTML:
    Thanks :D
     
    EchoedTruth, Jan 30, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Ok, first off, lose the stupid malfing HTML 5 bull... it offers no real world improvements apart from pointless redundancies and code bloat.

    That said, even as HTML 5 your coding methodology is broken. STOP wasting time inlining CSS (I still say STYLE should be obsolete as a tag and deprecated as an attribute)... get that in a separate file so you can edit the markup and style side-by-side and work from the start where they belong.

    You've got headings, why do you need HEADER.... you don't seem to actually have two separate headings -- since headings indicate the start of a section of the page (higher numbered headings indicating the start of a subsection of the lower numbered one preceeding it) why the two headings back to back? (should probably be a SMALL inside the H1)... and of course since they mark the beginnings of sectiosn that means you don't need SECTION either.

    I have NO CLUE what the blue blazes makes you think anchors are a fieldset or why you feel the need to say that 'if this was printed text it would be bold' in the markup. you have a menu -- a menu is a list of choices, typically not in any particular order; that's a UL.

    Also no clue why you'd put a heading at the bottom of an 'article' as a H4 since it's then not a heading NOR is it proper since you've got no H3 before it... and then of course there's the HTML 5 "go ahead and use multiple H1" nonsense that breaks document structure.

    I get the feeling you are choosing your tags based on what they look like instead of what they mean -- which means you are choosing the wrong tags for just about everything... I've no clue what you are actually trying to accomplish, but I'd suggest you learn more about what the tags MEAN before attempting to use them.
     
    deathshadow, Jan 30, 2013 IP
  5. EchoedTruth

    EchoedTruth Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    I'm learning as I go along. I've gotten a lot of conflicting information depending on where I go. The fieldset thing was what someone told me to use to put borders around my nav links. The header tags and such are what I used to change the layout/font size etc of the sections. Like I said, I'm a newbie here.
     
    EchoedTruth, Jan 30, 2013 IP
  6. #6
    Ok, any time someone tells you to use a tag becuase of it's APPEARANCE, they have no clue what they are talking about!.

    The purpose of your markup should be to say what things ARE. Anything that says what it looks like has NO BUSINESS in your HTML, as that limits you to just ONE media target. The entire point of HTML is device neutral delivery of content -- you say what things are so the user agent (browser) can best determine how to show it. You want to customize that appearance for a specific target -- like screen, by screen width, print, handheld, aural -- that's CSS' job.

    It's why presentational tags and attributes were deprecated in 4 Strict (many of which had no business being added to 3.2 in the first place), and it's the cornerstone of the sane site building methodologies of semantic markup, separation of presentation from content and progressive enhancement.

    You'll find I say this a lot -- used to be my signature here for a few years: "If you are choosing your tags based on the default appearance, you are choosing the wrong tags for the wrong reasons".

    You should be choosing your tags based on what things ARE and to build your document structure. See my response in your other thread where I talk about heading use -- and why HTML 5's HEADING is pointless redundant bloat, HGROUP is some of the dumbest nonsensical garbage I've ever seen, and why 90% of the time someone uses a h2 for a tagline they're "doing it all wrong" (since it's not actually a separate heading from the H1 preceding it). Headings and HR to indicate starts of sections, paragraph tags around paragraphs, lists around lists... tables around tabular data... STRONG and EM when emphasizing, B and I when it would be bold or italic in written speech -- <strong>THERE IS A DIFFERENCE!</strong> <b>Moby Dick</b>

    Probably why I keep pointing people at what I consider the best (even if it's old) HTML 4 reference:
    http://htmlhelp.com/reference/html40/

    Since it actually talks about the MEANINGS of the tags. Learn the tags, learn what they mean -- IGNORE the default appearance as that is NOT what they mean and NOT how HTML is supposed to be written. Again, you want a certain appearance for a certain target like screen, that's CSS' job. PREFERABLY in an external file instead of inlined in the code since again, that's putting presentation in the markup.
     
    deathshadow, Jan 30, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Actually, lemme use your menu as an example of the difference between semantics and separation of presentation from content to what you were doing... I'll also show how you should NOT be wasting classes (like class="field") when there's a perfectly good parent wrapper.

    You have to ask the question "What is a menu?" -- it's a list of choices, in this case in no particular order. That's a unordered list -- we have a tag for that -- UL. Each thing inside the list is a separate item.... List Item... LI

    If I was writing that same menu, my markup would be this:
    
<ul id="mainMenu">
	<li><a href="BTSMain.html">Home</a></li>
	<li><a href="BTSServices.html">Services We Offer</a></li>
	<li><a href="BTSAboutUs.html">Request Service</a></li>
	<li><a href="BTSTestPage.html">Contact Us</a></li>
	<li><a href="BTSTestPage2.html">About BTS</a></li>
</ul>
    Code (markup):
    EVERYTHING else you were trying to do there I'd have in my CSS.

    
/* assumes a reset is in use */
#mainMenu {
	list-style:none; /* we don't want bullets */
	text-align:center;
	padding:0.5em;
	background:#F00;
	border:1px solid #000;
}

#mainMenu li {
	display:inline; /* strips formatting off LI, helps make IE 7+8 behave */
}

#mainMenu a {
	display:block; /* puts them each on their own line and accept dimensions */
	padding:0.5em;
	font-weight:bold;
	border:1px solid #000;
}
    Code (markup):
    You want a border on an element, you add it in the CSS. You want to make text bold that is not receiving "more emphasis" and isn't something like a book title or company name, you add it in the CSS.

    See what I'm saying?
     
    Last edited: Jan 30, 2013
    deathshadow, Jan 30, 2013 IP
  8. EchoedTruth

    EchoedTruth Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #8
    That makes it much more clear to me, thank you! I feel like I have to start over from the beginning now though... kind of depressing. :(
     
    EchoedTruth, Jan 30, 2013 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Don't feel too bad -- we all started out there. Looking back I often wish someone in the first three to four years I was making websites had come along and slapped me with a wet fish, showing me these techniques.
     
    deathshadow, Jan 30, 2013 IP