Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    I'm almost finished with my home page but there is just one more problem that is hampering my progress. I was hoping someone would check out my page in note pad to see what I'm talking about and maybe offer a suggestion on how to fix it. It's kind of hard to explain but I'll try: I have two end text links in borders that are both bumping up against the right side segment of a border. If you slap the markup provided below into notepad, you'll see those text links indicated as "TEXT LINK THREE" and "TEXT LINK TWELVE" "TEXT LINK THREE" is tied to the style block element H2 and "TEXT LINK TWELVE" is tied to the style block element H6. The postion for everything within both those block elements is set to "absolute". What I'm trying to do is stop both those text links from touching the right side segment of their respective borders. I want some space between the text links and the border just like the space between "TEXT LINK ONE" and "HOME" and the border segments to each of their lefts. (Is lefts a word?)
    I tried using "padding" and "margin-right" but what happens when I use them is the shading of the mouse over effects extends beyond the text of the text links (which I don't want). [Try adding a value for padding in H2 or H6 and you'll see what I mean.] Is there anyway to get the space I want between the text links and borders without changing the extent of my mouseover effect? Is there a "text-indent" attribute for the right side of the page? Anyway that's the problem. If someone could slap the markup below into note pad and take a look that would be great. Thank you.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>My First Stylesheet</TITLE>
    <STYLE TYPE="text/css">
    <!--
    a:link, a:visited, a:active {text-decoration: none;}
    a:link {color:black;}
    a:visited {color:black; text-decoration: none}
    a:hover {color:black; background:white; text-decoration: none; }
    a:active {color:black; background:maroon; text-decoration: none}
    H1 { white-space : nowrap; color: black; font-size: 50px; font-family: impact, arial; line-height: 45px; display:inline }
    .newdiv {
    border: 0px solid #000;
    width: 100px;
    }
    #div2 {
    border: 0px solid #000;
    width: 100px;
    }
    H2 { white-space : nowrap; position: absolute; left:10px; top: 110px; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; border: 3px double white; text-indent: 21px; }

    span.y { white-space : nowrap; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; margin-left: 167px; margin-right: 0px }
    .wide { white-space : nowrap; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; margin-left: 100px; margin-right: 0px; padding-right: 0px }
    .wide a:hover {background-color: white}


    p { white-space : nowrap; color: white; font-family: arial; font-size: 17px; font-weight: bold; border: 3px double white; margin-right: 400px; padding-right: 135px }


    span.j { white-space : nowrap; color: black; font-family: arial; font-size: 17px; font-weight: bold; border: 3px double white; padding-right: 140px; }
    span.t { white-space : nowrap; color: white; font-size: 15px; font-weight: bold; margin-right: 100px }
    span.w { white-space : nowrap; color: black; font-size: 15px; font-weight: bold; margin-right: 100px; }
    span.g { text-indent: 95px }
    span.z { text-indent: 10px }
    H6 { white-space : nowrap; position: absolute; left:10px; top: 355px; color: black; font-size: 17px; font-weight: bold; font-family: arial; line-height: 19px; border: 3px double white; text-indent: 21px; }
    span.q { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-left: 20px; margin-right: 0px; padding-right: 0px }
    span.m { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 100px; margin-left: 10px }
    span.c { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 0px; margin-left: 20px }
    span.x { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 0px; margin-left: 40px }
    span.e { white-space : nowrap; color: white; font-size: 17px; font-weight: bold; margin-right: 0px; margin-left: 60px; }

    H5 { white-space : nowrap; color: white; font-family: arial; font-size: 17px; font-weight: bold; border: 3px double white; margin-right: 0px; padding-right: 9px; padding-left: 18px; padding-bottom: 43px }
    -->
    </STYLE></HEAD>
    <BODY BGCOLOR="#999900"><br>
    <H1><IMG SRC="C:\My Documents\My Pictures\giftbox.jpg" WIDTH=70 HEIGHT=52 BORDER=0>
    <a href="LINK.html">SITENAME.COM</a><span class="t">texttexttexttexttexttexttexttext!</span></H1>
    <H2><a href="link.html">TEXT LINK ONE</a><span class="y"><a href="link">TEXT LINK TWO</a></span><span class="y"><a href="link">TEXT LINK THREE</a></span></H2>
    <div id="newdiv" style="position: absolute; top:150px; left:10px;"><p>LEARN ABOUT TEXT LINKS:<br><br><a href="link">TEXT LINK FOUR?</a><br><a href="link"><color: white>TEXT LINK FIVE</a><br><a href="link"><color: white>TEXT LINK SIX</a><br><a href="link">TEXT LINK SEVEN</a><br><br><a href="link">TEXT LINK EIGHT</a><br><a href="link">TEXT LINK NINE</a><br><a href="link">TEXT LINK TEN</a></p></div>
    <div id="div2" style="position: absolute; top:150px; left:380px;"><H5><span class="g">~ANNOUNCEMENT~</span><br><br><span class="w">3/5/03 - texttexttexttexttexttexttexttex<br>ttexttexttextte xtte
    xttexttexttexttexttexttexttexttext<br>texttexttext text
    texttexttexttexttexttexttexttexttex<br>ttexttextte xtte
    xttexttexttexttexttexttexttexttex<br>ttexttexttext text
    texttexttexttexttex<br>ttexttexttexttexttexttextte xtte
    xt.</span></H5></div>
    <H6><a href="link">HOME</a><span class="q"><a href="link">ABOUT US</a></span><span class="x"><a href="link"></a></span><span class="m"><a href="link">TEXT LINK ELEVEN</a><span class="c"><a href="link">PRIVACY POLICY</a></span><span class="e"><a href="link">TEXT LINK TWELVE</a></span></H6>

  2.  

  3. #2
    Senior Member
    Join Date
    Mar 2003
    Location
    Hegelsom, The Netherlands
    Posts
    104
    Member #
    834
    try adding a & nbsp (without the space) after the links: like

    <H6><a href="link">HOME</a><span class="q"><a href="link">ABOUT US</a></span><span class="x"><a href="link"></a></span><span class="m"><a href="link">TEXT LINK ELEVEN</a><span class="c"><a href="link">PRIVACY POLICY</a></span><span class="e"><a href="link">TEXT LINK TWELVE</a>& nbsp </span></H6></body></html>
    Guess who's back! It's me! Tim 2K

  4. #3
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Sorry, I forgot to mention I didn't want to use non-breaking space entities if i could avoid it. I think I only used one on the whole page. I will if no one posts an alternative suggestion but, for various reasons which I won't go into, they're not the most desirable spacers to use.

  5. #4
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    An unrelated matter but this caught my eye:
    Code:
    <IMG SRC="C:\My Documents\My Pictures\giftbox.jpg"
    If this is going to be uploaded eventually, that image won't work. Be sure to set your program to use relative URLs.

    Also, why don't you want to use non-breaking spaces (out of curiousity)? You can use clear gifs as well but IMO that's less clean.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  6. #5
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    I read somewhere that non-breaking space entities slow down website loading and although I wouln't be using very many I kind of wanted to know if there were any alternatives to using them. I guess I can use them, though. It's only a few.

    I fogot what relative URL's are again. (I'm new to html and css). Could you elaborate a little? I know I saw what you're saying somewhere.

  7. #6
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Relative URLs reference a file relative to the current HTML file's directory. For example, if the HTML file is in /mysite/part1/index.html, linking to somedir/anotherpage.html will go to /mysite/part1/somedir/anotherpage.html . Similarly using ../ goes up a directory, so linking to ../home.html will go to /mysite/home.html.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  8. #7
    DFS
    DFS is offline
    Junior Member DFS's Avatar
    Join Date
    Mar 2003
    Posts
    15
    Member #
    872
    I'm not sure this is what you're looking for, but you could put those links into an unordered list, and have much tighter control over it with the CSS, plus you'd have more semantically correct markup.

    Check out: http://www.alistapart.com/stories/taminglists/

  9. #8
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Originally posted by DFS
    I'm not sure this is what you're looking for, but you could put those links into an unordered list, and have much tighter control over it with the CSS, plus you'd have more semantically correct markup.

    Check out: http://www.alistapart.com/stories/taminglists/
    Thanks, DFS. Sounds like a good suggestion. I'll try it out.

    Since this is the first website I've ever done, I'm kind of worried that its look is behind the times. Did you, by any chance, view it on your browser using notepad? If, you did, I'd really appriciate any comments you have on the overall appearance of the page as well. Thanks for your suggestion.

  10. #9
    DFS
    DFS is offline
    Junior Member DFS's Avatar
    Join Date
    Mar 2003
    Posts
    15
    Member #
    872
    Not bad at all for your first try! Hell of a lot better than the first piece of junk I ever made. I wouldn't say it's look is behind the times, I'd call it a bit more "retro"

    I do think you're making it a bit more complicated than it needs to be, there's some superfluous attributes in your CSS, and you're not reusing classes the way you could. But keeping in mind it's your first try, obviously you're code will clean itself up as you figure out more and more what everything means and what everything does.

    By the way, I changed your H6 to:
    H6 {
    position: absolute;
    left:10px;
    top: 355px;
    color: black;
    font-size: 17px;
    font-weight: bold;
    font-family: arial;
    line-height: 19px;
    border: 3px double white;
    padding-right: 21px;
    padding-left: 21px;
    }

    And it had the effect you wanted, it padded the "Link Twelve" away from your border and didn't affect the a:hover color at all. (It made your box wider, but you can fix that)

  11. #10
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    You're a wizard, DFS! I had searched for a whole week for a way to fix that link! (Some pretty smart people gave me suggestions on other forums to no avail.) I finally gave in and resorted to using messy non-breaking space entities. I'm still not sure what it is you changed to make it work, but I tried the code you posted, removing the space entities, and it works flawlessly!

    That little "By the way" just had a big effect on my future ability to design the kinds of pages I want. Never underestimate the potential impact of what seems like a casual suggestion.

    By the way, concerning classes, some people have told me to use:

    #t in the css script and then use <span id="t"> in the html

    and then some people have told me to use what I'm using now:

    span.t in the css script and then <span class="t"> in the html

    The last person said that "id" was out of date. It's very hard to tell which is right with all these equally out-of-date online css tutorials running around, if you know what I mean. Will the way I have the classes typed now still work or will certain browsers run into trouble with it?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:07 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com