www.webdeveloper.com
Results 1 to 15 of 15

Thread: Need help with page structure/menus!!!

  1. #1
    Join Date
    Aug 2012
    Posts
    10

    Need help with page structure/menus!!!

    Hi. So I'm just starting to learn html/css/javascript, got a decent understanding of the different tags and what not. But the best way to learn is to get busy coding, which is what I'm doing. Bringing me here....

    Okay so what I'm trying to achieve here is: a logo(just my name basically) on the upper left hand corner of the page, a horizontal nav at the top/right portion of the screen listing basic stuff: home, about, interests, contact, etc... Then have both of them wrapped up in say a "header" div. Reason I want to do that is b/c I want that area containing my logo+nav to have a black background, white letters, and a white border at the bottom so the "gallery" nav can line up underneath it. This nav is made up of images that line up one after another but each is a link. Like so http://www.nerval.ch/galerie.php, now I don't need any effects, just keeping it basic with just the image+some text( a heading or a paragraph). Now here's what I got so far but bear with me cause my code is all over the place. You could say I'm drunk coding but that's b/c I'm just starting out. Ofcourse any help is kindly appreciate!!! Here's the code:

    The html
    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
          <link href="screens.css" rel="stylesheet" type="text/css"/>
      </head>
      
      <body>
       <div id="content"></div>  	
         <div id="header">
    	  
    	<div id="logo">
    	  <p>ABC Designs</p>
    	</div>		
        
        
        <!-- NAVIGATION -->
        <div id="topnav">
         <ul>
    		 <li><a href="home.html">Home</a></li>
    		 <li><a href="about.html">About</a></li>
    		 <li><a href="interests.html">Work</a></li>
    		 <li><a href="projects.html">Projects</a></li>
    		 <li><a href="contact.html">Contact</a></li>
         </ul>
        </div> <!-- end of topnav -->
        </div> <!--- end of header -->
        
        <!-- Gallery -->
        <div id="gallery">
         <ul>
           <li style="background-image: url('Rick.jpg')" class="screens" "background-image: no-repeat" >Rick</li>
           <li style="background-image: url('effiel tower.jpg')" class="screens">Eiffel</li>             
           <li style="background-image: url('streetblock.jpg')" class="screens">Street</li>
           <li style="background-image: url('99percent.jpg')" class="screens">99%</li>
         </ul> 
       </div> <!-- end of gallery -->
        
                    
        </div> <!-- end of content -->             
                    
                 
      </body> 
         </html>

    Here's the CSS:
    Code:
    #header {
    width: 1000px;
    height: 1200px;
    border: thin solid green;
    background-color: black;
    }
    
    #topnav {
    top: 0px;
    left: 1000px;
    position: absolute;
    width:100%;
    height:240px;
    background-color: white;
    
    }
    
    #topnav ul{
    margin:0px; 
    padding:0px;
    }
    
    #topnav ul li {
          display:block; 
          height:240px; 
          float:left; 
          list-style:none; 
          margin-left:15px;
    }
    
    #topnav li a {
    color: black; 
    text-decoration:none;
    }
    
    #topnav li a:hover {
    text-decoration:underline;
    }
    
    #gallery {
    top: 150px;
    left: 0px;
    position: absolute;
    width:100%;
    height:2400px;
    background-color: white;
    background-image: no-repeat;
    }
    
    #gallery ul{
    margin: 0px; 
    padding: 0px;
    border: 0px;
    }
    
    #gallery ul li {
          display:block; 
          height:2400px; 
          float: center; 
          list-style: none; 
          margin-left:0px;
    }
    here's a screenshot of what I got so far http://i48.tinypic.com/2n7pdlv.jpg Obviosly not what I had in mind. Got the image repeating, a black box at the top, can't see the logo area b/c said box is blocking view, can't move what I want to move, just a headache. Please let me know what I'd doing wrong. I'm having a hard time making float, absolute, relative positionings gel well together. Also I'm I using too mant divs ? Thanks.

  2. #2
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    If you are learning, the easiest way by far is to download a template that you like and then start to modify it. Find one that has a layout you like, then modify the colors, images, etc.

    There is a site with a zillion free open source HTML templates you can browse, select and use for free.

    Open Source Web Designs

  3. #3
    Join Date
    Aug 2012
    Posts
    10
    Thanks 4 the link, I've bookmarked. But the reason I posted question is to find out what I'm doing wrong here on a structural level. why is there just a black box there instead of a nice header like I wanted? Why don't I have a gallery of 5 long image columns that are links themselves? I'm I not div-ing properly? do I have my floats, absolute stuff mixed up? What exactly I am doing wrong and how do I solve it?

  4. #4
    Join Date
    Aug 2012
    Posts
    4
    I think you've got a problem after the body:

    <body>
    <div id="content"></div>

    Remove that div and check what's going to happen

  5. #5
    Join Date
    Aug 2012
    Posts
    10
    that's not doing anything.

  6. #6
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Please post a URL link to your web page - it is so much easier to diagnose problems that way.

    Floating (boxes, containers, et al.) can be confusing. Here is a little example I made up of one usage: Flexible Float Box Left Layout

    The page which I give a link to in my signature block below uses this methodology.

    JP
    Last edited by polyglot; 08-21-2012 at 02:01 PM. Reason: added information
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  7. #7
    Join Date
    Aug 2012
    Posts
    10
    polyglot, I don't have a website up, this is all code I have stored locally on my computer. Its a training exercise I'm working on for learning purposes that's why I put up the exact code I have and a screenshot. Thanks 4 the link though.

  8. #8
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Quote Originally Posted by Insomniac Coder View Post
    polyglot, I don't have a website up, this is all code I have stored locally on my computer. Its a training exercise I'm working on for learning purposes that's why I put up the exact code I have and a screenshot. Thanks 4 the link though.
    Ok, I understand. I am a dedicated Accessibility and Usability Developer, so bear that in mind as I offer a few comments:

    1. sans-serif font text is so much easier to read than serifed font text (but not necessarily for headers) especially for people with diminished vision (like me), that I would give that consideration for inclusion in your Style Sheet.

    2. Avoid small text anywhere (for the same reasons as above) - not less than 80&#37;.

    3. Keep your layout flexible - avoid px for sizing as much as possible -- use em and % for such things as padding and margins instead.

    4. It is always desirable to use an off-white or pale pastel background for pages -- black text on stark white plays havoc with your eyes after a while.

    5. Try and keep your text word count per line at around 20 words in your box layouts -- significantly greater word count is tiring on the eyes lo read.

    6. And always Validate your HTML Markup and CSS coding .......... W3C "Why Validate" Document

    JP
    Last edited by polyglot; 08-21-2012 at 03:37 PM. Reason: added information
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  9. #9
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    If you don't have an URL yet, post the snippet that is bothering you here:

    http://jsfiddle.net


    Put any JavaScript in the box that says 'JavaScript'
    Put your CSS in the CSS box
    HTML goes in the top left...

    Click "SAVE", then copy the URL that is generated.
    Post it here...

    Voila!

  10. #10
    Join Date
    Mar 2012
    Posts
    1,361
    I haven't read all your code, but I can see the following issues:

    1. The container div is doing nothing.

    2. The header div is 1000px wide, which is wider than many screens (particularly mobiles).

    3. The header div is 1200px high, leaving no space for anything to be displayed below it (on most screens). This should be 150px.

    4. The topnav div is declared inside the header but has position: absolute; so will ignore header.

    5. The topnav has a left offset of 1000px, so will not display on many screens.

    6. The gallery is declared position: absolute; top: 150px; leaving only 150px above for header. So why declare the header to be height: 1200px; ???

    7. The gallery has height: 2400px;, so will not fit on most screens (how big a screen are you using???).

    Basically, your CSS is crap. You should do something like:

    1. For container div, move the </div> to just before </body> and use CSS settings:
    max-width: 1000px; (or whatever), to set the max width of the display area.
    height: 100&#37;; to fill the screen vertically.
    margin: 0 auto 0 auto; to center the display area on the screen.

    2. For the header div amend CSS:
    width: 100% (instead of 1000px).
    height: 150px; (instead of 1200px).

    3. For the topnav div amend CSS:
    float: right; instead of "left:1000px; position: absolute;" to place the topnav on the right inside the header.
    max-width: 600px; (or whatever) - to leave space to the left.

    4. For the gallery div amend CSS:
    max-height: 1200px; (or whatever) instead of "position: absolute; height: 2400px;".

    That is not pefect, but should get the different divs displaying on most screens. You can play about with it from there...

  11. #11
    Join Date
    Mar 2012
    Posts
    1,361
    Just noticed, you've got "display: block;" in the nav and gallery divs. I suspect that you want "display: inline" or "display: inline-block".

  12. #12
    Join Date
    Aug 2012
    Posts
    10
    Here's what I got right now: http://jsfiddle.net/EcwWf/9/

    jedaisoul, thanks for the tips, I'll apply them.

  13. #13
    Join Date
    Aug 2012
    Posts
    10
    Okay, I made a wireframe of what I'm trying to achieve. Here it is: http://i50.tinypic.com/33nwwmg.png Not perfect but it gets the idea across. Now my problem is I can't make the images to line up like that underneath the header area. I'm thinking if I make the header area absolute, I can float the gallery underneath it ?? Also the reason I made the page's dimension so big is I wanted to see how much space the images were gonna take up, then I figured I could scale it down. Guess that didn't work out. I'm frustrated right now but I suppose it comes with the territory.

  14. #14
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    You need to put the upper image in a "DIV" that takes up the entire top.
    Then after that, make an empty div with the style "Clear:both", then the bottom divs using background images.

    Re-inventing the wheel is kind of difficult if you have not gotten a few menu builds under your belt.

    You can perhaps find an existing code and modify it here:
    http://www.dynamicdrive.com/dynamicindex1/

    Or go with a jQuery menu which can do a lot of cool stuff:
    http://apycom.com/

    Or...
    http://www.1stwebdesigner.com/css/38...enu-solutions/

    Here is an expanding image menu using jQuery and CSS that is sort of like what you are attempting, but far more advanced and it will be easier for you to modify this than to re-invent anything that comes even close:
    DEMO: http://tympanus.net/Tutorials/ExpandingImageMenu/
    SOURCE: http://tympanus.net/codrops/2011/03/...ng-image-menu/

    Good luck!

  15. #15
    Join Date
    Aug 2012
    Posts
    10
    Hey thanks alot donatello, that's more or less what I'm looking for. Also you're absolutely right, I need to learn more css and jquery(which I'm studying now) before I start doing complex stuff. You know what, I'll just start making some simple pages with menus and contact forms before I take a dive into the deep end of the pool. I just don't know enough to make it happen right now.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles