Associate
- Joined
- 15 Apr 2008
- Posts
- 1,031
- Location
- West Didsbury, Manchester
So, i'm having a touch of trouble again with CSS. In the screenshot below you can see the 'Half Moon Health Foods' website, I have a set of inline elements set to have a background color of red so the boundaries are obvious. Now what I want to be able to do is keep all the elements in one line. Making the text any smaller is not really an option, so I thought I would just wrap the text inside each individual container to fit accross the screen and then it would be dynamic if I wanted to add anymore links. This however has proposed a problem, i can't seem to do it for the life in me. Each link has its own <div class=navLink> and they are all contained in a single container of set width. Is there anyway to have them go onto two lines within thier own containers to fit all in the parent container without going under each other? I hope this is clear enough...
Cheers,
Jack
Code:
/* CSS Document */
body {
margin: 20px;
font-family: sans-serif;
}
#mainContainer {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 950px;
}
#title {
padding: 40px 10px 0px 0px;
line-height: 30px;
background:url('../images/halfmoon-logo.jpg') no-repeat 0 0;
height: 110px;
width:940px;
text-align: right;
color: grey;
overflow: hidden;
}
#links {
padding: 10px 0 0 0px;
height: 30px;
width: 930px;
margin: 0 0 0 0px;
}
#navLink {
width:80px;
vertical-align: middle;
text-align: center;
display: inline;
background-color:red;
overflow: auto;
}
#navLink a {
font-size: small;
}
#body {
width: 100%;
margin: 0 0 0 0px;
}
#footer {
border-top: 4px solid green;
line-height: 30px;
height: 20px;
padding: 0 18px 0 18px;
color: black;
font-size: x-small;
font-weight: bold;
text-align: right;
}
Code:
<div id="links">
<div id='navLink'><a href='index.php'>Home</a></div>
<div id='navLink'><a href='index.php'>Wholefoods & Health Foods</a></div>
<div id='navLink'><a href='index.php'>Food Supplements & Remidies</a></div>
<div id='navLink'><a href='index.php'>Sports Nutrition</a></div>
<div id='navLink'><a href='index.php'>Organic Produce</a></div>
<div id='navLink'><a href='index.php'>Organic Vegebag Scheme</a></div>
<div id='navLink'><a href='index.php'>Special Offers</a></div>
<div id='navLink'><a href='index.php'>Bodycare</a></div>
<div id='navLink'><a href='index.php'>Latest News</a></div>
</div>
Cheers,
Jack