 A Newbie positioning elements, positioning Elements |
  |
| Brian Chandler |
 Jan 20 2022, 02:07 AM
Post
#21
|
|
Jocular coder  Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43  |
QUOTE(HarryFlex @ Jan 20 2022, 03:51 PM)  The html document has a <body> <section> and another <section> and then the article OK, apply the code solution I gave you. And show us some evidence, like the html page... |
  |
 
|
| HarryFlex |
Jan 20 2022, 06:16 AM
Post
#22
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(Brian Chandler @ Jan 20 2022, 01:11 AM) Here's the theoretical "code" solution: CODE <body> <article> Hope this helps. You have not shown us the html document, so it is impossible to say what the effect of any of the css would be. Attached File(s) 
index.html ( 9.46k )
Number of downloads: 176 |
|
|
|
| HarryFlex |
Jan 20 2022, 11:11 AM
Post
#23
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(HarryFlex @ Jan 20 2022, 06:16 AM) QUOTE(Brian Chandler @ Jan 20 2022, 01:11 AM) Here's the theoretical "code" solution: CODE <body> <article> Hope this helps. You have not shown us the html document, so it is impossible to say what the effect of any of the css would be. How do you think abattoir positioning of the elements with the provided HTML-file? |
|
|
|
| Brian Chandler |
Jan 20 2022, 11:31 AM
Post
#24
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
QUOTE(HarryFlex @ Jan 21 2022, 01:11 AM) How do you think abattoir positioning of the elements with the provided HTML-file? Abattoir??? The "provided" HTML file is no good. I would start again. How did you create this html file? The first error in the <body> section is the body tag: what are these bits supposed to mean? CODE <body backgound-color="grey" style=" CENTER";class="interesse=" top:="" 0px;"="" brown"=""> |
|
|
|
| HarryFlex |
Jan 20 2022, 11:39 AM
Post
#25
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(Brian Chandler @ Jan 20 2022, 11:31 AM) QUOTE(HarryFlex @ Jan 21 2022, 01:11 AM) How do you think abattoir positioning of the elements with the provided HTML-file? Abattoir??? The "provided" HTML file is no good. I would start again. How did you create this html file? The first error in the <body> section is the body tag: what are these bits supposed to mean? CODE <body backgound-color="grey" style=" CENTER";class="interesse=" top:="" 0px;"="" brown"=""> I don’t think there is a solution considering positioning the elements… |
|
|
|
| pandy |
Jan 20 2022, 05:34 PM
Post
#26
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Sure there is. The easiest is to not position everything, as has already been suggested.
|
|
|
|
| Christian J |
Jan 20 2022, 08:43 PM
Post
#27
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(HarryFlex @ Jan 19 2022, 02:25 PM) Hi, I do try to position an article to the top of the webpage, but vertical aligning does not work. How do I get the article pushed upward?  I was assuming that there was content (like text) between the ARTICLE element and the top. Or is it just empty space? Empty space is usually caused by CSS margin or padding on different elements (including the BODY element). If that is the case you must adjust all of them. Give the HTML elements CSS borders while you investigate, so you can see where each element is. |
|
|
|
| HarryFlex |
Jan 21 2022, 09:21 AM
Post
#28
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(Christian J @ Jan 20 2022, 08:43 PM) QUOTE(HarryFlex @ Jan 19 2022, 02:25 PM) Hi, I do try to position an article to the top of the webpage, but vertical aligning does not work. How do I get the article pushed upward? I was assuming that there was content (like text) between the ARTICLE element and the top. Or is it just empty space? Empty space is usually caused by CSS margin or padding on different elements (including the BODY element). If that is the case you must adjust all of them. Give the HTML elements CSS borders while you investigate, so you can see where each element is. Okay, first things first. I have - like you suggested - removed all of the position attributes. I agree the file looks much better. But the problem with positioning nothing at all is the fact that the sections and the article don’t appear next to eachother but underneath eachother. My solution is to re-position the article with margin-left and change the width of the article. Seems like a good idea? I’m sorry for my bad English, I.m not a native speaker. |
|
|
|
| Christian J |
Jan 21 2022, 11:33 AM
Post
#29
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(HarryFlex @ Jan 21 2022, 03:21 PM) the sections and the article don’t appear next to eachother but underneath eachother. Both SECTION and ARTICLE elements are styled as "display: block" by default (which means they will fill the entire width of the viewport). There are a few ways to make them appear side by side, maybe the simplest is: CODE section, article {display: inline-block;} (you can give them width as well). Note that this is just an example, it may or may not work with your existing code. QUOTE My solution is to re-position the article with margin-left and change the width of the article. Seems like a good idea? You mean using "position: absolute"? It's not the easiest solution, since such positioned elements easily overlap other content (for example in small browser windows). If you do use it I don't see the need for the left margin, use the "top" and "left" (or "right") properties instead. QUOTE I’m sorry for my bad English, I.m not a native speaker. No problem, me neither. |
|
|
|
| HarryFlex |
Jan 22 2022, 10:37 AM
Post
#30
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(Christian J @ Jan 21 2022, 11:33 AM) QUOTE(HarryFlex @ Jan 21 2022, 03:21 PM) the sections and the article don’t appear next to eachother but underneath eachother. Both SECTION and ARTICLE elements are styled as "display: block" by default (which means they will fill the entire width of the viewport). There are a few ways to make them appear side by side, maybe the simplest is: CODE section, article {display: inline-block;} (you can give them width as well). Note that this is just an example, it may or may not work with your existing code. QUOTE My solution is to re-position the article with margin-left and change the width of the article. Seems like a good idea? You mean using "position: absolute"? It's not the easiest solution, since such positioned elements easily overlap other content (for example in small browser windows). If you do use it I don't see the need for the left margin, use the "top" and "left" (or "right") properties instead. QUOTE I’m sorry for my bad English, I.m not a native speaker. No problem, me neither. I did what you said. But the top and left properties do not position the article. |
|
|
|
| HarryFlex |
Jan 22 2022, 11:02 AM
Post
#31
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(HarryFlex @ Jan 22 2022, 10:37 AM) QUOTE(Christian J @ Jan 21 2022, 11:33 AM) QUOTE(HarryFlex @ Jan 21 2022, 03:21 PM) the sections and the article don’t appear next to eachother but underneath eachother. Both SECTION and ARTICLE elements are styled as "display: block" by default (which means they will fill the entire width of the viewport). There are a few ways to make them appear side by side, maybe the simplest is: CODE section, article {display: inline-block;} (you can give them width as well). Note that this is just an example, it may or may not work with your existing code. QUOTE My solution is to re-position the article with margin-left and change the width of the article. Seems like a good idea? You mean using "position: absolute"? It's not the easiest solution, since such positioned elements easily overlap other content (for example in small browser windows). If you do use it I don't see the need for the left margin, use the "top" and "left" (or "right") properties instead. QUOTE I’m sorry for my bad English, I.m not a native speaker. No problem, me neither. I did what you said. But the top and left properties do not position the article.  |
|
|
|
| Christian J |
Jan 22 2022, 04:35 PM
Post
#32
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(HarryFlex @ Jan 22 2022, 04:37 PM) I did what you said. But the top and left properties do not position the article. Have you fixed the various CSS syntax errors? Please post a corrected sample page showing what you have done so far. |
|
|
|
| HarryFlex |
Jan 23 2022, 06:00 AM
Post
#33
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
Hi,
I’ve made some changes, indeed. Please, open the CSS-file, for a look at it’s current state… Attached File(s) 
stijlbladcss.css ( 5.12k )
Number of downloads: 172 |
|
|
|
| Christian J |
Jan 23 2022, 02:56 PM
Post
#34
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Do you want to use the inline-block (recommended) or the absolute positioning method? Only one is necessary...
For the former, the value is "inline-block" (with no space after the hyphen), like this: CODE article {display: inline-block} For the latter, you also need "position: absolute", like this: CODE article { position: absolute; top: 0; left: 0; } Sorry but I can't give more specific advice, since the CSS is still full of errors. Some of the errors will prevent parts of the CSS from working, or give unexpected results. Use the CSS validator in the link I posted before and try to correct the errors it returns. Just ask if you run into problems with the validator itself. |
|
|
|
| HarryFlex |
Jan 23 2022, 05:00 PM
Post
#35
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
Hi,
I’ve made the changes, which you proposed. This didn’t made much of a difference. I also validated the code like you said, and I’ve seen there are indeed some major errors. Most of them were simple. Just a komma or something. Other errors I just couldn’t find. The biggest problem I’ve encounter is the Wrapper I’ve made. Without it, things were easier. I did have good knowledge of HTML4 and did my best to understand HTML5, but the CSS thing is to much of it.  |
|
|
|
| HarryFlex |
Jan 26 2022, 06:05 AM
Post
#36
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
Hi, I’ve corrected many errors. Besides, there will still plenty of them. Recently, i’ve learned the :is() kind of thing. This helped me a lot and the webpage looks acceptable, but still having problems with positioning the elements.
I’ve finally succeeded in bringing in a grey border, which was purposed. I guess there.s something wrong with the padding, because the grey border underneath the header is to short. (It’s exactly the size of the body.) Please, take a look at the file’s Attached File(s)
index.html ( 9.48k )
Number of downloads: 184
stijlblad.css ( 5.36k )
Number of downloads: 170 |
|
|
|
| Brian Chandler |
Jan 26 2022, 07:16 AM
Post
#37
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
QUOTE(HarryFlex @ Jan 26 2022, 08:05 PM) Hi, I’ve corrected many errors. Besides, there will still plenty of them. Recently, i’ve learned the :is() kind of thing. This helped me a lot and the webpage looks acceptable, but still having problems with positioning the elements. I’ve finally succeeded in bringing in a grey border, which was purposed. I guess there.s something wrong with the padding, because the grey border underneath the header is to short. (It’s exactly the size of the body.) Please, take a look at the file’s What is "the :is() kind of thing" ? |
|
|
|
| HarryFlex |
Jan 26 2022, 07:52 AM
Post
#38
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(Brian Chandler @ Jan 26 2022, 07:16 AM) QUOTE(HarryFlex @ Jan 26 2022, 08:05 PM) Hi, I’ve corrected many errors. Besides, there will still plenty of them. Recently, i’ve learned the :is() kind of thing. This helped me a lot and the webpage looks acceptable, but still having problems with positioning the elements. I’ve finally succeeded in bringing in a grey border, which was purposed. I guess there.s something wrong with the padding, because the grey border underneath the header is to short. (It’s exactly the size of the body.) Please, take a look at the file’s What is "the :is() kind of thing" ? It makes a lot of errors get ignored. It’s relatively new. Look at the files. Believe it or not, using it gives much better results…. |
|
|
|
| Brian Chandler |
Jan 26 2022, 07:59 AM
Post
#39
|
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
QUOTE(HarryFlex @ Jan 26 2022, 09:52 PM) QUOTE(Brian Chandler @ Jan 26 2022, 07:16 AM) QUOTE(HarryFlex @ Jan 26 2022, 08:05 PM) Hi, I’ve corrected many errors. Besides, there will still plenty of them. Recently, i’ve learned the :is() kind of thing. This helped me a lot and the webpage looks acceptable, but still having problems with positioning the elements. I’ve finally succeeded in bringing in a grey border, which was purposed. I guess there.s something wrong with the padding, because the grey border underneath the header is to short. (It’s exactly the size of the body.) Please, take a look at the file’s What is "the :is() kind of thing" ? It makes a lot of errors get ignored. It’s relatively new. Look at the files. Believe it or not, using it gives much better results…. I looked at the html file, and the string ':is' does not appear. So how would I find an example? I did find this - the beginning of the html body: CODE <body backgound-color="grey" style=" CENTER";class="interesse=" top:="" 0px;"="" brown"=""> This doesn't make sense; the syntax is all jumbled up. Does your :is() pixie dust magic them away? |
|
|
|
| HarryFlex |
Jan 26 2022, 08:38 AM
Post
#40
|
|
Member Group: Members Posts: 44 Joined: 19-January 22 Member No.: 28,232 |
QUOTE(Brian Chandler @ Jan 26 2022, 07:59 AM) QUOTE(HarryFlex @ Jan 26 2022, 09:52 PM) QUOTE(Brian Chandler @ Jan 26 2022, 07:16 AM) QUOTE(HarryFlex @ Jan 26 2022, 08:05 PM) Hi, I’ve corrected many errors. Besides, there will still plenty of them. Recently, i’ve learned the :is() kind of thing. This helped me a lot and the webpage looks acceptable, but still having problems with positioning the elements. I’ve finally succeeded in bringing in a grey border, which was purposed. I guess there.s something wrong with the padding, because the grey border underneath the header is to short. (It’s exactly the size of the body.) Please, take a look at the file’s What is "the :is() kind of thing" ? It makes a lot of errors get ignored. It’s relatively new. Look at the files. Believe it or not, using it gives much better results…. I looked at the html file, and the string ':is' does not appear. So how would I find an example? I did find this - the beginning of the html body: CODE <body backgound-color="grey" style=" CENTER";class="interesse=" top:="" 0px;"="" brown"=""> This doesn't make sense; the syntax is all jumbled up. Does your :is() pixie dust magic them away? Hi, I have changed the body to just <body>, does this make problems disappear? I cannot say that. It does actually not change anything at all. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 10:11 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC