Printable Version of Topic

Posted by: HarryFlex Jan 19 2022, 08:25 AM

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?

/* article */
article {
top: 0px;
object-position: 10% 90%;
text-align: left;
text-color: RGB(89,55,35);
position: right;
text-asign: justify;


border-left:3px solid RGB(89,55,35);
border-right:3px solid RGB(89,55,35);
width:400px;
float:left;
padding-left:20px;
padding-right:20px;
padding-top:10px;
margin-right:10px;
margin-left:205px;
margin-top:-110 px;
min-height: 10em;
display: table-cell;
vertical-align: top;

I'm a beginner. Maybe somebody can tell me how the element can be moved above?

Posted by: Christian J Jan 19 2022, 09:50 AM

Can't you just place it at the top of the BODY section in the HTML?

There are many other ways to position an element, depending on the context:

- The "top" property is used for elements with "position: absolute" or "position: fixed" (or "position: relative", but that's not relevant here). I don't recommend it for a beginner, since it can be hard to do right.

- There's no value "right" for the "position" property; "right" is a property too, with its own values.

- "object-position" is used for "replaced elements", such as images (the ARTICLE element is not a replaced element). See https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

- "display: table-cell" makes an element behave as an HTML table cell, so it's not suitable if you want to use the "position" property at the same time.

- "float" does not apply to elements with "position: absolute", if I understood the spec correctly.

Sidenote: there's no "text-color" property (it's just "color" for text), and "text-asign" is a typo.

Posted by: HarryFlex Jan 19 2022, 10:12 AM

Posted by: HarryFlex Jan 19 2022, 10:12 AM

No, bringing the article next to the body will not change the page...

Posted by: HarryFlex Jan 19 2022, 10:59 AM

What code do I need to use to put the article above?

Posted by: HarryFlex Jan 19 2022, 12:48 PM

Hi, how do I need to replace the article in the body element?

Posted by: pandy Jan 19 2022, 12:50 PM

Yes it will if you refrain from positioning everything.

Posted by: HarryFlex Jan 19 2022, 01:41 PM

Hi, can you bring me on the code for placing the article to the top?

Greetings,

Jan

Posted by: HarryFlex Jan 19 2022, 02:22 PM

Please, send me the code for replacing the article to the top, I cannot change this, so please, bring me on the code,

greetings,

Jan

Posted by: HarryFlex Jan 19 2022, 02:28 PM

/* -------------------------------------- algemene regels ------------------------------------- */

/* hier verwijderen we overal standaard margin en padding die
door de browsers gegeven worden zodat we er zelf controle over hebben */

* {
margin: 3;
padding: 3;
}
<nav><


/* toon html5 elementen als block in oudere browsers */
header, footer, section, aside, nav, article {
display: block;
width: 940px;
white-space: pre-line;
color: white;
}
#nav li { font weight="bold" face="arial";
footer p=""font weight="bold" face="arial";
table style="width: 388px; height: 32px;"
}

body .article{
padding: 3px 3px 3px 3px
border-radius: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
back-ground-color: brown;
font-color: brown;
weight: 940px;
font-size: 14px;
line-height: 18px;
linear-gradient: (top, black 0%, white 100%);
/*kleurovergang via colorzilla.com*/
height: 100%
border-style: solid 1 px;
border-radius: 3px black;
border-bottom: 3px black;
display : inline- block;
.article: top: 0Px;
}


#wrapper {
width: 940px;
margin-top: 3px;
margin-bottom: 3px;
border-radius: 10px;
border: 2px solid #000;
border-bottom: 2px solid #000;
padding-top: 3px;
color: green;


}

h1,h2,h3,h4,h5,h6 {
font-weight: bold;
color: RGB(89,55,35);
margin: 0 0 20px 0;
line-height: 1.5em;
}

a:link, a:visited {
color: Brown;
}

a:hover, a:active {('images/vliegenzwam.jpg');
color: #333;
font-weight:bold;
}

li {
list-style-image: url('images/opsommingsteken.png');

padding-left: 5px;
}

/* -------------------------------------- Header ------------------------------------- */

header {
padding: 20px 0 0 0;
}

header h1 {
float: left;
margin: 0 0 18px 10px;
width: 400px;
font-size: 40px;
line-height: 36px;
}

header h2 {
float: right;
color: #777;
font-style: italic;
font-size: 14px;
margin: 14px 10px 18px 0;
}

header img{
vertical-align:bottom;
color: white;
opacity: 0,5;

}


/* -------------------------------------- Navigatie --------------------------------- */

