Learn VBA & Macros in 1 Week!

CSS - Help With Three Column List - Convert From Table

Full Excel VBA Course - Beginner to Expert

Help With Three Column List - Convert From Table	View Content

Hi,
I am very new to CSS and very confused. I wrote my site about 10 years ago using tables and have been working very hard the last few weeks updating the code to CSS and XHTML. I have a navigation page that was made as a table using an image to replace the bullet and act as the link. I am having a terrible time rewriting the blasted thing without using a table. The columns will not line up (I suppose I do not understand how to use the negative margin properly) and when I try to use the clear: left; code so my bullet image lays properly it will only clear the bottom of the previous column so there is a giant gap in between the links. I have no idea what I am doing. Here is a link to what the page looks like using the old code. This page will NOT validate, the code is old and depreciated but if you have a peek you can se what I am trying to achieve. www.medeaslair.net/myths.html.

Here is what I wrote but I am afraid it is very long. I apologize in advance for how bad it is.

CSS
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=iso-8859-1" />
<title>Tableless Three Column List</title>
<style type="text/css">
<!--
body {
color: black;
padding-top: 45px;
background-image: url("images/tan_marble3.jpg");
text-align:center;
font-family: papyrus;
font-weight: bold;
font-size: 15px;
}

#container {
width: 750px;
margin: 0 auto;
text-align:left;

}

li.col1a, li.col1b, li.col1c, li.col1d, li.col1e, li.col1f, li.col1g, li.col1h, li.col1i, li.col1j, li.col1k, li.col1l, li.col1m, li.col1n, li.col1o, li.col1p, li.col1q, li.col1r, li.col1s, li.col1t, li.col1u, li.col1v  {
  margin-left: 0;
}

li.col2a, li.col2b, li.col2c, li.col2d, li.col2e, li.col2f, li.col2g, li.col2h, li.col2i, li.col2j, li.col2k, li.col2l, li.col2m, li.col2n, li.col2o, li.col2p, li.col2q, li.col2r, li.col2s, li.col2t, li.col2u, li.col2v, li.col2w, li.col2x, li.col2y, li.col2z   {
  margin-left: 18em;
}

li.col3a, li.col3b, li.col3c, li.col3d, li.col3e, li.col3f, li.col3g, li.col3h, li.col3i, li.col3j, li.col3k, li.col3l, li.col3m, li.col3n, li.col3o, li.col3p, li.col3q, li.col3r, li.col3s, li.col3t   {
  margin-left: 34em;
}

.coltopper {
  margin-top: -51em;
}

#listyles {
display: block;
padding-top: 45px;
margin: 0;
width: 100%;
list-style-type: none;
}

a:link {
color: #06f;
text-decoration: none;
}

a:hover {
color:#f00;
text-decoration: none;
}

image {
  border-style: none;
}

li.col2a, li.col3a {
margin-top: -51em;
}

#listyles li {
line-height: 1.5em;
}

h1 {
  text-align: center;
}

#email {
  text-align: center;
  text-decoration: none;
  padding-top: 35px;
  border: 0;

}
-->
</style>
</head>

The HTML
Code:

<body>
<div id="container">
<img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" />
<img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" />
<h1>Tales of Greek Mythology</h1>
<img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" />
<br />

<ul id="listyles">
  <li class="col1a"><u>Gods and Goddesses</u></li>
  <li class="col1b" style="padding-top: 10px;"><a href="aphrodite.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Aphrodite</li>
  <li class="col1c" style="clear: left;"><a href="apollo.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Apollo</li>
  <li class="col1d" style="clear: left;"><a href="artemis.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none:" alt="grapes""></a>Artemis</li>
  <li class="col1e" style="clear: left;"><a href="athena.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Athena</li>
  <li class="col1f" style="clear: left;"><a href="dionysus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Dionysus</li>
  <li class="col1g" style="clear: left;"><a href="hades.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hades</li>
  <li class="col1h" style="clear: left;"><a href="hera.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hera</li>
  <li class="col1i" style="clear: left;"><a href="hermes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hermes</li>
  <li class="col1j" style="clear: left;"><a href="poseidon.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Poseidon</li>
  <li class="col1k" style="clear: left;"><a href="zeus.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Zeus</li>
  <li class="col1l" style="padding-top: 30px;"><u>Tales of Love and Woe</u></li>
  <li class="col1m" style="padding-top: 10px;"><a href="hermes.html#baucis">
