How do I keep text indended after a bullet using only div/css?
Thomas Watson
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
Ben
> 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
--
BTW. I can be contacted at Username:newsgroup4.replies.benaltw
Domain:xoxy.net
Ben
> Thomas Watson wrote:
>
>> 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.
Also, the column text starts to merge into each other with the larger
text which you probably don't want to happen.
Steve Pugh
Use a list. You know, <ul> and <li>.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st...@pugh.net> <http://steve.pugh.net/>
Toby A Inkster
> 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
--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
Thomas Watson
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
Toby A Inkster
Thomas Watson wrote:
> 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.
Mark Nobles
<xana...@m-me.dk> wrote:
> 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.
Thomas Watson
> 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?
Toby A Inkster
> 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:
<div><form><p>...</p></div>
> Toby A Inkster wrote:
>
>> 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?
Again it is about semantics. <b> means "I want this text to be bold".
<strong> means "This text is very important".
>> 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?
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.
kchayka
>
> 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.
--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.
Thomas 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.
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.
------------------------------------------------------------------------
/watson
Thomas Watson
> 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
Toby A Inkster
> 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.
Kris
Toby A Inkster <UseTheAddr...@deadspam.com> wrote:
> > 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.
Don't forget to exclude any META/Content-type tagstuff in case of
application/xhtml+xml, further down the output.
--
Kris
kris...@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.
Mark Nobles
<xana...@m-me.dk> wrote:
> Mark Nobles wrote:
> > 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.
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
Woolly Mittens
news:pan.2003.09.26....@goddamn.co.uk...
> 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.
Kris
"Woolly Mittens" <wmit...@hotmailz.com> wrote:
> > 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.
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.
--
Kris
kris...@xs4all.netherlands (nl)
Thomas Watson
> 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
Toby A Inkster
> 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.)