HTML Tutorials |
|
XML Tutorials |
|
Browser Scripting |
|
Server Scripting |
|
.NET (dotnet) |
|
Multimedia |
|
Web Building |
|
Java Tutorials |
|
Programming Langauges |
|
Soft Skills |
|
Database Tutorials |
|
Operating System |
|
Software Testing |
|
SAP Module |
|
Networking Programming |
|
Microsoft Office |
|
Accounting |
|
|
CSS, der Eigenschaften in Position bringt |
-
Um die genaue Stellung deiner HTML Elemente zu manipulieren, wird die CSS Positionierung verwendet.
Jetzt alle in CSS völlig getan zu werden Designs, der vorher den Gebrauch der Javascript- oder HTML Bilddiagramme erforderte. Ist nicht nur zu kodieren einfacher, aber er lädt auch viel schneller!
|
Verwandten in Position bringen
|
Die Stellung des HTML Elements ändert im Verhältnis zu, wo sie normalerweise mit der relativen Positionierung aussieht.
Wir könnten die relative Positionierung verwenden, zum sie eine Spitze rechts zu verschieben und eines Paares der Pixel niederzuwerfen, wenn wir eine überschrift hatten, die an der Oberseite unserer Seite erscheint. Unter ist ein Beispiel.
|
CSS Code
|
h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: -10px;
}
|
|
Mit nur zwei (gelassen und ober), beachtetest du vermutlich, daß du die vier möglichen Richtungen definierst (nach links nach rechts herauf und unten). Ist hier ein schneller Hinweis, wenn er HTML Elemente in CSS verschiebt.
- Die gelassene Bewegung - einen negativen Wert für links verwenden.
- Bewegung Recht - einen positiven Wert für links verwenden.
- Hochschieben - einen negativen Wert für Oberseite verwenden.
- Nach unten bewegen - einen positiven Wert für Oberseite verwenden.
|
Absolutes in Position bringen
|
Du definierst den genauen Pixelwert, in dem das spezifizierte HTML Element mit der absoluten Positionierung aussieht.
- Sicher so sein, daß du vom Oberseite-linken des viewable Bereichs der Datenbanksuchroutine mißt.
Anmerkung: Firefox nicht z.Z. deutet das Absolute, das richtig in Position bringt. Jedoch IE 6.0+ und Oper 8.0+.
|
CSS Code
|
h3 {
position: absolute;
top: 50px;
left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}
|
|
Das folgende Beispiel zeigen, wie man die Form eines Elements einstellt
|
CSS Code
|
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>
</html>
|
|
Die follwing Tabelle beschreiben die in Position bringeneigenschaften:
|
Property |
Description |
values |
bottom |
Sets how far the bottom edge of an element is above/below the bottom edge of the parent element |
auto % length |
clip |
Sets the shape of an element .The element is clipped into this shape, and displayed |
shape auto |
left |
Sets how far the left edge of an element is to the right/left of the left edge of the parent element |
auto % length |
overflow |
Sets what happens if the content of an element overflow its area |
visible hidden scroll auto |
position |
Places an element in a static, relative, absolute or fixed position |
static relative absolute fixed |
right |
Sets how far the right edge of an element is to the left/right of the right edge of the parent element |
auto % length |
top |
Sets how far the top edge of an element is to the left/right of the right edge of the parent element |
auto % length |
vertical-align |
Sets the vertical alignment of an element |
baseline sub super top text-top middle bottom text-bottom % length |
z-index |
Sets the stack order of an element |
auto number |
|
|
|
Keywords:
css absolute positioning, style sheets, css positioning tutorial,
html elements
|
|
HTML Quizes |
|
XML Quizes |
|
Browser Scripting Quizes |
|
Server Scripting Quizes |
|
.NET (dotnet) Quizes |
|
Multimedia Quizes |
|
Web Building Quizes |
|
Java Quizes |
|
Programming Langauges Quizes |
|
Soft Skills Quizes |
|
Database Quizes |
|
Operating System Quizes |
|
Software Testing Quizes |
|
SAP Module Quizes |
|
Networking Programming Quizes |
|
Microsoft Office Quizes |
|
Accounting Quizes |
|
|