Learn VBA & Macros in 1 Week!

HTML - [xhtml] Changing List From Horizontal State To Vertical State

Full Excel VBA Course - Beginner to Expert

[xhtml] Changing List From Horizontal State To Vertical State	View Content

yea, i know it makes me sound like the biggest noob ever but i am

so ive put together a few pages with nothing but a list in <ul> tags and i somehow managed to make them horizontal, but now...i want it to be vertical and ive gone over every single line and not been able to work it out so i was hoping maybe you guys could help me out

heres the css....
Code:

body {
	background-color: #e3e3db;
	background-image: url(bg.gif);
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	margin: 0;
	padding: 0;
}

#menu {

}

#menu li {
	float: left;
	height: 28px;
	margin: 0 5px 0 0;
	white-space: nowrap;
}

#menu li strong, #menu li a {
	float: left;
	height: 22px;
	padding: 6px 16px 0 22px;
	background-repeat: no-repeat;
	background-image: url(tabs.png);
	background-position: -10px -28px;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;

    /* hide overflowing text */
	max-width: 290px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#menu li span {
	float: left;
	height: 28px;
	width: 6px;
	background-repeat: no-repeat;
	background-image: url(tabs.png);
	background-position: -4px -28px;
}

#menu li.selected strong, #menu li.selected a {
	background-position: -10px 0;
	color: #000000;
	font-weight: bold;
}

#menu li.selected span {
	background-position: -4px 0;
}

#menu li:hover strong, #menu li:hover a {
	background-position: -10px -56px;
}
#menu li:hover span {
	background-position: -4px -56px;
}
#menu li.selected:hover strong, #menu li.selected:hover a {
	background-position: -10px 0;
}
#menu li.selected:hover span {
	background-position: -4px 0;
}

-thanks in advance

Full Excel VBA Course - Beginner to Expert

Button State Question

Similar Tutorials

View Content

I have created a menu on a webpage, and added a rollover effect to it. It's working great. But here's what I would like to do now.

When you click on one of the buttons in the menu, and it takes you to that page, I want the button you clicked to stay lit up like it appears in the MouseOver effect. And then restore itself when you click on another menu button.

I've seen this used on a lot of sites, so is there a simple way for me to do this? Or is this only possible in something like CSS?

Image Menu, Want To Change State When Clicked

Similar Tutorials

View Content

Hi,
i didnt know where to put this because I've got a problem with the CSS too.

All the tutorials ive seen on the net require a "ordered/unordered list" to make a css menu.

my site is a lot of images put together using divs, and then each relevant part included in a php file called index.php

now i would like to have a menu button changed with a button with a tick on it when clicked to show the active state.
here is my html with all the images put in order, the four menu button are in there

home, events, donations, bhajans
HTML 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="stylesheet" href="styles.css" type="text/css">
<title>|Youth Seva Group|</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body style="background-color:#FFFFFF;">

<div id="container">

	<div id="sideLeft_">
		<img id="sideLeft" src="images/sideLeft.jpg" width="79" height="768" alt="sideleft" />
	</div>
	<div id="krishna_">
		<img id="krishna" src="images/krishna.jpg" width="155" height="227" alt="Krishna" />
	</div>
	<div id="logo_">
		<img id="logo" src="images/logo.jpg" width="597" height="138" alt="Logo" />
    </div>
	<div id="hanuman_">
		<img id="hanuman" src="images/hanuman.jpg" width="175" height="227" alt="Hanuman" />
	</div>
	<div id="sideRight_">
		<img id="sideRight" src="images/sideRight.jpg" width="79" height="768" alt="sideright" />
	</div>
	<div id="ysg-06_">
		<img id="ysg_06" src="images/ysg_06.gif" width="1" height="768" alt="" />
	</div>
	<div id="saiBaba_">
		<img id="saiBaba" src="images/saiBaba.jpg" width="78" height="89" alt="SaiBaba" />
	</div>
	
    <div id="home1">
		<a href="index.php"><img class="current-home" id="home1" src="images/home_off.gif" alt="Home"/> </a>
	</div>
	
    <div id="om_">
		<img id="om" src="images/om.jpg" width="131" height="76" alt="Om" />
    </div>
	<div id="ysg-10_">
		<img id="ysg_10" src="images/ysg_10.gif" width="1" height="76" alt="" />
    </div>
	
    <div id="donations_">
		<a href="donations.php"><img id="donations" src="images/donations.gif" width="151" height="25" alt="Donations" /></a>
	</div>
	
    <div id="ysg-12_">
		<img id="ysg_12" src="images/ysg_12.gif" width="85" height="89" alt="" />
	</div>
    
	<div id="events1">
		<a href="events.php"><img id="events1" src="images/events_off.gif" width="151" height="22" alt="Events" /> </a>
    </div>
	
    <div id="bhajans_">
		<a href="bhajans.php"><img id="bhajans" src="images/bhajans.gif" width="151" height="22" alt="Bhajans" /></a>
    </div>
	
    <div id="ysg-15_">
		<img id="ysg_15" src="images/ysg_15.gif" width="151" height="29" alt="" />
	</div>
	<div id="ysg-16_">
		<img id="ysg_16" src="images/ysg_16.gif" width="151" height="29" alt="" />
	</div>
	<div id="ysg-17_">
		<img id="ysg_17" src="images/ysg_17.gif" width="6" height="13" alt="" />
	</div>
	<div id="ysg-20_">
		<img id="ysg_20" src="images/ysg_20.gif" width="6" height="13" alt="" />
	</div>
	<div id="lineLeft_">
		<img id="lineLeft" src="images/lineLeft.gif" width="239" height="5" alt="Line Left" />
	</div>
	<div id="lineRight_">
		<img id="lineRight" src="images/lineRight.gif" width="266" height="5" alt="Line Right" />
	</div>
