<Span>/HTML Problem [Archive]

Murdok09

08-07-2008, 05:51 AM

Okay, I've asked this several times, and here's the final time. I can't seem to get a good answer from ANYONE.

Okay. On my website, I have a box on the left. Inside that box, there are words ("Contact Us", "Home", etc.). I have » after some of them to denote that if you click the » a drop down menu will arrive. I want all of the » aligned at the right side of the box. If I put a bunch of spaces, it doesn't end up right because of the text kerning (space between certain letters).

Is there ANY WAY possible that I can align these? I have a <span> class set up, but it isn't working. It puts the » on the line BELOW the words; I don't want that.

If you need code, please let me know, but I don't think it will be necessary.

Thanks!

jcdevelopment

08-07-2008, 06:44 AM

Have you tried float the span to the right, or possibly floating both elements to the left?

.menuItem{
float:left;
}

span.drop {
float:right;/*or left depending on size*/
}

VIPStephan

08-07-2008, 11:16 AM

If you need code, please let me know, but I don't think it will be necessary.

It is indeed necessary to see what you have tried so far and to help you by telling what you could do better. The way it is now you make us write code for you without knowing what you really have in mind.

But anyway, if it’s as simple as you describe you have two options:

Make an image out of the arrows and put it in each item as background image, aligned to the right (preferred method).
Put the text in an element floated to the left and the arrows in another element floated to the right like so:

<ul>
<li><a href="">text</a><span>»</span></li>
<li><a href="">text</a><span>»</span></li>
</ul>

li {clear: both;}
li a {float: left;}
li span {float: right;}

Haven’t tested ist but it should work. However, the method with the background image is the preferred method as it’s more semantic and gets along with less code so try that one first.

Murdok09

08-07-2008, 03:34 PM

I turned the arrows into an image, but it STILL won't line up. I am using Nvu, and I can line the images up on the right, but it moves the text over a couple cm (very noticeable). If I add spaces to move the text over, it moves the arrow to a new line.

macwiz

08-07-2008, 03:39 PM

You can use nested divs. Put them both in a div, and than the text in one, and the image in another. Position the image div relative to the text div...

Murdok09

08-07-2008, 03:55 PM

<!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" xml:lang="en"
lang="en"><head> <meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" /><title>Digitalism
Template by George - Coded by HarZens @ ClanTemplates.com</title>
<link rel="stylesheet" href="style.css" /><script
type="text/javascript">  </script></head><body><div
id="wrap"> <div id="menu"><ol><li><a
href="index.html">Home</a></li> <li><a
href="http://www.getphpbb.com/phpbb/index.php?mforum=triadplanetorg">Forums</a></li>
<li><a href="IRC.html">IRC</a></li> <li><a
href="Walkthroughs.html">Walkthroughs</a></li> <li><a
href="#">Requests</a></li> <li><a
href="media.html">Media Center</a></li> <li><a
href="games.html">Games</a></li> <li><a
href="#">Search</a></li> <li><a
href="#">Contact Us</a></li> </ol><div
class="cLeft"></div></div><div id="header"><img
style="width: 911px; height: 182px;" src="images/banner.jpg"
alt="asd" /></div><div id="content"><div
id="leftColumn"><div class="box"><div
class="boxHeader"><h2>Navigation</h2> </div><div
class="boxContent"><ol><ol><span
class="widtheven"><li><a href="index.html">Triad
Home</a> </li></span> </ol><li
style="text-align: right;"><a
href="mailto:contacttriad@gmail.com">Contact Us</a>
           
           
       <a href="index.html#"><span
class="widtheven"><img style="height: 5px; width: 6px;"
alt="" src="../../../../../Desktop/test.png" /></span><span
class="widtheven"></span></a></li> <span
class="widtheven"><li><a href="IRC.html">TPO
IRC Chat</a>        
          
         </li><li><a
href="walkthroughs.html">Walkthroughs</a>  
           
          
  <img style="width: 6px; height: 5px;" alt=""
src="../../../../../Desktop/test.png" /></li></span><span
class="widtheven"> </span><li><a
href="requests.html">Requests</a>  
           
           
          </li><li><div
style="text-align: left;"><a href="media.html"><align
="left">Media
Center</align></a>      
   
         
       <a
href="index.html#"><span class="widtheven"></span></a><a
href="index.html#"><align ="right"><img
style="border: 0px solid ; width: 6px; height: 5px;" alt=""
src="../../../../../Desktop/test.png" /></align></a></div>
</li><li><div style="text-align: left;"><a
href="games.html"><align ="left">Games</align></a> 
 
           
          
      
   <a href="index.html#"><align
