Making an Indention

All Forums >> [Web Development] >> General Web Development

Message

Xplorer4x4 -> Making an Indention (6/5/2007 15:20:30)

I need to make a small indent but cant figure out how. For example instead of:
- <a href="/media/media.php">Multi Media</a> 
- <a href="/media/pics.php">Pictuers</a> 
- <a href="/media/video.php">Videos</a> 

I want it to look like this just not quite as centered as you see.
- <a href="/media/media.php">Multi Media</a>

- <a href="/media/pics.php">Pictuers</a> 
- <a href="/media/video.php">Videos</a>

Here is the complete code.

<table width="750" height="100%" border="0" cellspacing="0" cellpadding="0" valign="top">
  <tr>
    <td width="130" valign="top"><br>
      <table align="center" width="130" border="1" bordercolor="#3399cc" "cellspacing="0" cellpadding="0" valign="top">
        <tr> 
          <td height="20" bgcolor="#336699" valign="center"><font face="verdana" size="2">
						: Navagation :</font></td>
        </tr>
        <tr> 
          <td valign="top"> 
            <p>
            <font face="verdana" size="1.5">            
               - <a href="index.php">Home</a><br>
               - <a href="shows.php">Shows</a><br>
               - <a href="results.php">Results</a><br>
               - <a href="roster.php">Roster</a><br>
               - <a href="/media/media.php">Multi Media</a><br>
               - <a href="/media/pics.php">Pictuers</a><br>
               - <a href="/media/video.php">Videos</a><br>
               - <a href="/forums/index.php">Message Board</a><br>
               - <a href="http://myspace.com/ccwprowrestling">CCW on Myspace</a><br>
               </font>
               </p>
            </td>
        </tr>
      </table>

How can i accomplish this? Thanks!

Reflect -> RE: Making an Indention (6/5/2007 15:47:42)
Welcome to OutFront!!! I would use CSS. Make a <div>. Then in your stylesheet make a class/id and set the margin to your needed spacing. So where you have <a href="/media/pics.php">Pictuers</a><br> it would look like <a class="whatever" href="/media/pics.php">Pictuers</a><br>. Repeat teh class value for each hyper link that you want indented. Just thinking out loud. I have not tested this. Take care, Brian

Xplorer4x4 -> RE: Making an Indention (6/6/2007 1:26:11)
Hmm the only problem with adding class to the anchor would be the dash would not be margined, only the text. So am I going to have to use a div instead to be able to margin the - as well as the anchor?

Tailslide -> RE: Making an Indention (6/6/2007 2:36:01)

What you've got there is a list of links and therefore it should all be within a list.

So instead of this:

 <p>
            <font face="verdana" size="1.5">            
               - <a href="index.php">Home</a><br>
               - <a href="shows.php">Shows</a><br>
               - <a href="results.php">Results</a><br>
               - <a href="roster.php">Roster</a><br>
                - <a href="/media/media.php">Multi Media</a><br>
               - <a href="/media/pics.php">Pictuers</a><br>
               - <a href="/media/video.php">Videos</a><br>
               - <a href="/forums/index.php">Message Board</a><br>
               - <a href="http://myspace.com/ccwprowrestling">CCW on Myspace</a><br>
               </font>
               </p>

I'd do this:

<ul id="linklist">
  <li>- <a href="index.php">Home</a></li>
  <li>- <a href="shows.php">Shows</a></li>
  <li>- <a href="results.php">Results</a></li>
  <li>- <a href="roster.php">Roster</a></li>
  <li>- <a href="/media/media.php">Multi Media</a></li>
  <li class="indent">- <a href="/media/pics.php">Pictuers</a></li>
  <li class="indent">- <a href="/media/video.php">Videos</a></li>
  <li class="indent">- <a href="/forums/index.php">Message Board</a></li>
  <li class="indent">- <a href="http://myspace.com/ccwprowrestling">CCW on Myspace</a></li>
</ul>

CSS:

#linklist li {list-style-type:none;font-family:Verdana, Arial, sans-serif; font-size:150%;}
#linklist li.indent {margin-left:20px;}

