Re: [css-d] CSS lists driving me nuts

[Christian Kirchhoff]

Have you tried a combination of text-indent and padding-left?

ul.list {
 padding-left: 1em;
 text-indent: -1em;
}

Regards

Christian Kirchhoff
Editura GmbH & Co. KG
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de 
AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski

Am 20.07.2010 08:23, schrieb Shortie Designs:
> Hi All - I'm still new to CSS and I'm trying to style some lists with CSS.
>
> I've created an unordered list - which is all good - but what I'm trying to
> avoid is this
>
> Eg:
>
> . List is all lovely on the first line but
>
> when it wraps is doesn't neatly indent.
>
>
>
> What I'm trying to achieve is this:
>
> . List is all lovely on the first line but
>
>  when it wraps is doesn't neatly indent.
>
>
>
> Check out http://www.performance-rehab.com/about_clinic.html for an example
>
>
>
> Any suggestions would be very much appreciated - I've looked and looked and
> can't seem to find the answer to this problem!
>
>
>
> Thanks in advance
>
>
>
> Sofia Woods
>
> Shortie Designs
>
> 0433 179 193
>
> www.shortiedesigns.com
>
> shortiedesi...@gmail.com
>
>
>
>
>
>
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS lists driving me nuts

[Duncan Hill]

On Tue, 20 Jul 2010 07:23:57 +0100, Shortie Designs  
 wrote:

> Hi All - I'm still new to CSS and I'm trying to style some lists with  
> CSS.
>
> I've created an unordered list - which is all good - but what I'm trying  
> to
> avoid is this
>
> Eg:
>
> . List is all lovely on the first line but
>
> when it wraps is doesn't neatly indent.
>
>
> What I'm trying to achieve is this:
>
> . List is all lovely on the first line but
>
> when it wraps is doesn't neatly indent.

On your ul.list delete the
list-style-position: inside;
and use some margin-left to bring the list back to where you want it.

First you might like to check the validity of your html. One noteable is  
that inside your 'ul' you have  tags wrapping the li elements, and you  
have nested paragraphs.

Duncan

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS lists driving me nuts

[Shortie Designs]

Hi All - I'm still new to CSS and I'm trying to style some lists with CSS.

I've created an unordered list - which is all good - but what I'm trying to
avoid is this 

Eg:

. List is all lovely on the first line but 

when it wraps is doesn't neatly indent.

 

What I'm trying to achieve is this:

. List is all lovely on the first line but 

when it wraps is doesn't neatly indent.

 

Check out http://www.performance-rehab.com/about_clinic.html for an example

 

Any suggestions would be very much appreciated - I've looked and looked and
can't seem to find the answer to this problem!

 

Thanks in advance

 

Sofia Woods

Shortie Designs

0433 179 193

www.shortiedesigns.com

shortiedesi...@gmail.com

 

 

 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Lists and Sprites

[Eric Katz]

It worked perfectly! Thanks a lot guys. Hopefully I can learn this stuff
good enough to pass some help to other people too.

Eric

2009/2/22 Philippe Wittenbergh 

>
> On Feb 22, 2009, at 3:05 PM, Eric Katz wrote:
>
>  Thanks so much it looks like that fixed it pretty well! The height
>> dimension to #area was just so I could visualize a content area coming
>> down before I coded it.
>>
>> Also thanks Philippe I added those additional fixes you mentioned!
>>
>> I think next I want to try and incorporate the background images as
>> part of the link, is there a way I could do that easily? I just
>> started playing around with it and will work on it some more tomorrow.
>>
>
> (assuming the link is the only content in the )
> Sure: just set the link to display:block, and move of the styling to the
> link (padding, background, ...).
>
>
> Philippe
> ---
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Lists and Sprites

[Philippe Wittenbergh]

On Feb 22, 2009, at 3:05 PM, Eric Katz wrote:

> Thanks so much it looks like that fixed it pretty well! The height
> dimension to #area was just so I could visualize a content area coming
> down before I coded it.
>
> Also thanks Philippe I added those additional fixes you mentioned!
>
> I think next I want to try and incorporate the background images as
> part of the link, is there a way I could do that easily? I just
> started playing around with it and will work on it some more tomorrow.

(assuming the link is the only content in the )
Sure: just set the link to display:block, and move of the styling to  
the link (padding, background, ...).

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Lists and Sprites

[Eric Katz]

2009/2/21 Gunlaug Sørtun 
- Hide quoted text -

Eric Katz wrote:

http://www.team-identity.org/akathletics/newcode/


