Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Line break in CSS styled tabbed navigation 1

Status
Not open for further replies.
arst06d

arst06d

Programmer
Nov 29, 2002
324
Hi
I'm trying to implement a tabbed nav solution I picked up on DynamicDrive.com.
Uses UL list styled as 'tabs' with CSS.
However, I want the text on the tabs to split over two lines - and I cannot get it to work:

Code: 
<html>

<head>

<style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width:480px;
height:40px;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu script- © Dynamic Drive DHTML code library ([URL unfurl="true"]www.dynamicdrive.com)[/URL]
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [URL unfurl="true"]http://www.dynamicdrive.com/[/URL] for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes

////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collecttablinks()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>


</Head>

<body>


<ul id="tablist">
<li><a href="#" onMouseover="expandcontent('sc1', this)">Anne Davies - Chief Executive</a></li>
<li><a href="#" onMouseover="expandcontent('sc2', this)">Christine Roe - Head Honcho</a></li>
<li><a href="#" onMouseover="expandcontent('sc3', this)">Claire Powell - her position</a></li>
<li><a href="#" onMouseover="expandcontent('sc4', this)">Val Blean - Head Buddy</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
blurb about Anne:<br />
</div>

<div id="sc2" class="tabcontent">
Blurb about Chris
</div>

<div id="sc3" class="tabcontent">
Blurb about Claire
</div>

<div id="sc4" class="tabcontent">
Blurb about Val
</div>


</DIV>


</body>

</html>

I have tried
Code: 
<li><a href="#" onMouseover="expandcontent('sc1', this)">Anne Davies<br>Chief Executive</a></li>

but it gives an odd effect.

I've got the idea that I need to create another div around the text and style that instead of/as well as the <a> but I'm a little lost to be honest.

Your help appreciated!
 
Sort by date Sort by votes
Try this:
Code: 
<li><a href="#" onMouseover="expandcontent('sc1', this)">[COLOR=red]<span style="display:block;">[/color]Anne Davies<br>Chief Executive[COLOR=red]</span>[/color]</a></li>
It's basically what you suggested in your OP.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
I think that is overcomplicating. First of all, Jeff's solution will make your tabs no longer inline but one beneath the other -- not what you want. You should simply float the <a> elements (that makes them block) and restrict them in size so that you achieve your effect. Then you can even use <br /> if you so desire.
 
Upvote 0 Downvote
I leapt in a little too quick it appears [smile]

If you make this change to your stylesheet, then you can use <br/> to split your content with no problem.
Code: 
#tablist li a{ float:left; }
Sorry for the confusion!

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Many thanks for the replies

Jeff - I got the same effect as just putting a break - each line had the top/left/right border

Vragabond - perfect results, just what I want.

Thanks again.

David
 
Upvote 0 Downvote
oops, sorry Jeff. didn't see your post before I replied to Vragabond. I did exactly what you suggest.

Cheers

David
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
811
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
635
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top