How do I keep text indended after a bullet using only div/css?

T

Thomas Watson

I have a problem on one of my websites (sorry, but its in Danish):
http://www.jmdanmark.dk/byggerier.php

If you look at the bottom of the submenu "Byggerier" the text of the
last menuitem is to long and wraps:
- Windsor
- Udsolgte byggerier
- Indflytningsklare
boliger

I created the site using only div and css and want it to be valid XHTML
1.1. So don't tell me to just use a table. How do I fix the above
problem so it looke like this (with "boliger" indended):
- Windsor
- Udsolgte byggerier
- Indflytningsklare
boliger

/watson
 
B

Ben

Thomas said:
I have a problem on one of my websites (sorry, but its in Danish):
http://www.jmdanmark.dk/byggerier.php

If you look at the bottom of the submenu "Byggerier" the text of the
last menuitem is to long and wraps:
- Windsor
- Udsolgte byggerier
- Indflytningsklare
boliger

BTW. The problem is with the other items as well if you use the browser
to increase the text size.

Ben
 
B

Ben

Ben said:
BTW. The problem is with the other items as well if you use the browser
to increase the text size.

Also, the column text starts to merge into each other with the larger
text which you probably don't want to happen.
 
S

Steve Pugh

Thomas Watson said:
I have a problem on one of my websites (sorry, but its in Danish):
http://www.jmdanmark.dk/byggerier.php

If you look at the bottom of the submenu "Byggerier" the text of the
last menuitem is to long and wraps:
- Windsor
- Udsolgte byggerier
- Indflytningsklare
boliger

I created the site using only div and css and want it to be valid XHTML
1.1. So don't tell me to just use a table. How do I fix the above
problem so it looke like this (with "boliger" indended):
- Windsor
- Udsolgte byggerier
- Indflytningsklare
boliger

Use a list. You know, <ul> and <li>.

Steve
 
T

Toby A Inkster

Thomas said:
I have a problem on one of my websites (sorry, but its in Danish):
http://www.jmdanmark.dk/byggerier.php

This site suffers from the i've-heard-that-the-font-tag-is-evil-and-div-and-
span-are-better-so-i'll-use-nothing-but-div-and-span syndrome.

Sure presentational markup is evil, but marking things up with only <div>
and <span> and then using CSS to add the appearance of headings, lists,
etc is worse!

Presentational Markup:

* adds no semantics to the document
* good backwards compatibility
* reasonable forwards compatibility

DIV and SPAN soup:

* adds no semantics to the document
* poor backwards compatibility
* good forwards compatibility

Semantic Markup:

* adds proper semantics to the document
* reasonable backwards compatibility
* good forwards compatibility

Anyway, once you have fixed your markup so that headings are marked up
with <hX> tags; lists with <ul>, <ol> and <li>; paragraphs with <p>; etc
then this may be of some use to you:

http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop
 
T

Thomas Watson

Thnx :)

You are absolutely right about the <hx> and <p> tag... I've now changed
the <div class="headline"> to <h1>, but I have to wait with the <p>-tag
because the content is generated by a CMS that I have to configure.

About the menu:
I've now exchanged the div tags with ul and li tags. And with some CSS
and a picture for the bullet it actually works. The code even looks
better now (and is smaller!).

Any other suggestions?

/watson
 
T

Toby A Inkster

<URL:http://www.jmdanmark.dk/byggerier.php>

Thomas said:
Any other suggestions?

If you want to cut down on file size, you don't really need all those
class="menu-level-2" things. Did you know that "div#menu ul" means "all
<ul>s that are inside div#menu"? So instead of ul.menu-level-1, you can
use:

div#menu ul {
... css goes here ...
}

and instead of ul.menu-level-2 you can use:

div#menu ul ul {
... more css here ...
}

Apart from the size difference though it probably makes no practical
difference.

Your <select> should be somewhere inside a <form>, which should have an
action that points to a server-side redirector to catch the (~13% of)
cases when the user doesn't have JavaScript.

Does this bit near the bottom do anything?
<div id="tekstfelt2"><h1></h1>
<div class="body"></div></div>
<div id="background"></div>

This bit:
<b>Beliggenhed:</b><br />
should probably be a heading of some kind, or maybe <strong>...</strong>
instead of <b>...</b>

I don't know if you're using any browser sniffing, but if you are, for
IE/Win leave out the <?xml ... ?> bit, as it throws IE into quirks mode.
 
M

Mark Nobles

Thomas Watson said:
Thnx :)

You are absolutely right about the <hx> and <p> tag... I've now changed
the <div class="headline"> to <h1>, but I have to wait with the <p>-tag
because the content is generated by a CMS that I have to configure.

About the menu:
I've now exchanged the div tags with ul and li tags. And with some CSS
and a picture for the bullet it actually works. The code even looks
better now (and is smaller!).

Any other suggestions?

/watson

