Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

li styling

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

li styling

Postby Coditor » Thu Feb 02, 2006 2:20 pm

Hi,

Why won't a <li> image not show when I have set the <ul> to be display: inline ?

And, is it possible to use a text character (eg "|") instead of an image?

Coditor
Coditor
New php-forum User
New php-forum User
 
Posts: 243
Joined: Wed Feb 01, 2006 9:18 am
Location: Netherlands

Postby Oleg Butuzov » Sun Feb 05, 2006 9:08 am

li {list-style:none;}
li:before {content:"|"}

or
li {list-style:none; padding-left:20px; background: url(vline.gif) no-repeat;}
Oleg Butuzov
Last Samuray
Last Samuray
 
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

Postby Coditor » Sun Feb 05, 2006 3:56 pm

I've tried to use the {content: "|"} in other occations but I'm afraid that IE doesn't support it (and IE is still used by 90-95% of the visitors).

I like the idea of using background-image and padding... Thanks!

Coditor
Coditor
New php-forum User
New php-forum User
 
Posts: 243
Joined: Wed Feb 01, 2006 9:18 am
Location: Netherlands

Postby ruturajv » Tue Feb 07, 2006 8:18 pm

you can add something like this
Code: Select all
li {
    display: block;
    padding: 5px;
    float: left;
}
User avatar
ruturajv
php-forum Super User
php-forum Super User
 
Posts: 1280
Joined: Sat Mar 22, 2003 9:42 am
Location: Mumbai, India

Postby Coditor » Wed Feb 08, 2006 12:21 am

Well, the problem was that I need to use display:inline ...


It's for building a menu with this HTML:

Code: Select all
<ul>
<li><a href="/">home</a></li>
<li><a href="mailto:me@mymail.com">mail</a></li>
<li><a href="/search.php">search</a><li>
</ul>


That displays as:

home | mail | search
Coditor
New php-forum User
New php-forum User
 
Posts: 243
Joined: Wed Feb 01, 2006 9:18 am
Location: Netherlands

Postby Oleg Butuzov » Wed Feb 08, 2006 10:19 am

you could made last menu with class last

so
Code: Select all
 <ul>
<li><a href="/">home</a></li>
<li><a href="mailto:me@mymail.com">mail</a></li>
<li><a href="/search.php">search</a><li>
</ul>




Code: Select all
 li {
    border-right:1px solid #efefef;
# }
li.last {
border:0;
}


also you can look here
http://www.artlebedev.ru/tools/technogr ... ated_list/
Oleg Butuzov
Last Samuray
Last Samuray
 
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

Postby Coditor » Wed Feb 08, 2006 11:12 am

Yes, that's exactly how I ended up fixing the problem. With a bit of padding... :)
Coditor
New php-forum User
New php-forum User
 
Posts: 243
Joined: Wed Feb 01, 2006 9:18 am
Location: Netherlands


Return to CSS

Who is online

Users browsing this forum: No registered users and 2 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron