Want to prevent Menu items from wrapping in DIV
Want to prevent Menu items from wrapping in DIV
(OP)
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>
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>
RE: Want to prevent Menu items from wrapping in DIV
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
RE: Want to prevent Menu items from wrapping in DIV
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
RE: Want to prevent Menu items from wrapping in DIV
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
RE: Want to prevent Menu items from wrapping in DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 dont 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="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_button..." 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 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="http://www.youtube.com/embed/dlfKN-kevTM?feature=p..." frameborder="0" allowfullscreen=""></iframe></p>
<p>We look forward to seeing you in California.</p>
<p>Sincerely, <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>
RE: Want to prevent Menu items from wrapping in DIV
Try this in your CSS:
CODE
----------------------------------
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
RE: Want to prevent Menu items from wrapping in DIV
RE: Want to prevent Menu items from wrapping in DIV
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
----------------------------------
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
RE: Want to prevent Menu items from wrapping in DIV
/* 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;
}
RE: Want to prevent Menu items from wrapping in DIV
Chris.
Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
RE: Want to prevent Menu items from wrapping in DIV
CODE
.topnav-divider , .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