HTML/CSS
Ralf Herbst
Layouten = anordnen positionieren
im HTML Editor im Ordner sites anlegen:
25.css_postition.html
- static: Positionierung im Textfluss, die Angaben left, top, right, bottom sind unwirksam
- relative: Positionierung im normalen Textfluss, die Angaben left, top, right, bottom verschieben das Element aus dieser Position, nachfolgende Elemente ignorieren diese Verschiebung
- absolute: Positionierung durch die Angaben left, top, right, bottom, sind außerhalb des normalen Textfluss, liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elementsberechnet, wenn dieses ebenfalls positioniert ist oder der Seiteninhalt. Beachten: Scroll-Funktion
- fixed: wie absolute, jedoch bleibt das Element beim Scrollen stehen und die Positionierung orientiert sich am Viewport (sichtbaren Browserfenster)
26.css_rahmen.html = den einzelnen Bereichen Rahmen zuordnen
- double (doppelt)
- solid (breit mit Maßeinheiten, - auch gemischt px, mm),
- ridge (3D-Rahmen),
- dotted (gepunktet)
27.layout_4_zeilen.html
Layoutmöglichkeiten:
litte boxes
Layoutgala
oder Adobe dreamweaver (kostenpflichtig)
Website besteht aus 4 Bereichen und dafür div container bauen im body-Bereich:
<body>
<div id="container">
<div id="header">Header/Kopfbereich</div>
<div id="navigation">Navigation</div>
<div id="maincontent">Maincontent/Hauptbereich</div>
<div id="footer">Fotter/Fußbereich</div>
</div>
</body>
im head-Bereich den Style bauen:
<head>
........
<style type="text/css"
body { color: #000; font-size: 80%; } = Größe 100% aber Bildschirm reduzieren auf 80%
#container { width: 1000px; min-height: 550px; background-color: Angabe; margin: 0 auto; }
= id = #, Website Breite zwischen 900 bis 1000px, auch abhänig vom Banner/Bild.jpg,
Höhe des Containers abhängig von den Unterseiten, deshalb nur min-Angabe
den Container in die Mitte setzen
* { margin: 0; padding: 0; } = Globaler Selektor (resettet alle Formatierungen im Bereich von Absätzen und den Standardabstand von ca. 10px in den einzelnen Bereichen im Html
#header {
height: 139px; background-image: url(../img/banner.jpg);
= Bild im Kopfbereich einarbeiten, Höhe auswählen und Bild-Pfad
background-repeat: no-repeat;
background-position: left top;
= entweder 0 0 für links und oben oder left und top
#header h2 { text-align: center; padding: 40px 0 0 10px; }
= bestimmen der Attribute der Überschrift h2
#navigation { height: 30px; background-color: Farbe; }
#maincontent { background-color: Farbe; min-height: 350px; = nur min-Höhe geben
padding: 10px 20px; }
#maincontent h1 { margin-bottom: 10px; }
= bestimmen der Attribute der Überschrift h1
#maincontent p { color: Farbe; margin-bottom: 15px; line-heigt: 150%; }
= bestimmen der Attribute der Absätze
#maincontent ul { margin: 10 px 0 10px 15px; color: Farbe; }
= bestimmen der Attribute der Liste
#footer { background-color: farbe; color: farbe; padding: 20px 20px; text-align: right; }
= bestimmen der Attribute des Fußteils
</style>
</head>
28.layout_2_spalten_3_reihen.html
mit Sidebar links oder rechts
im head-Bereich den style aufbauen:
<head>
......
* { margin: 0; padding: 0; }
#container { width: 970px; background-color: Farbe; margin: 0 auto; }
#header, # footer { background-color: farbe; } = Kopf + Fuß gleiche Farbe
#header { height: 120px; }
#sidebar { width: 170px; height: 330px; background-color: farbe; float: left;
padding: 10px 15px; }
= float: left = schwebe links, und ALLES Andere ordnet sich rechts davon an,
float: right = schwebe rechts, und ALLES Andere ordnet sich links davon an
= Sidebar (das zu schwebende) im HTML immer zuerst, in dem Fall vor dem Maincontent
#maincontent: { min-height: 330px; background-color: farbe;
padding: 10 px 15px 10px 215px; }
#footer { height: 30px; clear: both; padding: 10px 15px; } =hebt das float wieder auf
</style>
</head>
EMPFEHLUNGEN:
CSS Erfinder
Keine Kommentare:
Kommentar veröffentlichen