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
Like Tree2Likes

Thread: word-spacing difficulties

  1. #1
    Junior Member
    Join Date
    Jul 2014
    Posts
    23
    Member #
    39721

    word-spacing difficulties

    What am I missing? I've played out a few models but every time nothing works.

    I'm trying to add spacing to the words in a particular div. This, btw, is my attempt to stay away from doing the design with tables. It will be bottom navigation and I'm insistent on my links being text links, not hot spots over a text image.


    I'm trying to avoid that, any suggestions on how to get my word spacing figured out? Letter spacing works fine, etc, but this I can't get. If there's a better, simpler way, I'm all ears, but it seems like if I could get the word spacing to work, that would be the best.

    <html>
    <head>
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>anewp</title>
    <!-- TemplateEndEditable -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Save for Web Styles (ane.psd) -->
    <style type="text/css">
    <!--
    /' css '/

    *{margin:0; padding:0}

    body {background-color: #000}
    span {word-spacing:40px;}


    #wrapper {width:1124px; height:auto}

    #header {
    width: 1124px;
    height: 333px;
    background-image: url(../public_html/images/an_01.jpg);
    background-repeat: no-repeat;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    }

    #nav {width: 270px; height: 1086px; float: left}

    #content {
    width: 684px;
    height: 1086px;
    float: left;
    color: #FFF;
    background-repeat: no-repeat;
    background-image: url(../public_html/images/a03.jpg);
    text-align: right;
    }

    #right {
    width: 170px;
    height: 1086px;
    background-image: url(../public_html/images/ank_04.jpg);
    background-repeat: no-repeat;
    float: left;
    clear: right;
    }
    #upperfooter {
    width: 1124;
    height: auto;
    float: left;
    background-image: url(../public_html/images/an_tb.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    }

    #footer {
    width: 1124px;
    height: 180px;
    float: left;
    background-image: url(../public_html/images/ank_bb.jpg);
    background-repeat: no-repeat;
    color: #FFF;
    font-size: 18px;
    text-align: center;
    background-position: bottom;
    }
    -->
    </style>
    <!-- End Save for Web Styles -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <div id="wrapper">

    <div class="fontsnstuff" id="header"></div>
    <div id="nav"><img src="http://02.jpg" usemap="#Map" border="0">
    <map name="Map">

    </map>
    </div>
    <!-- TemplateBeginEditable name="EditRegion3" -->
    <div id="content"></div>
    <!-- TemplateEndEditable -->
    <div id="right"></div>
    <!-- TemplateBeginEditable name="EditRegion4" -->
    <div id="upperfooter">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <!-- TemplateEndEditable -->
    <div id="footer"><span>where do you want to go?</span>
    </div>
    </div>


    </body>
    </html>

  2.  

  3. #2
    Junior Member
    Join Date
    Jul 2014
    Posts
    23
    Member #
    39721
    The footer div is the spot in question.

  4. #3
    Junior Member Mikasa Ackerman's Avatar
    Join Date
    Aug 2014
    Posts
    21
    Member #
    39814
    Liked
    6 times
    Are the words "where do you want to go" supposed to be your footer links? If so this is typically done using a list instead of a sentence. The list items can then be spaced however you like using margin and padding. I'll show you an example of how to get a horizontal list of links using CSS:

    Code:
    <html>
    <head>
    
    <title>anewp</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    
    /' css '/
    
    *{margin:0; padding:0}
    
    body {background-color: #000;}
    span {word-spacing:40px;}
    
    
    #wrapper {width:1124px; height:auto;}
    
    #header {
    width: 1124px;
    height: 333px;
    background-image: url(../public_html/images/an_01.jpg);
    background-repeat: no-repeat;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    }
    
    #nav {width: 270px; height: 1086px; float: left}
    
    #content {
    width: 684px;
    height: 1086px;
    float: left;
    color: #FFF;
    background-repeat: no-repeat;
    background-image: url(../public_html/images/a03.jpg);
    text-align: right;
    }
    
    #right {
    width: 170px;
    height: 1086px;
    background-image: url(../public_html/images/ank_04.jpg);
    background-repeat: no-repeat;
    float: left;
    clear: right;
    }
    #upperfooter {
    width: 1124;
    height: auto;
    float: left;
    background-image: url(../public_html/images/an_tb.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    }
    
    #footer {
    width: 1124px;
    height: 180px;
    float:left;
    background-image: url(../public_html/images/ank_bb.jpg);
    background-repeat: no-repeat;
    color: #FFF;
    font-size: 18px;
    text-align: center;
    background-position: bottom;
    }
        
    #footer ul{
        width:800px;
        margin:0 auto;
    }
    
    #footer ul li{
        float:left;
        padding:10px;
        margin:40px;
    }
        
    
    </style>
    
    </head>
    <body>
    <div id="wrapper">
    
    <div class="fontsnstuff" id="header"></div>
    <div id="nav"><img src="http://02.jpg" usemap="#Map" border="0">
    <map name="Map">
    
    </map>
    </div>
    
    <div id="content"></div>
    
    <div id="right"></div>
    
    <div id="upperfooter">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    
    <div id="footer">
        <ul>
            <li><a href="#">where</a></li>
            <li><a href="#">do</a></li>
            <li><a href="#">you</a></li>
            <li><a href="#">want</a></li>
            <li><a href="#">to</a></li>
            <li><a href="#">go</a></li> 
        </ul>
    </div>
    
    
    </body>
    </html>

  5. #4
    Junior Member
    Join Date
    Jul 2014
    Posts
    23
    Member #
    39721
    Yes, the sentence was just to be 'something random, not what I'm actually working with.

    stuff stuff stuff stuff
    link link link link
    link link link link
    link link link link

    I'd like to do something like the above.

  6. #5
    Junior Member Mikasa Ackerman's Avatar
    Join Date
    Aug 2014
    Posts
    21
    Member #
    39814
    Liked
    6 times
    So, in your footer you want section headers, with a list of links under each one? Where "stuff" is the section header for that part of the footer (probably not a link itself?), and "link" are all the actual navigation links?

    If that's what you're looking for, then the advise I gave above isn't the way to go.

    You would create a div for each footer section (each header and the list of links under it). Then you would use CSS to give each div a width with the appropriate pixel dimension or width so that all of the sections fit on the same line. Then you would float them all to the left so they line up next to each other instead of on top of each other.

    Then, you would place one header in each div, and a list of links below the header. You would not style the list the same way as I had in the example above, b/c in this case you want a normal list, not a horizontal list.

    Note: I keep saying create a "div" above, but if it makes semantic sense you could use the "section" element instead.

    Something like this:

    Code:
    <html>
    <head>
    
    <title>anewp</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    
    /' css '/
    
    *{margin:0; padding:0}
    
    body {background-color: #000;}
    span {word-spacing:40px;}
    
    
    #wrapper {width:1124px; height:auto;}
    
    #header {
    width: 1124px;
    height: 333px;
    background-image: url(../public_html/images/an_01.jpg);
    background-repeat: no-repeat;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    }
    
    #nav {width: 270px; height: 1086px; float: left}
    
    #content {
    width: 684px;
    height: 1086px;
    float: left;
    color: #FFF;
    background-repeat: no-repeat;
    background-image: url(../public_html/images/a03.jpg);
    text-align: right;
    }
    
    #right {
    width: 170px;
    height: 1086px;
    background-image: url(../public_html/images/ank_04.jpg);
    background-repeat: no-repeat;
    float: left;
    clear: right;
    }
    #upperfooter {
    width: 1124;
    height: auto;
    float: left;
    background-image: url(../public_html/images/an_tb.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    }
    
    #footer {
    width: 1124px;
    height: 180px;
    float:left;
    background-image: url(../public_html/images/ank_bb.jpg);
    background-repeat: no-repeat;
    color: #FFF;
    font-size: 18px;
    text-align: center;
    background-position: bottom;
    }
        
    #footer ul{
        margin:5px 0;
        list-style: none;
    }
    
    #footer ul li{
        padding:10px;
        margin:10px 0;
        text-align: left;
    }
        
    #footer div{
        width:25%;
        float:left;
    }
        
    #footer h3{
        color:#fff;
    
    }
        
    
    </style>
    
    </head>
    <body>
    <div id="wrapper">
    
    <div class="fontsnstuff" id="header"></div>
    <div id="nav"><img src="http://02.jpg" usemap="#Map" border="0">
    <map name="Map">
    
    </map>
    </div>
    
    <div id="content"></div>
    
    <div id="right"></div>
    
    <div id="upperfooter">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    
    <div id="footer">
        <div>
            <h3>Header One</h3>
            <ul>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li> 
            </ul>
        </div>
         <div>
             <h3>Header Two</h3>
            <ul>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li> 
            </ul>
        </div>
         <div>
             <h3>Header Three</h3>
            <ul>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li> 
            </ul>
        </div>
         <div>
             <h3>Header Four</h3>
            <ul>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li> 
            </ul>
        </div>
    </div>
    
    
    </body>
    </html>
    middy likes this.

  7. #6
    Junior Member Mikasa Ackerman's Avatar
    Join Date
    Aug 2014
    Posts
    21
    Member #
    39814
    Liked
    6 times
    It would look like this (obviously you would style it to suite your specific needs)

    Screen Shot 2014-08-07 at 12.47.20 PM.jpg
    middy likes this.

  8. #7
    Junior Member Mikasa Ackerman's Avatar
    Join Date
    Aug 2014
    Posts
    21
    Member #
    39814
    Liked
    6 times
    PS in my comment, when I say "this is typically done using a list instead of a sentence" I don't mean anything against the words you've selected as your filler text. I mean, structurally, a span isn't the way to go.

    In a span, the whole span is treated as one single entity, so it's hard to space the words out or get them to behave individually. In other words, you can give a width, padding, and margin to the whole span, but not to the words within that span. Same goes for words in any heading tag (h1-h6) paragraph tag (p), or untagged content. Each heading, and each paragraph is treated as one entity. If you want to style individual words, you have to wrap each individual word in its own span (not always the best way to go) or you have to divide the words into other separated tags like lists or divs.

    So, just to reiterate, it makes more sense to divide your links into either list items, or into separate divs depending on what you're trying to do, so you can treat each word as its own separate element. When each word is treated as an element, then you can give each separate word a width, padding, and margin to arrange them on the page any way you like.

    Hope that makes sense!

  9. #8
    Junior Member
    Join Date
    Jul 2014
    Posts
    23
    Member #
    39721
    Thanks, wow! This is exactly how I wanted it to work. I've managed to play with the margins inside the footer ul li and h3 divs combined to give the desired look, too.

    This is really amazing and could be easily adapted to display many things.

    And just to make sure I'm still learning, the #footer ul li and the #footer h3, are a....child style to the main footer div, or what?

    You've been an immense help to me. Many thanks.

  10. #9
    Junior Member Mikasa Ackerman's Avatar
    Join Date
    Aug 2014
    Posts
    21
    Member #
    39814
    Liked
    6 times
    Quote Originally Posted by middy View Post
    And just to make sure I'm still learning, the #footer ul li and the #footer h3, are a....child style to the main footer div, or what?
    Hmm, sort of. Here's how these work:

    #footer, ul, and li are selectors in CSS. A selector just selects the html element that styles should apply to. When you write something like this

    Code:
    #footer{
        width:700px;
        background-color: #ccc;
    }
    you're telling the browser any element with the ID of "footer" should be 700px wide, and have a background of light gray. You can add the ID of "footer" to any element on a page, really, although IDs should only be used once per page. So, instead of a div with the ID "footer" like you have now, you could have a header, nav, ul, ol, li, p, a, or any other element with an ID of "footer".

    Now, when you combine selectors like I did before, like #footer ul li, you can think of it like making a compound selector. In the process, you're making the selector very specific.

    Code:
    #footer ul li{
         color:green;
         font-family: Helvetica, sans-serif;
    }
    The example above will make list items that are within unordered lists that are within an element with an ID of "footer" green with Helvetica typeface. Other lists elsewhere on the page will not be affected by this style, and this style does not apply to other elements within the #footer div, or to the ul by itself. In a compound selector like this, the last element that's referenced in the list is the one that gets the style. The rest of the selectors describe a relationship (in this case the ancestry of the li).

    Now, if you want to apply styles that apply to all list items on the page, whether they are in unordered or ordered lists, you can apply those styles to the simple li selector. But, remember, the more specific a selector is, the more priority it has. Meaning, if you do this:

    Code:
    #footer ul li {
         color:green;
         font-family: Helvetica, sans-serif;
    }
    
    li {
       color:blue;
    }
    the simple li selector won't override the more specific #footer ul li selector above it. Normally in the CSS cascade a style that occurs later in the style sheet will override a style that occurs before it. But, a less specific selector can't override a more specific selector. So, while you might imagine that the second declaration (li{ color:blue;}) would change the list items in the footer to blue rather than green, since the footer list selector is much more specific, it will stay green.

    There are different ways to combine selectors to represent different relationships between the elements you're referring to. In the examples above, a single space between the selectors indicates ancestry. The li is somewhere within the ul, which is somewhere within an element with the ID of "footer". The ul could be buried within several nested divs, with the outermost container div having the ID of "footer", and this selector would still work. Now, If I were to write #footer>ul>li instead, the > symbols represent a direct child relationship where li is a direct child of ul, and ul is a direct child of an element with an ID of "footer". In that case, the list that's buried within several divs before coming to the outermost div with an ID of "footer" would not be affected by the styles I write, since that list is not a direct child of an element with an ID of "footer". There's a whole list of cool cs selectors you can use here: CSS Selectors Reference

    Anyway, the way I wrote it in the example I gave you was b/c I was assuming you might want to apply some styling to the lists and h3s in your footer without having those styles apply to other lists and h3s elsewhere in your document.

    Hope that makes sense!
    Last edited by Mikasa Ackerman; Aug 07th, 2014 at 09:01 PM.

  11. #10
    Junior Member
    Join Date
    Jul 2014
    Posts
    23
    Member #
    39721
    Oddly it does make sense and it's never been explained to me in such a clear manner.

    Let me ask you, I"m adjusting the margins, is that the best way to get it positioned where I want it within the footer?


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 06:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com