473,405 Members | 2,310 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

Horizontal list with no wrapping

I am trying to prevent a horizontal list from wrapping. Each list item
is floated with "float: left".

Currently I use an ugly hack. I set the width of the list to a large
number which is guananteed greater than the total width of all items.

Is there a way to accomplish this without my hack? It would be handy
because I would like to read the total width of all items in
javascript. I looked into white-space: nowrap, but it doesn't work on
floats obviously. I also do not want to use tables.

Any help would be greatly appreciated,

Nathan

Feb 28 '06 #1
8 13818
Nathan wrote:
I am trying to prevent a horizontal list from wrapping. Each list item
is floated with "float: left".

Currently I use an ugly hack. I set the width of the list to a large
number which is guananteed greater than the total width of all items.

Is there a way to accomplish this without my hack? It would be handy
because I would like to read the total width of all items in
javascript. I looked into white-space: nowrap, but it doesn't work on
floats obviously. I also do not want to use tables.

Any help would be greatly appreciated,

Nathan


Nathan,

The use of float: left pretty much guarantees that the items will wrap,
so you could remove that to start. But if the list is inline text it
will wrap anyway.

The best way to present a problem like this is to upload the HTML and
CSS to a server somewhere an give us the URL. That way we can see ALL
that you are doing (including stuff you might have considered to be
irrelevant), and can copy and modify your work to try various solutions.

It also helps to know WHY you want to do what you want. In this case, I
have no idea why you would want to 'read the total width of all items in
javascript'. If we knew why you want to do that, we might be able to
come up with a more elegant solution (especially given that JavaScript
works only when the user has enabled it).

Chris Beall

Feb 28 '06 #2
I've put up at page at

http://nathanfunk.dyndns.org/pland/wrapping/

demonstrating the undesired wrapping as well as the desired result
(code attached to this post). The desired result is accomplished by
specifying a large width "width: 2000px;" which is not an elegant way
of solving the problem.

You'll note I am using "overflow: hidden" in the mask div. So
essentially I would like the box of the <ol> to grow independently of
the width of the mask.

Thanks for your help!

Nathan
----------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Wrapping</title>
<style type="text/css">
..mask {
overflow: hidden;
width: 400px;
}

ol {
margin: 0;
padding: 0;
list-style: none;
}

ol.hack {
width: 2000px; /*this is an arbitrary large number
to keep the thumbnails from wrapping */
}

li {
float: left;
display: block;
margin: 0 10px 0 0;
height: 100px;
width: 100px;
background: #eee;
border: 1px solid black;
}
</style>
</head>
<body>
<p>This is the result I do <b>not</b> want:</p>
<div class="mask">
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
</div>

<p>This is the result I want:</p>
<div class="mask">
<ol class="hack">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
</div>

<p><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>

</body>
</html>

Feb 28 '06 #3
On 27 Feb 2006 21:23:59 -0800, "Nathan" <na*********@gmail.com> wrote:
I've put up at page at

http://nathanfunk.dyndns.org/pland/wrapping/

demonstrating the undesired wrapping as well as the desired result
(code attached to this post). The desired result is accomplished by
specifying a large width "width: 2000px;" which is not an elegant way
of solving the problem.


"Not Found. The requested URL /pland/wrapping/ was not found on this
server."

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Feb 28 '06 #4
Nathan wrote:
I've put up at page at

http://nathanfunk.dyndns.org/pland/wrapping/

You mean <http://nathanfunk.dyndns.org/pland/horiz-list/>?
You can use a percentage width for #navcontainer as well. Then it
adjusts with the viewport.
But why do you need to know the width of the unclipped menu?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Feb 28 '06 #5
Sorry - wrong link. Good link:

http://nathanfunk.dyndns.org/personal/wrapping

Nathan

Feb 28 '06 #6
I am scrolling the menu left and right by changing the relative
position of the list. In order to know where to stop the scrolling, I
need to know total width of the items.

Nathan

Feb 28 '06 #7
On 28 Feb 2006 11:13:33 -0800, "Nathan" <na*********@gmail.com> wrote:
Sorry - wrong link. Good link:

http://nathanfunk.dyndns.org/personal/wrapping

Nathan


Well, I see from your answer to Jim that this is for a menu. Speaking as
a user I would much prefer a menu that wraps so that I can see what the
available options are without having to scroll backwards and forwards.
Why do you think that your visitors want to scroll?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Feb 28 '06 #8
I am writing the code on a contract basis and am not making many
decision about functionality myself.

So the question remains whether there is an elegant way of preventing
the list from wrapping. From the responses so far I conclude there is
probably not.

Waiting for CSS4... ;)

Nathan

Feb 28 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: RugbyTravis | last post by:
I want to have a list that is horizontal and each <li> has different images. I also want them to change on hover. I want the words to be below the images as well. Anyone of you styles gurus have...
2
by: Neal | last post by:
Having a bit of trouble. http://users.rcn.com/neal413/horizlisttest.html Because of design restraints, I need to follow a 100% wide header section with a div. The background color of the...
12
by: Dave Brown | last post by:
Hi all, Is it possible to have 4 LI items in a <UL> with the LI width set to width:25% so that each one sizes to 25% of whatever its container width is ? It doesnt seem so, the width doesnt...
6
by: ciwstudy | last post by:
I'm having problems getting the height to compress for a horizontal list in IE (styled with CSS). It works fine in other browsers. Does anyone know a way to fix this? ...
1
by: DarthDevilous | last post by:
I've been trying to lay out a list horizontally, like at http://www.w3schools.com/css/tryit.asp?filename=trycss_float5 , but I'm having some problems. The HTML Structure is <div id="page_footer">...
9
by: Verona Busch | last post by:
Hi everybody, I am very happy to find this group. I am searching for a solution to make a horizontal list menu with submenu on hover. I found a lot of examples for horizontal lists which open...
1
by: irq3 | last post by:
I want to make a horizontal list elements, whose widths are determined by their "width" property. "width" doesn't work on inline elements, so I can't use <spanas I normally would if the width was...
1
by: nitinpatel1117 | last post by:
i am using an unordered list to display my horizontal navigation. i am using something link <ul> <li>link 1</li> <li>link 2</li> </ul>
10
by: crippletoe | last post by:
Hi all, i am looking for a way to prevent a horizontal, inline unordered list from breaking into seperate lines once contained inside a element with specific width (shorter than the list). the...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.