Jump to content

Auto Expand Equal Height For Anchors (navigation Menu Which Can Grow And May Cont Contain Break Tag) In Css


thangaman
 Share

Recommended Posts

Hi,I need to create flexible navigation menu which should automatically grow based on the biggest height of the any one of the menu and also text should be vertically middle aligned with CSS.And also I need to use two images for top corner(left is one and right is one sprite images). Finally equal height menu.I googled, but I didn't get.Note: 1. one-true layout does not satisfy the vertical-align-middle of the text (based on negative margin/positive padding).2. Javascript should not to used.Code is following:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css">.mtab{overflow:hidden;position:relative;}.eh_mtabLine{background:transparent url(gray_dot.gif) repeat-x scroll left bottom;padding:0 10px;}.eh_mtab,.eh_mtab div,.eh_mtabCr,.eh_mtabCr div{background:url(sprtab.png) no-repeat;}.eh_mtab,.eh_mtab:visited,.eh_mtabCr{color:#333333;font-family:Verdana;font-size:x-small;font-weight:normal;text-decoration:none;float:left;margin-left:5px;vertical-align:middle;text-align:center;display:block;background-color:#ccc;}.eh_mtab{background-position:0 0;}a.eh_mtab:hover{background-position:0 -210px;}a.eh_mtab:hover div{background-position:100% -315px;}.eh_mtab div{background-position:100% -105px; margin:0 0 0 5px;padding:5px 5px 0 0;vertical-align:middle;}.eh_mtab div p,.eh_mtabCr div p{padding-bottom:5px;display:block;}.eh_mtabCr{background-position:0 -420px;cursor:default;}.eh_mtabCr div{background-position:100% -525px;margin:0 0 0 5px;padding:5px 5px 0 0;vertical-align:middle;}p{margin:0;}</style></head><body><div>Lorum Ipsum dollar sit <a href="#">Amet Lorum Ipsum</a> dollar sit Amet</div><p>Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit AmetLorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit AmetLorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet</p><div style="width:98%"><div class="mtab"> <div class="base"> <div class="baseRow"> <a href="#" class="eh_mtabCr"><div><p>Lorum ipsum dollar</p></div></a> <a href="#" class="eh_mtab"><div><p>Lorum ipsum dollar <br /> Lorum ipsum dollar </p> </div></a> <a href="#" class="eh_mtab"><div><p>Lorum ipsum dollar</p></div></a> <a href="#" class="eh_mtab"><div><p>Lorum ipsum dollar</p></div></a> </div> </div></div></body></html>Any help highly appreciated.Thanks in advancethangaman[/size]

Link to comment
Share on other sites

Check this out - if it ain't here, I'll eat my hat.

Link to comment
Share on other sites

the closest method i could come up with is this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css">.mtab{overflow:hidden;position:relative;}.eh_mtabLine{background:transparent url(gray_dot.gif) repeat-x scroll left bottom;padding:0 10px;}.eh_mtab,.eh_mtab div,.eh_mtabCr,.eh_mtabCr div{background:url(sprtab.png) no-repeat;}.eh_mtab,.eh_mtab:visited,.eh_mtabCr{color:#333333;font-family:Verdana;font-size:x-small;font-weight:normal;text-decoration:none;float:left;margin-left:5px;vertical-align:middle;text-align:center;display:block;background-color:#ccc;}.eh_mtab{background-position:0 0;}a.eh_mtab:hover{background-position:0 -210px;}a.eh_mtab:hover div{background-position:100% -315px;}.eh_mtab div{background-position:100% -105px;margin:0 0 0 5px;padding:5px 5px 0 0;vertical-align:middle;}.eh_mtab div p,.eh_mtabCr div p{padding-bottom:5px;display:block;}.eh_mtabCr{background-position:0 -420px;cursor:default;}.eh_mtabCr div{background-position:100% -525px;margin:0 0 0 5px;padding:5px 5px 0 0;vertical-align:middle;}.baseRow { display:table-row; height: 100%; background-color:#ccc;}.baseRow div {display:table-cell; height: 100%; vertical-align:middle; padding: 0 5px; margin: 0;}</style><!--[if IE]><style type="text/css">.base, .mtab {float:left;}.baseRow { background-color:#ccc; overflow:hidden; float: left;}.baseRow div {bottom: -50%; position:relative; float: left; padding: 0 5px; margin: 0; background-color:#ccc; }.baseRow div a { position:relative; top: -50%; margin: 0; float: left; }</style><![endif]--> </head><body><div>Lorum Ipsum dollar sit <a href="#">Amet Lorum Ipsum</a> dollar sit Amet</div><p>Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit AmetLorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet Lorum Ipsum dollar sit AmetLorum Ipsum dollar sit Amet Lorum Ipsum dollar sit Amet</p><div style="width:98%"><div class="mtab"><div class="base"><div class="baseRow"><div><a href="#" class="eh_mtab">Lorum ipsum dollar</a></div><div><a href="#" class="eh_mtab">Lorum ipsum dollar<br> Lorum ipsum dollar<br> Lorum ipsum dollar</a></div><div><a href="#" class="eh_mtab">Lorum ipsum dollar<br> Lorum ipsum dollar</a></div><div><a href="#" class="eh_mtab">Lorum ipsum dollar</a></div></div></div></div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Thank you for your response:But the above code doesn't help me to resolve the issue.The bgcolor for .baseRow { display:table-row; height: 100%; /*background-color:#ccc;*/} can't be applied, because anchor with left and right curve borders(Images used).My intention is to increase the anchor height/(middle align according to biggest anchor) but not the outside div height(Actually div is not applicable here) as I need to achieve by anchor tag only. Note: The complete tab area is clickable, not just the tab label.Expecting favor!

