A Newbie positioning elements, positioning Elements Options

[HarryFlex]

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?

[Christian J]

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?

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

[HarryFlex]

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?

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

[HarryFlex]

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

[HarryFlex]

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

[HarryFlex]

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

[pandy]

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

Yes it will if you refrain from positioning everything.

[HarryFlex]

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

Greetings,

Jan

[HarryFlex]

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

[HarryFlex]

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

/* -------------------------------------- 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?

[Christian J]

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.

[HarryFlex]

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

[HarryFlex]

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

[pandy]

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.

[HarryFlex]

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…

[HarryFlex]

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

[pandy]

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.

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

[HarryFlex]

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

[Brian Chandler]

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.

[HarryFlex]

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