="right"></align></a></div></li><li><div
style="text-align: left;">Galleries
           
           
          <a
href="index.html#"><span class="widtheven"></span></a><a
href="index.html#"><align ="right"><img
style="border: 0px solid ; width: 6px; height: 5px;" alt=""
src="../../../../../Desktop/test.png" /></align></a></div>
</li></ol></div></div><div class="box"><div
class="boxHeader"><h2>Art Galleries</h2> </div><div
class="boxContent"><div class="rosterLeft"><div><a
href="#" onmouseover="ctRoster('Bor4t');"
onmouseout="ctRosterClean();"><img
src="./images/roster1.jpg" alt="ClanTemplates.com" /></a></div><div><a
href="#" onmouseover="ctRoster('g4yDuD3');"
onmouseout="ctRosterClean();"><img
src="./images/roster2.jpg" alt="ClanTemplates.com" /></a></div><div><a
href="#" onmouseover="ctRoster('Aniston (L)');"
onmouseout="ctRosterClean();"><img
src="./images/roster3.jpg" alt="ClanTemplates.com" /></a></div></div><div
class="rosterRight"><div><a href="#"
onmouseover="ctRoster('g4yDuD3');" onmouseout="ctRosterClean();"><img
src="./images/roster2.jpg" alt="ClanTemplates.com" /></a></div><div><a
href="#" onmouseover="ctRoster('g4yDuD3');"
onmouseout="ctRosterClean();"><img
src="./images/roster2.jpg" alt="ClanTemplates.com" /></a><div><a
href="index.html#" onmouseover="ctRoster('WhoTFAmI?');"
onmouseout="ctRosterClean();"><img
src="images/roster4.jpg" alt="ClanTemplates.com" /></a></div></div></div><div
id="rosterUser" class="rosterUser">Hover the avatars</div>
</div></div><div class="box"><div
class="boxHeader"><h2>Affiliates</h2> </div><div
class="boxContent"><div class="sponsor"><a
href="http://www.clantemplates.com/"><img
src="./images/sponsorCT.jpg" alt="ClanTemplates.com" /></a></div><div
class="sponsor"><a href="http://www.pinkvolt.com/"><img
src="./images/sponsorGeorge.jpg" alt="PinkVolt.com" /></a></div><div
class="sponsor"><a href="http://www.harzens.com.ar/"><img
src="./images/sponsorHarZens.jpg" alt="HarZens.com.ar" /></a></div><div
class="sponsor"><a href="http://www.harzens.com.ar/"><img
src="./images/sponsorHarZens.jpg" alt="HarZens.com.ar" /></a></div><div
class="sponsor"><a href="http://www.harzens.com.ar/"><img
src="./images/sponsorHarZens.jpg" alt="HarZens.com.ar" /></a></div><div
class="sponsor"><a href="http://www.harzens.com.ar/"><img
src="./images/sponsorHarZens.jpg" alt="HarZens.com.ar" /></a></div></div></div></div><div
id="rightColumn"><div class="box"><div
class="boxHeader"><h2>Gamer Talk</h2> </div><div
class="boxContent"><ol><li><span
class="teamAColor"></span>Video Game Release Dates<span
class="teamAColor"></span><span class="teamBColor"></span></li>
<li><span class="teamAColor"></span>Possible
XBOX360-2 in the works!<span class="teamAColor"></span><span
class="teamBColor"></span></li> <li><span
class="teamAColor"></span>Rock Band 2 in September!<span
class="teamAColor"></span><span class="teamBColor"></span></li>
<li><span class="teamAColor"></span>Activision
Blizzard deal approved!<span class="vsColor"></span><span
class="teamBColor"></span></li> <li><span
class="teamAColor"></span><span class="teamBColor"></span>Gears
of War 2 will launch September 9th of '09.<span class="teamBColor"></span></li>
</ol></div></div><div class="box"><div
class="boxHeader"><h2>Resources</h2> </div><div
class="boxContent"><ol><li><form><select
onchange="location=this.options[this.selectedIndex].value;"
style="font-family: 'Tahoma'; background-color: rgb(153, 204, 204); font-size: 10pt;"><option
value="">Geek Tools</option><option value="">------------------------------</option><option
value="http://www.themaninblue.com/experiment/Cubescape/new.php">Cubescape</option><option
value="http://www.geeks.com/">Geeks.com</option><option
value="http://www.newegg.com/">newegg</option><option
value="http://www.outletpc.com/">OutletPC</option><option
value="http://www.tigerdirect.com/">TigerDirect</option><option
value="http://www.directron.com/">Directron</option><option
value="http://www.portfolio.com/interactive-features/2007/12/running-the-numbers?TID=st092007ab">Running
the Numbers </option><option
value="http://www.escapistmagazine.com/articles/view/editorials/zeropunctuation/4862-Zero-Punctuation-God-of-War-Chains-of-Olympus">Zero
Punctuation</option><option
value="http://www.sciam.com/article.cfm?id=real-life-iron-man-exoskeleton&ec-su_ironman">Real-Life
Iron Man</option><option value="http://marvel.com/">Marvel</option></select>
</form></li><li><form><select
onchange="location=this.options[this.selectedIndex].value;"
style="font-family: 'Tahoma'; background-color: rgb(153, 204, 204); font-size: 10pt;"><option
value="">Developer Tools</option><option value="">------------------------------</option><option
value="http://www.smashingmagazine.com/2006/11/09/online-generators/">Free
Generators</option><option
value="http://www.geocities.com/TimesSquare/Realm/1773/name.htm">Name
Generator</option><option
value="http://start.uber.com/slideshow">Pro Slideshow Maker</option><option
value="http://www.free3dtutorials.com/">3D/CG Tuts</option><option
value="http://www.polldaddy.com/">Polldaddy</option><option
value="http://www.egmstrategy.com/ice/tag-generator.cfm">Social
Tag Generator </option><option
value="http://blog.800hightech.com/best-free-adobe-photoshop-tutorials/1297/">PS
Tutorial Database</option><option
value="http://rainbow.arch.scriptmania.com/tools/marquee_maker.html">Marquee
Maker</option><option
value="http://www.echoecho.com/tooldropdown.htm">EchoEcho
Menu Maker</option><option
value="http://www.ricocheting.com/js/drop.html">Drop-Down
Menu Maker</option></select> </form></li><li><form><select
onchange="location=this.options[this.selectedIndex].value;"
style="font-family: 'Tahoma'; background-color: rgb(153, 204, 204); font-size: 10pt;"><option
value="">Graphic Tools</option><option value="">------------------------------</option><option
value="http://colorblender.com/">Colorblender</option><option
value="http://psdtuts.com/text-effects-tutorials">PSD Tuts</option><option
value="http://vectormagic.com/">VectorMagic</option><option
value="http://picmarkr.com/">PicMARKR</option><option
value="http://www.3dtotal.com/ps100/pstut100.html">100 PS
Tuts</option><option value="http://www.goo3d.com/Pro/">3D
Image Creator</option><option value="http://converticon.com/">Convert
Icon</option><option value="http://www.socwall.com/">Incredible
Wallpapers</option><option
value="http://www.logogenerador.com/">LogoGenerador</option><option
value="http://www.youthedesigner.com/2008/02/29/25-tasty-3d-graphic-design-treats/">25
Graphic Treats</option><option
value="http://www.says-it.com/seal/triangle.php">Official
Seal Generator</option><option
value="http://www.iconspedia.com/">Iconspedia</option><option
value="http://www.fodey.com/generators/newspaper/snippet.asp">Newspaper
Generator</option><option value="http://wordle.net/">Word
Cloud Generator</option><option
value="http://mashable.com/2008/03/01/online-image-editing/">7
Online Image Editors!</option></select> </form></li></ol></div></div><div
class="box"><div class="boxHeader"><h2>Clan
Stats</h2> </div><div class="boxContent"><div
class="forumPosts">NONE | Create a clan to submit!</div>
</div></div><div class="box"><div
class="boxHeader"><h2>Weektorial</h2> </div><div
class="boxContent"><div class="forumPosts">Panic
and Hide your Browsing:<br /> If you browse the net, and want to
hide say a b-day present (or a b-day suit) from snooping eyes,
panic is for you. Simply set a "Panic Key" and press it when you need
to hide what you're looking at. <a
href="https://addons.mozilla.org/en-US/firefox/addon/6367">Panic</a></div>
</div></div><div class="box"><div
class="boxHeader"><h2>Cool Sites</h2> </div><div
class="boxContent"><div class="forumPosts"><div
class="textTotal"><div class="text"><a
href="http://www.gamedev.net/gamejobs/">GameDev Pro Job Ads</a></div>
<div class="textInfo"><a
href="http://dam-age.com/index.php/2008/04/22/next-top-10-fails/">Dam-age.com</a></div>
</div><div class="textTotal"><div class="text"><a
href="http://www.elonka.com/UnsolvedCodes.html">Famous
Unsolved Codes & Ciphers</a></div> <div
class="textInfo"><a href="http://www.instructables.com/">Instructables</a></div>
</div><div class="textTotal"><div class="text"><a
href="http://www.w3schools.com/">W3 Schools Online Coding
Help</a></div> <div class="textInfo"><a
href="http://www.anime-planet.com/index.php">Anime Planet</a></div>
</div><div class="textTotal"><div class="text"><a
href="http://media-convert.com/convert/">Media-Convert Online</a></div>
<div class="textInfo"><a
href="http://shop.unclesamsdeals.com/">Uncle Sam's Outfitters</a></div>
</div><div class="textTotal"><div class="text"><a
href="http://www.replacementdocs.com/news.php">replacementdocs</a></div>
<div class="textInfo"><a
href="http://www.everyday-taichi.com/taiji-qigong.html#sh1">Everyday
Taichi</a></div> </div></div></div></div><div
class="box"><div class="boxHeader"><h2>Spotlight</h2>
</div><div class="boxContent"><div class="fLeft"><div><a
href="#"><img src="./images/ctR.jpg"
alt="ClanTemplates.com" /></a></div><div><a
href="#"><img src="./images/ctDG.jpg"
alt="ClanTemplates.com" /></a></div><div><div><div><a
href="index.html#"><img src="images/ctR.jpg"
alt="ClanTemplates.com" /></a></div></div></div><div><div><div><a
href="index.html#"><img src="images/ctDG.jpg"
alt="ClanTemplates.com" /></a></div></div></div></div><div
class="fRight"><div><a href="#"><img
src="./images/ctB.jpg" alt="ClanTemplates.com" /></a></div><div><a
href="#"><img src="./images/ctLG.jpg"
alt="ClanTemplates.com" /></a></div><div><a
href="#"><img src="./images/ctB.jpg"
alt="ClanTemplates.com" /></a></div><div><div><a
href="index.html#"><img src="images/ctLG.jpg"
alt="ClanTemplates.com" /></a></div></div></div><div
class="fLeft"><div><a href="#"><img
src="./images/ctR.jpg" alt="ClanTemplates.com" /></a></div><div><a
href="#"><img src="./images/ctDG.jpg"
alt="ClanTemplates.com" /></a></div><div><div><div><a
href="index.html#"><img src="images/ctR.jpg"
alt="ClanTemplates.com" /></a></div></div></div><div><div><div><a
href="index.html#"><img src="images/ctDG.jpg"
alt="ClanTemplates.com" /></a></div></div></div></div><div
class="fRight"><div><a href="#"><img
src="./images/ctB.jpg" alt="ClanTemplates.com" /></a></div><div><a
href="#"><img src="./images/ctLG.jpg"
alt="ClanTemplates.com" /></a></div><div><a
href="#"><img src="./images/ctB.jpg"
alt="ClanTemplates.com" /></a></div><div><div><a
href="index.html#"><img src="images/ctLG.jpg"
alt="ClanTemplates.com" /></a></div></div></div><div
class="cBoth"></div></div></div></div><div
id="middleColumn"><div class="news"><div
class="cBoxHeader"><h2>TPO News</h2> </div><div
class="cBoxBg"><div class="cBoxText"><div
class="cBoxTextInfo"><ol><li><span
class="what">By:</span> <span class="bold">Murdok<span
style="color: rgb(0, 0, 0);"> [7/8]</span></span></li>
</ol></div><h2>Major Update</h2>
    I've updated the entire site's layout!
