thangaman Posted August 7, 2009 Share Posted August 7, 2009 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 More sharing options...
chibineku Posted August 7, 2009 Share Posted August 7, 2009 Check this out - if it ain't here, I'll eat my hat. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 7, 2009 Share Posted August 7, 2009 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> Link to comment Share on other sites More sharing options...
thangaman Posted August 10, 2009 Author Share Posted August 10, 2009 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2009 Share Posted August 10, 2009 can you provide example page, screenshot to get an idea what you want. Link to comment Share on other sites More sharing options...
thangaman Posted August 11, 2009 Author Share Posted August 11, 2009 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 More sharing options...
dsonesuk Posted August 13, 2009 Share Posted August 13, 2009 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:<!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 More sharing options...
thangaman Posted August 17, 2009 Author Share Posted August 17, 2009 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! Link to comment Share on other sites More sharing options...
Ingolme Posted August 17, 2009 Share Posted August 17, 2009 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 More sharing options...
dsonesuk Posted August 17, 2009 Share Posted August 17, 2009 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> Link to comment Share on other sites More sharing options...
thangaman Posted September 22, 2009 Author Share Posted September 22, 2009 Sorry, My expectation is pure css based design and no need include with PHP.Thank you for your effort spent on my issue. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.