</body>
</html>

this is my css

Code:

#container {
	position: relative;
	text-align: center;
	width: 1068px;
	height: 0px;
	margin: 0px auto;
}

#sideLeft_ {
	position:absolute;
	left:0px;
	top:0px;
	width:79px;
	height:768px;
}

#krishna_ {
	position:absolute;
	left:79px;
	top:0px;
	width:155px;
	height:227px;
}

#logo_ {
	position:absolute;
	left:234px;
	top:0px;
	width:597px;
	height:138px;
}

#hanuman_ {
	position:absolute;
	left:831px;
	top:0px;
	width:175px;
	height:227px;
}

#sideRight_ {
	position:absolute;
	left:1006px;
	top:0px;
	width:79px;
	height:768px;
}

#ysg-06_ {
	position:absolute;
	left:1085px;
	top:0px;
	width:1px;
	height:768px;
}

#saiBaba_ {
	position:absolute;
	left:234px;
	top:138px;
	width:78px;
	height:89px;
}

#home1 a:active, .current-home {	
	position:absolute;
	left:312px;
	top:138px;
	width:151px;
	height:25px;
	background-position: top;
	background:url(home_on.gif);
}

#events1 a {
	position:absolute;
	left:312px;
	top:163px;
	width:151px;
	height:22px;
	background-position: top;
}




#om_ {
	position:absolute;
	left:463px;
	top:138px;
	width:131px;
	height:76px;
}

#ysg-10_ {
	position:absolute;
	left:594px;
	top:138px;
	width:1px;
	height:76px;
}

#donations_ {
	position:absolute;
	left:595px;
	top:138px;
	width:151px;
	height:25px;
}

#ysg-12_ {
	position:absolute;
	left:746px;
	top:138px;
	width:85px;
	height:89px;
}

#bhajans_ {
	position:absolute;
	left:595px;
	top:163px;
	width:151px;
	height:22px;
}

#ysg-15_ {
	position:absolute;
	left:312px;
	top:185px;
	width:151px;
	height:29px;
}

#ysg-16_ {
	position:absolute;
	left:595px;
	top:185px;
	width:151px;
	height:29px;
}

#ysg-17_ {
	position:absolute;
	left:312px;
	top:214px;
	width:6px;
	height:13px;
}

#aboutus_ {
	position:absolute;
	left:318px;
	top:214px;
	width:211px;
	height:24px;
}

#resposibilities_ {
	position:absolute;
	left:529px;
	top:214px;
	width:211px;
	height:24px;
}

#ysg-20_ {
	position:absolute;
	left:740px;
	top:214px;
	width:6px;
	height:13px;
}

#lineLeft_ {
	position:absolute;
	left:79px;
	top:227px;
	width:239px;
	height:5px;
}

#lineRight_ {
	position:absolute;
	left:740px;
	top:227px;
	width:266px;
	height:5px;
}

#logIn_ {
	position:absolute;
	left:79px;
	top:232px;
	width:111px;
	height:33px;
}

#register_ {
	position:absolute;
	left:190px;
	top:232px;
	width:112px;
	height:33px;
}

#ysg-25_ {
	position:absolute;
	left:302px;
	top:232px;
	width:16px;
	height:27px;
}

