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
Solved

css align list items to bottom

Posted on 2007-11-16
6
4,204 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

839 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