<img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Baucis and Philemon</li>
  <li class="col1n" style="clear: left;"><a href="cupid.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Cupid and Psyche</li>
  <li class="col1o" style="clear: left;"><a href="pan.html#echo"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Echo and Narcissus</li>
  <li class="col1p" style="clear: left;"><a href="pan.html#endymion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Endymion</li>
  <li class="col1q" style="clear: left;"><a href="artemis.html#orion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orion</li>
  <li class="col1r" style="clear: left;"><a href="orpheus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orpheus and Eurydice</li>
  <li class="col1s" style="padding: 30px;"><u>Giants and Beasts</u></li>
  <li class="col1t"><a href="artemis.html#otus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Otus and Ephialtes</li>
  <li class="col1u" style="clear: left;"><a href="minotaur.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"alt="grapes"></a>The Minotaur</li>
  <li class="col1v" style="clear: left;"><a href="cyclopes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Cyclopes</li>
  
  <li class="col2a coltopper"><u>Men and Heroes</u></li>
  <li class="col2b" style="padding-top: 10px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Agamemnon</li>
  <li class="col2c" style="clear: left;"><a href="atreus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"></a>Atreus</li>
  <li class="col2d" style="clear: left;"><a href="daedalus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Daedalus and Icarus</li>
  <li class="col2e" style="clear: left;"><a href="athena.html#erichthonius"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erichthonius</li>
  <li class="col2f" style="clear: left;"><a href="heracles.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Heracles</li>
  <li class="col2g" style="clear: left;"><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hyacinthus</li>
  <li class="col2h" style="clear: left;"><a href="hera.html#ixion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Ixion</li>
  <li class="col2i" style="clear: left;"><a href="atreus.html#orestes"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orestes</li>
  <li class="col2j" style="clear: left;"><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pentheus</li>
  <li class="col2k" style="clear: left;"><a href="perseus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Perseus</li>
  <li class="col2l" style="clear: left;"><a href="phrixus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Phrixus
  <li class="col2m" style="clear: left;"><a href="pandora.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Prometheus</li>
  <li class="col2n" style="clear: left;"><a href="hades.html#sisyphus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sisyphus</li>
  <li class="col2o" style="clear: left;"><a href="atreus.html#tantalus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Tantalus</li>
  <li class="col2p" style="padding-top: 30px;"><u>Tales of the Sea</u></li>
  <li class="col2q" style="padding-top: 10px;"><a href="sea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sea Myths</li>
  <li class="col2r" style="clear: left;"><a href="circe.html#glaucus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Glaucus and Scylla</li>
  <li class="col2s" style="clear: left;"><a href="sea.html#nereus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nereus</li>
  <li class="col2t" style="clear: left;"><a href="sea.html#sirens"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Sirens</li>
  <li class="col2u" style="clear: left;"><a href="sea.html#triton"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Triton</li>
  <li class="col2v" style="padding-top: 30px;"><u>Tales of Interest</u></li>
  <li class="col2w" style="padding-top: 10px;"><a href="garden.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: 4px;" alt="grapes"></a>Mythic Garden</li>
  <li class="col2x" style="clear: left;"><a href="samhain.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Blessed Samhain</li>
  <li class="col2y" style="clear: left;"><a href="thor.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Thor</li>
  <li class="col2z" style="clear: left;"><a href="links.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Links and Credits</li>


  <li class="col3a coltopper"><u>Women and Witches</u></li>
  <li class="col3b" style="padding-top: 10px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Alcmene</li>
  <li class="col3c" style="clear: left;"><a href="athena.html#arachne"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Arachne</li>
  <li class="col3d" style="clear: left;"><a href="circe.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Circe</li>
  <li class="col3e" style="clear: left;"><a href="dionysus.html#erigone"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erigone</li>
  <li class="col3f" style="clear: left;"><a href="zeus.html#europa"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Europa</li>
  <li class="col3g" style="clear: left;"><a href="zeus.html#io"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Io</li>
  <li class="col3h" style="clear: left;"><a href="zeus.html#leda"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Leda</li>
  <li class="col3h" style="clear: left;"><a href="leto.html"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>Leto</li>
  <li class="col3h" style="clear: left;"><a href="medea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Medea</li>
  <li class="col3i" style="clear: left;"><a href="leto.html#niobe"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Niobe
  <li class="col3j" style="clear: left;"><a href="pandora.html#pandora"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pandora</li>
  <li class="col3k" style="clear: left;"><a href="persephone.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Persephone</li>
  <li class="col3l" style="clear: left;"><a href="dionysus.html#semele"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Semele</li>
  <li class="col3m" style="clear: left;"><a href="pan.html#syrinx"><img src="images/grape.gif" style="float: left; text-alogn: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Syrinx</li>
  <li class="col3n" style="padding-top: 30px;"><u>Satyrs and Centaurs</u></li>
  <li class="col3o" style="padding-top: 10px;"><a href="chiron.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Chiron</li>
  <li class="col3p" style="clear: left;"><a href="dionysus.html#midas"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>King Midas</li>
  <li class="col3q" style="clear: left;"><a href="apollo.html#marsyas"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Marsyas</li>
  <li class="col3r" style="clear: left;"><a href="chiron.html#nessus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nessus</li>
  <li class="col3s" style="clear: left;"><a href="pan.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pan
  <li class="col3t" style="clear: left;"><a href="chiron.html#peirithous"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Peirithous</li>
