Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > how to make <ul> *not* move text to the right

Reply
Thread Tools

how to make <ul> *not* move text to the right

 
 
Tomasz Chmielewski
Guest
Posts: n/a
 
      06-15-2007
I want to make a small menu with <ul> and <li>.

The problem is, when I use <ul>, the menu is moved to the right a bit.

Let me illustrate by example:


Here some text before
<ul>
<li>item 1 about...</li>
<li>item 2 else...</li>
<ul>
Here some text after


Renders as:


Here some text before

*item 1 about...
*item 2 else...

Here some text after


Whereas I would like it to render just as the rest of the text (Here
some text):

Here some text before

* item 1 about...
* item 2 else...

Here some text after


If I remove <ul>, it will work fine, but then, it doesn't wrap properly
if the line is longer:


Here some text before
<li>item 1 about very long line</li>
<li>item 2 else...</li>
Here some text after


Renders as:

Here some text before

* item 1 about very long
line
* item 2 else...

Here some text after



Whereas with <ul>, it renders just fine (but is moved to the right):

Here some text before
<ul>
<li>item 1 about very long line</li>
<li>item 2 else...</li>
<ul>
Here some text after


Renders as:

Here some text before

* item 1 about very long
line
* item 2 else...

Here some text after


Anyone knows the right spell?


--
Tomasz Chmielewski
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      06-15-2007
Scripsit Tomasz Chmielewski:

> I want to make a small menu with <ul> and <li>.


What do you mean by a menu? Your examples show no sign of links. Did you
omit them just for simplicity?

> The problem is, when I use <ul>, the menu is moved to the right a bit.


That's to be expected, since the default rendering has left margin or
padding, partly to accommodate list bullets.

> Let me illustrate by example:


Why don't you post a URL so that we could see a _real_ example? The one you
posted has a syntax error.

> If I remove <ul>, it will work fine, but then, it doesn't wrap
> properly if the line is longer:


Then it's not a list, and it's not valid markup. All bets are off.

> Anyone knows the right spell?


Surely. Set the left margin and padding of ul and li elements so that you
have the desired total amount of indentation. It's easiest to set all but
one of them to zero. Beware that the indentation should be at least about
1.3em, since otherwise the bullets might not fit in. (If you want to get rid
of the bullets, use list-style-type: none.)

You would thus use something like the following:

<style type="text/css">
ul, ul li { margin-left: 0; padding-left: 0; }
ul { margin-left: 1.3em; }
</style>

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Writing move constructors and move assignment Andrew Tomazos C++ 2 12-12-2011 01:45 PM
How to make a span move to the right? Cal Who ASP .Net 2 05-15-2010 09:10 PM
I am trying to move spaces to a weblistbox and when I move them... Eduardo78 ASP .Net Web Controls 0 11-03-2005 06:06 PM
Align javascript alert message to right AND / OR make the direction as RIGHT-TO-LEFT Oran Javascript 2 12-03-2004 04:34 PM



Advertisments