?
Solved

css align list items to bottom

Posted on 2007-11-16
6
Medium Priority
?
4,222 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:Mark Steggles
ID: 20301484
Hello,

please post the code

Steggs
0
 
LVL 2

Author Comment

by:td234
ID: 20301539
<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:
Mark Steggles earned 2000 total points
ID: 20304334
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Author Comment

by:td234
ID: 20305584
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:Mark Steggles
ID: 20307895
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
ID: 20325690
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 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