#ysg-26_ {
	position:absolute;
	left:740px;
	top:232px;
	width:266px;
	height:49px;
}

#ysg-27_ {
	position:absolute;
	left:318px;
	top:238px;
	width:422px;
	height:21px;
}

#ysg-28_ {
	position:absolute;
	left:302px;
	top:259px;
	width:10px;
	height:22px;
}

#sayings_ {
	position:absolute;
	left:312px;
	top:259px;
	width:76px;
	height:22px;
}

#ysg-30_ {
	position:absolute;
	left:388px;
	top:259px;
	width:352px;
	height:22px;
}

#ysg-31_ {
	position:absolute;
	left:79px;
	top:265px;
	width:48px;
	height:16px;
}

#memberBenefits_ {
	position:absolute;
	left:127px;
	top:265px;
	width:114px;
	height:11px;
}

#ysg-33_ {
	position:absolute;
	left:241px;
	top:265px;
	width:61px;
	height:16px;
}

#ysg-34_ {
	position:absolute;
	left:127px;
	top:276px;
	width:114px;
	height:5px;
}

#content_ {
	position:absolute;
	left:79px;
	top:281px;
	width:927px;
	height:487px;
}
a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

img{

border:0px;
}

and this is the main php file with the includes.

PHP Code:
<?php include 'headerplusmenu.php'; ?>
<?php include 'login.php'; ?>
<?php include 'sayings.php'; ?>
<?php include 'main.php'; ?>
<?php include 'homesubmenu.php'; ?>

<div id="content_">
<p>Homepage</p></div>

Html 5 Vs. Flash And The Current State Of Browsers

Similar Tutorials

View Content

I'm a designer with a working but by no means expert familiarity with html and css. My products are bundles that include photo slideshows, video and audio clips, text and links to pdf and tif files. They are distributed on dvds and thumb drives. I've been using Flash to assemble them.

I understand that Flash is on the way out, at least insofar as HTML 5 is already able to do the many of the same things without the need of a proprietary browser add-in. I understand it is already capable of doing everything I currently do with Flash.

My question: which if any of the current browsers are capable of performing all of these functions? I currently bundle Flash Player with my products, but I'd much rather bundle a browser.

Thanks in advance,
P

Scroll Bar: Yes Vertical, No Horizontal

Similar Tutorials

View Content

hi !
I'm using a frameset and in the main frame I need the vertical scroller visible all the time, even when not needed, but when I set it ...
HTML Code:

scrolling="yes"

but with this the horizontal scroll is also visible, what I don't want

Is there a way to enable just the Vertical one??

Change Table Vertical To Horizontal

Similar Tutorials

View Content

i have script that shown image in table, i want the table shown in horizontal not vertical
this is the entire script, and the table that influence is in the red i think below

any idea guys what i need to edit?

