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
Re: [Dorset] Using a Raspberry Pi as a Network Router
On Thu, 12 Jul 2018 07:14:05 +0100, Terry Coles wrote: > > Given enough time to detect the captive portal, Windows 7 pops up > > a > > balloon from the taskbar suggesting that "Additional log on > > information may be required", which opens a browser when clicked. > > Have you installed nodogsplash? Just wondering how you know. My main experience in this case is of a Three pay-as-you-go mobile broadband connection. When the credit runs out, the network activates a captive portal, which redirects to a message saying you've run out of credit and need to top up your account. This triggers Windows 7's sluggish pop-up bubble and Firefox's banner about signing in. I've never tried it with Android, but I'd expect it to trigger Android's sign-in browser too. The same effect should occur on any captive portal, unless the captive portal is deliberately making itself hard to detect. -- 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] Using a Raspberry Pi as a Network Router
On Wednesday, 11 July 2018 19:17:25 BST Patrick Wigmore wrote: > On Wed, 11 Jul 2018 17:14:21 +0100, Terry Coles wrote: > > It's worse than that; I've found that every browser that I've tried > > on every device that I have access to exhibits different behaviours > > with this code: Something that I also found, even before I installed the captive portal, was that colours are rendered differently on different platforms. At the time that I developed the original website, the public website was themed in blue, so I chose that colour for buttons, etc. In order to provide the maximum readability, I chose yellow for the button text. Unfortunately that text came out pale blue on Android phones, which made it unreadable outdoors ;-( > Given enough time to detect the captive portal, Windows 7 pops up a > balloon from the taskbar suggesting that "Additional log on > information may be required", which opens a browser when clicked. Have you installed nodogsplash? Just wondering how you know. > Captive portals are a bit of a hack, and largely rely on the > assumption that, if someone wants to use an internet connection, they > will open a web browser and try to access a website on the internet. Fortunately we do need to use a browser; I'd just prefer that it wasn't the crippled one that comes up at signin on Android 7.0 (and presumably earlier) phones. > Which leads me to wonder; could the overflow you're seeing have to do > with the global font size settings (for menus, etc) on the Android > device you are using? If this is set larger than default, then perhaps > the portal sign-in browser respects that and renders everything > larger, while other browsers ignore this setting. I'm sure that this is a factor. > If you are more concerned about whether the buttons fit on the screen > than whether they respect the user's font size preference, it might > make more sense to specify the font size in viewport width units (vw). > That is a design decision more than a technical one. Personally I'd > try a smaller em size first. (It sounds like that's what you've done.) I wasn't aware of this feature; I'll look into it. Thanks for your help. -- 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