</ul>
   </div>
  <!-- end of container div -->
 </body>
</html>

Full Excel VBA Course - Beginner to Expert

3 Column Centered Table Layout...convert To Css

Similar Tutorials

View Content

right guys...this one is a bit backwards. I have a table as follows:

Code:

<table height=100% wieght=100 cellspacing=0 cellpadding=0>
<tr>
<td width=50%></td>
<td width=760px></td>
<td width=50%></td>
</tr>
</table>

For obvious validation reasons, i need to convert this to CSS but keep the 100% height.

Example of it: http://www.ridobusinesscentre.org.uk

All help is welcomed.

Centering A List Within A Table Column

Similar Tutorials

View Content

I know this is probably soooo not kosher, but this is where I'm at ...

I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen.

I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose.

Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it.

Here's the css code:

Code:

/* star rating */

.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
 
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
 
ul.rating li{
display:inline
}
 
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
 
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
 
.rating a:active {
background-position:top;
}

and here's the HTML code (in php format):

Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns.

Cheers.

Julian

Fixed Width Table Column With One Column Spanning The Rest

Similar Tutorials

View Content

Hi

I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed...

html Code:
Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div>

  

    <div class="container"><table cellspacing="0">
      <colgroup>
        <col width="40" />
        <col width="220" />
        <col width="120" />
        <col width="65" />
        <col width="40" />
      </colgroup>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th style="width: 100%;></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td style="width: 100%;></td>
        </tr>
      </tbody>
    </table></div>

css Code:
Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }

  

  


 div.container


 {


   height: 400px;


   width: 800px;


   overflow: scroll;


 }


 table


 {


   width: 100%;


 }


 td


 {


   border-style: solid;


   border-color: silver;


   border-width: 0px;


   padding: 1px 3px;


 }


 th


 {


   border-style: outset;


   border-color: silver;


   border-width: 2px;


   background: silver;


   padding: 1px 3px;


 }

It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells...

Please help me

Help : Two Column Layout : Table In Right Column

Similar Tutorials

View Content

Hi,

http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE.

Any help would be greatly appreciated.

Thanks.

Janusz Jasinski

3 Column List

Similar Tutorials

View Content

I have a list of items and I want to have them in several columns. I will have them in 3 or 4 columns or have it have a set size, like 200px width and have it adjust for the screen resolution.

I set the width on the li or a and that does noting. How do i set the width without having to use block?

Thanks

<ul id="galleryList">
<li><a href="/galleries/index/3">Futurama</a>
<li><a href="/galleries/index/4">Simpsons</a>
<li><a href="/galleries/index/5">Family Guy</a>
<li><a href="/galleries/index/8">Aqua Teen Hunger Force</a>
...
</ul>

#galleryList {
margin: 0px;
padding: 0px;
display: inline;
float:left;
}
#galleryList li {
margin-left: 2px;
padding-left: 0px;
display: inline;
list-style: none;
}
#galleryList li a {
display: inline;
margin-left: 0px;
padding-left: 0px;
background-color: #cccccc;
}

Two Column List

Similar Tutorials

View Content

I cannot get IE6 or 7 to display bullets when using a nested 2 column list.

Can it be done or must I use images?

Firefox, Opera and Safari work as expected.

2 Column List

Similar Tutorials

View Content

Hey guys...

Now i'm obcessed with CSS, i've def got the bug!

