Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

tabs and indentation?

2 views
Skip to first unread message

Dale

unread,
Mar 13, 2022, 4:28:05 AM3/13/22
to
I know how to do alignment to the center, right, and left.

how do I do tabs and indentation?

also, when I do something like this

<h1>Header</h1>
<p>Paragraph</p>

I get this ...

Header

Paragraph



notice the space between Header and Paragraph without <br>

how can I get rid of that space?


--
Mystery? -> https://www.dalekelly.org/

Philip Herlihy

unread,
Mar 13, 2022, 7:21:08 AM3/13/22
to
In article <t0k9ui$vi1$1...@dont-email.me>, da...@dalekelly.org says...
>
> I know how to do alignment to the center, right, and left.
>
> how do I do tabs and indentation?
>
> also, when I do something like this
>
> <h1>Header</h1>
> <p>Paragraph</p>
>
> I get this ...
>
> Header
>
> Paragraph
>
>
>
> notice the space between Header and Paragraph without <br>
>
> how can I get rid of that space?

Further to my previous response in another thread:

Randomly asking questions is a very inefficient way to learn how to build web
pages (for everyone). You need to read up on HTML and CSS. Your question
isn't even at a decent beginner level - it's what your Gran might ask.

A browser lays out HTML according to CSS stylesheets, including a default one
built-in. That will set, for example, the 'margin' and 'padding' of various
elements, unless superseded by a custom stylesheet (which is usual).

Linkedin has very good tutorial videos for a monthly fee - formerly the
excellent Lynda.com. You may also find good stuff on YouTube.

--

Phil, London

Philip Herlihy

unread,
Mar 13, 2022, 7:49:51 AM3/13/22
to
In article <MPG.3c97e3f5f...@news.eternal-september.org>,
thiswillb...@you.com says...
Try this:

https://www.w3schools.com/

--

Phil, London

Philip Herlihy

unread,
Mar 13, 2022, 7:53:43 AM3/13/22
to
In article <MPG.3c97eabce...@news.eternal-september.org>,
And, if you want your mind blown: have a look at this:
https://en.wikipedia.org/wiki/CSS_Zen_Garden

--

Phil, London

Dale

unread,
Mar 13, 2022, 8:55:00 AM3/13/22
to
On 3/13/2022 7:49 AM, Philip Herlihy wrote:
> Try this:
>
> https://www.w3schools.com/


I have been. Around 30 years ago it had pop-ups and W3.org didn't.

Dale

unread,
Mar 13, 2022, 8:59:24 AM3/13/22
to
On 3/13/2022 8:27 AM, Stefan Ram wrote:
> r...@zedat.fu-berlin.de (Stefan Ram) writes:
>> (Unfortunately, I cannot think of any specific recommended
>> books now.)
>
> They may be a bit dated today, but books I liked at one point include:
>
> Learning Web Design, Jennifer Robbins
> CSS Pocket Reference, Eric Meyer
> HTML5 for Masterminds, Juan Gauchat
> Learning JavaScript, Tim Wright
> Modern JavaScript, Larry Ullman
>
> .
>
>

Don't want JavaScript or cookies.

I really like learning videos.

I have a look at youtube and wondrium

https://wondrium.com/

Jukka K. Korpela

unread,
Mar 13, 2022, 10:43:59 AM3/13/22
to
Dale wrote:

> how do I do tabs and indentation?

No idea. You need to explain what you want, instead of mentioning (very
vaguely) assumed solutions to unspecified problems. In particular, “tab”
can mean a dozen things, or more.

> also, when I do something like this
>
> <h1>Header</h1>
> <p>Paragraph</p>
>
> I get this ...
>
> Header
>
> Paragraph
>
>
>
> notice the space between Header and  Paragraph without <br>
>
> how can I get rid of that space?


This was an easy one. The spacing is caused by default vertical margins
for elements. Put this into your <head>:

<style>
h1 { margin-bottom: 0: }
h1 + p { margin-top: 0: }
</style>

Dale

unread,
Mar 13, 2022, 12:59:54 PM3/13/22
to
On 3/13/2022 10:08 AM, Stefan Ram wrote:
> r...@zedat.fu-berlin.de (Stefan Ram) writes:
>> Maybe one could use pseudo class selectors (like ":checked")
>> to implement tabs with CSS only.
>
> Maybe something like the following?
>
> <!DOCTYPE html><html>
> <head><meta charset="UTF-8" /><title></title><style type="text/css">
> label { padding: 5px 20px 5px 20px; border: 1px solid #CCC }
> input, p { display: none; }
> input:checked + p { display: block; }
> </style></head><body>
> <label for='button0'>0</label>
> <label for='button1'>1</label>
> <label for='button2'>2</label>
> <input id='button0' name='radio' type='radio' />
> <input id='button1' name='radio' type='radio' /><p>paragraph 1</p>
> <input id='button2' name='radio' type='radio' /><p>paragraph 2</p>
> </body></html>
>
>

looks very nice but not what I amm looking for

Thank You!!!!

Dale

unread,
Mar 13, 2022, 1:09:41 PM3/13/22
to
still has a line between them

<!DOCTYPE html>

<html>

<head>

<style>
h1 { margin-bottom: 0: }
h1 + p { margin-top: 0: }
</style>

</head>


<body>

<h1>test</h1>
<p>test</p>

</body>

</html>

Jukka K. Korpela

unread,
Mar 13, 2022, 2:26:13 PM3/13/22
to
Stefan Ram wrote:

>> <style>
>> h1 { margin-bottom: 0: }
>> h1 + p { margin-top: 0: }
>> </style>
> Maybe you wanted to type a semicolon instead of a colon
> in both cases.

Yes, thanks for pointing this out. (Now, who invented a keyboard where
“,” and “.” are adjacent as well as “;” and “:”?)

(By the way, a CSS validator would have pointed out that there is some
syntax error. Sorry for not checking the code before posting.)

(The value 0 is correct. This value can be used alone, without any unit,
since 0 times anything is 0. Well, that’s the rationale; the formal
point is that CSS specifications make this a rule.)

Lewis

unread,
Mar 13, 2022, 2:50:15 PM3/13/22
to
In message <MPG.3c97eabce...@news.eternal-september.org> Philip Herlihy <thiswillb...@you.com> wrote:
> https://www.w3 schools.com/

Let's not recommend w3 schools, it is a mess.

--
Cheer up Keeley, it's a funeral.

David E. Ross

unread,
Mar 13, 2022, 3:30:25 PM3/13/22
to
On 3/13/2022 12:28 AM, Dale wrote:
> I know how to do alignment to the center, right, and left.
>
> how do I do tabs and indentation?
>
> also, when I do something like this
>
> <h1>Header</h1>
> <p>Paragraph</p>
>
> I get this ...
>
> Header
>
> Paragraph
>
>
>
> notice the space between Header and Paragraph without <br>
>
> how can I get rid of that space?

To indent the first line of a paragraph, see
<https://www.w3.org/TR/CSS22/selector.html#first-line-pseudo>.

--
David E. Ross
"A Message to Those Who Are Not Vaccinated"
See my <http://www.rossde.com/index.html#vaccine>.

Dale

unread,
Mar 13, 2022, 3:51:09 PM3/13/22
to
On 3/13/2022 1:21 PM, Stefan Ram wrote:
> "Jukka K. Korpela" <juk...@gmail.com> writes:
>> Put this into your <head>:
>
> Nice pun!
>
>> <style>
>> h1 { margin-bottom: 0: }
>> h1 + p { margin-top: 0: }
>> </style>
>
> Maybe you wanted to type a semicolon instead of a colon
> in both cases.
>
>

Thank You! Got it to work!

<style>
h1 { margin-bottom: 0; }
h1 + p { margin-top: 0; }
</style>

Now I am left to find out how to indent the <p> under the <h1>

and add a style to make <p> larger on smart phones and tablets.

My CSS adjusts for position of menus.

I don't want to put the styles above in my CSS for the layout of pages
are sometimes different. I guess I could have different CSS for
different groups of pages.

Can I just add this to a CSS?

Dale

unread,
Mar 13, 2022, 3:52:58 PM3/13/22
to
On 3/13/2022 2:47 PM, Lewis wrote:
> In message <MPG.3c97eabce...@news.eternal-september.org> Philip Herlihy <thiswillb...@you.com> wrote:
>> https://www.w3 schools.com/
>
> Let's not recommend w3 schools, it is a mess.
>

30 years or so ago it had a lot of pop-ups

I used just W3.org

now W3Schools is great!

Dale

unread,
Mar 13, 2022, 3:54:17 PM3/13/22
to
On 3/13/2022 3:30 PM, David E. Ross wrote:
> On 3/13/2022 12:28 AM, Dale wrote:
>> I know how to do alignment to the center, right, and left.
>>
>> how do I do tabs and indentation?
>>
>> also, when I do something like this
>>
>> <h1>Header</h1>
>> <p>Paragraph</p>
>>
>> I get this ...
>>
>> Header
>>
>> Paragraph
>>
>>
>>
>> notice the space between Header and Paragraph without <br>
>>
>> how can I get rid of that space?
>
> To indent the first line of a paragraph, see
> <https://www.w3.org/TR/CSS22/selector.html#first-line-pseudo>.
>

Going to require some study. Thank you though!

John-Paul Stewart

unread,
Mar 13, 2022, 4:04:42 PM3/13/22
to
On 2022-03-13 15:30, David E. Ross wrote:
>
> To indent the first line of a paragraph, see
> https://www.w3.org/TR/CSS22/selector.html#first-line-pseudo

Or simply use the text-indent property:

https://www.w3.org/TR/CSS22/text.html#indentation-prop



Dale

unread,
Mar 13, 2022, 4:06:46 PM3/13/22
to
Doesn't work with <h3>

<style>
h3 { margin-bottom: 0; }
h3 + p { margin-top: 0; }
</style>


Dale

unread,
Mar 13, 2022, 4:13:05 PM3/13/22
to
sorry ...

had this ...

<h1>test</h1>
<p>test</p>

instead of this ...

<h3>test</h3>
<p>test</p>

Thank You!!!!

Lewis

unread,
Mar 13, 2022, 6:15:59 PM3/13/22
to
In message <MPG.3c97eabce...@news.eternal-september.org> Philip Herlihy <thiswillb...@you.com> wrote:
> https://www.w3 schools.com/

Let's not recommend w3 schools, it is a mess.

Lewis

unread,
Mar 13, 2022, 8:24:27 PM3/13/22
to
In message <CSS-20220...@ram.dialup.fu-berlin.de> Stefan Ram <r...@zedat.fu-berlin.de> wrote:
> r...@zedat.fu-berlin.de (Stefan Ram) writes:
>>Maybe one could use pseudo class selectors (like ":checked")
>>to implement tabs with CSS only.

> Maybe something like the following?

> <!DOCTYPE html><html>
> <head><meta charset="UTF-8" /><title></title><style type="text/css">
> label { padding: 5px 20px 5px 20px; border: 1px solid #CCC }
> input, p { display: none; }
> input:checked + p { display: block; }
> </style></head><body>
> <label for='button0'>0</label>
> <label for='button1'>1</label>
> <label for='button2'>2</label>
> <input id='button0' name='radio' type='radio' />
> <input id='button1' name='radio' type='radio' /><p>paragraph 1</p>
> <input id='button2' name='radio' type='radio' /><p>paragraph 2</p>
> </body></html>

That works perefectly if what you need to display on the tab is simple,
but not so well if you needed to display formatted HTML incolving more
than a few tags.

But it is a start.


--
Try to realize it's all within yourself/No one else can make you
change

Lewis

unread,
Mar 13, 2022, 8:33:21 PM3/13/22
to
In message <0ex-20220...@ram.dialup.fu-berlin.de> Stefan Ram <r...@zedat.fu-berlin.de> wrote:
> Dale <da...@dalekelly.org> writes:
>>>h1 { margin-bottom: 0: }

> "0:" is not a valid value for "margin-bottom". Try "0ex".

0 is perfectly fine, you do not need to specify px or ex or pt or em
with 0; the problem is that it should be:

#v+
h1 { margin-bottom: 0; }
h1 + p { margin-top: 0; }
#v-

(NB: semicolons at the end of the CSS statement).

And yes, you do have to use both since the default styling for both H
and P tags includes the margin.

--
'(...) And the Patrician has been ironical at me,' said Mr. Clete.
'I'm not having that again.'

Lewis

unread,
Mar 13, 2022, 8:41:16 PM3/13/22
to
In message <t0lhvb$nsf$1...@dont-email.me> Dale <da...@dalekelly.org> wrote:
> Now I am left to find out how to indent the <p> under the <h1>

h1 + p:first-line { text-indent; 5em;}

IIRC.

> and add a style to make <p> larger on smart phones and tablets.

If you use em (as you should) you needn't do this.

--
'That's blasphemy,' said the vampire. He gasped as Vimes shot him a
glance like sunlight. 'That's what people say when the voiceless
speak.'

Dale

unread,
Mar 13, 2022, 8:50:25 PM3/13/22
to
On 3/13/2022 8:41 PM, Lewis wrote:
> In message <t0lhvb$nsf$1...@dont-email.me> Dale <da...@dalekelly.org> wrote:
>> Now I am left to find out how to indent the <p> under the <h1>
>
> h1 + p:first-line { text-indent; 5em;}
>
> IIRC.
>
>> and add a style to make <p> larger on smart phones and tablets.
>
> If you use em (as you should) you needn't do this.
>

https://www.w3schools.com/w3css/w3css_templates.asp

is this what you are referring to?

Lewis

unread,
Mar 14, 2022, 12:53:21 AM3/14/22
to
I doubt it, I've never knowingly referred to anything on w3schools as I
consider it a shit site filled with shit advice and quite often wrong
information. I miss the days when Google allowed you to mark a site t
never come up in search results.


--
"Are you pondering what I'm pondering?"
"I think so, Brain, but I didn’t know 90210 was a real zip code! Will
Tori be there?"

Philip Herlihy

unread,
Mar 14, 2022, 6:21:22 AM3/14/22
to
In article <slrnt2sr8s....@zephyrus.local>, g.k...@kreme.dont-email.me
says...
>
> In message <MPG.3c97eabce...@news.eternal-september.org> Philip Herlihy <thiswillb...@you.com> wrote:
> > https://www.w3 schools.com/
>
> Let's not recommend w3 schools, it is a mess.

Much improved in (not-so) recent years. Our friend would do better to spend
his time there than here.

--

Phil, London

Jukka K. Korpela

unread,
Mar 15, 2022, 1:57:45 PM3/15/22
to
Stefan Ram wrote:

> "Jukka K. Korpela" <juk...@gmail.com> writes:
- -
>> (Now, who invented a keyboard where
>> “,” and “.” are adjacent as well as “;” and “:”?)
>
> I'm sure you realize this, but I'm just saying it for the
> sake of other readers:
>
> In CSS, the semicolon does /not/ terminate a declaration,
> it /separates/ declarations within a ruleset.
>
> ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
>
> Therefore, if a ruleset has just a single declaration,
> no semicolon is required.

Yes, I see your point about the redundancy of semicolons in the case given.

Yet, I’m used to ending CSS declarations (as well as statements in some
programming languages that have similar rules) with a semicolon, just
for simplicity and for being prepared to adding a new declaration (or
statament or whatever).

But it seems that I’m getting too old for that. And my (rather off-topic
and rhetoric) question was about keyboard design. Why make similar
characters like “.” and “,” adjacent? Regarding “:” and “;”, the US (and
UK) keyboards are more sensible than Finnish keyboards (where they are
in adjacent keys, with Shift), given the rather different uses but
similar appearance, both in (human) languages and computer codes such as
HTML and CSS. Why would you make it easier to people in err in things
like that, so that slight mistyping results in characters that look too
similar but are quite different in meaning?



0 new messages