Menu
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.)
480
One of the most confusing things to new users who're creating a web page is that they cannot press the spacebar multiple times to make additional spaces. To create extra spaces before, after, or in-between your text, use the (non-breaking space) extended HTML character.
The easiest way to give space between two links in CSS is to make use of the margin-right or the margin-left properties. The margin-right property specifies a margin(space) on the right side of an element. Which can be specified in px , % , em , rem , etc.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Type where you want to insert an extra space. Add one non-breaking space character for every space you want to add. Unlike pressing the spacebar multiple times in your HTML code, typing more than once creates as many spaces as there are instances of .
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).
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