I didn't find the reason, I think you have some hardwired widths in px
instead of ems; here's what the page looks like to me:
http://dcm.cl.uh.edu/c4230f3noblesc/images/byggerier.jpg

using Safari on Mac OS X 10.2.6.
 
T

Thomas Watson

Toby said:
If you want to cut down on file size, you don't really need all those
class="menu-level-2" things. Did you know that "div#menu ul" means
"all <ul>s that are inside div#menu"?

No acctually I didn't. Thnx alot for the tip :) I now implemented it on
the menu structure. I have just one question about it though:

When using this idea on a-tags it works fine on the first menu level,
but if you look at this page:
http://www.jmdanmark.dk/fionia/boligtype_a.php
you can see the second levels active menuitem "Boligtype A" is bold and
the color of the text is gray. It should actually not have been bold
and the color should be more black (a described in div#menu ul li ul li
a.activey {...} in standard.css)
Instead it inherited the bold property from the div#menu ul li a.active
{...} and the color from somewhere else... how come it does not follow
the directions of the div#menu ul li ul li a.activey {...} directive?
Your <select> should be somewhere inside a <form>, which should have
an action that points to a server-side redirector to catch the (~13%
of) cases when the user doesn't have JavaScript.

Funny. I'm surprised that the HTML validater did not catch this.
Thought it was part of the normal XHTML 1.1 standard that form elements
should be nested inside a form. But I must have been wrong. I'll try to
look into it.
Does this bit near the bottom do anything?
<div id="tekstfelt2"><h1></h1>
<div class="body"></div></div>
<div id="background"></div>

The first two lines is auto generated from the CMS - and no - right
here they have no meaning. The last one is used to display the
background (defined in 2columns_pos.css)
This bit:
<b>Beliggenhed:</b><br />
should probably be a heading of some kind, or maybe
<strong>...</strong> instead of <b>...</b>

Ok... Why is this? What should the difference be?
I don't know if you're using any browser sniffing, but if you are, for
IE/Win leave out the <?xml ... ?> bit, as it throws IE into quirks
mode.

I did not know this. I have never seen any problems. Can you give an
example of the problem... Quirks mode?
 
T

Toby A Inkster

Thomas said:
When using this idea on a-tags it works fine on the first menu level,
but if you look at this page:
http://www.jmdanmark.dk/fionia/boligtype_a.php
you can see the second levels active menuitem "Boligtype A" is bold and
the color of the text is gray. It should actually not have been bold
and the color should be more black (a described in div#menu ul li ul li
a.activey {...} in standard.css)
Instead it inherited the bold property from the div#menu ul li a.active
{...} and the color from somewhere else... how come it does not follow
the directions of the div#menu ul li ul li a.activey {...} directive?


Consider this example:

-----------------------------------
div#menu ul li a {
font-weight: bold;
}
div#menu ul li ul li a {
font-style: italic;
}
-----------------------------------
<div id="menu">
<ul>
<li><a href="#">Link 1</a></li>
<li>Hello
<ul>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
-----------------------------------

"Link 1" will be in bold. "Link 2" will be in italics *and* in bold. Why?
Because *both* the stylesheet rules apply to it.

If we want "Link 2" to be in non-bold italics, we need to explicitly tell
it not to use bold:

-----------------------------------
div#menu ul li a {
font-weight: bold;
}
div#menu ul li ul li a {
font-style: italic;
font-weight: normal;
}
-----------------------------------

The reason for this is that for example "div p" does not mean "any
paragraph that is *directly* inside a div", like:

<div><p>...</p></div>

It includes *indirect* children too, such as:

Ok... Why is this? What should the difference be?

Again it is about semantics. <b> means "I want this text to be bold".
I did not know this. I have never seen any problems. Can you give an
example of the problem... Quirks mode?

Details of IE6/Win's quirks mode are here:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp#cssenhancements_topic2

Various browsers (Opera 7, IE6/Win, IE5/Mac, Mozilla, Netscape 6.2+, etc)
have something called "quirks mode" where they emulate some of IE5/Win's
CSS bugs.

If you include the <?xml ... ?> bit, IE6/Win will automatically enter
quirks mode and start doing buggy CSS.
 
K

kchayka

Toby said:
If you include the <?xml ... ?> bit, IE6/Win will automatically enter
quirks mode and start doing buggy CSS.

This might be rephrased to "start doing _different_ buggy CSS". :)

FWIW, I sometimes find IE6's quirks mode rendering to be more
predictable than standards mode. Go figure.
 
T

Thomas Watson

Mark said:
I didn't find the reason, I think you have some hardwired widths in px
instead of ems; here's what the page looks like to me:
http://dcm.cl.uh.edu/c4230f3noblesc/images/byggerier.jpg

using Safari on Mac OS X 10.2.6.

Sorry... I can't seem to get in contact with the server. This is the
last node I could get with a trace route:
------------------------------------------------------------------------
18 163 ms * * caesar-fe1-10.gw.uh.edu [129.7.254.253]
19 * * pliny-atm2-0-1.gw.UH.EDU [129.7.131.18]
reports: Destination net unreachable
..

Trace complete.
 
T

Thomas Watson

Toby said:
The reason for this is that for example "div p" does not mean "any
paragraph that is directly inside a div", like:

<div><p>...</p></div>

It includes indirect children too, such as:

<div><form><p>...</p></div>

Ok... Was not sure of this. But I suspected it :) My problem turned out
to be that I relied on "div#menu x a.active" to control all aspects of
the link, but forgot that I had to directly specify :link, :visited,
:hover, :active to get the wanted effect.
Again it is about semantics. <b> means "I want this text to be bold".
<strong> means "This text is very important".

Get your point - And I agree. I can't do so much about it though,
because that part of the content on the webpage is written directly by
a 3rd party. So I have to go to them with the info.
If you include the <?xml ... ?> bit, IE6/Win will automatically enter
quirks mode and start doing buggy CSS.

No I am not using any browser sniffing at the moment... I could
implement it though... I searched the web for an answer and found this
page:
http://nemesis1.f2o.org/dtd
I know that you should not trust all that you read on the web, but if
the author of this page is right, then the problem with IE6/Win
entering quirks mode only exists when the page is using xhtml 1... but
I'm using xhtml 1.1 - So I should not have the problem (or is the
author maybe wrong about this)

/watson
 
T

Toby A Inkster

Thomas said:
http://nemesis1.f2o.org/dtd
I know that you should not trust all that you read on the web, but if
the author of this page is right, then the problem with IE6/Win
entering quirks mode only exists when the page is using xhtml 1... but
I'm using xhtml 1.1 - So I should not have the problem (or is the
author maybe wrong about this)

I think that the "NOTE" by XHTML1.0 also applies to XHTML1.1. :-(

The way I do it is with this PHP function:

function capable_browser($u)
{
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") )
{ return true; }
else
{ return false; }
}

if it returns true, then I set the Content-Type to application/xhtml+xml
and then output the XML prologue.
 
K

Kris

http://nemesis1.f2o.org/dtd
I know that you should not trust all that you read on the web, but if
the author of this page is right, then the problem with IE6/Win
entering quirks mode only exists when the page is using xhtml 1... but
I'm using xhtml 1.1 - So I should not have the problem (or is the
author maybe wrong about this)

I think that the "NOTE" by XHTML1.0 also applies to XHTML1.1. :-(

The way I do it is with this PHP function:

function capable_browser($u)
{
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") )
{ return true; }
else
{ return false; }
}

if it returns true, then I set the Content-Type to application/xhtml+xml
and then output the XML prologue.[/QUOTE]

Don't forget to exclude any META/Content-type tagstuff in case of
application/xhtml+xml, further down the output.
 
M

Mark Nobles

Thomas Watson said:
Sorry... I can't seem to get in contact with the server.

You must have just picked a bad time. It appears to be up now.
(It is not a machine I have any access to except by ftp and http.
I don't even know where it is.)

Mark
 
W

Woolly Mittens

Toby A Inkster said:
This site suffers from the i've-heard-that-the-font-tag-is-evil-and-div-and-
span-are-better-so-i'll-use-nothing-but-div-and-span syndrome.

Why do people insist on turning EVERY question posted here into their
personal soapbox?

YES, I allready know you are a superior being sent by jesus himself to guide
us from our valley of doubt. But FFS answer the guys question or remain
quiet.

In answer... seperate your "fake bullet" and the menu text in block elements
and float them both to the left of their container.
 
K

Kris

This site suffers from the i've-heard-that-the-font-tag-is-evil-and-div-and-
span-are-better-so-i'll-use-nothing-but-div-and-span syndrome.

Why do people insist on turning EVERY question posted here into their
personal soapbox?

YES, I allready know you are a superior being sent by jesus himself to guide
us from our valley of doubt. But FFS answer the guys question or remain
quiet.[/QUOTE]

Maybe I missed something. Did you guys converted this group to a
helpdesk when I wasn't looking? Great, I can always use a little extra
money.
 
T

Thomas Watson

Woolly said:
In answer... seperate your "fake bullet" and the menu text in block
elements and float them both to the left of their container.

If I was to put them both in seperate block elements... would they not
both want do be on their own line?

/watson
 
T

Toby A Inkster

Woolly said:
YES, I allready know you are a superior being sent by jesus himself to guide
us from our valley of doubt.

Who told you? It was supposed to be a secret.
But FFS answer the guys question or remain quiet.

I did. Albeit wrongly -- I saw the word "wrap" and referred him to the CSS
white-space property. Upon closer inspection, I see that
list-style-position may have been more fruitful.

I shall now turn water into wine. (Well, it's better than sitting in a
plastic box for 44 days.)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,763
Messages
2,569,562
Members
45,038
Latest member
OrderProperKetocapsules

Latest Threads

Top