... I hope someone noticed. I'm adding new galleries often, but select
ones will be shown on the left. The new "Spotlight" section will be for
users who have contributed, ranked up, or dont something worthy of a
spotlight.<br />     Those cute little
green arrows to the left are for pop-out menus that will give you many
other options and SHOULD make things better for everyone. The top nav
will be the same. Clan Stats is for everything your clan is up to, and
will be updated weekly... as soon as we get some clans. The
"Weektorial" section will be taking a massive change, because now
instead of a lengthy block of text that no one will read, it will now
be doubley paraphrased. <br />    
You should be able to figure everything out pretty fast, so have fun!<br />
<br /><br /><h2>Video of the Week</h2> <object
height="344" width="425"><param name="movie"
value="http://www.youtube.com/v/6qhgIdP3l3I&hl=en&fs=1" /><param
name="allowFullScreen" value="true" />  
        <embed
src="http://www.youtube.com/v/6qhgIdP3l3I&hl=en&fs=1"
type="application/x-shockwave-flash" allowfullscreen="true"
height="344" width="425"></object><br /><br />NOTE:
If you're going to be offended, don't watch.<br /> The most
watched video on Youtube this week is <a
href="http://www.youtube.com/watch?v=lMXiIQlcIo4">Fred's Mom
is Missing</a>.<br /> <br /><br /><h2>Media
Update</h2> <p>Top Movies: Hancock, Wall-E, and Wanted. <a
href="http://www.fandango.com/">Get tickets now!</a><br />
Top TV Shows: Heroes, House, and Scrubs.  <a
href="http://www.tvguide.com/Listings/default.aspx">Find air
times now!</a><br /> This week's anime is Neon Genesis
Evangelion. <a
href="http://www.animepile.com/category/neon-genesis-evangelion/page/6/">Watch</a>
| <a
href="http://www.anime-planet.com/anirec/neon-genesis-evangelion">Read
More</a></p> <p></p><div
style="text-align: center; margin-left: auto; visibility: visible; margin-right: auto; width: 450px;"><embed
style="width: 435px; visibility: visible; height: 270px;"
allowscriptaccess="never"
src="http://www.musicplaylist.net/mc/mp3player-othersite.swf?config=http://www.musicplaylist.net/mc/config/config_black_noautostart.xml&mywidth=435&myheight=270&playlist_url=http://www.musicplaylist.net/loadplaylist.php?playlist=32998751"
menu="false" quality="high" name="mp3player"
wmode="transparent" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
border="0" height="260" width="435"><br /></div><p></p><div
class="cBoxLink"><span
style="color: rgb(180, 15, 15); font-weight: bold;">News
Archive | Page:</span> <a href="#">1</a><br />
</div></div></div></div></div></div></div><div
id="footer"><div id="footerCopyA">©
TPO 2008<br /> <span style="font-weight: bold;"> 
          
           
           
        </span></div> <div
