Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation bar issues - image map? tables? divs?

    I'm a bit rusty on web design now since it's been a couple of years since I last touched a website, and I never got beyond the basics. Now, I'm redesigning a student group website as webmaster, and am running into some roadblocks.

    Here is the site: http://sustainability.stanford.edu/c.../about1112.php
    (see bottom of message for codes)

    Right now the menu is part of the banner image, but I have versions of the image with no text, or with text and menu separate, or with text omitted and separate. The tables are borrowed from the old website and have been tweaked to match the color scheme of the new banner. Using tables is a bit new to me, and they make sense for the most part, but have been giving me some problems (inserting the menu as a separate image under the banner messes up the size and shifts part of the table over).

    Originally, I naively assumed that it wouldn't be too painful to use an image map plus a drop down menu, but I soon discovered otherwise. The drop down is optional/would be nice, but my main priority now is for it to actually function haha.

    To make the links work, I was thinking of either

    -leaving the image as is and using an image map (though that isn't working at the moment either for some reason)- I'd prefer to find some way to keep the menu as an image since it looks a bit nicer, but am willing to take out the text and

    -splitting the image so it can more easily be a drop down menu (tried this too and failed- where in the code should it go? new table?)

    -overhauling the entire css and html entirely and switch to divs, starting again from there

    Any help will really be appreciated! Thanks!

    -Christina

    Header (impt for nav menu)
    Code:
    <link rel='stylesheet' type='text/css' href='csstest.css' />
    <body>
    
    <table id="wrapper" cellspacing="0" cellpadding="0"  valign="top">
           <tr id="banner">
     <td id="banner" colspan="3">
     
    <a href="header.map"><img src='ssshead1112.jpg' ismap usemap="#ssshead1112" border="0"></a>
    <map name="ssshead1112">
    
    <area shape="rect" coords="15, 216, 160, 241" href='index.php' alt="Home">
    <area shape="rect" coords="161, 216, 278, 241" href="http://sustainability.stanford.edu/cgi-bin/about1112.php">
    													
    
    </map>	
    
          
     </td> </tr>
    Css
    Code:
     /* Layout for sustainability.stanford.edu design by Christina Zhou summer 2011, Lucas Johnson Summer 2009 */
    
    body{
    /*url('strip.jpg') repeat-x scroll top left;*/margin: 0;
    	margin-top: 0px;
    	font: normal 100% georgia;
    		background-color:#0f1f14
    }
    
    a {text-decoration:none}
    img {border:0}
    /*Table below the banner*/
    table#wrapper {
        margin-left:auto;
        margin-right:auto;
        width:900px;
        border:0px solid #000000;
        border-top:0px;
        background:#d9eae1 url("images/treebackground.jpg") no-repeat scroll bottom right;
    }
    
    table#wrapper td#menu {
    	margin-left:auto;
        margin-right:auto;
        width:900px;
        border:0px solid #000000;
        border-top:0px;
    
    }
    table#wrapper td#main {
        width:100%;
        height:auto;
        vertical-align:top;
        margin-top:0;
        padding:0px 0px 0px 0px
    }
    table#wrapper td#bodyindex {
        width:100%;
        height:auto;
        vertical-align: top
        margin-top:0;
        padding:0px 10px 0px 10px;
        border:0px 0px 0px 0px
    }
    
    table#wrapper td#left {
        width:0px;
        background-color:#28431A;
        vertical-align:top;
        height:auto;
        margin-top:0;
        border-right:1px solid #000000
    }
    
    
    .calendar {
        width:325px;
        height:200px;
        vertical-align:top;
        padding:10px;
        font-size: .9em;
        text-align:left
    }
    
    
    .calendar a {
        color:#009900}
    .calendar a:hover {
        color:#990000;
        text-decoration:underline
    }
    iframe#form {
        padding:20px;
        width:605px;
        height:1642px
    }
    
    
    
    
    /*Table for general content (not nav or banner)*/
    table#inner {
        vertical-align:top;
        margin-top:0;
        background:transparent
    }
    
    table#inner td#body {
        background: ;
        padding:0px 10px 0px 10px
    }
    
    /*Table for splitting content into collumns*/
    table#fraction {
        border:0;
        padding:0;
        width:100%;
        vertical-align:top
    }
    table#wrapper table#fraction td.half {
        width:50%;
        vertical-align:top;
        padding:0px 8px 0px 8px
    }
    
    
    
    /*Table of Officers and photos
    table.officers {
        padding:0px;
        border:0px;
        margin:0px}
    table.officers img {
        width:100px;
        height:150px}
    table.officers img#pres {
        width:200px;
        height:150px}
    */
    
    
    .left {
        text-align:left}
    .skinny {
        width:400px}
    .top {
        vertical-align:top}
    .middle {
        text-align:center}
    
    
    
    /*Banner - this is for the site's banner image at the top of each webpage */
    #banner img {
        width:1024;
        height:100%;
        background: no-repeat fixed top;
        margin:none;
        border-bottom:0px;
    }
    
    
    
    /*Navigation Table*/
    table#nav {
        width:150px;
    }
    table#nav tr {
        text-align:left;
        height:2em}
    table#nav a {
        color:#CCC;
        border-bottom:0px solid #000000;
        background-color:#28431A;
        display:block;
        padding:10px 10px 10px 20px;
        font-family:georgia
    }
    table#nav a:hover {
        color:#000;
        background-color:#28431A;
        border-bottom:1px solid #000000;
        }
    
    
    
    /*Main Body*/
    .content {
        background:transparent;
        padding:0px 0px 0px 0px
    }
    .content h1 {
        font-size:2em;
        color:#28431A;
        border-bottom:1px solid #28431A;
        padding: 0px 0px 0px 20px;
        font-family:georgia
    }
    .content h1 a {
        font-size:1em;
        color:#144000;
        padding:0px 0px 0px 0px}
    .content h1 a:hover {
        color:#00CC00;
        text-decoration:none
    }
    .content h2 {
        font-size:1.1em;
        color:#663333;
        border-top:1px dotted #663333;
        padding: 10px 5px 0px 10px;
        font-family:georgia
    }
    .content h2 a{
        color:#663333}
    .content h2 a:hover {
        color:#28431A;
    }
    .content h3 {
        font-size:1em;
        color:#28431A;
        padding:5px 5px 5px 10px;
        font-family:georgia
    }
    .content h3 a{
        color:#28431A}
    .content h3 a:hover {
        color:#009900}
    .content h4 {
        color:#003300;
        font-size:1.05em;
        padding:0px 0px 0px 20px
    }
    .content p {
        color:#222;
        font-size:10.8pt;
        padding: 0px 15px 8px 20px;
        text-align:top left;
    }
    .content dl {
        font-size:10.8pt;
        padding: 0px 15px 8px 20px
    }
    .content a {
        color:#009900}
    .content a:hover {
        color:#990000;
        text-decoration:underline
    }
    .content img {
        width:180px;
        float:right;
        padding:0px 5px 20px 5px
    }
    
    .clear {
        clear:both
    }
    #minibanner {
        width:440px;
        padding:0px 15px 10px 5px}
    #miniobject {
        padding:0px 0px 0px 35px}
    
    
    
    
    
    
    /*Foot*/
    #foot {
        width:100%;
        background-color:#666;
        padding:0}
    #foot p {
        color:#DDD;
        font:normal;
        font-size:10pt;
        text-align:center}
    #foot a {
        color:#000000;
        font:normal;
        font-size:10pt
    }
    #foot a:hover {
        color:#990000;
        text-decoration:underline
    }
    About
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel='icon' href='favicon.ico' type='image/x-icon' />
    <link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
    <title>S S S - About</title>
    <?php include "header1112.php"; ?>
    
    <div id="content">
    
    <div id="content-main">
        some text </div>
        
    	<div id="content-right">calendar
    	
    </div>
    <?php include "footer.php"; ?>
    Last edited by czhou5; 09-05-2011 at 08:55 AM. Reason: adding code

  • #2
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I think you will find that most people will suggest that you entirely use div's instead of tables for a page layout. With div's, you'll have more control over what goes where. Especially when it comes to editing.

    It may seem like a lot of work now, but really, if you switch to div's, things will be easier later... well, once you get a hang on how to use the positioning systems, (fixed, relative, absolute). I'm only just coming to full terms with them myself however once you play around with them a little and understand how they work, it makes life easier.

    Also, although I haven't gone through your code in any detail... I can tell you that if used div's you would be able to get the effect you want with the menu.
    You could break them up into separate pictures however with the divs, it would also be possible to keep them part of the picture and still have a clickable menu. That would mean overlaying a few div's ontop of each other though and kinda complicates things a lot more than if you just had the menu images separate from the top picture.
    Last edited by Asher01; 09-05-2011 at 12:42 PM.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a ton! Working on the divs now (http://sustainability.stanford.edu/cgi-bin/divtest.php). Do you have any tips for centering everything? I'm slowly playing with different parts of the code, but I'm wondering if there is something I am missing.

  • #4
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    You can center images vertically within a paragraph via using vertical-align:center

    However I assume it's actually the div's you want centered?

    One way I occasionally use to center div's within other divs is something like this:

    Code:
    .centered
    {
    width:90%;
    margin-left:auto;
    margin-right:auto;
    }
    Basically, that will make the div 90% the width of the div it is inside and automatically divide the remaining area between the two margins.
    This is good for liquid layouts.... however I seem to come across problems every now and then with percentages.

    The other way would be to manually define a padding and/or margin.

    Consider this example:

    Code:
    .container
    {
    width:100px;
    min-height:100px;
    margin:0;
    border:0;
    padding-top:50px;
    padding-right:50px;
    padding-bottom:50px;
    padding-left:50px;
    background-color:#000000;
    }
    
    .content
    {
    width:100px;
    height:100px;
    border:none;
    padding:0;
    background-color:#FFFFFF;
    }
    Just remember, whatever padding or margin you allocate an element to have will add to it's total size in width or height. So #container is actually 200px X 200px.

    If you are having trouble with a particular situation you need centering, feel free to post back and ask with your code and what you need done.

    You can also read how positioning using padding and margins work here:

    http://www.w3schools.com/css/css_margin.asp
    http://www.w3schools.com/css/css_padding.asp

    This also may be helpful:

    http://www.w3schools.com/css/css_positioning.asp
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”


  •  

    Posting Permissions

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