Solved

css align list items to bottom

Posted on 2007-11-16
6
4,196 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
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 500 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

770 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