CSS tab menu

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS tab menu

Post by alex.barylski »

I have the following markup:

Code: Select all

    <div id="wrap">
      <div id="head">
        <div>
          <ul>
            <li>Dashboard</li>
            <li>Contacts</li>
            <li>Groups</li>
            <li>Admin</li>
          </ul>
        </div>
      </div>
    </div>
I am trying to vertically align the MENU to the bottom of the 'head' which is 70px in height, but the height of the LI is unknown for obvious reasons...FONT change, etc?

I'm using the nested DIV inside id="head" to force the UL down a fixed number of pixels, but if the font changes height, everything goes screwy...

Any workarounds???

Cheers :)
shwanky
Forum Commoner
Posts: 45
Joined: Thu Feb 15, 2007 1:21 am

Post by shwanky »

I would ditch the extra <div></div> It's uneeded. Have you tried using relative absolute positioning using selectors? You can position the list absolutely with respect to the div#head.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Edit: Just noticed a new requirement...maybe LI isn't going to work...I need pixel precision when placing the LI as there is a single pixel between each LI and inactive LI are bumped up a single pixel as well, only active selected LI items are flush with the bottom of the previous DIV...


I'm not a huge fan of CSS (mostly because I am no good at it) so pardon my ignorance...

I dropped the extra DIV already and placed the UL next inline with the header DIV

I then set something like:

Code: Select all

margin-top: -10pt
Hoping that because I set both the LI and UL to that font size, the UL would just overlay the header...which is does quite nicely...but...

letters such as 'g', 'j', etc have their bottoms below the bottom border of the HEAD div???

Will my technique work? How do I get the letters to bump up just enough so that the bottoms are sticking out?
shwanky
Forum Commoner
Posts: 45
Joined: Thu Feb 15, 2007 1:21 am

Post by shwanky »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


[syntax="html"]
<style type="text/css">
	div#head {
		position: relative;
		top: 200px;
		width: 700px;
		height: 100px;
		background-color: #000000;
	}
	#nav {
		position: absolute;
		top: 75px;
		width: 100%;		
		background:color: #FFFFFF;
		list-style:none;
		padding:0;
		margin:0;
	}	
	#nav li {
		display:block;
		float:left;
		width: 25%;
		height: 20px;
		background-color: #FFFFFF;
		text-align:center;
	}
</style>

<div id="wrap">
	<div id="head">        
        	<ul id="nav">
			<li>Dashboard</li>
			<li>Contacts</li>
			<li>Groups</li>
			<li>Admin</li>
		</ul>
	</div>
</div>
Here is an example for you. note the use of the div#head selector. Basically it places a reference point for the absolutely positioned element. Absolute positioning, positions an element relative to a reference point. Relative positioning positions an element relative to it's position within the flow of the document. I hope that helps a bit. CSS can be confusing especially positioning, but if you can understand it, everything else is a sinch.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Thanks for the feedback but I don't think it'll work

This might demonstrate what i am trying to do:

Code: Select all

<style type="text/css">
   div#head {
      border: 1px solid red;

      width: 700px;
      height: 70px;
   }

   #nav {
    border: 1px solid blue;
      position: absolute;
      top: 50px;
      width: 100%;

      padding:0;
      margin:0;
   }
</style>

   <div id="head">
         <div id="nav">
          Some menu items
         </div>
   </div>
The inner DIV must be *exactly* flush with the bottom...the inner DIV will contain (or be replaced) byu a UL and LI but how can I get the inner DIV to align with the bottom? I also need pixel accuracy becuase when the DIV is replaced with the UL inactive LI items will be bumped up a single pixel...only active LI items are perfectly flush with the bottom...make sense?

I have a quick snapshot of what I'm trying to accomplish if that helps?

Cheers :)
shwanky
Forum Commoner
Posts: 45
Joined: Thu Feb 15, 2007 1:21 am

Post by shwanky »

Code: Select all

<style type="text/css">
   div#head {
      position:relative;
      border: 1px solid red;

      width: 700px;
      height: 70px;
   }

   #nav {
    border: 1px solid blue;
      position: absolute;
      bottom: 0px;
      width: 100%;

      padding:0;
      margin:0;
   }