Quote:
# Photo Album
# 1.1
#
# Displays a members photos
class user_photoplog_album extends z_module
{
# Set the maximum amount of images any users are allowed to display
var $max_images = 5;
function contents()
{
$content = $this->content;
$vbulletin = $this->_zoints->external->vbulletin;

# If limit hasnt been set or is over the admin set maximum, set it to the admin max
if(empty($content['max_pics']) OR $content['max_pics'] > $this->max_images)
{
$limit_sql = 'LIMIT ' . $this->max_images;
}
# Otherwise, let them set it
else
{
$limit_sql = 'LIMIT ' . $content['max_pics'];
}

# Get all photos the user has
$getphotos = $vbulletin->db->query_read("
SELECT * FROM " . TABLE_PREFIX . "photoplog_fileuploads
WHERE userid=" . $this->zuser . "
AND moderate=0
ORDER BY dateline DESC
" . $limit_sql . "
");
$html .= '<div class="' . $this->style['pmain1'] . '" style="padding: 0;">';

# Does the user have any photos?
if ($vbulletin->db->num_rows($getphotos))
{
# Display the top of the table
$html .= '
<table border="0" width="100%">
<tr>
<td width="100" overflow-x: scroll; overflow-y: hidden; align="center" class="phead">
Image
</td>';
# Display the details?
if(!$content['details'])
{
$html .= ' ';
}
$html .= ' </tr>';

# loop and display all that have been fetched from the DB
while($photo = $vbulletin->db->fetch_array($getphotos))
{
# Display image cell
$html .= '
<tr>
<td width="100" align="center" class="pmain2">
<a href="' . $this->_zoints->external->url() . 'imagehosting/image' . $photo['fileid'] . '.html" target="_blank"">
<img src="' . $this->_zoints->external->url() . 'imagehosting/images/' . $photo['userid'] . '/small/' . $photo['filename'] . '" />
</a>
</td>
'; # Display the image details?
if(!$content['details'])
{
$html .= ' ';
}
$html .= '</tr>';
}
$html .= '</table>
<p><a href="index.php?u=' . $this->zuser . '" target="_blank">View All Photos</a>
</p>

<div>
<p>';
}
# Nope, tell them they have none
else
{
$html .= 'You don\'t have any photos. <a href="upload.php" target="_blank">Upload photos now!</a>';
}
$vbulletin->db->free_result($getphotos);

$html .= '</p>
</div>';
return $html;
}

function update($content)
{
return $content;
}
function edit()
{
$content = $this->content;
if($content['max_pics'] AND $content['max_pics'] < $this->max_images)
{
$limit = htmlspecialchars($content['max_pics']);
}
else
{
$limit = $this->max_images;
}
$html .= '<div class="pmain1">';

# Disable description checkbox
$html .= 'Disable image details? ';
$html .= '<input type="checkbox" name="mod[content][details]" ' . ($content['details'] ? 'checked="checked"': '') . ' /> <br />';
# Max pictures textbox
$html .= 'Max pictures to display ';
$html .= '<input type="text" name="mod[content][max_pics]" value="' . $limit . '" size="5" /> ';
$html .= '<span style="font-size: 7pt; color: #848484;">(max ' . $this->max_images . ' allowed)</span> ';

$html .= '</div>';

return $html;
}
}

Occupying The Same Vertical Space Across The Horizontal Plane

Similar Tutorials

View Content

OK - I want you you to know, I don't know what I'm doing. But I'm trying to build my web site and I'm just about there but am having one problem.

The problem page is he

http://www.danielrubio.com/clientlogin.html

and he

http://www.danielrubio.com/listeningroom.html

I can't get the navigation area on the left to occupy the same vertical position as the login form. With the second page I can't get the navigation area on the left to occupy the same vertical position as the links to my MP3's. The reason I set things up this way to start with was to keep the form and the links centered on the page no matter what size window or screen resolution.

Here is the code for the first problem page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <script language="JavaScript">
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="luckydog" && password=="sunshine") { window.location="http://www.danielrubio.com/heidi/juliexyz.html"; done=1; }
<!-- The user above is Julie Rubio 070216 -->
if (username=="bighands" && password=="hardwork") { window.location="http://www.danielrubio.com/guest/12345678.html"; done=1; }
<!-- The user above is Guest 070216 -->
if (username=="member1" && password=="password1") { window.location="page1.html"; done=1; }
if (username=="member2" && password=="password2") { window.location="page2.html"; done=1; }
if (username=="member3" && password=="password3") { window.location="page3.html"; done=1; }
if (done==0) { alert("Invalid login!"); }
}
// End -->
  </script>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <meta name="keywords"
 content="daniel rubio, composer, orchestrator, tuba, new orleans, last days, derringer, sidewalk, second line, music, bmi, garritan, dixieland, theater, jazz, bourbon, imdb">
  <meta name="robots" content="index, follow, noarchive">
  <meta name="description"
 content="Daniel Rubio is a composer and orchestrator for theater film and television from New Orleans and a tuba player">
  <title>DANIEL RUBIO</title>
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(192, 192, 192); height: 646px;"
 alink="#000099" link="#000099" vlink="#990099">
<table
 style="text-align: left; font-family: Helvetica,Arial,sans-serif; background-color: transparent; width: 100%; height: 100%;"
 border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td colspan="2" rowspan="1"
 style="text-align: center; width: 100%; height: 96px;"><big><big><big><span
 style="font-weight: bold;"> </span></big></big></big>
      <h1 style="font-weight: bold; height: 25px;">D <small>A
N I E L</small> &nbsp; R <small>U B I O</small></h1>
      <big><big><big><small><small>Composer
