|
| |
|
|
Xplorer4x4
Posts: 18
Joined: 5/22/2007
Status: offline
 |
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><br>
- <a href="/media/pics.php">Pictuers</a><br>
- <a href="/media/video.php">Videos</a><br>
I want it to look like this just not quite as centered as you see.
- <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>
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
Posts: 4769
From: USA
Status: offline
|
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
Posts: 18
Joined: 5/22/2007
Status: offline
|
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
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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;}
< Message edited by Tailslide -- 6/6/2007 2:47:21 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Xplorer4x4
Posts: 18
Joined: 5/22/2007
Status: offline
|
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
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Xplorer4x4
Posts: 18
Joined: 5/22/2007
Status: offline
|
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;}
| |
|
|
|
Xplorer4x4
Posts: 18
Joined: 5/22/2007
Status: offline
|
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
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Xplorer4x4
Posts: 18
Joined: 5/22/2007
Status: offline
|
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
Posts: 4
Joined: 7/20/2007
Status: offline
|
RE: Making an Indention - 7/21/2007 10:46:00
Nice thank youu.
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
