[thelist] css/div problem....

bruce bedouglas at earthlink.net
Fri Jun 24 11:49:45 CDT 2005


hi...

i have the following sample html, and the test css. i'm trying to figure out
how to get the 'tab' css to allow the text in the '<a>' boxes to wrap if the
text extends beyond a certain width. i'm only concerned with the 'tab'
portion of the html, so i left out the rest of the css file that i'm using.

i've tried a few options with no luck. given that i'm not a guru with css, i
thought i'd ask the list!

any help/comments would be appreciated.

thanks

bruce
bedouglas at earthlink.net

test html
------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>``College Workflow - </title>

                <link rel="stylesheet" type="text/css"
href="/site/inc/html/college/test.css" />

<meta name="generator" content="Sitellite Content Server 4.2.0-stable" />
</head>
<body onload="init_edit_panels_clist ()"><a name="top"> </a>

<div class="heading">

        <table class="heading">
                <tr class="heading">
                        <td class="title">

<div class="mainTitle">

        <span lang="en" xml:lang="en">College Work</span>

</div>

<div class="subTitle">

        <span lang="en" xml:lang="en">College Workflow</span>

</div>

                        </td>
                        <td class="topRight">

                                <a href="/" class="sitename">
                                        Scripts
                                </a>

                        </td>
                </tr>
        </table>

<div class="tabs">

        <a href="/site/index/webapp-contact-form?ddd">Home</a>
<a style="width: 10px; height: 20px;"
href="/site/index/webapp-collegelist-form?ddd">College List Section</a> <a
href="/site/index/process-dev-form?ddd">Script Development Process</a> <a
href="/site/index/members-devteam-form?ddd">Development Team Information</a>
<a href="/site/index/members-myaccount-form?ddd">My Scripts/Process</a>
<a href="/site/index/network-monitor-form?ddd" id="active">Network
Monitoring</a>
<a href="/site/index/network-coursegen-form?ddd">Course Generation</a>
<a href="/site/index/usradm-edit-user-form?ddd"></a>
<a href="/site/index/webapp-contact2-form?ddd">Master List of Colleges</a>
<a href="/site/index/scripts-a-form?ddd">Perl Scripts</a>
<a href="/site/index/usradm-admin-form?ddd">Site Admin</a>






</div>


</div>



</body>
</html>




test css
------------------------
div.tabs {
  margin: 0em;
  padding: 0em 3em;
  text-align: center;
}

div.tabs a {
  background: white;
  border: 1px solid #8CACBB;
  color: #436976;
  font: 110% Bold;
  #padding: 0em 1.5em;
  #margin: 0em 0.5em;
  text-decoration: none;
  white-space: wrap;
  width: 10px;
  height: 20px;

}

div.tabs a#active {
  background: #dee7ec;
  border-bottom: #dee7ec 1px solid;
  height: 10em;
}

div.tabs a:hover {
  background: #dee7ec;
}

div.tabBar {
  color: #436976;
  background: #dee7ec;
  padding: 0em 1.5em;
  margin: 0em 0em 1.5em 0em;
  border-top: 1px solid #8CACBB;
  border-bottom: 1px solid #8CACBB;
}

div.row {
  padding: 0.5em;
  height: 1000px;
}






More information about the thelist mailing list