?
Solved

css align list items to bottom

Posted on 2007-11-16
6
Medium Priority
?
4,218 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 30

Expert Comment

by:Steggs
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:
Steggs 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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:Steggs
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 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…
Suggested Courses

801 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