www.webdeveloper.com
Results 1 to 5 of 5

Thread: Side Menu

  1. #1
    Join Date
    Apr 2006
    Posts
    2

    Exclamation Side Menu

    Hi there, this could be somewhere on the main site, but I couldn't find it. Is there a way you can go about, making a side menu (similar to the one on the main site, with primers, tutorials etc) I'm sure there is, but I couldn't find the code or explanation in any of the tutorials, any help would be great. Like I said, I'm just trying to create a simple menu along the side of my web site with links to other areas. I don't even mind if it appears on all pages of the site, I really just need it on the main page. Thanks a lot

    Twitpin

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    a simple template

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Some page</title>
    <style type="text/css">
    <!--
    body {margin:0; padding:0; border:0;}
    h1 {clear:both; text-align:center;}
    #top	{padding:1em; border-bottom:2px dotted #555;}
    div#links {position:relative; top:25px; left:2px; width:150px; float:left; text-align:center;}
    	div#links a	{line-height:2.0em}
    	 div#links a:hover{line-height:1.9em; font-size:1.05em;}
    div#content{position:absolute; left:152px; width:70%; padding:1.5em 1em 2em 2em; border-left:2px dotted #555;}
    
    -->
    </style>
    </head>
    <body>
    <div id="top">
    <h1>Page Title</h1>
    </div>
    <div id="links">
    <h3 style="letter-spacing:0.8em;">Our Links</h3>
    <a href="#nogo">Link #1</a><br />
    <a href="#nogo">Link #2</a><br />
    <a href="#nogo">Link #3</a><br />
    <a href="#nogo">Link #4</a><br />
    <a href="#nogo">Link #5</a>
    </div>
    <div id="content">
    <h2>First Header on page</h2>
    <p><span title="L" class="shadow" style="float:left;color:darkslate; font-size:38px; line-height:30px; padding-top:4px; padding-right:1px; padding-left:13px; font-family:times">L</span>orem ipsum dolor sit amet,
    consectetuer adipiscing elit. Suspendisse egestas ultricies pede. 
    Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh 
    pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui 
    sed nunc congue tempus. 
    </p>
    
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
    Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
    volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
    dui ac libero fringilla nonummy.</p>
    
    
    <p style="text-align: justify;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
    Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
    volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
    dui ac libero fringilla nonummy.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
    Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
    volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
    dui ac libero fringilla nonummy.</p>
    <div style="clear:both;"></div>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
    Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
    volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
    dui ac libero fringilla nonummy.
    </p>
    
    <blockquote>
    <p>
    Maecenas ullamcorper sodales risus.
    Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
    mattis
    </p>
    </blockquote>
    <p>
    Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
    lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
    turpis at erat.
    </p>
    
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Apr 2006
    Posts
    2

    Angry More help please? :)

    Hi, alright, thanks a lot for the basic code... I'm wondering if there's a way that you can set the divisions up as more definite borders so that text goes to the next line when it hits the end of the division instead of bleeding into the other divisions. Thanks a lot

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Real text works that way. Your test text is probably bogus with no white space.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Feb 2006
    Location
    Ontario, CA
    Posts
    199

    Menu On Left

    I know that real programmers don't like those of us that use frames, but I believe in certain applications they can be very beneficial and my home page is made from frames. Take a look, it may give you some ideas. Good Luck.
    Thanks from . . . Matt @ Launchnet
    I check layouts on two 15" monitors, one set at 800 X 600 and the other at 1024X768. It sure is nice to use two monitors at the same time. Copy and paste from one screen to the other from two different pages.

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