nav {
height: 30px;
text-color: white;
width: 940px;
margin-right: 5px;
float: left;
display: inline;
margin-right: 5px;
word-spacing: 30px;
padding-left: 5px;
}
nav a{ color:white;

}
.menu{padding-left: 5px;

}


/* -------------------------------------- Inhoud ------------------------------------- */

aside #hoofdinhoud,#links,#inhoud,#rechts,.interesse; article {
width: 940px;
margin-left: 110 px;
margin: 0 auto;
border-style: solid 1 px;
float: right;
position: absolute;
margin-top: 0px;
}

/* section inhoud */
#inhoud {
width: 464px;
color: RGB(89,55,35);
float; right;
}


/* aside */
#links {
float: left;
width: 180px;
padding: 20px;
color: RGB(89,55,35);
position: fixed;
}

#inhoud{
text-margin: left: 0 px;
float: left;
color: RGB(89,55,35);
position: fixed;
}

#rechts {
text-margin: left
float: right;
width: 180px;
padding:20px;
color: RGB(89,55,35);
}

aside h3 {
font-size: 18px;
text-shadow: 0px 2px 3px #ddd;
}

aside ul {
margin: -15px 0 15px 25px;
color: RGB(89,55,35);
}
.menu{
float:left;
width: 940 px; height: 22px;
background-color:rgb(89,55,35);
position: fixed;
}
.kolom2{
color: brown;
vertical-align: text-top;
display: inline-block;
border-left: solid 1 px;
float: right;
margin-left: 0 px;
margin-right: 10 px;
width: 6em
text-align: left;

width: 187px;
padding-bottom: 3px;
position: absolute;

}

.interesse{
min-height: 10em;
display: table-cell;
vertical-align: top;



float: right;
position: INHERIT;
margin-left:800px;
}
.idee{ float: right;
position: relative;
left-margin: 200px;
right-margin: 0 px;
}


/* article */
article body{
top: 0px;
text-align: left;
color: RGB(89,55,35);
text-asign: justify;


border-left:3px solid RGB(89,55,35);
border-right:3px solid RGB(89,55,35);
width:400px;
float:left;
padding-left:20px;
padding-right:20px;
padding-top:10px;
margin-right:10px;
margin-left:205px;
margin-top:-110 px;
min-height: 10em;
vertical-align: top;
position: relative;

.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 1px black;
float: left;
}

p {
/* Center horizontally*/
text-align: left;

width:500px;
top-left: 100 px;
float:left;
border-left: 103 px solid brown;
border-bottom: 0 px;
position: absolute;
padding-left:25px;
padding-right:20px;
margin-left: solid 200px;
margin-right: auto;
position: absolute;
text-asign: justify;
text-align : left;
text-color: brown;
top: 200 px;

height: 10em;
min-height: 100%
padding-top: 30;
margin-top: 30;
margin-bottom:0;
top: 50%;
transform: translate(0, -50%) }
top-right: 50px;

}

article img {
position: relative;
float: left;

}

article img:hover{
width: 150%;
height: 150%;

}

article p{

}

img.linksuitlijnen {
float: left;
position: relative;


}


/* -------------------------------------- Footer ------------------------------------- */

footer {
color:#777;
font-size: 100% ;
width: 940px;
background-color: RGB(89,55,35);
bottom: 0%;
clear: left;
top: 200%;
transform: translate(0, 0%) }
}

footer h4{
color:#777;
}

