1 reply [Last post]
outersquare
Offline
newbie
Last seen: 8 years 27 weeks ago
Timezone: GMT+8
Joined: 2011-08-29
Posts: 4
Points: 7

Hey everyone, is it possible to make each menu item a different line-height?
What I'm faced with is a multi-line navbar. I have two items in there at the moment, one being one line and the other being over two. Is there any way I can range the one that's one lined to bottom?
At the moment it's top aligned.
My working website is http://www.outersquare.com.au/pioneercredit_website

I'm also using Joomla 1.6

Any help would be much appreciated.

Thank you

OS

Below is my CSS code:

@charset "utf-8";
body  {
  background-color: #111;
  margin: 0;
  color: #000000;
  font-family: Verdana, Geneva, sans-serif;
  background-image: url(../images/bground.png);
  background-repeat: repeat-x;
  font-size: 90%;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
img {
  border-style: none;
}
h1 {
  font-family: Proxima Nova, Verdana, Geneva, sans-serif;
  color: #F58025;
  font-weight: normal;
  font-size: 24px;
  padding-top: 0px;
}
h2, h3, h4 , h5   , h6 {
  font-family: Verdana, Geneva, sans-serif;
  color: #F58025;
  font-weight: normal;
  font-size: 18px;
}
#container {
  background-color: #111;
  background-image: url(../images/wrapper_bg.png);
  height: 675px;
  width: 753px;
  margin: auto;
  padding-top: 0px;
  padding-right: 136px;
  padding-bottom: 0px;
  padding-left: 136px;
}
/* front page image */
#mainimage {
  width: 752px;
  clear: left;
  padding-top: 14px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
/* filler */
#mainimage div.filler {
  width: 752px;
  clear: left;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  margin-bottom: -15px;
  display: block;
  height:auto;
}
/* inner page background */
#mainimage div.item-page {
  padding-top: 40px;
  padding-left: 100px;
  height: 460px;
}
/* top header bar */
#header {
  height: 121px;
}
#header img {
  float: left;
  margin-top: 0px;
  padding-top: 0px;
}
#header ul {
list-style-type:none;
margin-top:0px;
padding-top:30px;
padding-left: 0px;
overflow:hidden;
}
#header li a {
float:left;
display:block;
width:70px;
font-weight:normal;
color:#FFFFFF;
background-color:#98bf21;
text-align:left;
padding-left: 0px;
padding-right: 5px;
text-decoration:none;
font-size: 11px;
text-transform: lowercase;
height: 36px;
line-height: 1.5em;
}
#header li a:hover,a:active {
background-color:#7A991A;
}
#header .item102 a {
float:left;
display:block;
width:70px;
font-weight:normal;
color:#FFFFFF;
background-color:#98bf21;
text-align:left;
padding-left: 0px;
padding-right: 5px;
text-decoration:none;
font-size: 15px;
text-transform: lowercase;
height: 36px;
line-height: 1.5em;
}
#header .item102 a:hover,a:active {
background-color:#7A991A;
}
/* front page content */
#maincontent {
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 0px;
  margin-top: 0px;
  width: 752px;
  height: 460px;
  /* background: url(../images/bodytext.png) no-repeat center top; */
}
/* front page background */
#maincontent div.module {
  display: block;
  height:auto;
  background: url(../images/body_container_bg.png) no-repeat center top;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 30px;
  width: 752px;
  height: 325px;
}
#maincontent div.custom {
  padding-left: 100px;
  padding-right: 50px;
  padding-top: 0px;
  width: 632px;
  height: 325px;
  margin-top: 0px;
}
#maincontent div.module h1, h2, h3{
  padding-left: 100px;
  padding-right: 20px;
  padding-top: 0px;
  margin-top: 0px;
}
/* inside pages */
#maincontent div.item-page {
  background: url(../images/bodytext.png) no-repeat center top;
  padding-top: 0px;
  padding-left: 100px;
  padding-right: 50px;
  padding-bottom: 0px;
  height: 460px;
  text-align: justify;
  font-size: 13px;
  overflow: auto;
  margin-top: 0px;
}
#maincontent div.item-page p {
  line-height: 1.5em;
}
#maincontent div.item-page inside h1, h2, h3 {
  margin: 0px;
}
/* front page */
#maincontent div.frontpage{
  background: url(../images/body_container_bg.png) no-repeat center top;
  padding-right: 20px;
  padding-left: 100px;
  padding-top: 35px;
  width: 632px;
  height: 305px;
}
#footer {
  clear: both;
  padding: 0 10px 0 0px;
  color: #F58025;
  font-size: 9px;
  padding-top: 20px;
} 
#footer p {
  margin: 0;
  padding: 10px 0;
  color: #F58025;
}
.fltrt { 
  float: right;
  margin-left: 8px;
}
.fltlft { 
  float: left;
  margin-right: 8px;
}
.clearfloat { 
  clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#nav ul {
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 24 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Target with the list-items ID

You've currently set a height on the anchors, so for #item-114 a (I assume that's the one you mean), give it some padding-top and reduce the height value by however much padding you use.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference