Horizontal list with no wrapping

Nathan

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

Subscribe Reply

13874

Chris Beall

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

Nathan

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.dt d">
<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.or g/check?uri=refer er">Validate</a></p>

</body>
</html>

Feb 28 '06 #3

Stephen Poley

On 27 Feb 2006 21:23:59 -0800, "Nathan" <na*********@gm ail.com> wrote:

I've put up at page at

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

demonstratin g 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

Jim Moe

Nathan wrote:

I've put up at page at

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

You mean <http://nathanfunk.dynd ns.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

Nathan

Sorry - wrong link. Good link:

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

Nathan

Feb 28 '06 #6

Nathan

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

Stephen Poley

On 28 Feb 2006 11:13:33 -0800, "Nathan" <na*********@gm ail.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

Nathan

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

Similar topics

5019

Horizontal List with different images

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 any words of wisdom? Please! :-) Here is what I have so far.  ul#mainNav{ font: bold 80% Verdana;

HTML / CSS

2683

Horizontal List

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 nav-containing content element needs to be different, but I'd like the nav to butt up against the header and look seamless. In the test example given, the addition of line-height: 2; causes a gap in

HTML / CSS

9217

100% Horizontal list possible ?

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 seem to affect the li. even when the ul width is 100% Any thoughts ? Dave.

HTML / CSS

2389

problems with height in horizontal list in IE

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? http://www.uky.edu/Home/Web/newnavbar/

HTML / CSS

1699

Horizontal list problem

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"> <ul id="categories"> <li><div class="category"> Home <ul> <li><a>somelink</a></li> etc

HTML / CSS

3340

css horizontal list menu

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 vertical lists on :hover i.e. http://phoenity.com/newtedge/horizontal_nav/ But what I am looking for is a horizontal list that opens another horizontal list and both need to be right-floated.

HTML / CSS

1638

horizontal list of elements with specified widths

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 determined by content. I played around with float: left, display: block, position: absolute, trying to get them to work properly and I've had some level of success, but I'm looking for some advice from the gurus on how to do this properly.

HTML / CSS

6182

show bullet for horizontal list

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>

HTML / CSS

23742

how can one prevent a horizontal list from breaking?

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 element has "overflow" set to "hidden". the only way i found to create that effect is by giving a specific width to the "UL" element but now, i have to create that effect for a list with unknown width!! (user can add items to list). is there any other...

HTML / CSS

9703

What is ONU?

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10317

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10295

The easy way to turn off automatic updates for Windows 10/11

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10069

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7604

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5501

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5633

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4275

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3799

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP