Few web page design questions.

Go to www.liebert.com
What is used on the mid-right portion of the page. Is that a navigation bar of some sort, or flash buttons, or what?

Also, to get the gray on the left hand side of the page and then the text and pics on the right, are tables used?

Any info would be appreciated as I'm kind of stuck.

Find more posts tagged with

Free for TechExams community: Cybersecurity salary guide

Compare cert salaries and plan your next career move

Button

Comments

bellboy

to me, and i'm not an expert in such things, i just tinker about, the website looks like it's a database driven affair (you can tell by the extensions of the links to the other pages, by their being .asp - reflecting the operating system of their host being windows, whereas an apache/*nix host would have .php).

the navbars look like java or flash to me.

hope this helps.

Webmaster

What is used on the mid-right portion of the page. Is that a navigation bar of some sort, or flash buttons, or what?

Flash. You can see it by right clicking it.

Also, to get the gray on the left hand side of the page and then the text and pics on the right, are tables used?

yes. This pretty much always the case.

The nav on the left is build with CSS just like our menu.

Have you tried right clicking that page and choosing View Source yet

/usr

Yeah, I have and saw tables are used. My problem is that when I create a table on the left, I have problems creating anything to the right of it. Being just writing text or creating another table.

/usr

Did you use dreamweaver to create the menu on the left? If so, how did you get the background of the buttons to light up? I've poked around in Dreamweaver but can only find how to make the text light up. By the way, what's this line for? <td></td>

Sorry a/b all the questions, but if something is neat, I just want to learn how it's done.

Webmaster

I guess that is an example of HTML basics as I mentioned in your other post...

You should first create a table that is 800 pixels or 100% width. create two or three or even more columns in it. Make the first columns 125 pixels width. Set vertical alignment to top. Insert a table in that first column, make sure the table has height 100% and width 125, this table can be divided in rows to have space for the menu options (or better create another table in this table and give that one several rows. In the second column of the main table, create another table for the actual site content (width and height both 100%)... ahem... here you go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example table layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="125" valign="top"><table width="125" height="100%" border="0" cellpadding="0" cellspacing="5" bgcolor="#6666FF">
        <tr>
          <td align="center" valign="top"><table border="0" cellpadding="0" cellspacing="5" bgcolor="#FFFF99">
              <tr>
                <td>[url="/blabla.htm"]Menu Option 1[/url]</td>
              </tr>
              <tr>
                <td>[url="/blabla.htm"]Menu Option 2[/url]</td>
              </tr>
              <tr>
                <td>[url="/blabla.htm"]Menu Option 3[/url]</td>
              </tr>
              <tr>
                <td>[url="/blabla.htm"]Menu Option 4[/url]</td>
              </tr>
              <tr>
                <td>[url="/blabla.htm"]Menu Option 5[/url]</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
    <td valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
        <tr>
          <td height="40" align="center" bgcolor="#999999">[b]BLABLABLA[/b]</td>
        </tr>
        <tr>
          <td height="100%" valign="top"> Blabla bla blala blablabla bla blabla blablabla blablabla 
            bla bla bla blabla blabla bla blablaba. Blabla bla blala blablabla 
            bla blabla blablabla blablabla bla bla bla blabla blabla bla blablaba. 
            Blabla bla blala blablabla bla blabla blablabla blablabla bla bla 
            bla blabla blabla bla blablaba. Blabla bla blala blablabla bla blabla 
            blablabla blablabla bla bla bla blabla blabla bla blablaba. Blabla 
            bla blala blablabla bla blabla blablabla blablabla bla bla bla blabla 
            blabla bla blablaba.

            

            Blabla bla blala blablabla bla blabla blablabla blablabla bla bla 
            bla blabla blabla bla blablaba. Blabla bla blala blablabla bla blabla 
            blablabla blablabla bla bla bla blabla blabla bla blablaba.

            

            


          </td>
        </tr>
        <tr>
          <td height="30" bgcolor="#999999"></td>
        </tr>
      </table></td>
    <td width="125" valign="top"><table width="125" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6666FF">
        <tr> 
          <td></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

I used some colors to show the separate tables. Try changing value of colors, width height (pixel vs %), cellpadding, cellspacing, etc.

In case you come in a situation where you really 'need' to have something right side of a table, align the table itself like this:

<table width="200" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>
text here

Webmaster

LostInSpace wrote:

Did you use dreamweaver to create the menu on the left? If so, how did you get the background of the buttons to light up? I've poked around in Dreamweaver but can only find how to make the text light up. By the way, what's this line for? <td></td>

Sorry a/b all the questions, but if something is neat, I just want to learn how it's done.

I do use Dreamweaver, but only to edit files. I don't use many of the built-in features to help create such things. It should be doable with Dreamweaver's CSS function, but I think it's best to manually edit CSS files.

The following is the CSS code that makes up our menu:

a.submenu:link {
	color:#212126;
	text-decoration: none;
	font-weight: bold;
	background-image: url(/images/te_button.jpg);
	font-size: 11px;
	height: 20px;
	width: 125px;
	line-height: 20px;
}
a.submenu:visited {
	font-weight: bold;
	color: #212626;
	background-image: url(/images/te_button.jpg);
	text-decoration: none;
	font-size: 11px;
	height: 20px;
	width: 125px;
	line-height: 20px;
}
a.submenu:hover {
	color:#212126;
	text-decoration:none;
	background-color: #CCCCCC;
	font-weight: bold;
	background-image: url(/images/te_button_over.jpg);
	font-size: 11px;
	height: 20px;
	width: 125px;
	line-height: 20px;
}

This code can be included at the top of the page (in between head and /head) in between <style> tags, or as I do, in a separate CSS file. In the latter case the file needs to be included within the head tags, like this:

<link rel="stylesheet" href="/stylesheet.css" type="text/css">

As you can see in the above code, the styles are for the a tag (as in a href). So if I add a link anywhere on the site like this:

[url="/forums"]Forums[/url]

the link will use the styles from the submenu sections.

Creating a menu like this proved unlimited options for unique styles.

Webmaster

In case the above code would not include .submenu after the a, the style would apply to every link on the site. Not just those defined with class=submenu.