26 replies [Last post]
blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

I have a list of text on a site I am making but am having problems with indenting. I used &nbsp at one point but some computers aren't seeing the text properly.

What I have is...

- words like this then instead of being right they go like this
and it doesn't look right.

What I want is the words on the bottom line to be positioned under the letters of the top line and not underneath the dash.

I have tried the css indent thing but I was hoping there was another css way of doing it...

Becka

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css indenting a list

That's not a very clear question, do you mean that you are using a unordered list, if so have you set list-style-position to 'inside' ?

Try playing with the margin-left or padding-left ( Mozi uses padding on the ul to achieve indent and IE uses margin), and setting list-style-position to 'outside'.

It would help really if you showed us the code your working with.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

css indenting a list

Sounds like you need to adjust your margins.

Example:

HTML

<ul class="indentlist">
     <li>list item</li>
     <li>list item</li>
     <li>list item</li>
     <li>list item</li>
</ul>

CSS

.indentlist {
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px ;
     margin-left: 30px;
}

CSS shorthand:

.indentlist {
     margin: 0px 0px 30px 0px;
}

Maybe this will help.

*EDIT: (you might also want to try <blockquote> if it is not a list)

This is my big chance . . . yep, I blew it . . .

sanch3x
Offline
Enthusiast
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

css indenting a list

n8gz4ez wrote:
*EDIT: (you might also want to try <blockquote>)

That would be bad use of HTML... *slaps your wrist*

Seb

"Don't worry about Blank let me worry about Blank"

drhowarddrfine
Offline
Leader
Last seen: 10 years 1 week ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

css indenting a list

Why can't you use text-indent?

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

css indenting a list

sanch3x,

What is wrong with a blockquote, if that is in fact what blacktears has described?

Quote:
What I have is...

- words like this then instead of being right they go like this
and it doesn't look right.


Looks like it could be a blockquote to me.

Maybe it is not a list after all.

This is my big chance . . . yep, I blew it . . .

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css indenting a list

Because if lists are being used you do not need to use text-indent there will be a problem in the way the list is being written and as the original question was not clear,why I asked for some code to see what was occurring.

n8gz4ez, using blockquote wouldn't be semantic and you have declared the 30px margin on the bottom in the shorthand example for the ul.

The margin would be best placed on the list element if this is a IE problem as it's quirky in it's behavior zero left margin on the list element in IE will hide bullets unless they are 'inside' in which case the text will wrap underneath them.

But we need to see what is happening and what code is being used and what browsers are presenting the problem.

Edit:n8gz4ez, you may well be right and it isn't a list at all but this then would make a prime example of why it's important to formulate ones question clearly before posting, to save confusion, Sorry blacktears hope that you can clarify things for us soon Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sanch3x
Offline
Enthusiast
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

css indenting a list

Oh, I thought you were suggesting blocknotes instead of using css text-indent.

His OP is confusing and from what I understood I thought he wanted paragraphs to have an indent.

Seb

"Don't worry about Blank let me worry about Blank"

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css indenting a list

Lets leave it there until Becka has had a chance to answer, thanks.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

css indenting a list

sanch3x,

He? Becka might be a lady.

From the OP it is not clear if Becka actually has a list or a bunch of text.

I would never suggest blockquoting a list.

It was a different suggestion, incase Becka's "list of text" is really like she described.

Quote:
What I have is...

- words like this then instead of being right they go like this
and it doesn't look right.


This above is not a list, it looks like a blockquote to me.

Sorry for the confusion.

This is my big chance . . . yep, I blew it . . .

sanch3x
Offline
Enthusiast
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

css indenting a list

n8gz4ez wrote:
sanch3x,

He? Becka might be a lady.

Maybe, maybe not, but the fact is I didn't mean anything by it. I just ended up typing 'his' or 'he' or whatever I typed. I'm a french canadian.. I have a bad habit or writing everything in the masculin if gender isn't specified.

Anyways, BlackTear mind explaining further?

Seb

"Don't worry about Blank let me worry about Blank"

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css indenting a list

Guys I requested that we hold back on further posts until becka had a chance to come back to us, please.

Were drifting the thread of at a tangent.

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

css indenting a list

Um, Hi, didn't know anyone had replied as I have been out for a while.

the page I am working with atm is

www.nigeldawson.co.uk/testing.html

the page which has the most choppy writing is the minimum requirements one.

Thanks

Becka
(female Wink)

sanch3x
Offline
Enthusiast
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

