472,978 Members | 2,398 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,978 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 2891
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: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

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.