Solved

css align list items to bottom

Posted on 2007-11-16
6
4,174 Views
Last Modified: 2012-08-14
I am creating a navigation suing a list (UL and LI). I am creating tabs using the method from "A list apart". I have this working, except my current tab I want to be larger than the others. I can add a class and change the font, but now the large tab is flush bottom and the others are no raised up off the bottom. Is there a way to tell list items to valign bottom?
0
Comment
Question by:td234
  • 3
  • 3
6 Comments
 
LVL 30

Expert Comment

by:Steggs
Comment Utility
Hello,

please post the code

Steggs
0
 
LVL 2

Author Comment

by:td234
Comment Utility
<style type="text/css">
<!--
#locHdr
{
      position:relative;
      margin-left:-5px;
      margin-top:-6px;
      height:213px;
      background: url("/images/locations/sub.hero.jpg") no-repeat left top;
      border-bottom:1px #3D7EC7 solid;
}
#locHdr .locHdrTitle
{
      padding-top:5px;
      padding-left:15px;
      color:#FFF;
      font: 24px "century gothic", Futura, Arial;
}
#locHdrNav
{
      margin-left:200px;
      position: absolute;
      bottom: 0;
      margin-bottom:-1px;
}
#locHdrNav ul
{
      margin: 0;
      padding: 0;
      list-style: none;
      vertical-align: bottom;
}
#locHdrNav li {
  float:left;
  background:url("/images/sub.left.off.gif") no-repeat left top;
  margin-left:4px;
  padding:0 0 0 7px;
  border-bottom:1px solid #3D7EC7;
  border: 1px #000 solid;
  }
#locHdrNav a {
      float:left;
      display:block;
      width:.1em;
      background:url("/images/sub.right.off.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      font: 12px Futura, Arial, Helvetica, sans-serif;
      font-stretch:condensed;
  }
#locHdrNav .current {
      height:37px;
      font: 18px Futura, Arial, Helvetica, sans-serif;
      background:url("/images/sub.left.on.gif") no-repeat left top;
}
#locHdrNav .current a {
      font: 16px Futura, Arial, Helvetica, sans-serif;
      background:url("/images/sub.right.on.gif") no-repeat right top;
      padding-bottom:8px;
}
#locHdrNav > ul a {width:auto;}

-->
</style>

<div id="locHdr">
      <div class="locHdrTitle">Title</div>
      <div id="locHdrNav"><ul>
            <li class="current"><a href="/">tab 1</a></li>
            <li class="current"><a href="/">tab 2</a></li>
            <li class="current"><a href="/">tab 3</a></li>
            </ul></div>
</div>

0
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
Comment Utility
hey,

you could do something like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">

#locHdr
{
      position:relative;
      margin-left:-5px;
      margin-top:-6px;
      height:213px;
      background: url("/images/locations/sub.hero.jpg") no-repeat left top;
      border-bottom:1px #3D7EC7 solid;
}
#locHdr .locHdrTitle
{
      padding-top:5px;
      padding-left:15px;
      color:#FFF;
      font: 24px "century gothic", Futura, Arial;
}
#locHdrNav
{
      margin-left:200px;
      position: absolute;
      bottom: 0;
      margin-bottom:-1px;
}
#locHdrNav ul
{
      margin: 0;
      padding: 0;
      list-style: none;
      vertical-align: bottom;
}
#locHdrNav li {
  border-bottom:1px solid #3D7EC7;
  border: 1px #000 solid;
  background:url(/images/sub.left.off.gif) no-repeat left top;
  height:1.8em;
  float:left;
  margin:0.7em 0 0 4px;
  padding:0 0 0 7px;
  }
#locHdrNav a {
      float:left;
      display:block;
      width:.1em;
      background:url("/images/sub.right.off.gif") no-repeat right top;
      padding:6px 15px 4px 6px;
      font: 12px Futura, Arial, Helvetica, sans-serif;
      font-stretch:condensed;
  }
#locHdrNav .current {
      background:url(/images/sub.left.on.gif) no-repeat left top;
      font: 18px Futura, Arial, Helvetica, sans-serif;
      height:2.2em;
      margin-top:0;
}
#locHdrNav .current a {
      font: 16px Futura, Arial, Helvetica, sans-serif;
      background:url(/images/sub.right.on.gif) no-repeat right top;
      padding-bottom:8px;
}
#locHdrNav > ul a {width:auto;}


</style>

</head>
<body>
<div id="locHdr">
      <div class="locHdrTitle">Title</div>
      <div id="locHdrNav"><ul>
            <li class="current"><a href="/">tab 1</a></li>
            <li><a href="/">tab 2</a></li>
            <li><a href="/">tab 3</a></li>
            </ul></div>
</div>
</body></html>
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 2

Author Comment

by:td234
Comment Utility
Wow, this is so close. Your sample works, but I had to add some padding to get the images to go to the bottom. I also had to remove my bottom border from the CSS and put it on the image so I could cover it with the tab that was ON. SO, now I am looking at the code below and I have one last little issue. I am having different results in Safari and Firefox. If you look at the code below you will see. It has to do with the bottom padding I have had to use to get the images to cover the bottom edge of the image. can you help me with this? I have added absolute references to the images so you can see them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>

