CODEWITHSUNDEEP
htmlcss
user3342404
user3342404

Reputation: 73

Horizontal Space between links in HTML/CSS

See the following jsfiddle: http://jsfiddle.net/8uFpD/

I want the links "Home" "What We Do" "Who We Are" and "Donate" to have more horizontal space in between them. I can't figure out how to do it, I've tried lots of ways (span, div, etc.)

How do I add the horizontal space between them without having to resort to putting a white square image? (That seems tacky to me.)

HTML:

<body>
<div class="wrapper">
    <div class="whiteTitleBar">
        <span class="title">My Website</span>
        <span class="navigation">
            <a class="navigation" href="index.html"> Home</a>
            <span class="navigationSpace"/>
            <a class="navigation" href="ourwork.html"> What We Do</a>
            <span class="navigationSpace"/>
            <a class="navigation" href="about.html"> Who We Are</a>
            <span class="navigationSpace"/>
            <a class="navigation" href="donate.html"> Donate</a>
        </span>
    </div>

    <div class="blackHorizontalLine"></div>
    <div class="redYouAreHereBar">HOME</div>
    <div class="blackHorizontalLine"></div>
    <div class="home">
        BLAH BLAH BLAH
    </div>
</div>

</body>

CSS:

body {
font-family:Arial, Helvetica, sans-serif;
margin:0px;
background-image:url('images/bg.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
}

div.wrapper {
width:862px;
margin-left:auto;
margin-right:auto;
border:2px solid black;
margin-top:20px;
margin-bottom:20px;
}

div.home {
background-image:url('images/bg_home.jpg');
background-repeat:no-repeat;
height:492px;
}

div.homeText {
position:relative;
left:390px;
top:400px;
font-size:xx-large;
color:#ffffff;
text-shadow: 2px 2px 3px black;
}

span.title {
color:#000000;
float:left;
font-size:x-large;
}

span.navigation {
color: #000000;
float:right;
}

span.homeTagline {
font-size: x-large;
position:relative;
left:65px;
text-shadow: 2px 2px 3px black;
}


/* unvisited link */
a.navigation:link {
color:#000000; 
text-decoration:none;
}

/* unvisited link */
a.navigation:visited {
color:#000000; 
text-decoration:none;
}

/* mouse over link */
a.navigation:hover {
color:#FF0000; 
text-decoration:none;
} 

/* mouse over link */
a.navigation:active {
color:#FF0000; 
text-decoration:none;
}  



h1.white {
color:#ffffff;
}

div.whiteTitleBar {
background-color:#ffffff;
height:50px;
padding:10px;
text-shadow: 1px 1px 5px #909090;
}

div.redYouAreHereBar {
background-color:#ff0000;
height:50px;
padding:10px;
font-size:xx-large;
color: #ffffff;
text-shadow: 2px 2px 5px black;
}


div.white {
background-color:#ffffff;
}

div.red {
background-color:#ff0000;
}

div.teal {
background-color: #008080;
}

div.lightGray {
background-color: #D1D0CE;
}

div.grayTransparent {
background-color: #837E7C;
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
}

div.darkGray {
background-color: #404040;
}

div.whiteTransparent {
background-color: #ffffff;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}

div.blackBorder {
border:2px solid black;
}

div.blackHorizontalLine {
border-bottom:2px solid black;
}

Solution that worked for me

I added this to the css

span.navigationSpace {
    padding-left: 50px;
}

and I also tested this, and it also worked (as an alternative solution):

span.navigationSpace {
    margin-left: 50px;
}

I thought I tried these already, but maybe I just needed to delete my cache for the changes to show up and I somehow missed it?

I selected Roy's answer because it led me to try this out. I liked this solution better than the other answer because it separates the text style from the layout style, more modularly. (And another answer had a margin on the far right side which I preferred to not have.)

Upvotes: 7

Views: 86026

Answers (1)

royhowie
royhowie

Reputation: 11171

a.navigation-link {
  padding: 0px 10px;
  word-wrap: normal;
  display: inline-block;
}

padding's full syntax is top right bottom left, but there are shorthands, which you can read more about on MDN. I used top-bottom right-left in the example above (so 0px for the top and bottom and 10px for the right and left sides).

Upvotes: 13

Related Questions