This is a picture of what the list im trying to make is
supposed to look like:
http://www.akathletics.com/images/intialsetcopy/akathleticsNewSitev8.jpg

1: keep all 8 list-items in one ul -  - in the
source-code.


2: apply 'display: inline-block' (and centering), followed by the
necessary fixes for IE7 and older.

This will do...

#navbuttons {
   width:770px;
   margin:0 auto;
   list-style:none;
   text-align: center;
}

#navbuttons li {
   display:inline-block;
   width:220px;
   height:180px;
   padding:0;
   margin:0 10px;
   background : url(../images/contentnavbuttons.jpg) no-repeat;
}

/* IE6 fix */
* html #navbuttons li {display: inline;}

/* IE7 fix */
*+html #navbuttons li {display: inline;}


3: sprinkle in background positions, using the class on the individual
list-items - like you have started.
However, strengthen selector-specificity like the following...

#navbuttons li.gym-mats {
   background-position:0px -200px;
}

...to override the general #navbuttons li position.

You can then also fine-tune side-margins for the individual list-item to
get it all lined up just as in your example-image.


4: delete 'height' on #area so that container can expand freely and push
the footer down.

regards
   Georg
--
http://www.gunlaug.no


Thanks so much it looks like that fixed it pretty well! The height
dimension to #area was just so I could visualize a content area coming
down before I coded it.

Also thanks Philippe I added those additional fixes you mentioned!

I think next I want to try and incorporate the background images as
part of the link, is there a way I could do that easily? I just
started playing around with it and will work on it some more tomorrow.

Thank you so much guys!

Eric
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Lists and Sprites

[Philippe Wittenbergh]

On Feb 22, 2009, at 6:09 AM, Gunlaug Sørtun wrote:

> 2: apply 'display: inline-block' (and centering), followed by the
> necessary fixes for IE7 and older.
>
> This will do...
>
> 
>
> #navbuttons li {
>   display:inline-block;
>   width:220px;
>   height:180px;
>   padding:0;
>   margin:0 10px;
>   background : url(../images/contentnavbuttons.jpg) no-repeat;
> }

Remember that Firefox 2.0.0.x and older don't support 'display:inline- 
block'.

#navbuttons li {
display:-moz-inline-box; /* < add this */
display:inline-block;
width: 220px;
height:180px;
padding:0;
margin:0 10px;
background : url(../images/contentnavbuttons.jpg) no-repeat;
vertical-align: bottom; /* <- add this */
}

also add 'vertical-align: bottom', to take into account content of  
varying length, that can wrap over multiple lines.


Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Lists and Sprites

[Gunlaug Sørtun]

Eric Katz wrote:

> http://www.team-identity.org/akathletics/newcode/

> This is a picture of what the list im trying to make is supposed to 
> look like: 
> http://www.akathletics.com/images/intialsetcopy/akathleticsNewSitev8.jpg
> 
1: keep all 8 list-items in one ul -  - in the
source-code.


2: apply 'display: inline-block' (and centering), followed by the
necessary fixes for IE7 and older.

This will do...

#navbuttons {
width:770px;
margin:0 auto;
list-style:none;
text-align: center;
}

#navbuttons li {
display:inline-block;
width:220px;
height:180px;
padding:0;
margin:0 10px;
background : url(../images/contentnavbuttons.jpg) no-repeat;
}

/* IE6 fix */
* html #navbuttons li {display: inline;}

/* IE7 fix */
*+html #navbuttons li {display: inline;}


3: sprinkle in background positions, using the class on the individual
list-items - like you have started.
However, strengthen selector-specificity like the following...

#navbuttons li.gym-mats {
background-position:0px -200px;
}

...to override the general #navbuttons li position.

You can then also fine-tune side-margins for the individual list-item to
get it all lined up just as in your example-image.


4: delete 'height' on #area so that container can expand freely and push
the footer down.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS Lists and Sprites

[Eric Katz]

Hello! I am fairly new at this mailing list sort of stuff along with css as
well but I have been receiving emails and reading/learning a lot.

For reference this is the page i am working on right now:
http://www.team-identity.org/akathletics/newcode/


And the problem I have is I cannot get the list to display properly or do
anything that I want it to do.

This is a picture of what the list im trying to make is supposed to look
like:
http://www.akathletics.com/images/intialsetcopy/akathleticsNewSitev8.jpg

Here is a link to the image i am trying to use as a sprite:
http://team-identity.org/akathletics/newcode/images/contentnavbuttons.jpg

