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 wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Want to prevent Menu items from wrapping in DIV

Status
Not open for further replies.
sirnose1

sirnose1

Programmer
Nov 1, 2005
133
US
I have a div in my master page for the top navigation menu. I need to display this all on one line but the text keeps wrapping. I have tried everything I now but its not working. Please help. Here is my code:

CSS:
#navigation {
height:15px;
background-color:#e2222f;
padding:15px 0px 15px 26px;
clear:both;
text-align:center;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
width:auto;
}


#navigation ul {
margin: 0px;
padding: 0px;
width:auto;
text-align:center;

}

#navigation ul li {
list-style-type:none;
float:left;
width:auto;
padding:0px 15px;
border-left: solid 1px #FFF;
}

#navigation ul li:first-child {
border-left: none;
}

#navigation a {
color: #ffffff;
text-decoration: none;
}

#navigation a:hover {
text-decoration: underline;
}
VB code:
If rs.Rows.Count > 0 Then
For Each rsRow In rs.Rows
If ctr = 1 Then
TopNav = TopNav & "<div class=topnav style='margin-left: 10px;'><a href='" & rsRow("TopNav_Link") & "&meeting_id=" & Meeting_ID & "' style='font-weight: bold;'>" & rsRow("TopNav_Title") & "</a></div>"
ElseIf LCase(rsRow("TopNav_Link")) = "/private/home.asp" Then
TopNav = TopNav & "<div class=topnav-divider>|</div><div class=topnav><a href='" & rsRow("TopNav_Link") & "' style='font-weight: bold;'><nobr>" & rsRow("TopNav_Title") & "</nobr></a></div>"
Else
TopNav = TopNav & "<div class=topnav-divider>|</div><div class=topnav><a href='" & rsRow("TopNav_Link") & "&meeting_id=" & Meeting_ID & "' style='font-weight: bold;'><nobr>" & rsRow("TopNav_Title") & "</nobr></a></div>"
End If
ctr = ctr + 1
Next rsRow
End If

page div:
<div id="navigation" style="display: inline-block; width: 671px; text-wrap:none;">
<% Response.Write(MeetingNavigation.TopNav(strMeeting_ID, strCID))%>
</div>
 
Sort by date Sort by votes
Please post code between [ignore]
Code:
[/ignore] tags, otherwise its hard to read.

Please post the final rendered HTML. ASP is of little use. As the CSS affects the final html not the ASP code that generates it.


With that said, the usual causes for wrapping are: Not enough space on the same line to accommodate all elements, a break in the line by a <br> tag or some clearing css for the floats etc...

Make sure there is enough space for all the items, and that you are not clearing the floats at any point.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Here is the full function:

Public Shared Function TopNav(Meeting_ID As Integer, strCID As String) As String
TopNav = ""
Dim strTypeID As String = Right(strCID, 1)
Dim strWhere As String = ""
If strTypeID = "1" Then
strWhere = " AND TopNav_ForMembers = 1 "
ElseIf strTypeID = "2" Then
strWhere = " AND TopNav_ForSuppliers = 1 "
ElseIf strTypeID = "3" Then
strWhere = " AND TopNav_ForMSPs = 1 "
ElseIf strTypeID = "4" Then
strWhere = " AND TopNav_ForReps = 1 "
Else
strWhere = " AND TopNav_ForOthers = 1 "
End If

Dim rs = SharedUtilities.QueryReaderSelect2("SELECT [TopNav_Title],[TopNav_Link] FROM [Meetings_TopNavigation] WHERE [Meeting_ID] = " & Meeting_ID & strWhere & " ORDER BY [SortOrder]")
Dim ctr As Integer = 1
Dim rsRow As System.Data.DataRow
If rs.Rows.Count > 0 Then
For Each rsRow In rs.Rows
If ctr = 1 Then
TopNav = TopNav & "<div class=topnav style='margin-left: 10px;'><a href='" & rsRow("TopNav_Link") & "&meeting_id=" & Meeting_ID & "' style='font-weight: bold;'>" & rsRow("TopNav_Title") & "</a></div>"
ElseIf LCase(rsRow("TopNav_Link")) = "/private/home.asp" Then
TopNav = TopNav & "<div class=topnav-divider>|</div><div class=topnav><a href='" & rsRow("TopNav_Link") & "' style='font-weight: bold;'><nobr>" & rsRow("TopNav_Title") & "</nobr></a></div>"
Else
TopNav = TopNav & "<div class=topnav-divider>|</div><div class=topnav><a href='" & rsRow("TopNav_Link") & "&meeting_id=" & Meeting_ID & "' style='font-weight: bold;'><nobr>" & rsRow("TopNav_Title") & "</nobr></a></div>"
End If
ctr = ctr + 1
Next rsRow
End If
rsRow = Nothing
rs = Nothing
End Function
 
Upvote 0 Downvote
Again, the final HTML would help more. ASP is of no use. You can use your browsers "View Source" option to get the final HTML

Anyway, your CSS points to a <ul> and <li> elements. But your HTML only shows divs.

You would want to float the topnav and topnav-divider divs. If that is what you are actually using.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Sorry. Misunderstood you. Here it is



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "


<html xmlns="<head><title>
2014 IMARK Annual Meeting
</title><link href="/uploaded_file/meetings/6/content/style14.css" rel="stylesheet" type="text/css" />

<style type="text/css">
h2.pageTitle {font-size:24px; color:#ffffff; }
hr.pageTitle {display: block; height: 2px; border: 0; border-top: 1px solid #ffc425; margin: 1em 0; padding: 0;}
</style>
<script language="javascript">
<!--



//-->
</script>
<link href="/UPLOADED_FILE/MEETINGS/6/content/style14.css" rel="stylesheet" />
<script src="../uploaded_file/meetings/6/scripts/swfobject_modified.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
<!--
function DownloadList() { window.open("registrationlist.asp"); }
//-->
</script>
<style type="text/css">
h2.pageTitle {font-size:24px; color:#eb292d; }
hr.pageTitle {display: block; height: 2px; border: 0; border-top: 1px solid #eb292d; margin: 1em 0; padding: 0;}
</style>
</head>

<body>
<div class="leftnav">

<div id="img">
<img src="/UPLOADED_FILE/MEETINGS/6/images/logo-annual-meeting2014.png" width="214" height="124" alt="Imark Group Annual Meeting | 2014 " title="Imark Group Annual Meeting | 2014" />
</div>
<p><a href='/uploaded_file/meetings/6/pdfs/SOE_Members.pdf' target="_blank">Schedule of Events</a></p><p><a href='/private/registration/default.aspx?section=home&page=important-dates&meeting_id=6'>Important Dates</a></p><p><a href='/uploaded_file/meetings/6/pdfs/HTR_Members.pdf' target="_blank">How to Register</a></p><p><a href='/private/registration/default.aspx?section=home&page=about-resort&meeting_id=6'>About the Resort</a></p><p><a href='/private/registration/default.aspx?section=home&page=car-rental&meeting_id=6'>Car Rental Discounts</a></p><p><a href='/uploaded_file/meetings/6/pdfs/restaurants.pdf' target="_blank">Dining</a></p><p><a href='/uploaded_file/meetings/6/pdfs/Optional-Activities.pdf' target="_blank">Golf/Optional Activities</a></p><p><a href='/private/registration/default.aspx?section=home&page=spa&meeting_id=6'>The Spa at La Costa</a></p><p><a href='/uploaded_file/meetings/6/pdfs/Unable_To_Attend.pdf' target="_blank">Unable to Attend</a></p><p><a href='/private/registration/default.aspx?section=home&page=resort-casual&meeting_id=6'>What Is Resort Casual?</a></p>


</div>

<div id="main">
<div id="header">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="696" height="129">
<param name="movie" value="/uploaded_file/meetings/6/flash/am2014.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/uploaded_file/meetings/6/flash/am2014.swf" width="696" height="129">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href=" src=" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>

<div id="navigation" style="display:inline-block; width: 671px;">
<div class=topnav style='margin-left: 10px;'><a href='default.aspx?section=home&page=home&meeting_id=6' style='font-weight: bold;'>Meeting&nbsp;Home</a></div><div class=topnav-divider>|</div><div class=topnav><a href='default.aspx?section=registration&page=home&meeting_id=6' style='font-weight: bold;'><nobr>Register Here</nobr></a></div><div class=topnav-divider>|</div><div class=topnav><a href='default.aspx?section=one-on-ones&page=home&meeting_id=6' style='font-weight: bold;'><nobr>One-On-Ones</nobr></a></div><div class=topnav-divider>|</div><div class=topnav><a href='default.aspx?section=contact&page=home&meeting_id=6' style='font-weight: bold;'><nobr>Contact IMARK</nobr></a></div><div class=topnav-divider>|</div><div class=topnav><a href='/private/home.asp' style='font-weight: bold;'><nobr>IMARK Home</nobr></a></div>
</div>
<div class="annualmeeting">

<h2 class="pageTitle">Welcome to IMARK's 2013 Annual Meeting</h2>
<hr class="pageTitle" />
<!--<div align=right style="font-size: 8pt; padding: 0 0 10px 0;"><b><a href="javascript:void 0;" onClick="void window.open('/private/registration/registrationList.aspx', 'RegistrationList', 'width=900,height=600,scrollbars=auto');"><font color=white>Download Registration List</font></a></b></div>-->
<form method="post" action="default.aspx?meeting_id=6" id="aspnetForm">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTM3MjA0NTY0MmRkCv/lUAL8T2RINArZNg/VoJcUwt7ydPgIKrwKHyerWG0=" />
</div>

<input type="hidden" name="meeting_id" value="6" /><input type="hidden" name="user_id" value="DAVIDCLOVELL" /><input type="hidden" name="reg_id" value="0" /><p><img align="right" width="450" height="311" alt="" src="/uploaded_file/meetings/annualmeeting/images/LaCostaResort-home.jpg" hspace="5" />Welcome to the official registration site for the 2013 IMARK Annual meeting in Carlsbad, California. </p>
<p>On behalf of the IMARK Board of Directors and the IMARK staff, it is my pleasure to welcome you and your senior management and spouses/guests, to the 2013 IMARK Group Annual Meeting. This year’s meeting will be held at the beautiful La Costa Resort and Spa in Carlsbad, California. </p>
<p>Our meeting is a carefully constructed blend of business and pleasure. This meeting is instrumental in enhancing relationships among our members, suppliers and service providers. As always, it is important to have clear lines of communication within our industry as we develop new approaches to growing our business and enhancing our profitability. Through the One-on-One meetings and numerous networking opportunities, business issues can be addressed and alternative strategies can be formulated and applied when you get home. </p>
<p>Of course, it’s important to have some fun. As usual, we have provided multiple opportunities for attendees to enjoy the beautiful venue. For a preview of this fabulous resort, you can watch this brief video:<br />
<br />
<iframe width="640" height="360" src=" frameborder="0" allowfullscreen=""></iframe></p>
<p>We look forward to seeing you in California.</p>
<p>Sincerely,&nbsp;&nbsp;&nbsp;&nbsp; <br />
<br />
Scott Lawhead<br />
IMARK Chairman</p>
<p><br /></p>
<p align="center"><font color="black"><b>Registration Deadline is Thursday, August 29.</b></font></p>
<!--<p style="border: 1px solid #cccccc; padding:10px;">Username: DAVIDCLOVELL, Usertype: 1, CID: 153000001, Division: IMARK<br /></p>
<p style="border: 1px solid #cccccc; padding:10px;">Meeting: 6, Username: DAVIDCLOVELL, RegID: , Usertype: 1, CID: 153000001, Division: IMARK<br /></p>
<p style="border: 1px solid #cccccc; padding:10px;">Current Meeting ID: 6</p>-->
</form>

</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
 
Upvote 0 Downvote
Your CSS does not match your HTML. There are no <li> elements anywhere in your HTML. So your CSS is not getting applied at all.

Try this in your CSS:

Code: 
.topnav-divider , .topnav
{
	float:left;	
}






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Had no effect. Seems like the <nobr></nobr> in the function does not work?
 
Upvote 0 Downvote
I get this when I apply the float to the divs.

imark_zpsdb01e2af.jpg


However without knowing what other CSS is getting applied its hard to say what may be causing it. As a last resort you might want to try increasing your navigation div's width:
Code: 
<div id="navigation" style="display:inline-block; width: [b]871px[/b];">
Otherwise, do you have a URL where this can be viewed live?





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Here is the entire css file. Which divs did you apply the float:left to? I still get the same results. THe text is centered in the div and the dividers are on the left.



/* CSS Document */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
body {
background-color: #2A2B53;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/bkgrnd14.jpg);
background-repeat: repeat-y;
}
img {
border: 0px;
}
.img-product {
padding-left: 10px;
}

p {
font-size: 13px;
line-height: 20px;
color: #333333;
}
h1 {
color: #2b2c53;
font-size: 28px;
font-style: normal;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
h3 {
font-size: 16px;
line-height: 24px;
color: #666666;
font-style: normal;
font-weight: normal;
}
h4 {
color: #284A60;
font-size: 20px;
text-transform: uppercase;
font-style: normal;
line-height: 24px;
font-weight: normal;
}
.h4-emphasis {color: #F2A324;
}

h3 a:link {
color: #666666;
text-decoration: none;
}
h3 a:hover {
color: #1D5578;
text-decoration: underline;
}
.h3-emphasis {
color: #621333;
font-weight: bold;
}
h5 {
color: #284A60;
font-size: 16px;
text-transform: uppercase;
font-style: normal;
line-height: 24px;
font-weight: normal;
}
.h5-emphasis {color: #F2A324;
}
.user {
font-size: 24px;
color: #FFFFFF;
}
.user-id {color: #FFFFFF}
.recent-links {
color: #3F292A;
font-weight: bold;
}
.copyright {
font-size: 9px;
color: #CCCCCC;
text-transform: uppercase;
line-height: 12px;
}

a:link {
text-decoration: none;
color: #1D5578;
}
a:hover {
text-decoration: underline;
}



/* Site Layout */

#site {
width:982px;
float:left;
margin:0px;
padding:0px;
border-top:#e2222f 6px solid;
}

#main {
float:left;
padding:0px;
margin:0px;
text-align:left;
width:696px;
}

#header {
width:696px;
height:128px;
background-image:url(../images/header-bkgrnd14.jpg);
background-repeat:no-repeat;
overflow:hidden;
}

#navigation {
height:15px;
background-color:#e2222f;
padding:15px 0px 15px 26px;
clear:both;
text-align:center;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}


#navigation ul {
margin: 0px;
padding: 0px;
width:auto;
text-align:center;

}

#navigation ul li {
list-style-type:none;
float:left;
width:auto;
padding:0px 15px;
border-left: solid 1px #FFF;
}

