• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

positionierung

Sakura♥

Neues Mitglied
Hallo !!! ^^

also ich hab mit dem positionieren (CSS) n problem, und zwar das bei mir alles übereinander liegt und nicht so wie ich es eingegeben habe.
Ist da villt ein fehler drin ? Ich hab eig keinen gefunden.
Ich hoff ihr könnt mir weiter helfen!
THX

hier der html code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <titel> Style sheet </titel>
 <link href="2j.css" rel="stylesheet" type="text/css">
</head>
<body> 
<h2> Positionierung </h2>
<p> Dies ist die erste Position </p>
<pre> und dies die zweite </pre>
<div> jetzt folgt die dritte </div>
<span> zum schluss die hier </span>
 
</body>
</html>

und hier der CSS:
Code:
h2
{
front-family: arial;
front-size: 32 pt;
position: absolute;
left: 200 px; 
top: 20 px;
}
p
{
front-familie: arial;
front-size: 14 pt;
position: absolute;
left: 40 px;
top: 80 px;
}
pre 
{
front-family: arial; 
front-size: 14 pt;
position: absolute;
left: 40 px;
top: 120 px;
}
div
{
front-family: arial;
front-size: 14 pt;
position: absolute;
left: 40 px;
top: 160 px;
}
span
{
front-family: arial;
front-size: 14 pt;
position: absolute;
left: 80 px;
top: 200 px;
}

LG
Sakura-san♥
 
Zunächst musst du darauf achten, dass zwischen den Werten und ihren Einheiten kein Leerzeichen steht. Das ist bei dir überall der Fall.
Also nicht
Code:
left: 40 px;
sondern
Code:
left: 40px;

Dann solltest du auf alle absoluten Positionierungen verzichten, weil das je nach Fenstergröße unterschiedlich aussehen kann. Nimm Positionierungen besser mit float- und margin-Angaben vor.
 
ok das mit den px ohne Leerzeichen werd ich mir merken.
Kannsu mir erklären was float- und margin- sind?
so weit bin ich noch nicht bzw hab kein plan was dat is!
SORRY ^^°

lg
Sakura-san♥
 
Position: absolute Teil I

Das kommt drauf an, was du bezwecken willst.

Wenn du definierst:
Code:
margin-left: 20px;
margin-top: 50px;
dann hat das Element einen linken Außenabstand von 20px und einen oberen von 50px.
Blockelemente ordnen sich generell untereinander an.

Mit float kannst du bestimmen, dass sich Elemente nebeneinander, statt untereinander anornden.
Einfach mal nach den eigenschaften googeln.

Wenn du bei Absätzen einen Abstand zum linken Rand haben willst, dann definiere am besten ein übergeordnetes Element (Div) und gib dem einen Abstand. Für die Absätze brauchst du dann diesbezüglich keine Positionsangaben.
Beispiel:
Code:
#container {
width: 500px;
border: 1px solid #000;
margin-left: 50px;
margin-top: 20px;
}

Code:
<div id="container">
<p>erster Absatz</p>
<p>zweiter Absatz</p>
</div>

Hier befinden sich alle Absätze innerhalb container und müssen deshalb nicht mehr gesondert positioniert werden.
 
Zurück
Oben