Edited by thangaman
Link to comment
Share on other sites

Dear Dsonesuk,Sorry i could not insert my image into this forum as there is no option to select local file.So, I have kept the image in the following url (that was achieved by table design but i need in CSS/a/div combinations):Pls have a look:Visit to Image(bottom of the page)URL: http://www.dynamicdrive.com/forums/showthr...2901#post202901Thanks for your interest to resolve my issue.Regardsthangaman

Link to comment
Share on other sites

I've looked into this, and there's no way i can transfer the max height of tab, to the other tabs, and then vertical align, using CSS alone, without using JavaScript to find the height, and then valign.also you will, i think?, require javascript to produce the effect of displaying content to relate to which tab is selected.anyway see this example below which uses 2 images:tabbuttonR.pngtabbuttonR_H.png<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/var tabgroup, div, em, span, spantotal;function findhighest() { tabgroup = document.getElementById("tabgroup"); div = tabgroup.getElementsByTagName("div"); em = tabgroup.getElementsByTagName("em"); span = tabgroup.getElementsByTagName("span"); spantotal = span.length; var divtotal = div.length; var thisheight = 0; for(i=0; i<divtotal;i++) { if(div.offsetHeight > thisheight) { thisheight = div.offsetHeight; } } thisheight+=10; for(i=0; i<divtotal;i++) { topmargin=parseInt((thisheight-em.offsetHeight)/2)+3; div.style.height = thisheight+"px"; em.style.top=topmargin+"px"; } } function changethis(id) { document.getElementById("tabgroup").style.left="3px"; var tabcontentgroup = document.getElementById("tab_content_group"); var tabcontentdivs = tabcontentgroup.getElementsByTagName("div"); var tabcontentdivs_total = tabcontentdivs.length; for(j=0;j<spantotal;j++) { if((id-1)*2 == j || ((id-1)*2+1)== j) { span[j].style.backgroundImage="url(tabbuttonR_H.png)"; } else { span[j].style.backgroundImage="url(tabbuttonR.png)"; } } for(i=0;i<tabcontentdivs_total;i++) { div.style.zIndex="1"; document.getElementById("tab_content"+(i+1)).style.display="none"; if((i+1)==id) { document.getElementById("tab_content"+(i+1)).style.display="block"; div.style.zIndex="99"; } } } window.onload=findhighest;/*--*//*]]>*/</script> <style type="text/css">#tabgroup {overflow:hidden; float: left; position:inherit !important; position: relative;}#tab_content_group {border: 1px solid #ADADAD; position:relative; top: -1px; z-index:-1; clear:both; padding: 10px; margin-left: 3px !important; margin-left: 6px;}.outer {float:left; margin: 0 3px; position:relative; top: 0px;}.left {background:url(tabbuttonR.png) top left; float: left; padding-left: 10px; margin-right:10px; height: 100%; position:relative; z-index: 99;}.right {background:url(tabbuttonR.png) top right; float:left; padding-right: 10px; margin-right:-10px; height: 100%; position:relative; z-index: 99;}.outer a { text-decoration:none; color: #000; cursor:pointer;}.left span em { position:relative; font-style:normal; line-height: 14px; display:block; float:left;}</style></head><body><div id="tabgroup"><div class="outer"><a href="#a" onclick="changethis(1)"><span class="left" style="background-image:url(tabbuttonR_H.png)"><span class="right" style="background-image:url(tabbuttonR_H.png)"><em>one line, one line, one line.</em></span></span></a></div><div class="outer"><a href="#b" onclick="changethis(2)"><span class="left"><span class="right"><em>two line, two line, two line, <br />two line, two line.</em></span></span></a></div><div class="outer"><a href="#b" onclick="changethis(3)"><span class="left"><span class="right"><em>three line, three line, <br /> three line, three line, <br />three line, three line.</em></span></span></a></div><div class="outer"><a href="#b" onclick="changethis(4)"><span class="left"><span class="right"><em>four line, four line, four line,<br />four line, four line, <br />four line, four line, four line, four line, <br />four line, four line.</em></span></span></a></div><div class="outer"><a href="#a" onclick="changethis(5)"><span class="left"><span class="right"><em>one line, one line.</em></span></span></a></div></div><div id="tab_content_group"><div id="tab_content1"><p style="color: #0000FF">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div> <div id="tab_content2" style="display:none;"><p style="color: #FF0000">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div> <div id="tab_content3" style="display:none;"><p style="color:#FF9900">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div> <div id="tab_content4" style="display:none;"><p style="color:#FFFF00">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div> <div id="tab_content5" style="display:none;"><p style="color:#00CC00;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div> </div></body></html>