id="footerCopyB">Designed by George | Coded by HarZens |
ClanTemplates</div> <div id="footerCopyC"><a
href="http://www.pinkvolt.com"><br /></a></div></div></body></html>

This is starting to piss me off, nothing I mean NOTHING is working for me on this.

VIPStephan

08-07-2008, 04:25 PM

Boy, oh boy, what’s that?? :eek:

Where’s your CSS file? I’m sure you have one. You must have one, eh? When I suggested to turn the arrows into an image I also told you to put it into the items as background image, aligned to the right. Thanks for showing the code at least. Now I can see that you have a lot of errors in your HTML, but check yourself on http://validator.w3.org.

Now, to give you an idea of what I mean and of how semantic code is written look at and learn from this:

<ol>
<li class="submenu"><a href="mailto:contacttriad@gmail.com">Contact Us</a></li>
<li><a href="IRC.html">TPO IRC Chat</a></li>
<li class="submenu"><a href="walkthroughs.html">Walkthroughs</a></li>
…

.boxContent .submenu {background: url(image path here) right center no-repeat;}

I’m not sure how it’s supposed to look, though. You could as well put that image as background into the links and make those display: block; to get a 100% width. A link to your page would help tremendously, but at least we need your CSS as well to see what your intention is.

VIPStephan

