23 replies [Last post]
soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

Hi,
i am new to CSS. I would like to create the menu tables like thw ones on http://www.msn.com and http://www.yahoo.com and the ones on the right of the forum menu before this page - members panel, users panel, tools & tips. Anyone have the code or script please.

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

small menu tables, how?

Have you tried looking at the code of the sites you want to emulate?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jlhaslip
Offline
Enthusiast
Last seen: 10 years 26 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

Re: small menu tables, how?

soulman99 wrote:
Hi,
i am new to CSS. I would like to create the menu tables like thw ones on http://www.msn.com and http://www.yahoo.com and the ones on the right of the forum menu before this page - members panel, users panel, tools & tips. Anyone have the code or script please.

Thanks

Sort of like this?

click here.

Email me and I'll send the code.

I'm having a good day...so far.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

small menu tables, how?

You might want to check the validity of the markup before using.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jlhaslip
Offline
Enthusiast
Last seen: 10 years 26 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

small menu tables, how?

yup, good catch. I'll fix it before I pass it around.

I'm having a good day...so far.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

small menu tables, how?

Hey Jim, any reason you can't post the code here for others to benefit from too?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jlhaslip
Offline
Enthusiast
Last seen: 10 years 26 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

small menu tables, how?

First of all, it is now validated. It wasn't before.
Secondly, it is a php script and I didn't think the folks on the css forum would like it, so I was reluctant to post it here.

This is a php script which reads the names of several folders from a flat-file named 'flat_file_data.txt'. It then builds a 'sidebar' by reading the files inside each folder to build a list of links using the first h3 tag found in the file. The folder name becomes a 'heading' for each seperate list of links, but in order to validate, the 'heading' is just another item in the unordered list. The validator didn't like the heading tag I had. But whatever, if anyone can use this code, go ahead.
It may look a little rough to some of the members who are more familiar with php than I am, and I'm sure there are ways to better ways to optimize this script, so if you have any ideas how to do that, please post them here.
Next step is to add some error checking to confirm the file is an acceptable type (ie: html or php) and the file in fact contains an h3 tag, etc. It shouldn't be difficult to adjust the code to find and use the 'title' tags, either, if you preferred using it. The css is embedded, but could be linked, also.
It shouldn't be a difficult php script to adjust to your requirements. Enjoy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Create Link List from Folder list read as array -- Sidebar Creator 04</title> 
<style type="text/css">
div#sidebar { 
background-color: #66cc66;
width:30%;
}
h4 { margin-top:0;
margin-bottom: 0;}
ul {list-style: none;}
 li	{
display: block;
width: 100%;
font-weight: bold;
margin-left: -2em;
margin-top: 0;
margin-bottom: 0;
}
a:link,  a:visited {
color: black;
background-color: # 66cc66;
}
a:hover {
background-color: #6666cc;
color: white;
}
</style>
</head>
<body>
<div id="wrapper">
<?php

print '<div id="sidebar">'; 
$folder_file ='flat_file_data.txt';     // name of flat file to read
$fp = fopen($folder_file,'r');        // open flat file for reading
if (!$fp) {print 'ERROR: Unable to open file'; echo '<br />';echo $folder_file;echo '<br />';exit;}// error if no handle found for flat file
$line= fread($fp,1024); // increase this length if required
$f_array=explode("\n",$line);
$folder_key=0;
//<!-- while loop start -->
while ($f_array[$folder_key]) { ;
$fileCount = 0;
$p_folder=strip_tags(nl2br($f_array[$folder_key])); // for security
// print to begin un-ordered list using folder name as heading and as div id
print '<div id="'.$p_folder.'">';
print '<ul>';
print '<li>'.$p_folder.'</li>';
$folder = $p_folder.'/';
if ($handle = opendir($folder)) {
 	while (false !== ($file = readdir($handle))) { 
	if ($file != "." && $file != "..")  {
            $filename =$_SERVER['DOC_ROOT'].$folder.$file;
            $fp = fopen($filename, "r");
            $contents = fread($fp, filesize($filename)); 
            $pos1 = strpos($contents,"<h3>");
            $pos2 = strpos($contents,"</h3>");
            $str_length =  $pos2 - $pos1;
            $title = substr($contents,$pos1+4,$str_length-4); // adjust these variables to account for the 'tag' length' used
            $title_array[] = $title;
            fclose($fp);
            $file_array[]= $file;
            $fileCount++;
            }         } } closedir($handle);
 if ($fileCount > 0) {
           $iterator = 0;
           while($title_array[$iterator])  {
           $file = substr($file_array[$iterator], 0, (strlen($file_array[$iterator]))); 
		         print '<li><a href="'.$folder.$file.'">'.$title_array[$iterator].'</a></li>';
 		       $iterator ++;  }  
unset($file_array); 
unset($title_array); }
print '</ul>';
print '</div>';
$folder_key++;
}  
//-- end while loop -->
//fclose($fp);  // close flat file
print '</div>';
  ?> 