Ooh I'm on a roll now! Is this indented bit of the list actually sub-topics for the MultiMedia section? If so then what you want to do rather than faffing around with classes is to add a sub-list - that would be semantically correct so your HTML would be;

<ul id="linklist">
  <li>- <a href="index.php">Home</a></li>
  <li>- <a href="shows.php">Shows</a></li>
  <li>- <a href="results.php">Results</a></li>
  <li>- <a href="roster.php">Roster</a></li>
  <li>- <a href="/media/media.php">Multi Media</a>
     <ul>
	 <li>- <a href="/media/pics.php">Pictures</a></li>
         <li>- <a href="/media/video.php">Videos</a></li>
         <li>- <a href="/forums/index.php">Message Board</a></li>
         <li>- <a href="http://myspace.com/ccwprowrestling">CCW on Myspace</a></li>
     </ul>
  </li>
</ul>

And the CSS would be:

#linklist li {list-style-type:none;}
#linklist li li {color:red;}
#linklist li li a {color:red;}

Xplorer4x4 -> RE: Making an Indention (6/6/2007 12:32:02)

Well I used
CSS:

#linklist li {list-style-type:none;}
#linklist li.indent {margin-left:10px;}

And my list went like:

<ul id="linklist">
  <li>- <a href="index.php">Home</a></li>
  <li>- <a href="shows.php">Shows</a></li>
  <li>- <a href="results.php">Results</a></li>
  <li>- <a href="roster.php">Roster</a></li>
  <li>- <a href="/media/media.php">Multi Media</a></li>
  <li class="indent">- <a href="/media/pics.php">Pictuers</a></li>
  <li class="indent">- <a href="/media/video.php">Videos</a></li>
  <li>- <a href="/forums/index.php">Message Board</a></li>
  <li>- <a href="http://myspace.com/ccwprowrestling">CCW on Myspace</a></li>
</ul>

Now I have a problem with the list not being alligned to the left. I tried to set a margin for #linklist li {list-style-type:none;} but had no success:
http://ccwwrestling.5gbfree.com/media.php

Tailslide -> RE: Making an Indention (6/6/2007 14:33:07)
I'm not on my pc at the moment so i can't check for you - but I'd try fiddling with margins and padding on the UL rather than the LI.

Xplorer4x4 -> RE: Making an Indention (6/6/2007 14:51:55)
I tried this but it did not work: #linklist ul {margin-left:0px;list-style-type:none;}

Reflect -> RE: Making an Indention (6/6/2007 15:33:54)
You could also use a solution that is out there already... http://www.google.com/search?hl=en&q=css%2Blist%2Bnavigation&btnG=Google+Search Many navigation CSS lists to choose from. Take care, Brian

Xplorer4x4 -> RE: Making an Indention (6/6/2007 15:40:36)
Thanks I will keep the list in mind for later but for now i just want to get the list organized this way.

Tailslide -> RE: Making an Indention (6/7/2007 10:14:58)
Ok change the #linklist ul rule to this: #linklist {margin-left:0px;list-style-type:none;padding:0;} That fixes it.

Xplorer4x4 -> RE: Making an Indention (6/7/2007 12:15:14)
Tailslide to the rescue once again! I was so close to :p Thanks again!

Misafir -> RE: Making an Indention (7/21/2007 10:46:00)
Nice thank youu.

mtfm -> RE: Making an Indention (7/23/2007 19:22:28)
I would have just used <blockquote> -stuff to be indented goes here </blockquote> I was wondering why no one suggested this, did a quick google search, and noticed that this tage is apparently deprecated. [&o] /rushes off to update site, where this tag is used nearly every time an indent is required.

d a v e -> RE: Making an Indention (7/24/2007 0:15:26)
not as far as i'm aware: http://www.w3.org/TR/html401/struct/text.html#edef-BLOCKQUOTE you wouldn't use blockquote for this anyway, only for - wait for it- block quotes! :)

Tailslide -> RE: Making an Indention (7/24/2007 2:57:28)
Blockquotes are fine for quotes as Dave says but I wouldn't use them just to indent text - much easier just to add a left-margin to whatever bit of the page the text to be indented is in - in this case a list. It's all about semantics - proper use of tags.

Page: [1]

0.09375