css indenting a list

Hey there,

You have a lost of nested HTML and some of the things you are doing are deprecated. All those spaces are probably part of the problem. What you might want to do is actually get rid of all those things and make yourself a list but play with the lists in CSS.

I'm not quite sure *what* you want but I can tell you fixing those things first will make your site look cleaner and make it'll be easier to work with.

Seb

"Don't worry about Blank let me worry about Blank"

blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

css indenting a list

I'm actually quite new at this, which bits exactly do you mean apart from the annoying &nbsp spaces?

Becka

sanch3x
Offline
Enthusiast
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

css indenting a list

Well font tags are deprecated. If ever you wanted to change all those sub titles you'd have to change each one of them individually.

so instead of <font color=red> you should have something like
<h2>Sub Title</h2>

and then in your css file have:

h2 {
color: red;
}

So now all text wrapped in h2 tags will have a red font, and if ever Nigel decides he wants his font blue you just change the property in file and all your subtitles will follow Smile

A lot easier huh Tongue

(<br> are also deprecated if I'm not mistaken)

Seb

"Don't worry about Blank let me worry about Blank"

blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

css indenting a list

Yea I think I will probably do that, but what do I used instead of <br>?
I really wanna learn how to make better websites

Becka

sanch3x
Offline
Enthusiast
Last seen: 10 years 10 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

css indenting a list

You could use the <p> tag and play with margins/padding to your liking. If you don't want ALL your <p> tags to look the same you could make a class for it like this:

.specialPTag{
margin: 1em 1em 1em 1em
}

and then do <p class=specialPTag> my paragraph </p> and the text wrapped in there would be affected but other text wrapped in regular <p> wouldn't be.

I recommend you look for tutorials on all sorts of stuff you can do with CSS. I've only started using it a month ago and I'll never go back to the older methods =D

www.w3schools.com have REALLY good learning material and they go through it step by step. That's where I started.

Hope that helps Smile

Seb

"Don't worry about Blank let me worry about Blank"

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

css indenting a list

Nicely said sanch3x. Smile

This is my big chance . . . yep, I blew it . . .

blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

css indenting a list

That actually doesn't work to sort out my problem, also, if I want a break between certain parts contained within the <P> tag then what do I type there?

If you look on the minimum requirements page now, you see how the word examinations is below the dash, I want it to be below the 'Have'...

nigeldawson.co.uk/testing.html

Becka

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

css indenting a list

Instead of this,

 
The qualifying process to become an A.D.I (approved driving instructor) is split into 3 separate parts. 
  
·	Part 1 is a theory based test, 
 
·	Part 2 is a test of driving ability,  
 
·	Part 3 is a test of instructional ability. 


you might want this,

 
<p>The qualifying process to become an A.D.I (approved driving instructor) is split into 3 separate parts.</p> 
<ul> 
     <li>Part 1 is a theory based test,</ul> 
     <li>Part 2 is a test of driving ability,</ul> 
     <li>Part 3 is a test of instructional ability.</ul> 
</ul> 


Then you can adjust your <p>'s and <ul>'s margin as you see fit.

This is my big chance . . . yep, I blew it . . .

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

css indenting a list

That's a definite place for a list:

<ul>
  <li>Do you hold a full UK or EU unrestricted car driving license?</li>
  <li>Have you held the licence for a minimum of 4 years? (You can start to prepare for the examinations before this, but cannot be entered onto the register until you have held your full license for 4 years)</li>
  <li>Are you a ‘fit and proper person’ to have your name entered onto the register?(Any convictions for any offence will be taken into account)</li>
  <li>Are you committed enough to pass the 3 strict register qualifying examinations?</li>
  <li>Are you able to read a number plate from a distance of 27.5 mtrs?</li>
</ul>

you can use the <br> tag - it's not deprecated. An incorrect use would be to use it for positioning other elements.

blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

css indenting a list

Thanks! That's done it, had forgotten about the <ul> part! thanks! Smile:)

Becka

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css indenting a list

Becka, first thing you have to do is clear up the errors in the html you have some incorrect nesting of elements such as a div with a table as parent the table element may only contain tr/td as it's offspring, the div would have to go in a cell(td) also you have a p element nested in an anchor isn't allowed.

I would seriously think about dropping the use of the Iframe and absolute positioning, it's a very confused layout at the moment and I have taken a while to find the actual html generating the 'minimum requirements' text as the Iframe source quoted 'welcome.html' so I'm not sure whats going on there but it's not correct and just confusing for things like search engines.

The text to which you refer should be either an unordered list (ul) or a definition list(dl) what you have at the moment is wrong and you shouldn't use &nbsp; in this way there are proper semantic elements for this structure as mentioned and I would recommend that you google a few tutorials on things such as lists, layout flow

You also have no DTD, pop along to the 'How To' section for guides on this and other pertinent stuff or follow the link in my sig.

If your not doing so already start to develope in Firefox rather than IE it's important and obtain the html-tidy plugin for it as this will check for html errors also grab the 'Web Developer Toolbar' which is an essential item.

I'm afraid that you have dived right in at the deep end on this and you have quite a steep learning curve ahead of you, see if you can sort out the DTD and the basic markup errors then have a go at putting that text into a correct list element any problems post back and we will run you through things, in fact you'll initially be needing quite a lot of help so don't be afraid to ask.

N.B <br> is not deprecated but should be used sparingly and not as a styling device, margins should be used to space elements. The attributes for <br> i.e 'clear' are deprecated.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

css indenting a list

Woah, thanks Smile I know I have quite a lot to learn and it's gonna be brilliant when things aren't as complicated!

I really like the 'effect' that Iframe gives? is there another way of doing it?

I am going to have to go offline for an hour or two cuz it's lightening.

I think I'll be on here for a lot of the time lol, I have a photography site to do also as I have just done a degree in photography so after I finish this one, that is next!

Becka

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 30 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

css indenting a list

Welcome to the forum, Becka.

Once you realize the structure of what you're doing, it all falls into place. I whacked together a simple test case. In this case, a couple of 'extra' tags were added as hooks for the css.

Don't let the number of style rules throw you; after you code the html, style stuff is added to spiff things up.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=us-ascii" />

  <title>A list</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

ul li {
    margin: 1em 0;
    }

ul ul {
    margin-left: 1em;
    }

ul ul li {
    margin: 0;
    }

ul ul li span {
    width: 1em;
    float: left;
    }

ul ul li p {
    margin: .25em 0 .25em 3em;
    }

/*This is a hack to correct for IE's adding a linefeed.
  I'm hiding it from IE/Mac because I don't know that
  the Mac version screws up like IE/Win*/
/* \*/
* html ul ul li p {
    margin-top: -1em;
    }
/* */

#wrapper {
    position: relative;
    width: 30em;
    margin: 50px auto 0;
    }

