The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> hr position won't change.
jjordan33
post Apr 2 2019, 06:20 PM
Post #1





Group: Members
Posts: 7
Joined: 1-April 19
Member No.: 26,868



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.

CODE

hr {
  
  height: 70%;
  width: 70%;
}
</style>
<body>

<div class="bgimg">
  <div class="topleft">
    <p>some text<sup>2</sup><u>more text</u></p>
  </div>
  <div class="middle">

    <h1>COMING SOON</h1>
    <div class="hr">
    <hr>
    </div>
    <p><small>even more text. text even more!?!?!.</small></p>
  </div>


Apologies if my formatting is off.

This post has been edited by jjordan33: Apr 2 2019, 06:22 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 2 2019, 06:47 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



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.

CODE
.hr    { height: 100px }


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2019, 06:57 PM
Post #3


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(jjordan33 @ Apr 3 2019, 01:20 AM) *

I am practicing with hr lines currently, and everything I've tried won't raise or lower it's vertical position.

You could simply change its default top- or bottom margins. You may also have to change the margins of HTML elements before and after.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2019, 07:07 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 3 2019, 01:47 AM) *

It doesn't matter for this, but do you know that U has been deprecated for a long time? Better to use CSS.

In HTML5 it's been given a new semantic meaning: https://www.w3.org/TR/html/textlevel-semant...l#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.

QUOTE
SUP isn't deprecated that I know of, but CSS can be used for this too if you want.

SUP still has semantic meaning: https://www.w3.org/TR/html/textlevel-semant...#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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 2 2019, 07:14 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Apr 3 2019, 02:07 AM) *

QUOTE(pandy @ Apr 3 2019, 01:47 AM) *

It doesn't matter for this, but do you know that U has been deprecated for a long time? Better to use CSS.

In HTML5 it's been given a new semantic meaning: https://www.w3.org/TR/html/textlevel-semant...l#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.


Christ, the mumbo jumbo they come up with... ohmy.gif
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.

QUOTE

QUOTE
SUP isn't deprecated that I know of, but CSS can be used for this too if you want.

SUP still has semantic meaning: https://www.w3.org/TR/html/textlevel-semant...#elementdef-sup ("These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation’s sake.")


Basically as it was then.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 2 2019, 07:17 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Apr 3 2019, 01:57 AM) *

QUOTE(jjordan33 @ Apr 3 2019, 01:20 AM) *

I am practicing with hr lines currently, and everything I've tried won't raise or lower it's vertical position.

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


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jjordan33
post Apr 3 2019, 04:47 PM
Post #7





Group: Members
Posts: 7
Joined: 1-April 19
Member No.: 26,868



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?


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jjordan33
post Apr 3 2019, 05:08 PM
Post #8





Group: Members
Posts: 7
Joined: 1-April 19
Member No.: 26,868



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

My code...
CODE

<!DOCTYPE html>
<html>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bgimg {
  background-image: url('somewebsite');
  height: 25%;
  width: 55%
  background-position: center;

  position: relative;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-size: 25px;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
  
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}

.middle {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hr    { height: 20px } # this is the div class in question
</style>
<body>

<div class="bgimg">
  <div class="topleft">
    <p>some text<sup>that will need changing</sup><u>once i get this stupid hr</u></p>
  </div>
  <div class="middle">

    <h1>COMING SOON</h1>
    <p><small>Random slogan here</small></p>
  </div>
</div>

<div class="hr"> #this is where I'm calling the div class
    <hr>
    </div>

</body>
</html>


Gives me this...
IPB Image

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

This post has been edited by jjordan33: Apr 3 2019, 05:20 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2019, 05:44 PM
Post #9


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(jjordan33 @ Apr 3 2019, 11:47 PM) *

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

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2019, 05:55 PM
Post #10


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(jjordan33 @ Apr 4 2019, 12:08 AM) *

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

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jjordan33
post Apr 3 2019, 06:21 PM
Post #11





Group: Members
Posts: 7
Joined: 1-April 19
Member No.: 26,868



QUOTE(Christian J @ Apr 3 2019, 06:55 PM) *

QUOTE(jjordan33 @ Apr 4 2019, 12:08 AM) *

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

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.



I just want to be able to put that hr line anywhere I want by adjusting it's height and width.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2019, 10:48 PM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Apr 4 2019, 12:44 AM) *

QUOTE(jjordan33 @ Apr 3 2019, 11:47 PM) *

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

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.


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.

CODE
2x<sup>2</sup> + 3 = 27
H<sub>2</sub>O
C<sub>2</sub>H<sub>5</sub>OH


While this wouldn't.
CODE
Yo! What's <sup>up</sup>?


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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2019, 10:57 PM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



QUOTE(jjordan33 @ Apr 4 2019, 12:08 AM) *

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


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2019, 11:57 PM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



QUOTE(jjordan33 @ Apr 4 2019, 01:21 AM) *

QUOTE(Christian J @ Apr 3 2019, 06:55 PM) *

QUOTE(jjordan33 @ Apr 4 2019, 12:08 AM) *

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

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.



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


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.

CODE
<div style="height: 10px; background: red"></div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 4 2019, 10:39 AM
Post #15


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 4 2019, 05:48 AM) *

Straight off I can only think of things like mathematical expressions and chemical formulas where SUP and SUB might be preferred over CSS.

How about the references(?) for footnotes:

CODE
<p>Some encyclopedic<sup>1</sup> or scientific<sup>2</sup> text.</p>

<p><sup>1</sup> source: me.</p>
<p><sup>2</sup> source: me again.</p>

?

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

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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 4 2019, 10:57 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



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

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 4 2019, 02:44 PM
Post #17


WDG Member
********

Group: Root Admin
Posts: 8,309
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(pandy @ Apr 4 2019, 08:57 AM) *
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.
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 4 2019, 03:58 PM
Post #18


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(Christian J @ Apr 3 2019, 01:57 AM) *

QUOTE(jjordan33 @ Apr 3 2019, 01:20 AM) *

I am practicing with hr lines currently, and everything I've tried won't raise or lower it's vertical position.

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

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/We...rgin_collapsing

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 5 2019, 01:28 AM
Post #19


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,353
Joined: 9-August 06
Member No.: 6



QUOTE(Darin McGrew @ Apr 4 2019, 09:44 PM) *

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.


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. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jjordan33
post Apr 5 2019, 09:15 PM
Post #20





Group: Members
Posts: 7
Joined: 1-April 19
Member No.: 26,868



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd August 2019 - 05:42 AM