</style>

   <div id="head">
         <div id="nav">
          Some menu items
         </div>
   </div>
Let me see your example. The code above works. I just set the position of div#header to relative and #nav bottom property to 0 so it's flush with the bottom.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Wouldn't it be easier to change the way inactive tabs are displayed?

(I'm saying that not knowing much if anything about the project however)
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Hey shwanky

That last example appears to work, but I am curious how that works??? Can you explain in laymen detail for me? :)

The following works perfect in IE and FF :P this is a great start

Code: Select all

<style type="text/css">
   div#head {
      position: relative;

      width: 620px;
      height: 70px;

      background-color: red;
   }

   #nav {
      position: absolute;
      bottom: 0px;

      padding:0;
      margin:0;

      background-color: green;
   }

   #nav li {
     display:block;

     float:left;

     background-color: purple;
   }
</style>

   <div id="head">
    <ul id="nav">
      <li>Dashboard</li>
      <li>Contacts</li>
      <li>Groups</li>
      <li>Admin</li>
    </ul>
   </div>
Still not sure I understand how it works though :S
shwanky
Forum Commoner
Posts: 45
Joined: Thu Feb 15, 2007 1:21 am

Post by shwanky »

Ok here's as simple as I can make it

div#head - Selector: creates a reference point.

Position:relative - sets the the position of the element relative to the normal flow of the document. Say for instance you have an htm page of all text and you have an image in some where in the document. If you position the image relative and set top property to 25px then the image will be 25px lower than it would be if you hadn't changed it.

#nav { Position:absolute - Positions #nav to an absolute location which is relative to it's container's reference point (the selector). In the absence of a selector, #nav would default to the absolute position within the document window.

I don't know if that makes things simpler or more complicated :-/...
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Still confused...haha...

I'm realizing that they way you think of layout is drastically different when done in CSS. Requires more quirky browser insight and a different way of layout thinking then tables.

Years of table design has left me stubborn to learn anything new I guess :P

I'll read some articles on it, as the CSS does work nicely and is far less HTML then using tables, so no dought it is nice :)

p.s-I removed the selector div#nav to be just #nav and everything works fine in FF and IE??? :? which only confused me more :P

Anyways, I appreciate the help dude...I'm slowly learning this stuff, but my time is limited as I have projects which need finishing...

Cheers :)
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

The position attribute doesn't take too much to understand. Static is the default positioning. Relative allows it to move relative to default positioning. Absolute allows it to move absolutely. Fixed stops any movement.

Absolute positioning is useless in dynamic websites (if your basically making just a picture, then absolute is fine... I guess) unless it is within an object with relative positioning. Relative positioning does a lot of special thing.

Firstly, you can move something (useful if you like IE hacks) although it continues to take up the space where it was, you can assign a z-index (only works when you have a position attribute set), and you can control absolutely positioned elements to be absolutely positioned within a relative space.

http://www.barelyfitz.com/screencast/ht ... sitioning/
A good resource for CSS positioning, although it's easier to understand (for me) when it's hands-on.
shwanky
Forum Commoner
Posts: 45
Joined: Thu Feb 15, 2007 1:21 am

Post by shwanky »

Hockey wrote:Still confused...haha...

I'm realizing that they way you think of layout is drastically different when done in CSS. Requires more quirky browser insight and a different way of layout thinking then tables.

Years of table design has left me stubborn to learn anything new I guess :P

I'll read some articles on it, as the CSS does work nicely and is far less HTML then using tables, so no dought it is nice :)

p.s-I removed the selector div#nav to be just #nav and everything works fine in FF and IE??? :? which only confused me more :P

Anyways, I appreciate the help dude...I'm slowly learning this stuff, but my time is limited as I have projects which need finishing...

Cheers :)
If you really want to understand how to do use layouts in CSS, fire up Photoshop and draw boxes and layers, center them with respect to each other or to the background. Essentially that's what your doing with CSS.
Post Reply