When I make it display:block; instead of display:inline; it shows each
'button/icon' list item properly except that it is vertical along the page
and I am trying to make it horizontal. When I make it display:inline; it
doesn't show the image in the background, i even tried changing the
line-height thinking that if it was inline and just had a taller line-height
it would show the background image, but it doesn't. :(

Anyways, any help would be greatly appreciated!

Thanks,

Eric
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS & Lists

[Christian Heilmann]

> ul#NoBullet
> li#TickGreenSmall
> 3px left no-repeat;
> }
>
> The webpage is a long one with several different styles of lists.
> So now, instead of defining a list with just the one ID= in the
> UL, I also have to define every line.
>
> Is there a more efficient way to combine [UL ID="NoBullet"] and
> [LI ID="SomeListStyleHere"]

How about

li{ ... overall settings  ...}

ul#greentick li{
  ... special settings...
}

That way you only apply the image to every LI inside the UL with the
ID greentick, and you can re-use all the settings of the others. The
only thing that probably changes is the padding on the left and the
background image.

Also, greentick is a bad choice for an ID. An ID should describe what
the element represents, not how it looks. Something like "benefits"
might be better.

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS & Lists

[Christian Heilmann]

> So, I follow all the discuss about this. I probe this and I have a good works.
>
> ul {
> padding-left: 20px;
> margin-left: 5px;
> }
>
> li {
> list-style: url(../images/li.gif);
> vertical-align: middle;
> padding-left: 1px;
> color: #3E4D57;
> font: 11px Tahoma;
> background: transparent;
> }
>
> Now I have a question. The text near to the li element, how I can align them 
> to appear align="absmiddle" as a image property ??
> Cheers

You might have followed but not understood.
The trick is _not_ to use the image as list style but as a background
image of the LI with a padding to the left.

It is explained in detail step by step here:
http://css.maxdesign.com.au/listutorial/introduction.htm

This means you can position the image anywhere you want. If you use:

li{ background:url(foo.gif) left center no-repeat #ccc;}

it will center the image vertically in the LI.

--
Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS & Lists

[Reynier Perez Mira]

So, I follow all the discuss about this. I probe this and I have a good works.

ul {
padding-left: 20px;
margin-left: 5px;
}

li {
list-style: url(../images/li.gif);
vertical-align: middle;
padding-left: 1px;
color: #3E4D57;
font: 11px Tahoma;
background: transparent;
}

Now I have a question. The text near to the li element, how I can align them to 
appear align="absmiddle" as a image property ??
Cheers


ReynierPM
Usuario registrado de Linux: 310201

No basta con alcanzar la sabiduría, es necesario saber utilizarla.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Bill Hely
Enviado el: martes, 15 de noviembre de 2005 1:57 am
Para: 'Seona Bellamy'; css-d@lists.css-discuss.org
Asunto: Re: [css-d] CSS & Lists


Thanks very much Seona. That works fine.

One small problem - which I can live with if necessary - is that there is now a 
lot more work involved setting up the lists.

What I have now is this:

ul#NoBullet
{
list-style: none;
margin-left: 25px;
padding-left: 0px;
}
li#TickGreenSmall
{
padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
background: transparent url(/images/Tick-green-small.gif) 3px left 
no-repeat;
}

The webpage is a long one with several different styles of lists.
So now, instead of defining a list with just the one ID= in the UL, I also have 
to define every line.

Is there a more efficient way to combine [UL ID="NoBullet"] and [LI 
ID="SomeListStyleHere"]

TIA
 - Bill H.


> -Original Message-
> From: Seona Bellamy [mailto:[EMAIL PROTECTED]
> Sent: Tuesday, November 15, 2005 2:47 PM
> To: [EMAIL PROTECTED]
> Subject: Re: [css-d] CSS & Lists
>
>
> On 15/11/05, Bill Hely <[EMAIL PROTECTED]> wrote:
> > I'm trying to come to grips with using CSS with lists.
> >
> > When using an image as a bullet point, is it possible to
"push
> > the image down" so it doesn't project well above the text associated 
> > with that bullet?
>
> A better way than using list-style-image is to set the
list-style-type
> to "none" and make your bullet a background image. Something
like:
>
> ul#TickGreenSmall   {
>list-style-type: none;
>margin-left: 40px;
>padding-left: 0px;
>margin-top: 5px;
>}
> li  {
>padding-top: 2px;
>padding-bottom: 2px;
>padding-left: 20px;
>background: transparent
url(/images/Tick-green-small.gif) 3px
> left no-repeat;
>}
>
> Just tweak the top osition of the background until it's sitting
where
> you want it, and play with your padding-left until the text has 
> cleared the image properly. Takes a bit of trial and error, but
it's a
> lot easier than trying to tame a list-style-image.
>
> > I can get the required effect easily enough with a table and images, 
> > but...
>
> ...that's a bad idea. :)
>
> Cheers,
>
> Seona.
>

--
We take security very seriously. All outgoing mail is certified Virus Free. To 
boost YOUR security visit The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005



__
css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- 
http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS & Lists

[Bill Hely]

Thanks very much Seona. That works fine.

One small problem - which I can live with if necessary - is that
there is now a lot more work involved setting up the lists.

What I have now is this:

ul#NoBullet
{
list-style: none;
margin-left: 25px;
padding-left: 0px;
}
li#TickGreenSmall
{
padding-top: 2px;
padding-bottom: 2px;
padding-left: 40px;
background: transparent url(/images/Tick-green-small.gif)
3px left no-repeat;
}

The webpage is a long one with several different styles of lists.
So now, instead of defining a list with just the one ID= in the
UL, I also have to define every line.

Is there a more efficient way to combine [UL ID="NoBullet"] and
[LI ID="SomeListStyleHere"]

TIA
 - Bill H.


> -Original Message-
> From: Seona Bellamy [mailto:[EMAIL PROTECTED]
> Sent: Tuesday, November 15, 2005 2:47 PM
> To: [EMAIL PROTECTED]
> Subject: Re: [css-d] CSS & Lists
>
>
> On 15/11/05, Bill Hely <[EMAIL PROTECTED]> wrote:
> > I'm trying to come to grips with using CSS with lists.
> >
> > When using an image as a bullet point, is it possible to
"push
> > the image down" so it doesn't project well above the text
> > associated with that bullet?
>
> A better way than using list-style-image is to set the
list-style-type
> to "none" and make your bullet a background image. Something
like:
>
> ul#TickGreenSmall   {
>list-style-type: none;
>margin-left: 40px;
>padding-left: 0px;
>margin-top: 5px;
>}
> li  {
>padding-top: 2px;
>padding-bottom: 2px;
>padding-left: 20px;
>background: transparent
url(/images/Tick-green-small.gif) 3px
> left no-repeat;
>}
>
> Just tweak the top osition of the background until it's sitting
where
> you want it, and play with your padding-left until the text has
> cleared the image properly. Takes a bit of trial and error, but
it's a
> lot easier than trying to tame a list-style-image.
>
> > I can get the required effect easily enough with a table and
> > images, but...
>
> ...that's a bad idea. :)
>
> Cheers,
>
> Seona.
>

--
We take security very seriously. All outgoing mail is
certified Virus Free. To boost YOUR security visit
The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS & Lists

[Christian Montoya]

> When using an image as a bullet point, is it possible to "push
> the image down" so it doesn't project well above the text
> associated with that bullet?
>
> I'm using something like this:
>
> ul#TickGreenSmall   {
> list-style-image: url(/images/Tick-green-small.gif);
> margin-left: 40px;
> padding-left: 0px;
> margin-top: 5px;
> }
> li  {
> padding-top: 2px;
> padding-bottom: 2px;
> padding-left: 20px;
> }
>
> The green check mark that is the bullet rides too high against
> the text.

don't make the image the list bullet. Give the list items no bullet,
and then make the image the background of the list items. then you can
give the background a background-position:

li { background: url(bullet.png) 5px 0 no-repeat; }

> I can get the required effect easily enough with a table and
> images, but...

that would be a crying shame. :)

--
--
C Montoya
rdpdesign.com ... cssliquid.com ... montoya.rdpdesign.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS & Lists

[Bill Hely]

I'm trying to come to grips with using CSS with lists.

When using an image as a bullet point, is it possible to "push
the image down" so it doesn't project well above the text
associated with that bullet?

I'm using something like this:

ul#TickGreenSmall   {
list-style-image: url(/images/Tick-green-small.gif);
margin-left: 40px;
padding-left: 0px;
margin-top: 5px;
}
li  {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px;
}

The green check mark that is the bullet rides too high against
the text.

I can get the required effect easily enough with a table and
images, but...

TIA
 - Bill H.

--
We take security very seriously. All outgoing mail is
certified Virus Free. To boost YOUR security visit
The Hacker's Nightmare: http://HackersNightmare.com.
Checked by AVG Free Edition.
Version: 7.1.362 / Virus Database: 267.13.0/167 - Release Date:
11/11/2005



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/