&nbsp;| &nbsp;Orchestrator</small></small></big></big></big></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1"
 style="width: 100%; height: 108px;"> <big><big><big><img
 style="position: absolute; width: 108px; height: 144px; top: 57px; left: 96px;"
 alt="Photograph of Daniel Rubio"
 src="../../photogs/DanBW45a.jpg"></big></big></big><font
 size="+1"> </font>
      <div style="text-align: center; margin-top: 0px; height: 92px;"><font
 size="+1"><span style="color: rgb(51, 51, 51);"></span></font><big><span
 style="color: rgb(51, 51, 51);"><big><small><small><small><br>
      <br>
      <big><big><big>C</big>LIENT <big>L</big>OGIN<br>
      <br>
      <br>
      <br>
      <br>
      </big></big></small></small></small></big></span></big><big><span
 style="color: rgb(51, 51, 51);"><big><small><small><small><big><big>
      <center>
      <form name="login">
        <table style="width: 225px;" border="1"
 cellpadding="3">
          <tbody>
            <tr>
              <td colspan="2"> <br>
              <div ="">
              <center><font size="+2"><b>Welcome!</b></font></center>
              </div>
              </td>
            </tr>
            <tr>
              <td>Username:</td>
              <td><br>
              <div style="z-index: 2;"><input
 name="username" type="text"></div>
              </td>
            </tr>
            <tr>
              <td>Password:</td>
              <td><input name="password" type="text"></td>
            </tr>
            <tr>
              <td colspan="2" align="center"><input
 value="Login!" onclick="Login()" type="button"></td>
            </tr>
          </tbody>
        </table>
      </form>
      </center>
      </big></big></small></small></small></big></span></big></div>
      </td>
    </tr>
    <tr style="color: rgb(51, 0, 153);">
      <td
 style="vertical-align: top; text-align: center; width: 20%; background-color: rgb(153, 153, 153); height: 337px;"><small><big><big>&nbsp;
      </big></big><br>
      <a href="http://www.danielrubio.com/index.html">Home</a><br>
      <br>
      <a href="http://www.danielrubio.com/clientlogin.html">Client
Login</a><br>
      <br>
      <a href="http://www.danielrubio.com/listeningroom.html">Listening
Room</a><br>
      <br>
      <a href="http://www.danielrubio.com/biography.html">Biography</a><br>
      <br>
      <a href="http://www.danielrubio.com/news.html">News</a><br>
      <br>
      <a href="http://www.danielrubio.com/links.html">Links</a><br>
      <br>
      <a href="http://www.danielrubio.com/sitemap.html">Site
Map</a><br>
      <br>
      <a href="http://www.danielrubio.com/feedback.html">Feedback</a></small></td>
      <td style="text-align: center; width: 80%; height: 337px;"><br>
      <div style="position: absolute; left: 240px; top: 377px;"><span
 style="font-weight: bold;"><span
 style="color: rgb(0, 0, 0);"></span> </span><br>
      <span style="font-weight: bold;"></span></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1"
 style="text-align: center; width: 100%; background-color: rgb(153, 153, 153); height: 96px;"><span
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Copyright
&copy; 2006 - </span><span
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">2007
by&nbsp;</span><a
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"
 href="http://www.danielrubio.com/feedback.html">Daniel Rubio</a><span
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">.
&nbsp;All worldwide rights reserved.</span><br
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">
      <span
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Second
Line Music&trade; is a trademark of Daniel Rubio.</span><span
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"><br>
      </span></td>
    </tr>
  </tbody>
</table>
<span style="font-family: Helvetica,Arial,sans-serif;">&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;
</span>
</body>
</html>

I think that if you help me to understand the correct approach to the first page, I can then apply it to the second page.

Thanks for any help,
Dan

Vertical And Horizontal Navigation Bar A Weird Text

Similar Tutorials

View Content

Hi, I recently taught my self HTML and CSS so i'm still a bit shaky i started making a website to practice. i made a website with a top nav bar and a side nav bar. i can't seem to get my text to sit in the corner of both like in most websites it just seems to sit in the middle of the vertical side bar here is my HTML code and CSS code

HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing... 1 2 3</title>
<link rel="stylesheet" type"text/css" href="CSS1.css" />
</head>
<body>
<h1> Testing Website </h1>
<ul id="nav-list">
<li><A href=Home>Home</A></li>
<li><A href=HTML>HTML</A></li>
<li><A href=CSS>CSS</A></li>
<li><A href=JavaScript>JavaScript</A></li>
<li><A href=XML>XML</A></li>
<li><A href=PHP>PHP</A></li>
<li><A href=SQL>SQL</A></li>
</ul>
<ul id="side-bar">
<li><b>HTML Intro</b></li>
<li><A href=SQL>HTML Home</A></li>
<li><A href=SQL>Intro</A></li>
<li><A href=SQL>Getting Started</A></li>
<li><b>Basics</b></li>
<li><A href=SQL>Basics</A></li>
<li><A href=SQL>Elements</A></li>
<li><a href=SQL>Attributes</a></li>
</ul>
<p> lets have a look </p>
</body>
</html>