Link to comment
Share on other sites

Thank you very much dsonesuk. This is what I expected!, Well done! I appreciate you!, Its one of the better achievement. Its help me a lot!Note: If we achieve this concept without script that would be great!

Edited by thangaman
Link to comment
Share on other sites

Thank you very much dsonesuk. This is what I expected!, Well done! I appreciate you!, Its one of the better achievement. Its help me a lot!Note: If we achieve this concept without script that would be great!
Using tables is most likely the best approach. If Internet Explorer supported display: table-cell they wouldn't be necessary.If you don't want to use tables, assign a specific height to your tabs.
Link to comment
Share on other sites

does that include server side scripting such as php, cause you could do it this way: (hope you have php server and not ~#@! windows)with this i used an array but you could store and read this data from a database.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><?phpif (isset($_GET['tab'])){$thistab = $_GET['tab'];}else{$thistab=1;}$textheight=14;$tablabel = array ();$tabcontent = array ();$tablabel[0]="one line, one line, one line.";$tabcontent[0] ="<p style=\"color: #0000FF\">111Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>";$tablabel[1]="two line, two line, two line, <br />two line, two line.";$tabcontent[1] ="<p style=\"color: #FF0000\">222Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>";$tablabel[2]="three line, three line, <br /> three line, three line, <br />three line, three line.";$tabcontent[2] ="<p style=\"color: #FF9900\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>";$tablabel[3]="four line, four line, four line,<br />four line, four line, <br />four line, four line, four line, four line, <br />four line, four line.";$tabcontent[3] ="<p style=\"color: #FFFF00\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>";$tablabel[4]="one line, one line, one line.";$tabcontent[4] ="<p style=\"color: #00CC00\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>";$tabcount=count($tablabel);?> <style type="text/css">#tabgroup {overflow:hidden; float: left; position:inherit !important; position: relative;}#tab_content_group {border: 1px solid #ADADAD; position:relative; top: -1px; z-index:-1; clear:both; padding: 10px; margin-left: 3px !important; margin-left: 6px;}.outer {float:left; margin: 0 3px; position:relative; top: 0px;}.left {background:url(tabbuttonR.png) top left; float: left; padding-left: 10px; margin-right:10px; height: 100%; position:relative; z-index: 99;}.right {background:url(tabbuttonR.png) top right; float:left; padding-right: 10px; margin-right:-10px; height: 100%; position:relative; z-index: 99;}.outer a { text-decoration:none; color: #000; cursor:pointer;}.left span em { position:relative; font-style:normal; line-height: 14px; display:block; float:left;}</style></head><body><?php$breakcount=0;for($i=0;$i<$tabcount;$i++) { if($breakcount<substr_count($tablabel[$i], '<br />')) { $breakcount = substr_count($tablabel[$i], '<br />'); } }$breakcount+=1; $totalHeight=$breakcount;$totalHeightPlusMargin=($breakcount*$textheight)+10;echo "<div id=\"tabgroup\">\n";for($i=0;$i<$tabcount;$i++) {$topmargin=((($totalHeightPlusMargin-((substr_count($tablabel[$i], '<br />')+1)*$textheight))/2));echo "<div class=\"outer\" style=\"height:".$totalHeightPlusMargin."px;\">\n";echo "<a href=\"autotab.php?tab=".($i+1)."\">\n";if ($thistab==$i+1) {echo "<span class=\"left\" style=\"background-image:url(tabbuttonR_H.png)\">\n";echo "<span class=\"right\" style=\"background-image:url(tabbuttonR_H.png)\">\n"; }else {echo "<span class=\"left\" style=\"background-image:url(tabbuttonR.png)\">\n";echo "<span class=\"right\" style=\"background-image:url(tabbuttonR.png)\">\n"; } echo "<em style=\"top:".$topmargin."px;\">".$tablabel[$i]."</em>\n";echo "</span>\n";echo "</span>\n";echo "</a>\n";echo "</div>\n"; }echo "</div>";echo "<div id=\"tab_content_group\">";echo "<div id=\"tab_content\">";echo $tabcontent[$thistab-1];echo "</div> ";echo "</div> ";?></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...