08-08-2008, 11:03 AM

OK, I’m gonna post this here so others can learn from it.
I don’t understand how such a simple task can be so hard but anyway: You’ve got your list there:

<div class="boxContent">
<ol>
<li><a href="mailto:contacttriad@gmail.com">Contact Us</a></li>
<li><a href="IRC.html">TPO IRC Chat</a></li>
<li><a href="walkthroughs.html">Walkthroughs</a></li>
…
etc.
…

I’ve removed all the useless whitespaces, styles, and the images that are supposed to be background images.
Now you give the list items that will get such an arrow image a class. You can name it whatever, I’ve chosen “submenu”:

<div class="boxContent">
<ol>
<li><a href="mailto:contacttriad@gmail.com">Contact Us</a></li>
<li class="submenu"><a href="IRC.html">TPO IRC Chat</a></li>
<li class="submenu"><a href="walkthroughs.html">Walkthroughs</a></li>
…

Do you have a CSS file? I couldn’t see any reference in the source code but the presence of classes would be useless if they don’t serve any purpose?
If not you create a new file called “screen.css” and put the following code in there:

.boxContent ol {width: 200px; /* adjust as you need */}
.boxContent li {height: 1%; /* layout for IE */}
.boxContent li a {display: block;}
.boxContent .submenu a {background: url(images/arrow.png) right center no-repeat;}

Of course you need to adjust the image path according to your file structure.
You include that CSS file with a link in the <head> section of your document like so:

<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

…and that should be it now. It’s as simple as that.