I have a list of bullets, using <ul> and <li>. Now rather than have one column, i want two columns, spaced evenly.

Now before i would just add a table, but i dont want to, as they are evil!

So now i wanted to use CSS? Now currently the list is housed in a <div class='displaybox'>, with the CSS as below.

So i could just add a table inside (ie 1 row, 2 cols) and then add the list elements to each side.

or is it correct to use a table in this instance?

Charlie

Positioning A List In My Center Column

Similar Tutorials

View Content

OK, I'm back for another CSS lesson - this time on lists.

My site is designed with typical three-column layout. The left and right columns are floated and
the center column contains most of my content. Sometimes in the center column of a page I want
to include a list, either ordered or unordered. This page is a splendid example:
http://stallinswebdesign.com/vs/general_OfficersContactInfo.php.

I do not yet know how to manipulate the positioning of a list (and lots of other block-level things,
truth be told).

1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to
the left a wee bit so that it lies about 1em to the right of that left border?

2. Can you share with me a CSS standards-based technique for marking up the first element of a
list so that it is left-adjusted and all of the following list elements are indented from it (and I
can adjust the amount of indentation), so the list looks like this:
Code:

My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
     every cyclist knows that orange and black are the fastest colors
     any bike that wins Frame of the Year and Bike of the Year is a winner
     the frame stiffness is top-shelf, and the power transfer is amazing

Or, if one can do that with semantic markup other than lists, please let me know.

Thank you all for looking; I appreciate your effort.

Convert <table> To <div>

Similar Tutorials

View Content

Hi,

the table is simple one as below.

Code:

<style >
table {
	border:1px solid #000;
}
</style>


<table width="200" border="1">
  <tr id="header">
    <td>&nbsp;</td>
  </tr>
  <tr id="content">
    <td>&nbsp;</td>
  </tr>
  <tr id="footer">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

what i try to do is to have a container which contains 3 sub container. By using table the footer can be positioned at the bottom of the page regardless of the length of the content. How do i rewrite it using <div>? Any help is greatly appreciated. Thank you.

Tough One (i Think). Convert This Table Layout To Div's & Css?

Similar Tutorials

View Content

Hi all,

Ooooohhh, I think I have a good one... I am trying to eliminate every single table on my site. I have ONE more page to go.

http://www.bartlett-family.net/chri...cstrategy2.html is what the original layout, with tables. I need to replace it with a table-less version.

I'm attempting that at http://www.bartlett-family.net/chri...icstrategy.html.

I've run into a problem.
Notice on the first page how S, D, H, & P are all supposed to be different colors. That works out fine when, like in the row for "8" all the items are the same (in that case, "H"). But it just won't work when there's any combination of H, S, D, & P.

Have a look at my CSS and source. Can anyone think of a method to solve my dilemna here?

Should I be using lists of some kind instead?

Chris

Table-design Convert Needs Help With Header!

Similar Tutorials

View Content

Hello all, I'm pretty fresh here, but unrelenting confusion has driven me to attempt and find help with my particular question. I am sure there must be a tutorial to help me with this, but I've been all over and I think I'm getting cross-eyed just trying to find what I need!

I have been trying to format a website header section using CSS. With tables, it would seem so easy; make a table with two columns, plop one image on the left, make a margin in between, and plop the other image on the right. But with CSS, I simply can't bend my head around it. It's driving me mad!

The header is simply a rectangular logo, and a decorative image next to it, with a two pixel margin in between them. I've gotten the logo on there in its top left corner, but every time I try to get the decorative image to snuggle in next to it, it keeps wanting to sit UNDER the logo instead.

I have been, to this point, a table designer and apologize if this is an incredibly simple concept with tutorial answers all over the web. Any links to these would be great too!

Your Chance To Convert A Table Dude... Divs Inside Div ?

Similar Tutorials

View Content

HI all...

i have been loving my table layouts, but it seems that if i dont convert i will get left behind, so help a fellow out...

the problem is that i have a complex 3 col layout, and i need the divs to auto size to fill the whole div... code will explain it better i think

Code:

