Printable Version of Topic

Posted by: jjordan33 Apr 2 2019, 06:20 PM

Hi,

I'm trying to learn html and css. I am practicing with hr lines currently, and everything I've tried won't raise or lower it's vertical position. I'll post where it's at in my code so yall can see it.

Apologies if my formatting is off.

Posted by: pandy Apr 2 2019, 06:47 PM

Well, you haven't done anything to position the HR. What do you want to do?

You have tried to give it a height though. Percentages can be tricky. The value must have something to relate too. 70% of what? If you instead give it a height in pixels, it will work. Or if you for example add an explicit height to to the containing DIV, your percentage will work.

It doesn't matter for this, but do you know that U has been deprecated for a long time? Better to use CSS. SUP isn't deprecated that I know of, but CSS can be used for this too if you want.

Posted by: Christian J Apr 2 2019, 06:57 PM

You could simply change its default top- or bottom margins. You may also have to change the margins of HTML elements before and after.

Posted by: Christian J Apr 2 2019, 07:07 PM

In HTML5 it's been given a new semantic meaning: https://www.w3.org/TR/html/textlevel-semantics.html#the-u-element ("...an unarticulated, though explicitly rendered, non-textual annotation... In most cases, another element is likely to be more appropriate"). Apparently it's to be used as a last resort.

To the OP:
In HTML3(?) the U element was just used to underline text. In HTML4 (or 4.01?) it was deprecated, since CSS was now considered the preferred way to create presentational effects (styling), but in HTML5 the U element has been assigned this new semantic meaning, so it's not just for decoration anymore.


SUP still has semantic meaning: https://www.w3.org/TR/html/textlevel-semantics.html#elementdef-sup ("These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation’s sake.") So if the purpose is only for decoration, you should use CSS instead.

Posted by: pandy Apr 2 2019, 07:14 PM

Christ, the mumbo jumbo they come up with...
I suspected there might be some changes in HTML 5, but didn't have the stamina too look it. I didn't expect this though. Thanks.



Basically as it was then.

Posted by: pandy Apr 2 2019, 07:17 PM

Sorry jjordan, I read what you said but must have forgotten it quickly.

Yeah, what Christian said and there are other options like using the position property. If you show us your attempt(s), we can tell you were you went wrong. It's easier than explaining the whole thing from scratch.

Posted by: jjordan33 Apr 3 2019, 04:47 PM

Yall simultaneously shed light on a matter and confused me all at the same time haha.

Thank you for the help on the hr positioning. I am fully up to speed on that.

You're saying that my method of underlining and super texting ... text is outdated and needs to die?

Posted by: jjordan33 Apr 3 2019, 05:08 PM

Alright. I'm not implementing the hr correctly I believe.

My code...

Gives me this...


I will update the U and SUP stuff later. I have a one track mind.

Posted by: Christian J Apr 3 2019, 05:44 PM

It depends on the purpose of the text. Is it just for decoration, try to use CSS. If it has semantic meaning, try to find an appropriate HTML element.

Posted by: Christian J Apr 3 2019, 05:55 PM

What do you want to do with it?