#navigation ul li:first-child {
border-left: none;
}

#navigation a {
color: #ffffff;
text-decoration: none;
}

#navigation a:hover {
text-decoration: underline;
}



#content {
padding: 0px 0px 0px 22px;
background-color:#e2222f;
clear:both;
width:auto;
}







div.leftnav {
font-size: 13px;
font-weight: bold;
line-height: 18px;
width: 286px;
padding: 0px;
margin: 0px;
background-color:#fbf2f9;
background-image:url('../images/drop-shadow.png');
background-repeat:repeat-x;
background-position:left top;
float:left;
text-transform: uppercase;
text-align:center;
height: 220px;
}

div.leftnav a {
color: #856d81;
text-decoration: none;
}

div.leftnav a:hover {
text-decoration: underline;
}

div.leftnav ul {
padding: 10px 30px;
}

div.leftnav ul li {
margin-top: 0px;
margin-bottom: 16px;
list-style-type:none;
text-align:center;
}

div.leftnav p {
line-height: 18px;
margin-bottom: 12px;
margin-top: 0px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 10px;
margin-right: 10px;
}

div.annualmeeting {
color: #212121;
background-color: #ebcfbb;
background-image: url(../images/bkgrnd-content14.jpg);
background-repeat: repeat-x;
background-position: right top;
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
}

div.annualmeeting p {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
}

div.annualmeeting h1 {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
line-height: 28px;
}

div.annualmeeting h3 {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 24px;
}

.bord {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
}
.topnav-divider {
color: #FFF;
margin-right: 15px;
margin-left: 15px;
float: left;
}
.topnav-divider .topnav {

float: left;
}



/* Misc Formatting */


.login {
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #CCCCCC;
font-size: 10px;
}
 
Upvote 0 Downvote
O.k, you added the piece of code I posted but you forgot the comma:

Code: 
.topnav-divider [highlight #A40000][COLOR=#FCE94F][b],[/b][/color][/highlight] .topnav
{
	float:left;	
}

You need to float your topnav divs as well so the actual menu elements are side by side.

The previous code does that by applying the float to both elements. Without the comma it looks for an element with a class of topnav inside an element with a class of topnav-divider which does not exist.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
920
pmonett
pmonett
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
854
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
760
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top