473,327 Members | 2,094 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,327 software developers and data experts.

List next to left-floating block

Please take a look at

http://www.gavelcade.com/list_next_to_float.html

How can I style a list so that if it appears next to a left-floated box
as the first list does in this example, the list items, with their
bullets, still appear indented relative to the text above and below the
list (i.e., without having the bullets overlapping the float), without
messing up the appearance if the list *doesn't* happen to land next to
the float, as in the case of the second list?
Oct 26 '07 #1
6 2914
In article <5o************@mid.individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:
Please take a look at

http://www.gavelcade.com/list_next_to_float.html

How can I style a list so that if it appears next to a left-floated box
as the first list does in this example, the list items, with their
bullets, still appear indented relative to the text above and below the
list (i.e., without having the bullets overlapping the float), without
messing up the appearance if the list *doesn't* happen to land next to
the float, as in the case of the second list?
Consider either list-style: none and/or zero margins and paddings
for the UL remotely near the float. Odd things happen otherwise
on some browsers.

If you want bullets, consider 'made' bullets within the li,
either via img or char:

<li>€ List item 1</li>
<li>€ List item 2</li>

Using Option 8 for the dot on a Mac produces very nice results,
that look pretty consistent with your list further down which has
real html bullets. There is perhaps something more dependable? Or
an img dot, you can make it scaleable by em dimensioning it.

I would also be inclined to class the ul that is anywhere near
such a float and:

ul.class {list-style: none;}

There is the interesting "problem" of an oddity in appearance
when some list items drop below the float but not all, (add more
li items to see). I find it acceptable but you may want this not
to happen?

--
dorayme
Oct 26 '07 #2
Ben C wrote:
On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:
>Please take a look at

http://www.gavelcade.com/list_next_to_float.html

How can I style a list so that if it appears next to a left-floated box
as the first list does in this example, the list items, with their
bullets, still appear indented relative to the text above and below the
list (i.e., without having the bullets overlapping the float), without
messing up the appearance if the list *doesn't* happen to land next to
the float, as in the case of the second list?

You can bring the whole list, including bullets, neatly to the right of
the float with:

{
overflow: hidden; /* to start new block formatting context */
margin-left: 0;
padding-left: 40px;
}

on the <ul>, which won't do any harm if it isn't to the right of a
float.
Thanks so much for this. I understand the caveat about the list being
only partially next to the float! Answer: good only for short lists.

I gotta go back and read what overflow: hidden really means. It's more
involved than I had expected.
Oct 26 '07 #3
In article <5o************@mid.individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:
Ben C wrote:
On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:
Please take a look at

http://www.gavelcade.com/list_next_to_float.html
The most curious thing, although there are different renderings
across different browsers, especially in regard to the bullets,
in Safari alone, the styles are off. There is no blue float.
Safari alone is not tolerant to your missing closing curly
bracket on the styles in the head.

--
dorayme
Oct 26 '07 #4
dorayme wrote:
In article <5o************@mid.individual.net>,
Harlan Messinger <hm*******************@comcast.netwrote:
>Ben C wrote:
>>On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:
Please take a look at

http://www.gavelcade.com/list_next_to_float.html

The most curious thing, although there are different renderings
across different browsers, especially in regard to the bullets,
in Safari alone, the styles are off. There is no blue float.
Safari alone is not tolerant to your missing closing curly
bracket on the styles in the head.
Yes, I found that and closed it on my local version before I posted the
note you're responding to! I forgot to upload it though--just did.
Oct 27 '07 #5
On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:
Ben C wrote:
>On 2007-10-26, Harlan Messinger <hm*******************@comcast.netwrote:
>>Please take a look at

http://www.gavelcade.com/list_next_to_float.html

How can I style a list so that if it appears next to a left-floated box
as the first list does in this example, the list items, with their
bullets, still appear indented relative to the text above and below the
list (i.e., without having the bullets overlapping the float), without
messing up the appearance if the list *doesn't* happen to land next to
the float, as in the case of the second list?

You can bring the whole list, including bullets, neatly to the right of
the float with:

{
overflow: hidden; /* to start new block formatting context */
margin-left: 0;
padding-left: 40px;
}

on the <ul>, which won't do any harm if it isn't to the right of a
float.

Thanks so much for this. I understand the caveat about the list being
only partially next to the float! Answer: good only for short lists.
Yes for longer lists you need something like what dorayme suggested.
I gotta go back and read what overflow: hidden really means. It's more
involved than I had expected.
The unexpected effects of overflow: hidden come about because it causes
a box to become a "block formatting context". So the thing to read about
is "block formatting context". Then you will find where it says they
mustn't overlap floats and may become narrower because of them. I posted
a couple of paragraphs from the spec about this yesterday.
Oct 27 '07 #6
On 2007-10-26, dorayme <do************@optusnet.com.auwrote:
[...]
><li>€ List item 1</li>
<li>€ List item 2</li>

Using Option 8 for the dot on a Mac produces very nice results,
that look pretty consistent with your list further down which has
real html bullets. There is perhaps something more dependable?
I don't know what Option 8 gives you, but you can use U+2022 for a
normal bullet.
Oct 27 '07 #7

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

Similar topics

11
by: C++fan | last post by:
Suppose that I define the following class: class example_class{ public: example_class(); void funtion_1(); void function_2(); protected:
19
by: William Wisnieski | last post by:
Hello Everyone, I have a main form with a datasheet subform that I use to query by form. After the user selects two criteria on the main form and clicks the cmdShowResults button on the main...
0
by: starace | last post by:
I have designed a form that has 5 different list boxes where the selections within each are used as criteria in building a dynamic query. Some boxes are set for multiple selections but these list...
25
by: prabhat143 | last post by:
Hi, Given a singly linked, null terminated list, how can it be converted to tree? Each node in the list has three attributes: it's ID, it's parent ID and of course, the next node it's pointing...
4
by: JS | last post by:
I have a file called test.c. There I create a pointer to a pcb struct: struct pcb {   void *(*start_routine) (void *);   void *arg;   jmp_buf state;   int    stack; }; ...
7
by: Zeba | last post by:
Hi, I have to write program in C# to merge sort a linked list (doubly linked). Is it true that the best way to do it is copy it into an array, sort it and then convert back ? I'm new to C#,...
4
by: Army1987 | last post by:
Given: #include <stdlib.h> typedef struct Node { unsigned char Data; struct Node *Next } node_t, *list_t; list_t list; Does list = list->Next = malloc(sizeof(node));
2
by: Lysander | last post by:
I have not seen this feature documented before, so I thought I would share it with you, as I will be using it in a later article. For a combo or list box, the source data is normally a...
6
by: woodey2002 | last post by:
Hi Everyone. Thanks for your time. I am trying to create a search form that will allow users to select criteria from multiple multi select boxes. So far i have managed to achieve a search option...
1
by: woodey2002 | last post by:
Hi Everyone and many thanks for your time.. I am trying to begin access and a bit of VBA i am enjoying it but I have a annoying problem I just can’t get any where on. My databse mostly includes...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.