/*]]>*/

</style>
</head>

<body>
  <div id="wrapper">
    <ul>
      <li>You must be able to answer <strong>YES</strong> to the
      following:

        <ul>
          <li>
            <span>&mdash;</span>

            <p>Do you hold a full UK or EU unrestricted car driving
            license?</p>
          </li>

          <li>
            <span>&ndash;</span>

            <p>Have you held the licence for a minimum of 4 years? (You
            can start to prepare for the examinations before this, but
            cannot be entered onto the register until you have held
            your full license for 4 years)</p>
          </li>

          <li>
            <span>-</span>

            <p>Are you a &lsquo;fit and proper person&rsquo; to have
            your name entered onto the register?(Any convictions for
            any offence will be taken into account)</p>
          </li>

          <li>

            <span>&bull;</span>

            <p>Are you committed enough to pass the 3 strict register
            qualifying examinations?</p>
          </li>

          <li>
            <span>&middot;</span>

            <p>Are you able to read a number plate from a distance of
            27.5 mtrs?</p>

          </li>
        </ul>
      </li>

      <li>And be able to answer <strong>NO</strong> to the following:

        <ul>
          <li>
            <span>&bull;</span>

            <p>Have you been disqualified from driving at anytime in
            the 4 years prior to being entered onto the register?</p>
          </li>

          <li>
            <span>&bull;</span>

            <p>Have you got more than 5 penalty points on your
            license?</p>
          </li>

        </ul>
      </li>
    </ul>
  </div><!-- end wrapper -->
</body>
</html>
If you don't understand something, ask.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

blacktears
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2005-06-28
Posts: 56
Points: 0

css indenting a list

That's neat! On my pages that I did again last night it seems as if I am adding too many tags to do one thing. It's going to be much easier if I convert it to that type of layout. Also, thanks for putting the different bullet points in as I needed to change those today Laughing out loud Gonna spend today rewriting and checking up on stuff etc. I need to get the site up asap so as soon as it's simple and basic that's all it needs to be.

Becka