Elements that use "position: absolute" are lifted out of the normal flow of the page layout and hover where you position them, which means that normal elements are not affected by them. In your example, the HR is only affected by the .bgimg DIV (since it's not positioned absolute).

By the way, the HR doesn't need to be in a DIV.

Posted by: jjordan33 Apr 3 2019, 06:21 PM

I just want to be able to put that hr line anywhere I want by adjusting it's height and width.

Posted by: pandy Apr 3 2019, 10:48 PM

When it comes to SUP (and of course SUB), yes, according to HTML 5. Straight off I can only think of things like mathematical expressions and chemical formulas where SUP and SUB might be preferred over CSS. So the below would be kosher.



While this wouldn't.


When it comes to underline it was deprecated long ago and I can't think HTML 5 has changed that. Use CSS.

Posted by: pandy Apr 3 2019, 10:57 PM

I don't understand what you want to do either.

position: absolute is complex and a little hard to get your head around to begin with. It's also very powerful but should be used with care. You can easily screw up the page if you do it wrong. And it's never a good idea to start to position single items absolute on random without a thought-out plan.

Start with margins and position: relative. They are easier to understand since they take where the box would be if it wasn't positioned as a starting point. Absolute offsets refer to other boxes and which box depends on a lot of things. So there's a lot of reading up to do before you understand and master absolute. This will be a lot easier if you already know other positioning concepts and know more about CSS in general. Save absolute for last.

Footnote: margins doesn't use the position property, but are often included when we talk about positioning because they still change where the box appears. And it's often all it takes to accomplish what you want, nudge something a little up, down, left or right.

Posted by: pandy Apr 3 2019, 11:57 PM

Height and width won't change where it is. It changed the HR's height and width, no more than that.

Maybe you should practice with something simpler than a HR. An empty, colored DIV with a height is common as a dummy box. Or several of them.

Posted by: Christian J Apr 4 2019, 10:39 AM

How about the references(?) for footnotes:


?


In fact, avoid underlined text regardless of method, since it's often confused with clickable links.

Posted by: pandy Apr 4 2019, 10:57 AM

Yes, that too. And it's a little like Comic Sans. No one who knows what they are doing uses it.

Fact is, I've always wondered why U exists at all. I think it has always been recommended to avoid underlined text on the web. Well, I just realized - it could be useful if the main purpose is that the document should be printed.

Posted by: Darin McGrew Apr 4 2019, 02:44 PM

Yeah, I've encountered cases where someone was required to use a particular style guide for their bibliography, and that style guide still required underlining certain things. But that seems to be pretty rare.

Interestingly, the old English braille notation had just a single symbol that was used for italics, underline, or boldface. The new Unified English Braille (adopted by the US a few years ago) has separate symbols for italics, boldface, underline, and script.

So maybe underlining isn't completely dead. Still, on the web, underlined text looks like a clickable link, so it should be avoided for anything else.

Posted by: Christian J Apr 4 2019, 03:58 PM

I should add that under certain conditions vertical margins may collapse, which can be confusing. More details can be found here, but feel free to skip if you're a beginner): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Posted by: pandy Apr 5 2019, 01:28 AM

That's interesting, the old braille notation. Because those font styles are used pretty randomly. One person may bold when another use italic. I guess we tend to develop personal styles with this and I'm sure there are guidelines. Personally I use bold for important stuff, italic for quotes and some other thing.

I find italic for quotes especially useful here at the forum, when quoting an outside source like the w3c. If one uses the forum quote tags it looks like another user is quoted. If nothing at all is used people may think little me came up with the esoteric text.

Posted by: jjordan33 Apr 5 2019, 09:15 PM

I sorta became a little lost. Are yall saying that changing the elevation of a hr line is a more complicated process than I first believed and that I should start off with a simpler step and work my way up?

Posted by: pandy Apr 6 2019, 01:48 AM

I don't know what the others are saying, but I'm saying that you won't change the position of the HR with width and height. It will be larger or smaller but it will be in the same place.

I suggested a DIV for training because it doesn't have any special features, as HR has.


As an example...

... if you want to move the HR a little upwards, you could use a negative top margin...



...or you could use position relative.



The difference in how this will look is that position: relative will leave a space where the HR originally was. The text after it won't move up. With a negative margin there is no space and the text after the HR will follow it up.

Posted by: Christian J Apr 6 2019, 04:07 AM

What are those special features (asking for a friend)?


Then the HR may even move in front of the element above it, which can be useful sometimes.

Posted by: pandy Apr 6 2019, 01:13 PM

Features was maybe a poor choice of word, but a HR has default browser styling that makes it look like a HR, i.e. three dimensional. Borders, more than one shade or whatever is used. Since a div is just an anonymous box it may be easier to fiddle with.