<style type="text/css">

#locHdr
{
      position:relative;
      margin-left:-6px;
      margin-top:-1px;
      height:213px;
      background: url("http://www.wheretostay.com/images/locations/sub.hero.jpg") no-repeat left top;
}
#locHdr .locHdrTitle
{
      padding-top:5px;
      padding-left:15px;
      color:#FFF;
      font: 24px "century gothic", Futura, Arial;
}
#locHdrNav
{
      margin-left:200px;
      position: absolute;
      bottom: 0;
}
#locHdrNav ul
{
      margin: 0;
      padding: 0;
      list-style: none;
      vertical-align: bottom;
}
#locHdrNav li {
  border-bottom:1px solid #3D7EC7;
  background:url(http://www.wheretostay.com/images/locations/sub.left.gif) no-repeat left top;
  height:1.8em;
  float:left;
  margin:0.7em 0 0 4px;
  padding:0 0 0 7px;
  }
#locHdrNav a {
      float:left;
      display:block;
      width:.1em;
      background:url("http://www.wheretostay.com/images/locations/sub.right.gif") no-repeat right top;
      padding:6px 15px 8px 7px;
      font: 12px Futura, Arial, Helvetica, sans-serif;
      font-stretch:condensed;
  }
#locHdrNav .current {
      border-width:0;
      font-size: 18px;
      height:2.2em;
      margin-top:0;
      padding-bottom:1px;
}
#locHdrNav .current a {
      border-width:0;
      font-size: 16px;
      padding-top:10px;
      padding-bottom:10px;
}
#locHdrNav > ul a {width:auto;}


</style>

</head>
<body>
<div id="locHdr">
      <div class="locHdrTitle">Title</div>
      <div id="locHdrNav"><ul>
            <li class="current"><a href="/">tab 1</a></li>
            <li><a href="/">tab 2</a></li>
            <li><a href="/">tab 3</a></li>
            </ul></div>
</div>
</body></html>

THANK YOU!
0
 
LVL 30

Expert Comment

by:Steggs
Comment Utility
Hey again,

I dont think that is the best way to do it... especially as the hover doesnt work on the first 7px of the tab. Below is one i made a while back using 3 spans inside the anchor... you could use the same principle


<ul id="pinktabs">

<li id="overTab" class="active"><a title="Overview" href=""><span class="l"> </span><span class="mid">Overview</span><span class="r"></span></a></li>

<li id="locationTab" class=""><a title="Location" href=""><span class="l"> </span><span class="mid">Location</span><span class="r"> </span></a></li>

<li id="roomTab" class=""><a title="Room Facilities" href=""><span class="l"> </span><span class="mid">Room Facilities</span><span class="r"> </span></a></li>

<li id="accomTab" class=""><a title="Accommodation Facilities" href=""><span class="l"> </span><span class="mid">Accom Facilities</span><span class="r"> </span></a></li></ul>
 
 
 

CSS
 
 

ul#pinktabs {

	list-style-type:none;

	}

	ul#pinktabs li {

	float:left;

	text-align:center;

	margin:0pt 2px -1px 1px;

	}

	ul#pinktabs li a span {

		float:left;

		padding:7px 0;

		color:#222;

		}

		ul#pinktabs li a span.l {

		display:block;

		width:12px;

		background:url(/TCDLiveImages/tabaccomlft.png);

		}

	ul#pinktabs li a span.mid {

		background:url(/TCDLiveImages/tabaccommid.png);

		}

	ul#pinktabs li a span.r {

		display:block;

		width:12px;

		background:url(/TCDLiveImages/tabaccomrgt.png);

		}

	ul#pinktabs li.active a span {

		color:#1991c1;

		}

	ul#pinktabs li.active a span.l {

		display:block;

		width:12px;

		background:url(/TCDLiveImages/tablftactive.png);

		}

	ul#pinktabs li.active a span.mid {

		background:url(/TCDLiveImages/tabmidactive.png);

		}

	ul#pinktabs li.active a span.r {

		display:block;

		width:12px;

		background:url(/TCDLiveImages/tabrgtactive.png);

		}

	ul#pinktabs li a {

	text-decoration:none;

	cursor:pointer;

	}

	ul#pinktabs li a:link {

	}

	ul#pinktabs li a:visited {

	}

	ul#pinktabs li a:hover {

	}

	ul#pinktabs li a:hover span {background-position:0 60px;}

	ul#pinktabs li.active a:hover span {background-position:0 0;}

	ul#pinktabs li a:active {

	}

Open in new window

0
 
LVL 2

Author Comment

by:td234
Comment Utility
THnaks Steggs.

I tried your code and could not get it to work. I do not have a HOVER state, it is only used to expand the clickable area. I am so close with the latest code I posted above, just one pixel off on Sarafi vs. FF. Any ideas how to fix that one pixel? If I can figure out the one pixel problem,  I will be done.


0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now