<div style="border:1px solid white;width:100%;height:600px;">

		<div style="border:0px solid blue;height:300px;float:left;">
			<div style="border:1px solid blue;width:100px;height:100px;"></div>
			<div style="border:1px solid red;width:100px;height:100%;"></div>
			<div style="border:1px solid yellow;width:100px;height:100px;"></div>
		</div>

		<div style="border:0px solid yellow;height:300px;float:left;">
			<div style="border:1px solid blue;width:100px;height:100px;"></div>
			<div style="border:1px solid red;width:100px;height:100%;"></div>
			<div style="border:1px solid yellow;width:100px;height:100px;"></div>
		</div>

		<div style="border:0px solid yellow;height:300px;float:left;">
			<div style="border:1px solid blue;width:100px;height:100px;"></div>
			<div style="border:1px solid red;width:100px;height:100%;"></div>
			<div style="border:1px solid yellow;width:100px;height:100px;"></div>
		</div>
		
</div>

the first div is the wrapper, the first is the left then the middle then the right...

but if the middle one changes height the rest are left at there default, and i just cant seem to locate the problem, i give it a day, then its back to tables.... this is not helping me like this CSS stuff

just a note the whole lot will be centered with a margin of 20-30px... so no fixed positions for the inner divs..

frank/

Lock A Table Column In Non Ie

Similar Tutorials

View Content

I want to lock columns as shown at http://web.tampabay.rr.com/bmerkey/...column-csv.html

Unfortunately that only works in IE. I've had a crack at doing it with firefox and it's give me grief.

Any ideas?

Div Tags To Replace A 2 Column Table In A Div Tag

Similar Tutorials

View Content

I'm creating a site with a few div layers. Like so:

Code:

<div id="mainDiv">
	<div id="topLinks"><a href="##" class="linkStyle">Calendar</a> | <a href="##" class="linkStyle">Site Map</a> | <a href="##" class="linkStyle">Home</a></div>
	<div id="siteContent">
		<div id="mainContent">
			<div id="header">
				<a href="##"><img src="img/logo.gif" width="131" height="30" border="0" alt="Logo" title="Logo" style="padding: 10px 0px 12px 19px;" /></a>
				<div id="orangeNav">Top Navigation</div>
			</div>
			<div id="content">
				 ****** Need left navigation and right content here**** 			</div>
		</div>
		<div id="bottomNav">Bottom Navigation Here</div>
		<div id="footer">Footer Info here</div>
	</div>
</div>

The problem is with the bold green part. I'm trying to create a left-side navigation with content to the left. If I create a table, I'm done and it works. Of course, I'm trying not to use a table to set up the design.

The the other div tags are all position: relative. If I add two div tags that are position: absolute and place them, the text put in the absolute tags are not affecting the rest of the page and the footer either covers or gets covered by the absolute tags. However, I can't get it to work with relative div tags.

I'm a beginner so I'm struggling. I know I've done it before, but it's just not working this time.

In case you need it, here's the style sheet:

Code:

body {
 background-color: #1D1F12;
 margin: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The whole container for the page */
#mainDiv {
	position: relative;
	top: 0px;
	left: 0px;
	width: 767px;
	padding: 7px 0px 25px 13px;
}
/* START: Calendar | Site Map | Home link and related styles */
#topLinks {
	position: relative;
	width: 757px;
	padding-bottom: 8px;
	text-align: right;
	font-size: 10px;
	color: #999999;
}
#topLinks .linkStyle {
	font-size: 10px;
	color: #999999;
	text-decoration: none;
}
#topLinks .linkStyle:hover {
	text-decoration: underline;
}
/* END: Calendar | Site Map | Home link and related styles */
/* START: items within the lighter background block */
#siteContent {
	position: relative;
	width: 741px;
	padding: 14px 13px 35px 13px;
	background-color: #393D23;
}
#mainContent {
	position: relative;
	border: 3px solid #ffffff;
}
#header {
	position: relative;
	height: 104px;
	background-image: url(img/bg-header.gif);
	border-bottom: 4px solid #FFF1B8;
}
#orangeNav {
	position: relative;
	height: 25px;
	background-color: #993300;
	border-top: 1px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	text-align: center;
	vertical-align: middle;
}
#orangeNav .navImg {
	padding: 4px 8px 0px 8px;
}
#content {
	position: relative;
	background-image: url(img/bg-content.gif);
	padding: 0px 0px 25px 0px;
}
#leftSide{
	position: relative;
	left: 9px;
	top: 12px;
	width: 150px;
}
#nav {
	position: relative;
	width: 150px;
	border: 1px solid #A8A81F;
	background-color: #E0DD92;
	padding-top: 5px;
}
#nav .navItem {
	padding: 5px 8px 5px 8px;
}
#nav .navItem:hover {
	background-color: #E9E6B0;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link {
	font-size: 10px;
	color: #393D23;
	text-decoration: none;
}
#nav .link:hover {
	text-decoration: underline;
}
#rightSide{
	position: relative;
	left: 200px;
	top: 12px;
	width: 520px;
	font-size: 11px;
	border: 1px solid red;
}
#bottomNav {
	position: relative;
	background-color: #989A8C;
	padding: 2px 25px 2px 0px;
	text-align: right;
}
/* START: footer area and related styles */
#footer {
	position: relative;
	padding: 20px 0px 0px 0px;
	color: #BFC1B8;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
}
#footer .linkStyle {
	font-size: 10px;
	color: #BFC1B8;
	text-decoration: none;
}
#footer .linkStyle:hover {
	text-decoration: underline;
}

Edited to add: I have included the div tags for the left and right portions: #leftSide and #rightSide

2 Column Table Structure With Divs & Span

Similar Tutorials

View Content

Hi,

I'm building a table -like structure with divs and spans. When the columns have long text, the text overflows a bit funnily, so that the text in right column continues from left column.

I have example at: http://www.viewinteractive.fi/tests/div.htm

The page was validated before I put the code there within the textarea.

The important part is he
Code:

<html>
<head>
<style type="text/css">
div.r1 {
	background-color: #ccc;
	width: 400px;
}
div.r2 {
	background-color: #eee;
	width: 400px;
}
span.s1 {
	color: #700;
	width: 150px;
	border-right: 2px solid black;
	float: left;
}
span.s2 {
	color: #070;
}
div.sep {clear: both; }
</style>
</head>
<body>

<div class="r1">
	<span class="s1"> Sometimes this stuff get's quite long. </span>
	<span class="s2"> And it is not a problem, if both columns are long.</span>
</div>
<div class="sep"></div>
<div class="r2">
	<span class="s1"> Now if... </span>
	<span class="s2"> ... only right column is long, the page looks a bit funky. </span>
</div>
<div class="sep"></div>
<div class="r1">
	<span class="s1"> If left is long, it looks ok in IE, but not Firefox. </span>
	<span class="s2"> And right is short.</span>
</div>

</body></html>

I'd rather do this with tables, but that is not an option atm. Any helps?

t.j

Make The Last Column In A Table Take Up The Extra Space

Similar Tutorials

View Content

OK...thbbt.

Situation 1 (the one that works as I want)

Code:

<table style="width: 100%">
  <tr>
    <td style="width: 15em">Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

In Situation 1, the second column expands to be all of the remaining width. This is good.

Situation 2

Code:

<table style="width: 100%">
  <tr>
    <td style="width: 15em">Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space.

The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible.

Anyone have an idea?

Thanks
Tim

When To Use Table Instead Of List?

Similar Tutorials

View Content

I'm kinda confused here...I see almost everywhere, a forum index will be made out of a table. Yet when I think about this, it's simply a _list_ of forums. I know it's easier to put all the data together with a table, but isn't using a list semantically correct here?

Ie6 Issue: Spacer Div In Right Column Sits Below Bottom Of Left Column

Similar Tutorials

View Content

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

<div class="clear"></div>

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob

Three Column Layout: Middle Column Width Woes

Similar Tutorials

View Content

Hey,
So I have a three column layout being implemented as such:

html:
Code:

<div class="content">
    <div class="col1 column"></div>
    <div class="col3 column"></div>
    <div class="col2 column">
        <div class="header">Header</div>
    </div>
</div>

CSS:
Code:

.column {
padding: 10px;
position:relative;
}

.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}

.col1 {
float: left;
width:250px;
}

.col2 {
margin-left: auto;
margin-right: auto;
}

.col3 {
float:right;
width:250px;
}

The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks.
--Surgery

A 2 Column Layout, Let Only The Second Column Scroll Horizontally But Both Vertically

Similar Tutorials

View Content

Question title:
A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically

Hello

I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google.

If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome.

I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample)

f.e
line 1 : value_one - ( some_text - value_two (right justified) )
line 2 : value_one - ( some_text - value_two (right justified) )
line 99:....
e.t.c

Column one has a fixed width of 32px.
'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically.

Finally I need the color behind column one be different then the column 2 and 3.

So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily.
But my problem is that when I scroll horizontally that my first column scrolls away to the left.

Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically?