Re: [Dorset] Centering Text Using CSS
Another thing you might find useful is Firefox's 'Inspect Element (Q)' mode (right-click on the page to find that). You can highlight elements and inspect (and modify) their dynamic CSS properties. Especially useful for finding things like e.g. the element's width doesn't fill its parent the way you thought it did. Tim. */ On Thu, 12 Jul 2018 at 14:03, Terry Coles wrote: > On Thursday, 12 July 2018 13:57:28 BST Andrew wrote: > > HTML can be validated automatically, which really helps with learning. > > I'd forgotten about that > > > > https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.hadrian-way.co.uk%2FWMT_We > > bserver%2FWMT%2F > > Coo. What a lot of errors, especially since much of the code was gleaned > from > (admittedly uncertain) online tutorials and examples. > > Now I know what I'll be doing for the next few days :-) > > -- > > > > Terry Coles > > > > -- > Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 > Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ > New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING > Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
On Thursday, 12 July 2018 13:57:28 BST Andrew wrote: > HTML can be validated automatically, which really helps with learning. I'd forgotten about that > https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.hadrian-way.co.uk%2FWMT_We > bserver%2FWMT%2F Coo. What a lot of errors, especially since much of the code was gleaned from (admittedly uncertain) online tutorials and examples. Now I know what I'll be doing for the next few days :-) -- Terry Coles -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
On 12/07/18 13:53, Terry Coles wrote: As you can see; I am learning this as I go along and it doesn't help when I do something that is illegal, but it appears to (mostly) work. I got there in the end. HTML can be validated automatically, which really helps with learning. https://validator.w3.org/ https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.hadrian-way.co.uk%2FWMT_Webserver%2FWMT%2F -- Andrew. -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
On Thursday, 12 July 2018 13:49:34 BST Patrick Wigmore wrote: > On Thu, 12 Jul 2018 13:47:22 +0100, Patrick Wigmore wrote: > > You should probably use a tag instead, and assign it a class: > I now see in your 13:43 message that you have done this. As you can see; I am learning this as I go along and it doesn't help when I do something that is illegal, but it appears to (mostly) work. I got there in the end. -- Terry Coles -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
Terry, On Thu, 12 Jul 2018 13:47:22 +0100, Patrick Wigmore wrote: > You should probably use a tag instead, and assign it a class: I now see in your 13:43 message that you have done this. -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
On Thu, 12 Jul 2018 12:26:39 +0100, Terry Coles wrote:
> Please point out my (no doubt) blindingly obvious mistake.
You seem to have created your own tag "", and the browser has
probably defaulted to displaying it as an inline element, which can't
have a text-align property.
You should probably use a tag instead, and assign it a class:
To return to this Menu, please use your device's back
button
Then your css needs a dot to denote class, of course:
.msg { ...
If you particularly wanted to use a custom HTML tag, you would have to
tell the browser it's a block element that can have text-align.
It turns out that just adding display: block to the CSS does the trick
in Chromium.
msg {
font-family: "Arial";
text-align: center;
font-size: 5vw;
font-weight: bold;
line-height: 3vw;
color: blue;
display: block;
}
But I don't now whether creating a "" element is considered a
good idea. I suspeect it might not be.
A web search for "html custom elements" returns a fairly confusing
mass of information about different standards at different points in
history.
--
Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00
Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/
New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING
Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
On Thursday, 12 July 2018 13:34:21 BST Andrew wrote: > What's the tag? I've not heard of that before. Perhaps the term 'tag' isn't quite what I meant. I have defined the font attributes that I want in my message and called the definition 'msg'. In fact, to make the center attribute work, I had to make the definition '.msg' and call it using: The message as related earlier. Using that, all of the attributes work, including text-align. -- Terry Coles -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
What's the tag? I've not heard of that before. What you want is probably: margin-left: auto; margin-right: auto; -- Andrew. -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
Re: [Dorset] Centering Text Using CSS
On Thursday, 12 July 2018 12:26:39 BST Terry Coles wrote: > Please point out my (no doubt) blindingly obvious mistake. I Just found this statement: Note: Center aligning has no effect if the width property is not set (or set to 100%). on this page: https://www.w3schools.com/css/css_align.asp However, setting the width had no effect either. In the example they didn't set the width either, but they place the text between div tags and make the definition a Class and that works. -- Terry Coles -- Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00 Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/ New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
[Dorset] Centering Text Using CSS
This is driving me nuts! As part of my WMT Captive Portal project I want to
add a message to the bottom of the Home Page; a copy of which is at:
http://www.hadrian-way.co.uk/WMT_Webserver/WMT/
After visiting W3C Schools, I found that using font tags is now deprecated in
html and so I should use CSS instead. I therefore added the following to my
index.html file:
msg {
font-family: "Arial";
text-align: center;
font-size: 5vw;
font-weight: bold;
line-height: 3vw;
color: blue;
}
and in the body of the code I wrote:
To return to this Menu, please use your device's back button
The problem is that I cannot get 'text-align: center;' to work! I can change
every one of the attributes defined in my msg definition and observe the
expected change, but changes to text-align have no effect.
Please point out my (no doubt) blindingly obvious mistake.
--
Terry Coles
--
Next meeting: Bournemouth, Tuesday, 2018-07-17 20:00
Meets, Mailing list, IRC, LinkedIn, ... http://dorset.lug.org.uk/
New thread: mailto:dorset@mailman.lug.org.uk / CHECK IF YOU'RE REPLYING
Reporting bugs well: http://goo.gl/4Xue / TO THE LIST OR THE AUTHOR