footer a:link{
color:#000

div{
float: right
width:600px;
height:100%
backgrouncolor: #999999;
margin-left:900px;
margin-right: auto;
border-radius: 5px
}

how can you replace the article, what I ve done wrong?

Posted by: Christian J Jan 19 2022, 04:59 PM

There are lots of errors in that CSS, which could make parts of it dysfunctional. Use http://jigsaw.w3.org/css-validator/#validate_by_input to find them, just ask again if any error is unclear.

Posted by: HarryFlex Jan 19 2022, 07:17 PM

I still don’t have the code for position the article above…

Posted by: HarryFlex Jan 19 2022, 07:19 PM

I do know that the code is minor or less problematic, but this doesn’t change my question how to put the article above…

Posted by: pandy Jan 19 2022, 07:33 PM

There is no such thing as fix-it-all "code. Things in a page depend on each other. From the little you've shown us there is no way to tell what the fix is, but likely it involves a lot of rewriting.

Besides, obviously you aren't here to learn something. You just want someone to do it for you. Well, it won't be me.

Posted by: HarryFlex Jan 19 2022, 07:40 PM

That’s not correct. I want to learn how I need to place the article above. You do not need to do problematic if you don’t bring me the theoretical solution for this problem.

I do not see it as a problem if you don’t want that…

I just need some help…

Posted by: HarryFlex Jan 19 2022, 07:54 PM

Well, it will be you. You will bring me the theoretical solution for this problem…

Posted by: pandy Jan 19 2022, 09:23 PM

Great! Then you can start by doing something about the errors with your CSS that Christian told you about above.

Posted by: HarryFlex Jan 19 2022, 11:07 PM

Even changing the errors, which Christian mentioned, will not bring the article above… I want to learn a solutionin a theoretical way…

Posted by: Brian Chandler Jan 20 2022, 01:11 AM

Here's the theoretical "code" solution:

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.

Posted by: HarryFlex Jan 20 2022, 01:51 AM

The html document has a <body> <section> and another <section> and then the article

Posted by: Brian Chandler Jan 20 2022, 02:07 AM

OK, apply the code solution I gave you. And show us some evidence, like the html page...

Posted by: HarryFlex Jan 20 2022, 06:16 AM

Attached File(s)
 index.html ( 9.46k ) Number of downloads: 177

Posted by: HarryFlex Jan 20 2022, 11:11 AM

How do you think abattoir positioning of the elements with the provided HTML-file?

Posted by: Brian Chandler Jan 20 2022, 11:31 AM

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?

Posted by: HarryFlex Jan 20 2022, 11:39 AM

I don’t think there is a solution considering positioning the elements…

Posted by: pandy Jan 20 2022, 05:34 PM

Sure there is. The easiest is to not position everything, as has already been suggested.

Posted by: Christian J Jan 20 2022, 08:43 PM

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.

Posted by: HarryFlex Jan 21 2022, 09:21 AM

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.

Posted by: Christian J Jan 21 2022, 11:33 AM

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:


(you can give them width as well). Note that this is just an example, it may or may not work with your existing code.


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.


No problem, me neither.

Posted by: HarryFlex Jan 22 2022, 10:37 AM

I did what you said. But the top and left properties do not position the article.

Posted by: HarryFlex Jan 22 2022, 11:02 AM

Posted by: Christian J Jan 22 2022, 04:35 PM

Have you fixed the various CSS syntax errors?

Please post a corrected sample page showing what you have done so far.

Posted by: HarryFlex Jan 23 2022, 06:00 AM

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

Posted by: Christian J Jan 23 2022, 02:56 PM

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:

For the latter, you also need "position: absolute", like this:


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.

Posted by: HarryFlex Jan 23 2022, 05:00 PM

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.

Posted by: HarryFlex Jan 26 2022, 06:05 AM

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

Posted by: Brian Chandler Jan 26 2022, 07:16 AM

What is "the :is() kind of thing" ?

Posted by: HarryFlex Jan 26 2022, 07:52 AM

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….

Posted by: Brian Chandler Jan 26 2022, 07:59 AM

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:


This doesn't make sense; the syntax is all jumbled up. Does your :is() pixie dust magic them away?

Posted by: HarryFlex Jan 26 2022, 08:38 AM

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.

Posted by: Christian J Jan 26 2022, 08:45 AM

It's in the stylesheet. See also https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Looking the OP's newest stylesheet, I'm not sure if the is:() pseudo-class make any difference from before, and most of the errors I saw before are still there.

Posted by: HarryFlex Jan 26 2022, 09:56 AM

Yes, I don’t lie about it. Using the :is() kind of thing has REALLy changed the webpage. The differences are amazing. There cannot be any doubt about that. I really would make a screenshot of the result. What I say is absolutely true.

I have changed the HTML file and put in some CSS and now I’m even able to position The article. Now need to position the .interesse into the right corner.

Posted by: HarryFlex Jan 27 2022, 04:54 AM

Hi, Now, I want to position the ‘interessante’ menu to the right and the Latin text (the article) more upside. Any ideas?

Please, take a look at the screenshot how the site looks now.

I know that with the box-model, normally, the header stands above, the navigation on the left, the sections and the article in the middle and the aside part to the right and the footer underneath.

I do think they don’t appear there because of the many errors. I just want to position the .interesse (menu) to the right and the article above. That’s all

Please receive my screenshot…


Attached thumbnail(s)

Posted by: HarryFlex Feb 21 2022, 09:09 AM

Hi, Inrestarted. I can now positioning the elements. The only thing I wanna change is thevarticle from green into white. Please receive the picture and the .css !

You could not say I didn’t learnt a lot.


Attached File(s)
 Gene.css ( 3.5k ) Number of downloads: 131