<!-- print bottom images and remarks here -->
</div>
</body>
</html>

Sample contents of the 'flat_file_data.txt' file:

artfold 
artfold1
artfold2
artfold3

Sample contents of a file within a folder:

<head></head>
<title> Artfold -- Article 1</title>
<body>
<h3>An article name</h3>
A line in a file goes here<br />
A line in a file goes here<br />
A line in a file goes here<br />
A line in a file goes here<br />
</body>

I'm having a good day...so far.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

small menu tables, how?

I think you might've actually taken this out of the realms of what the original question was about. You've provided code that creates content whereas the original question was about how you'd style that content.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jlhaslip
Offline
Enthusiast
Last seen: 10 years 26 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

small menu tables, how?

You might be right, Tyssen. Let's wait and see what the original poster wanted. My impression was that they were looking for a script to create the list. The styling for the script can be modified using some css and maybe a tweak to the code to seperate the un-ordered lists into several divs.

I'm having a good day...so far.

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

Thanks for the reply guys,
i shall try and get back to you

Thanks

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

jlhaslip wrote:
You might be right, Tyssen. Let's wait and see what the original poster wanted. My impression was that they were looking for a script to create the list. The styling for the script can be modified using some css and maybe a tweak to the code to seperate the un-ordered lists into several divs.

Thanks for the reply guys.
I think there is abit of confusion, I am looking for the code that will allow me to create menu boxes like the ones on www.msn.com and www.yahoo.com with a box heading and menu underneath with borders, where surfers can click on any topic in the menu box that will lead to another page.

Another query is that, if i want to update a link on my menu or navigation (and header and footer) will it be update in all pages in CSS, or do i have to use php.

Thanks

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

small menu tables, how?

soulman99 wrote:
Another query is that, if i want to update a link on my menu or navigation (and header and footer) will it be update in all pages in CSS, or do i have to use php.

I think you may be confusing what CSS actually is. CSS is the styling or presentation of your HTML content. Its independent of that content. It allows you to create your content with very little regard for how it will look on the reading device - all the information for how the content looks then comes from the CSS file.

So back to your question. A menu link is page content. So updating it has nothing to do with CSS. If, however, you wanted to change it from a blue background to an orange background, or from bold 15px Georgia to italic 20px Verdana, that would be a CSS change.

PHP can be used to construct a page on the fly from multiple sources - one of which could be a menu. There are several other alternatives as well, e.g. ASP, SSI, even DW templates.

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

Chris..S wrote:
soulman99 wrote:
Another query is that, if i want to update a link on my menu or navigation (and header and footer) will it be update in all pages in CSS, or do i have to use php.

I think you may be confusing what CSS actually is. CSS is the styling or presentation of your HTML content. Its independent of that content. It allows you to create your content with very little regard for how it will look on the reading device - all the information for how the content looks then comes from the CSS file.

So back to your question. A menu link is page content. So updating it has nothing to do with CSS. If, however, you wanted to change it from a blue background to an orange background, or from bold 15px Georgia to italic 20px Verdana, that would be a CSS change.

PHP can be used to construct a page on the fly from multiple sources - one of which could be a menu. There are several other alternatives as well, e.g. ASP, SSI, even DW templates.

Right...
So website templates that are available generally do not contain php where you can update one link on a menu so that it updates on all pages? this has to be programmed in ?

Thanks

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

Basically,

I would like to create the following box, menu, table like in http://www.ifai.co.uk/menu1.html also www.msn.com and www.yahoo.com in CSS. Does anyone have the CSS codes ?

Thanks

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

small menu tables, how?

Visit the sites that take your fancy and view their CSS. You can do in most popular browsers.

- save the webpage to your disk with all its associated files. Then look in the associated files folder until you find the CSS ones.

- view the source of the web page (a menu option, normally under view on main menu) find the CSS links. Construct the complete URL, paste that into your browser address bar - and the CSS file should pop up.

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 12 years 22 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

small menu tables, how?

Chris..S wrote:
Visit the sites that take your fancy and view their CSS. You can do in most popular browsers.

+1

best way to learn

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

Thanks i shall try

jlhaslip
Offline
Enthusiast
Last seen: 10 years 26 weeks ago
Timezone: GMT-6
Joined: 2006-02-02
Posts: 199
Points: 0

small menu tables, how?

http://www.jlhaslip.trap17.com/twocolumns/sidebar_menu.html

That is a link to the html with embedded css styling for the menu boxes you were looking for.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Framed Menu using dt and dd tags </title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" >
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
}
dl{ 
margin-left:auto;
margin-right: auto;
text-align: center;
margin-bottom: .25em;
}
dd {display:block;
width:100%;
margin-left:auto;
margin-right: auto; 
text-align: center;
}
.sidebar{width: 12em;
		border: 2px  solid #dd6666;
		background-color: #cccccc;
		color: #000000;
}
#sbmenu1 {
margin-bottom: .5em;
}
#sbmenu2 {
margin-bottom: .5em;
}
.link 
a:hover{
background-color: #6666dd;
color: #ffffff;
}
</style>
</head>
<body>
<div id="wrapper">

		<div id="menu_column" >

				<div id="sbmenu1" class="sidebar">
				<dl>
     <dd>Menu List Here</dd>
				<dd class="link"> <a href="#" title=" sbmenu1 page 1">sbmenu1 page 1</a></dd>
				 <dd class="link"><a href="#" title=" sbmenu1 page 2">sbmenu1 page 2</a></dd>
				 <dd class="link"><a href="#" title=" sbmenu1 page 3">sbmenu1 page 3</a></dd>

				<dd class="link"> <a href="#" title=" sbmenu1 page 1">sbmenu1 page 1</a></dd>
				 <dd class="link"><a href="#" title=" sbmenu1 page 2">sbmenu1 page 2</a></dd>
				 <dd class="link"><a href="#" title=" sbmenu1 page 3">sbmenu1 page 3</a></dd>
</dl>
				 </div>

				<div id="sbmenu2" class="sidebar">
				<dl>

     <dd>Second Menu Here</dd>
				<dd class="link"><a href="#" title="sbmenu2 Page One">sbmenu2 Page One</a></dd>
				<dd class="link"><a href="#" title="sbmenu2 Page Two">sbmenu2 Page Two</a></dd>
				<dd class="link"><a href="#" title="sbmenu2 Page One">sbmenu2 Page One</a></dd>
				<dd class="link"><a href="#" title="sbmenu2 Page Two">sbmenu2 Page Two</a></dd>
</dl>
				</div>

		</div><!--close menu_column div -->

</div><!--close wrapper div -->
</body>
</html>


The code is HTML 4 transitional valid and the css validates, also.
I hope this helps you in your coding. I have checked it using FF, Opera, and an older version of IE (5.5 I think) It is a little buggy in IE5/mac, but it should be okay in pretty much everythng else. I don't have IE6 to check it with at home, so.... no guarantees.

That php script could be converted to "fill" the links using a menubar like this, but I don't have time to do that right now, though. Maybe some day soon I will adapt the code for that.

If you need any more assistance, holler.

I'm having a good day...so far.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

small menu tables, how?

Got a bit of unnecessary stuff in there. You could achieve the same result like this:

dl{
text-align: center;
margin: 0 0 .5em;
width: 12em;
padding: .5em 0;
border: 2px  solid #dd6666;
background-color: #cccccc;
color: #000000;
}
dt, dd { margin: 0; }
dl a:hover{
background-color: #6666dd;
color: #ffffff;
}

<dl>
	<dt>Menu List Here</dt>
	<dd><a href="#" title=" sbmenu1 page 1">sbmenu1 page 1</a></dd>
	<dd><a href="#" title=" sbmenu1 page 2">sbmenu1 page 2</a></dd>
	<dd><a href="#" title=" sbmenu1 page 3">sbmenu1 page 3</a></dd>
	<dd><a href="#" title=" sbmenu1 page 1">sbmenu1 page 1</a></dd>
	<dd><a href="#" title=" sbmenu1 page 2">sbmenu1 page 2</a></dd>
	<dd><a href="#" title=" sbmenu1 page 3">sbmenu1 page 3</a></dd>
</dl>
<dl>
	<dt>Second Menu Here</dt>
	<dd><a href="#" title="sbmenu2 Page One">sbmenu2 Page One</a></dd>
	<dd><a href="#" title="sbmenu2 Page Two">sbmenu2 Page Two</a></dd>
	<dd><a href="#" title="sbmenu2 Page One">sbmenu2 Page One</a></dd>
	<dd><a href="#" title="sbmenu2 Page Two">sbmenu2 Page Two</a></dd>
</dl>

Remember, you don't need to wrap elements in extra divs when you can apply the styles directly to the element.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

Hi,
Thanks for the codes jlhaslip and Tyssen, i shall try. What is the full code Tyssen for the whole page as i cant get it to work using your code.

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

small menu tables, how?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

Thanks for the reply guys,
Have got all that, But i am looking to create similar to this in CSS and am finding the code difficult... http://www.ifai.co.uk/menu1.html
Any codes?

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

small menu tables, how?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

soulman99
Offline
newbie
Last seen: 13 years 40 weeks ago
Joined: 2006-02-14
Posts: 10
Points: 0

small menu tables, how?

Thanks Tyssen,
ur a star, just what i was looking for.

thanks