HTML Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color:black;
	color:white;
	font-family: Arial, Helvetica, sans-serif;
}
h1 {
	text-align:center;
}
ul#nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 750px;
	height: 20px;
}
ul#nav-list li {
	display:inline;
}
ul#nav-list li a {
	text-decoration:none;
	padding:5px 0;
	width:100px;
	background: #999;
	color:#fff;
	float:left;
	text-align:center;
	border-left:1px solid #000;
}
ul#nav-list li a:hover {
	background-color:#666;
}
ul#side-bar {
	list-style: none;
	margin:0;
	padding:0;
	width: 100px;
}
ul#side-bar li a {
	text-decoration:none;
	padding:5px 5px;
	background:#999;
	color:#FFF;
	float:left;
	width: 90px;
	text-align: center;
	margin-right: 20px;
}
ul#side-bar li a:hover {
	background:#666;
}
p {
	color:#FFF;
}

How To Create Vertical And Horizontal Lines For A Dynamic Org Chart?

Similar Tutorials

View Content

Hello all,
The team I work on is going to be creating a .NET application which reads organization information from a database and creates a dynamic Org Chart.

One of common features in an org chart is lines that show reporting structures.
Does anyone have any recommendations on how we could dynamically create such lines that would need to go both horizontally and vertically?
Thanks

A Horizontal List For Links

Similar Tutorials

View Content

Hi;

My name is Richard Sher, I'm am very new to coding, this is my first post here.

I want to create a single line for the purpose of making a simple navigation bar.
First question is do I use HTML text (for the button names) or do I create graphics
of the text I want in for example using Photoshop?

I was given an example using a list which looks like this:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

I would like to hear you comments.

Sincerely;

Richard Sher
.

Postioning Text After A Horizontal List

Similar Tutorials

View Content

Hi,

I'm learning about horizontal lists.

I'm trying to position a string ("Stuff" in the code snippet) a given distance (say 100px) to the right of the last item in a horizontal list, on the same line as the list. How do I do this? The following code snippet, using CSS for the UL and LI tags with a WIDTH specification for the UL tag, results in a BREAK between the last list item and the string "Stuff", as shown below:

-------------------------------------------------------------------------------------------------------
Books Posters
Stuff.
-------------------------------------------------------------------------------------------------------

Code Snippet:
Code:

<HTML>
<HEAD>
<STYLE>

li {
float:	left;
padding-right: 32px;
padding-left: 32px;
}

ul {
list-style-type:none;
width=300;
}
</STYLE>
</HEAD>
<BODY>

<UL><LI>Books</LI><LI>Posters</LI></UL>
Stuff.
</BODY></HTML>

In fact the only way to not have a BREAK between the last list item and the string "Stuff" is to remove the WIDTH specificaton from the UL tag altogether, but then the string "Stuff" cannot be positioned a given distance to the right from the last list item--it just goes the default distance.

So how can text trailing a horizontal list be positioned a specific distance to the right of the horizontal list on the same line?

Thanks very much for any help you can provide.

Thanks,
Dave

Vertical Alignment Problem With Unordered List

Similar Tutorials

View Content

Hello,

I'm trying to program a couple unordered lists into my web page and I encountering a problem.

I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one.

Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm

Here's the code for the bottom two cells with the lists in them:

Code:

<tr>
<td style="vertical-align: top; padding-left: 0px; padding-top: 0px;">
<ul type="disc" style="margin: 1em;">
<li>Elegant dining room</li>
<li>Fireside lounge</li>
<li>Library and computer room</li>
<li>Craft room & country kitchen</li>
</ul>
</td>

<td style="vertical-align: top; padding-left: 0px; padding-top: 0px;">
<ul type="disc" style="margin: 1em;">
<li>Wellness and exercise spa</li>
<li>Beauty salon</li>
<li>Theater and multi-purpose room</li>
</ul>
</td>
</tr>

Does anyone know why they refuse to be aligned with the top of the cells?

Similar Tutorials

View Content

so xhtml elements should always be in lowercase how does this extend to the case in css. for example if im using a xhtml doctype should i be using lower case color values like color:#ffffff vs color:#FFFFFF. I know as per a hexidecimal value "ffffff" is the same as "FFFFFF" and the same as "fFfFfF". they are all equal to the same value so it really doesn't matter but does the xhtml doctype dictate that these values should be in lowercase?