SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict dAEk's Avatar
    Join Date
    Oct 2003
    Location
    Stockholm, Sweden
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with a tabbed menu (with icons such as close)

    I'm feeling silly but for all that is holy, I cannot get this thing to work. It works okayish in Firefox but it is clearly broken in IE 6, which is the minimum requirement for this application.

    What I am trying to do is a horizontal tabbed menu bar. It does not sound too difficult, I know.
    The image I've attached to this post shows what I am trying to achieve.

    • I'd like the tabs to auto-expand. In other words: no fixed width. This is what breaks it for me in IE 6.
    • The icons should be positioned in the upper right corner of a tab. All tabs in this list will have these icons.
    • The ul element will have a gradient background color so I'd like it to automatically adjust its height.
    • Floating the elements in the <li> appeared to be the easiest solution beforehand but I could not get it to work. Why? Who knows. To place the icons/controls, I went with absolute positioning.


    The markup code looks something like this:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr">
    <head>
    	<title>tabs</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<style type="text/css">
    	@import "tabs.css";
    	</style>
    </head>
    
    
    <body>
    	
    	<div id="eventListContainer">
    		
    		<ul id="eventList">
    			<li class="eventTab">
    				<div id="event1" class="event">
    					<span class="title">[Title.text]</span>
    					<span class="info">[Misc.text]</span>
    				</div>
    				
    				<ul id="controls1" class="controls">
    					<li><a class="close" title="close">x</a></li>
    					<li><a class="activate" title="activate"></a></li>
    				</ul>
    			</li>
    			
    			<li class="eventTab current">
    				<div id="event2" class="event">
    					<span class="title">Nothing - Something</span>
    					<span class="info">Game of the year...</span>
    				</div>
    				
    				<ul id="controls2" class="controls">
    					<li><a class="close">x</a></li>
    					<li><a class="activate" title="activate"></a></li>
    				</ul>
    			</li>
    			
    			<li class="eventTab">
    				<div id="event3" class="event">
    					<span class="title">[Title.text]</span>
    					<span class="info">[Misc.text]</span>
    				</div>
    				
    				<ul id="controls3" class="controls">
    					<li><a class="close" title="close">x</a></li>
    					<li><a class="activate" title="activate"></a></li>
    				</ul>
    			</li>
    		</ul>
    		
    		<br style="clear:both;">
    	</div>
    	
    	
    </body>
    </html>
    As you may have guessed from the ids, the list will be dynamic. It'll be possible to create tabs and remove them from the list.
    The links in the "controls" will be styled by using image replacement and mouselistener will be set, etc etc.

    What I need help with is getting the darn tabs to position the elements correctly. If needed, the HTML can be altered.
    Attached Images Attached Images
    Last edited by dAEk; Sep 14, 2007 at 15:46.
    David Shamloo-Ekblad

    Go Habs! | For music addicts: Last.fm, SongMeanings

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Going to need to see your CSS as well but preferably a link to the page.

  3. #3
    SitePoint Addict dAEk's Avatar
    Join Date
    Oct 2003
    Location
    Stockholm, Sweden
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I figured.
    I didn't have access to the stylesheet before but here it is:
    Code CSS:
    body {
    	font-family: verdana,sans-serif;
    	font-size:   1em;
    	color:       #000;
    	background:  #fff;
    }
     
    #eventListContainer {
    	margin:     0;
    	padding:    0;
    	height:     40px;
    	background: url("tab-bar-background.gif") bottom left repeat-x;
    }
     
    	#eventList {
    		margin:     0;
    		padding:    0 10px 0 20px;
    		height:     100%;
    		list-style: none;
    		float:      left;
    	}
     
     
    	.event {
    		margin:     0;
    		padding:    0 15px 0 10px;
    		height:     30px;
    		background: #f6f6f4;
    	}
     
    		.event span {
    			display: block;
    			margin:  0;
    			padding: 0 15px 0 0;
    		}
     
    		.title {
    			font-size: 12px;
    		}
    		.info {
    			font-size: 9px;
    		}
     
    		.eventTab {
    			position: relative;
    			float:    left;
    			margin:   9px 2px 0 0;
    			padding:  0;
    		}
    		.current {
    			margin:        8px 2px 0 0;
    			border:        1px solid #bbb;
    			border-bottom: 1px solid #f6f6f4;
    		}
     
    		.controls {
    			position:   absolute;
    			margin:     0;
    			padding:    0;
    			top:        2px;
    			right:      7px;
    			width:      10px;
    			list-style: none;
    			text-align: center;
    			font-size:  9px;
    		}
    			.close a {
    				display:    block;
    				width:      10px;
    				height:     10px;
    			}
    I've updated the html markup code in my earlier post since I had I missed a few things. There's been a few changes made since my original post but I don't have access to a computer with IE 6 at the moment, so the code above is not tested. It's probably broken still...
    David Shamloo-Ekblad

    Go Habs! | For music addicts: Last.fm, SongMeanings

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing the height from .event seems to produce nearly the same results in IE6, 7 & FF.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •