Unordered List css

regarding list css - padding and margin.
I having trouble with lists that are next to <img src=
the list won't push over with the img padding.
If I double up the ul tag it moves over but then longer li lines don't indent inside the bullet.
example:
<ul><ul>
        <li>with others in the room</li>
        <li>TV volume remains independently</li>
        <li>Custom fidelity and clarity</li>
      </ul></ul>
here is current css:
.bar ul, .bar ol,
    .content ul, .content ol{
    list-style-position: inside;
    list-style: url(/images/ui_bullet.png);
    margin: 0px 0px 20px 30px;
    .bar ul ul, .bar ol ol,
    .content ul ul, .content ol ol{
        list-style-position:inside;
        padding:0 10px;
        margin:0px 0px 0px 0px;
    .bar ul ul li, .bar ol ol li,
    .content ul ul li, .content ol ol li{
        list-style-position:inside;
        padding:0px 10px 0px 10px;
        margin:5px 0px 5px 0px;
what do you think?
Thanks

If you're using Lists with floats, adjust your margin-left to offset the float.
See example below:
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Nancy O.

Similar Messages

Rounded corners on unordered list

I'd like to be able to have style my vertical menu, made with
an
unordered list, to have rounded corners. The menu is a fixed
width, but
the items could sometimes run onto two lines, so the height
of each item
needs to be flexible.
I created images called top.gif and bottom.gif for the curves
and when
I've done boxes I've made the bottom image a background to
the box div
tag and the top image a background to the heading tag within
the div.
However with the unordered list I don't really have two
elements to
attach the images to, if you understand what I mean?
I've been googling but haven't yet found a solution. Can
anyone
recommend a way of doing this?
Thanks
Vix

> I've been googling but haven't yet found a solution. Can
anyone recommend
> a way of doing this?
Could could wrap the UL in a DIV, giving you two elements.
You could give the first LI and last LI custom classes,
giving you to
elements.
While not pristine, I often will use wrapper divs to attach
CSS too:
<div id="menuOuterwrapper">
<div id="innnerWrapper">
<ul>...</ul>
</div></div>
That works for me in that it keeps my 'style HTML' separate
from my 'content
HTML'.
A goofy interpretation of 'separation of style and content',
perhaps.
-Darrel

Unordered list - changing color of bullets

Hi,
I am using DW CC. I added an unordered list to a web page, and if possible, I'd like to change the color of the bullets. They are showing up as black, and I would like to choose something different. Can anyone tell me if / how I can do this?
Thanks in advance,
Paul

Here are some great suggestions -
http://stackoverflow.com/questions/5306640/how-to-define-the-color-of-bullets-in-ul-li-lis ts-via-css-without-using-any-im

Unordered List Line Spacing

I have an unordered list on my site that was fine up until
today. All I did was edit someting else on the page, I think it was
just an image or image placeholder or something, and when I checked
the page in the browser again, the list was more than single
space...it looks like 1.5 spacing or so. How can I change this back
so the list is just single spaced? The site is
www.wetlawnirrigation.com if it helps, bottom left of the home
page. Thanks.

Hello,
Try changing this:
.style7 {
font-size: 16px;
To this:
ul.style7 li{
font-size: 16px;
margin: 0px;
Many browsers use different default margins for certain tags
if you don't
define one with CSS.
It looked fine in FireFox, but the space was there in IE as
IE has a bigger
default margin for the LI tag.
Take care,
Tim
"cgcg04" <[email protected]> wrote in
message
news:gnim3g$go1$[email protected]..
>I have an unordered list on my site that was fine up
until today. All I
>did
> was edit someting else on the page, I think it was just
an image or image
> placeholder or something, and when I checked the page in
the browser
> again, the
> list was more than single space...it looks like 1.5
spacing or so. How
> can I
> change this back so the list is just single spaced? The
site is
> www.wetlawnirrigation.com if it helps, bottom left of
the home page.
> Thanks.
>

Unordered list displayed horizontally

Hello,
I am really new to Dreamweaver and I tried to complete (succesfully) the video on how to build my first website.
Following the instruction was not so complicate...
I tried to do pretty much alone the same focusing in creating the button from an unordered list
I did with no CSS file, I created a new one empty. I am able to remove the bullet point, align the list but I can not display the button horizontally and I do not understand why.
This is what I did:
create a Navigation (id= buttons)
create an unordered list
create a CSS file empty
add a selection #buttons ul where I deleted bullet point and aligned the list
add a selection #buttons a here I have problems. I apply with 25% (4 buttons) and set the float option to the left but the list remains vertical
What I do wrong???? It seems I am doing like in the video. Is maybe related to the CSS file? Is not correct doing that with an empty one?
Thanks for any help

Hello, thanks for your answer. Of course it is working, but still I do not get why is not working mine.
here it is the html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="styles/main copy 2.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav id="navbar">
<ul>
    <li>Home</li>
    <li>Products</li>
    <li>Services</li>
    <li>Contacts</li>
</ul>
</nav>
</body>
</html>
and here the CSS
#navbar ul {
          list-style-type: none;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          padding-top: 0px;
          padding-right: 0px;
          padding-bottom: 0px;
          padding-left: 0px;
#navbar a {
          width: 25%;
          display: block;
          float: left;

Unordered list with pop out menu

I have an unordered list in a sidebar. After a user clicks on the link in the sidebar, I want a larger pop up window to appear with several links inside of that box that they can click on. What is the best way to do that?

http://css3menu.com/modern-css3-menu-bar.html
These are all CSS Menu's which can be modified to suit your requirements. If you are looking for a straight-forward drag, drop and play, your expectations may be a little too high. These take a simple list structure and style it. The modifications you would need to make would be in the CSS stylesheet.

TEXT ALIGN PROBLEM UNORDERED LIST SPRY PANEL

When a sentence is too long for its container it breaks to the line below
In a vertical unordered list with square bullets how do I get the word below
to line up with its parent sentence above? just like in this sentence. Reference below.

We would need to see your CSS & HTML code.
My guess is that you removed default settings (margins & padding) from your unordered lists -- perhaps with a reset CSS.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Trouble centering an unordered list menu inside a div

Hello,
I have an unordered list menu that is giving me a fit. I can't seem to figure out how to center it in the div. Structure is like this:
<div id="first-nav">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
In my css I have:
#first-nav{width:100%; text-align:center;}
It's not moving the UL to the center of the div. Link Here http://skeeterz71.com/gothic/
I'm at a loss of what to do. Any help is appreciated.
Thanks

I figured it out. I forgot to set mu UL to display: inline-block;
It is always something simple and this time in the morning, easy to overlook:)

Need Quick Help with Unordered List in Table (text too small)

Hi,
I have a table with 2 unordered lists and the font size is smaller than what I need.
I'm using CSS and have checked all of my font sizes and I have all of what I consider my normal text set to 12.
When my client views the page on his browser, the unordered lists appears to be about a size 8. I checked on my cell phone and I see what he's talking about.
I set the <ul> and <li> to font size 12, but the problem still exists.
It's almost like the table is scaling the text down.
I worked all night trying to figure out what I've done wrong (newbie ) and I can't fix it and my client is waiting!
Here's the page: http://www.precisioncleaning.com/expert_witness_services.html
Please help!
Thanks,
Kathy

I tried adding a new CSS rule to the table font, but it didn't work.
I also edited the <tr> and <td> but still didn't work.
I think something higher up is messing the table up. I don't know anything about specificity or how to see who has the power to overwrite the table.
Do you?

Floating images with an unordered list

I am having a problem trying to find the proper way to float an image to the left of an unordered list. In different browers it responds differently - the image will sometimes find it's way between the bullets and the text rather than having the bullets and text wrap around the right side of the image. I have changed margins to try to push the bullets as far out as possible. I've dragged the image to the end of of a line thinking that it will automatically float left of the bullets (of course I am using the .fltlft class). But the positioning is not consistent in any browser.

Thak Marksey and Nancy, but I am still having issues. I tried the container solution. I altered the source code to this (the bold is what I altered): (again, this is just one of the lists)
<p><a name="service" id="service"></a><strong>REGULAR OR SPECIAL SERVICE MUSIC EXPECTATIONS</strong></p>
<div style="fltlft">
<img src="saxophone.jpg" alt="sax" width="227" height="170" class="fltlft" />
</div>
    <ul>
      <li>Martha will work with the Director of Music to determine the overall service needs, from the theme of the service to particular musical requirements</li>
      <li>Martha will rehearse the choir and/or other musicians ahead of the service</li>
      <li>Martha will meet with the Liturgist and/or Pastor ahead of the service to coordinate any special requirements</li>
      <li>Martha and Dana will provide a prelude, a postlude, an offertory, gifts of music (special music), hymn accompaniment, liturgical music, incidental background music and accompaniment for any special music</li>
      <li>Martha and Dana will play for special services, such as Baptisms, Lessons and Carols, Candlelight Services, Christmas Eve, Lent, Capital Campaign Kickoff, Rally Day</li>
    </ul>
    <p class="clearfloat"/>
In firefox and and chrome it looks fine. But in Internet Explorer, the bullets in the list disappear. Internet explorer created most of the original problem. Before I made this change, the image appeared between the bullets and the text in IE.
I do have an external css attached to this page which has the .fltlft class which I applied to the images. But before I had not addressed the .clearfloat issue (which I also am not sure if I applied correctly).
What am I doing wrong????

When will Adobe Muse support ordered and unordered lists?

When will Adobe Muse support ordered and unordered lists instead of forcing users to create manually formated bullet points? I've asked this question before, but never saw an answer to it. I know others have asked it as well. Adobe has set a high bar with its other solutions. It doesn't look good that Muse does not support ordered and unordered lists at this late date.

Lance,
Thanks for responding - I guess I pushed a button
My perception of the forums and response from Adobe is based upon looking at most of the postings in the "bugs" forum. There are lots of reads, very few replies.
Given the fact that many users have asked about bullets and other basic text formating I am surprised that there is still no sign of them. Perhaps it is felt that there are workarounds that will do. The truth is, as you noted, that none of the workarounds are great, some are not even practical. For my specific case, I would have been happy to use workaround #1, except that the line items were hyperlinks, and I needed to open them in a separate window using the javascript window.open function. As I've detailed in other posts, there is a real problem with this in Muse. Hyperlinked javascript calls are invoked via the "href=" attribute, but this doesn't work properly in a number of browsers. There isn't a way to tell Muse to use onclick instead (which works for all browsers). This led me to have to use embedded html.
That leads me to try #2, which is to use CSS styling in the embedded html. This too gave me fits. Using a <style> section to set the attributes for <ul> or <li> did not work. I can only assume that the tags inside the embedded HTML have a Muse-generated id or class. I tried to get the bullets by setting the list-style-type in the <ul> tag itself using the style attribute, but this did not work (it should). It does work if you put the list-style-type in the <li> tags. This is pretty tedious, and led me to create text files containing the html separate from Muse so that I can use an editor to copy repeated strings. Then I cut and paste into the embedded html container.
Note that, even though I finally found something that works, it is not visible in the design view, so you can't even tell it works without previewing it!
I haven't tried option #3, but given the need to force the use of onclick I imagine that would not be possible with your widget. I was aware of the list widget however.
I'll have to look at the Mucow docs and give it a try. The docs are a bit light - any plans to flesh them out?
Thanks,
Gareth

Unordered list not showing up as indented bullet points within Accordian

http://www.foundationforyoutharts.org/test/Programs.html
I have a page using the spry accordian, and about five different catagories of information. Some of the copy is in unordered lists (in martial arts catagories), but it shows up as as regular text. Any ideas on how to make it view as a typical unordered list with bullet points and indented?
Thanks for taking time to look at this.

Add a margin-left of 20px to your ul.
Either added it in your stylesheet. or directly on the element:
<ul style="margin-left:20px">

How do I create an unordered list with three items and link to id's

How do I create an ordered list with three items and linl to id's on my page

Thanks, I guess what I was really asking, Is there a n option in the insert menu or somewhere where Dreamweaver does it for you.
I am not clear on what you are wanting DW to do for you? Is it that you want it to insert a three item unordered list? No - there's no such function. You would need to click in Design view where you want the list to go, click on the bulleted list icon on the Property inspector, and then enter the three items separated by carriage returns. Then you'd have to link each item specifically.
To enter the named anchors to element ID values, CS5 has no way to do this. You'd have to enter those links manually.

Unordered list not printing correctly

I created a heading 3 followed immediately by an unordered
list. However, when I print the webpage out, I see the heading 3
fine and then the 1st bullet appears where it should but the text
for the first bullet begins several lines down the page. All the
other bullets are thus pushed down as well but the spacing for the
remaining bullets is fine. It's just that the text for the first
bullet begins way down the page. Everything looks OK in the
browser; just when printed is the problem.
Here is the process I followed. Selected heading 3 on the
property inspector and typed my heading. Then went to
insert-->html-->text objects-->unordered list and began
typing in the info for each bullet
My code is below. Please help.
<h3>Deposit Ticket Request</h3>
<ul>
<li>Deposit tickets will be paid for by Treasury
Operations provided they are ordered through our department and not
ordered as a RUSH</li>
<li>If a RUSH is requested it will be the
responsibility of the department to cover all charges for the
deposit tickets</li>
<li>Please allow 3-4 weeks for the deposit tickets to
arrive once they are ordered</li>
<li>Whenever a deposit is made, a deposit ticket MUST
be included, regardless of the amount, or the type of
deposit</li>
<li>The deposit tickets will be either a two or three
part ticket</li>
</ul>

.oO(Johnny the boy)
>Thanks for the reply Micha
>
> It appears the problem occurs in I.E. but is just fine
when printing in Firefox
>
> the site address to the page in question is
>
http://www.indiana.edu/~iutreas/test/forms/bankingdepositticketrequest.html
It's most likely an IE issue with floats. I already get this
effect in
the normal browser view - the form is pushed down after the
left-side
"New Items" box. The print preview looks even worse as
described.
Actually I don't have a quick solution at hand. A while ago I
had a
similar problem on one of my sites, but can't remember what I
did to
solve it ... In many cases it's enough to simply apply a
height: 1% or
zoom: 1
to the floated element to get the rendering right in IE. You
just have
to make sure that only IE sees these hacks. Conditional
comments are
really helpful for that.
Micha

Unordered list bullets and Spry Accordion widget

In all browsers except IE (surprise, surprise!), the page
works fine. Otherwise the bullets in my unordered list appear at
the bottom of the multiline text they are associated with. I
haven't had this problem in similar pages not using the accordion
widget.
Please have a look:
http://www.yale.edu/faith/rc-fwl.htm
vs.
http://www.yale.edu/faith/rc-esw.htm
Thanks,
Gary

<div class="AccordionPanelContent">Castaway the: Restaurant<br />
              1250 Harvard Rd.<br />
              Burbank, CA 91501<br />
              - www.castawayrestaurant.com - (818) 848-6691</p>
Oops!
Missing the opening <p>
I didn't find it, the validator did.
Martin

Unordered List css

Similar Messages

Maybe you are looking for