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

margin of li-elements around left-floating image

Hi Newsgroup,

I am working on a website http://www.charter-yachtcharter.com/testsite/
(still in progress).

There are two lists. The first is a simple paragraph (<p>-Tag), the
second an unordered list.
How can I use a Style-Sheet to format the bullets to be aligned like the
text above. The problem is the floating catamaran-image which is
floating left around the first paragraph on this site.
I tried to place the list under the image with some linebreaks <br>.
There it was possible to set the margins of the li-elements.
Is there a better way to position these element on this site?

Thanks, Chris
--
Chris Gurk can be reached at:
http://www.gurkcity.de

Jul 20 '05 #1
2 3377
On Tue, 29 Jun 2004 16:49:19 +0200, Chris Gurk <ch*******@gmx.de> wrote:
Hi Newsgroup,

I am working on a website http://www.charter-yachtcharter.com/testsite/
(still in progress).

There are two lists. The first is a simple paragraph (<p>-Tag), the
second an unordered list.
How can I use a Style-Sheet to format the bullets to be aligned like the
text above. The problem is the floating catamaran-image which is
floating left around the first paragraph on this site.
I tried to place the list under the image with some linebreaks <br>.
There it was possible to set the margins of the li-elements.
Is there a better way to position these element on this site?

Thanks, Chris
--
Chris Gurk can be reached at:
http://www.gurkcity.de


ul {margin-left: 2em} or whatever works. Different browsers set different
default margins and paddings for ul and li. You ought to try something
like this to override that when CSS is observed:

ul {margin:0; padding:0; margin-left: 2em;}
li {margin:0; padding:0;}
Jul 20 '05 #2
Thank you very much.

I solved the problem with your help:

ul {padding: 0; margin: 0 0 0 210px;}

The 210px is a value which seems to be left-floating image-width (in my
case the width of the image is 170px)plus the margin to the image and
the text-indent plus the padding of the surrounding content-box in which
all paragraphs, images and lists are positioned.

I tried it with smaller values (like 2em, 170px) and there were still
some strange effects on Mozilla Firefox and Internet Explorer, too.

My explanation: The margin of ul is not a distance to the floating
image, it is the distance to the surrounding content box.

Chris

--
Chris Gurk can be reached at:
http://www.gurkcity.de

Jul 20 '05 #3

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

Similar topics

8
by: Michael | last post by:
This is a two-part question to which I haven't been able to find an answer anywhere else. 1. Is it possible to format the bullet/number character of the <li>? In my styles sheet, I have the <li>...
12
by: Andrew Thompson | last post by:
I am developing a Periodic Table of the Elements as<DIV>s ..(chuckle - just kidding!) a <TABLE> at http://www.physci.org/test/chem/, or rather, the table itself is.....
19
by: A.Translator | last post by:
I have an unordered list as menu and want some space at the bottom, underneath the last <li>. I have tried: setting bottom-margin to ul setting bottom-margin to containing <div> setting padding...
3
by: NWhite | last post by:
Hi all, I'm trying to indent <li> items using: li { margin: 0 0 0 50px;} So I expect something like the following to indent 50 pixels from the left margin:
7
by: jmm-list-gn | last post by:
Hello, <http://www.asaom.edu> There are some curious spacing issues with the top bar (gray) and the main navigation bar. The most significant is how the nav bar looks in Opera v6 (win2k): the...
4
by: Mark | last post by:
Hopefully I 'm missing something silly, but I can't find an easy way to loop all list items in a simple <ol>. I was hoping a for loop as shown below would be enough, however clicking "alert all" in...
4
by: abs | last post by:
Anybody has an idea how to get the <ul> element which is not nested in <li> element ? In other words I have several lists like this: <ul id="1"> <li>Aaaaaaaa</li> <li>Bbbbbbbb</li>...
13
by: windandwaves | last post by:
Hi Folk Just a bit of help here for newbies who want their menus to look nicer. I am sure that many of you make menus like this <ul id="menu"> <li><a href="page1.html">option 1</a></li>...
12
by: Eric Lindsay | last post by:
I have a web page at http://www.architectqueensland.com/index.html styled with http://www.architectqueensland.com/architect.css The site is valid HTML 4.01 Strict. The CSS is valid 2.1 except for...
7
by: patrick j | last post by:
Hi I'm wondering about lists with nested lists as one does on a Saturday afternoon. Anyway below is an example of a list with a nested list which the iCab browser's very useful HTML...
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
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
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
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
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...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

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.