Grundkurs XHTML - CSSamsand.lu/kurswebseite/media/schmit-claude/CSS... · Grundkurs XHTML - CSS HEAD ... • Einige Blockelemente können auch andere Blockelemente enthalten

Grundkurs XHTML - CSS

HEAD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>C.S. CSS-HTML nachschlagen</title>

<meta http-equiv = "Content-Type" content="text/html; charset=utf-8" /> 

<meta http-equiv="content-language" content="de" /> <meta name = "author" content="Claude Schmit" /> <meta name = "description" content="html-css zum Nachschlagen" /> <meta name="robots" content="index follow" /> <link rel="stylesheet" type="text/css" href="css/schmit-claude/main.css" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type="image/png" href="/somewhere/myicon.png" />



</head> Sonderzeichen (besonderer html-code, muss auch in url benutzt werden) & &amp > &gt (greater than) < &lt (lesser than)

“ &quot Auskommentieren HTML <!—Kommentar --> CSS /* Kommentar */

3 Möglichkeiten CSS anzuwenden

1. Stylesheet(s) in externe Datei auslagern

<link rel="stylesheet" type="text/css" href="css/schmit-claude/main.css" />

2. CSS im Kopfbereich der HTML-Datei: <head> <style type="text/css"> body { color: #000; font: 100.01% Arial, Helvetica, sans-serif; margin:0; padding:0; background: #D2C9A7;

} </style> </head>

3. Direkt Formate für ein HTML-Element definieren:

<p style="background-color:#808040; color:#D8FD02; font-family:'Century Schoolbook',serif; font-size:2em; letter-spacing:3px; padding:40px; border:double #D8FD02 4px;" title="Zitat von Francis Picabia"> Unser Kopf ist rund, damit das Denken die Richtung wechseln kann! </p>

Mit Hilfe der Regel @import lassen sich Stylesheets aus externen CSS-Dateien einlesen. @import ist ein Teil von CSS, es gehört nicht zu HTML. Deshalb kann die Direktive @import nur im Style-Bereich im Kopf eines Webdokuments oder innerhalb einer Stylesheet-Datei auftreten. In beiden Fällen muss es vor allen anderen notierten Deklarationen stehen. Bsp: <style [type="text/css"]>

@import "layout.css"; 

@import "text.css";

@import "tabellen.css";

@import "kopfteil.css";

@import "fussteil.css"; </style> http://www.thestyleworks.de/ref/at_import.shtml

Kaskade: Welche Eigenschaft setzt sich durch?

Spezifizität: Inline-Stilangabe 1,0,0,0 ID-Attribut 0,1,0,0 Klassenattribut, Attribut, Pseudoklasse 0,0,1,0 Element, Pseudoelement: 0,0,0,1 !important vor dem Strichpunkt �Diese eigenschaft setzt sich immer durch Herkunft des Stylesheet: Autor vor Benutzer vor Browser Bei gleicher Stärke zählt die Reihenfolge: Spätere Angaben überschreiben vorherige. Möglichkeit die Wertigkeit zu steigern: Anstatt .clear gibt man html body #main .clear an. Shorthands überschreiben alles Vorherige!

Block-Elemente – Inline-Elemente Block-Element • bewirkt einen Zeilenumbruch vor und nach dem Blockelement. • kann in der Regel Text oder Inline - Elemente enthalten. • Einige Blockelemente können auch andere Blockelemente enthalten. Dehnt sich bis zum Rand des Elternelements aus. Können in Höhe und Breite angepasst werden, Außen- und Innenabstände können eingestellt werden Bsp.: div, form, h1 – h6, hr, ol, ul, p, table address | blockquote | center | del | dir | div | dl | fieldset | form | h1-6 | hr | ins | isindex | menu | noframes | noscript | ol | p | pre | table | ul Inline-Element • erzeugt keinen eigenen Absatz im Textfluss. • Die Elemente reihen sich hintereinander auf • Inline-Elemente können in den meisten Fällen Texte und Inline-Elemente aufnehmen. Dehnt sich nur durch den Inhalt aus. Höhen - und Breitenanpassungen sind nicht möglich (außer img), Außen und Innenabstände reagieren nur in der horizontalen Ebene Bsp.: a, br, img, span, em, strong, sub (tiefgestellt), sup (hochgestellt) a | abbr | acronym | applet | b | basefont | bdo | big | br | button | cite | code | del | dfn | em | font | i | img | ins | input | iframe | kbd | label | map | object | q | samp | script | select | small | span | strong | sub | sup | textarea | tt | var

Selektoren

Der Universalselektor verknüpft jedes vorhandene Element mit Stylesheetangaben.

* { margin:0; padding:0; font:14px Arial, sans-serif; color:#ff0000; } Typ-Selektoren verknüpfen einen Elementtyp, also einen HTML-Tag, mit einer Formatierung.

p { color:#ff0000; }

Klassen-Selektoren verknüpfen Elemente über das class-Attribut mit einer Formatierung.

.gerahmt alle Elemente mit der Klasse 'gerahmt' span.gerahmt alle span-Elemente mit der Klasse 'gerahmt’ HTML CSS Auswirkung Textanfang <span class="wichtig"> Textausschnitt </span>. Textende

.wichtig { color: red; background-color: yellow; }

kein Zeilenumbruch, Textausschnitt wird hervorgehoben

<div> Textanfang </div> <div class="wichtig"> Textausschnitt </div> <div> Textende </div>


einfacher Zeilenumbruch, Textausschnitt wird hervorgehoben

<p> Textanfang </p> <p class="wichtig"> Textausschnitt </p> <p> Textende </p>


Zeilenumbruch mit Abstand, Textausschnitt wird hervorgehoben

class=“info gelb“ � CSS: .info.gelb {}

Attribut-Selektoren

Das folgende Beispiel markiert alle Grafiken, die nicht zugleich ein TITLE-Attribut und ein ALT-Attribut aufweisen, mit einem orange-roten Rahmen. Zusätzlich werden alle (nicht-transparenten) Grafiken, deren Attribut alt leer ist, noch mit einem leuchtgelben Rahmen versehen:

IMG { border: 2px solid #f70; } IMG[alt][title] { border: none; } IMG[alt=""]

{padding: 3px; background-color: #ef0; }

ID-Selektoren verknüpfen Elemente über das id-Attribut mit einer Formatierung. div#wichtig /* das Div-Element mit dem id-Attribut wichtig */ HTML CSS Auswirkung <div> Textanfang </div> <div id="wichtig"> Textausschnitt </div> <div> Textende </div>

#wichtig { color: red; background-color: yellow; }

einfacher Zeilenumbruch, Textausschnitt wird hervorgehoben

Gruppierung von Selektoren Manchmal will man, dass eine bestimmte CSS-Regel auf mehrere verschiedene Elemente gleichzeitig zutrifft. In dem Fall besteht der Selektor aus den Selektoren der einzelnen Elemente, getrennt von einem Komma. div, h2 { padding-top:20px; } Nachfahren-Selektor Damit kann man spezifizieren, dass eine CSS-Regel nur dann auf ein Element zutrifft, wenn dieses Element in einem bestimmten anderen Element enthalten ist. Im folgenden Beispiel werden nur alle p-Elemente eingerahmt, die in dem div mit der Id "test" drin sind: CSS: div#test p { border: 1px silver solid; } HTML: <p>Ein Text ohne Rahmen</p>

<div id="test">

<p>der text ist eingerahmt</p>

<p> und der Text auch</p>

<div>

<p> und der Text auch</p>

</div>

</div>

Im Selektor wird der Nachfahre mittels Leerzeichen vom Elternelement abgetrennt. li ul { list-style-type:none;} Eigenschaft einer verschachtelten Liste Kindselektoren body > p Eigenschaft von p, wenn es ein Kindelement (auf der 1.untergeordneten Ebene) von body ist Folgeelementselektoren div + p Eigenschaft von p, wenn es direkt auf div folgt div ~ p Eigenschaft aller ps, welche auf div folgen Pseudoklassen :first-child Eigenschaft des ersten Kindelements Bsp. li:first-child (das erste Element einer Liste) :first-line Eigenschaft der ersten Zeile eines Absatzes :first-letter Eigenschaft der ersten Buchstaben

Schrift - Text

Schriftart font-family: serif, sans-serif, cursive, fantasy,

monospace (alle Bst. gleich breit) (Courier (New) )

Wenn ein Schriftname aus 2 Wörtern besteht � Anführungszeichen: “Courier New“

Schriftgröße: font-size: px, em (proportional zur Höhe des großen M)

Wenn man für body {fontsize: 1em;} festlegt, entspricht die Schriftgröße der Standartschriftgr.des Browsers 14pt/16px / Wegen Browserbug body {fontsize: 100.01%;}

Schriftform: font-weight: normal , bold

font-style: normal , italic (= kursiv)

font-variant: normal, small-caps (=Kapitälchen)

text-decoration: underline, overline, line-through, none (Links werden nicht unterstrichen)

text-transform: uppercase (Großbuchstaben), lowercase (Kleinbuchstaben), capitalize (1.Bst. groß), none

Schriftfarbe: color

1.Buchstabe anders formatieren: Pseudoklasse :first-letter

Buchstabenabstand: letter-spacing

Wörterabstand: word-spacing

Textausrichtung: text-align: left, center, right, justify

Einrückung der ersten Zeile: text-indent 2em (gebräuchlicher Wert)

Zeilenhöhe: line-height: px, em, 1.2 (ohne Maßeinheit = 20% mehr als normal)

Logische Textauszeichnung:

em kennzeichnet Text als betont strong kennzeichnet Text als stark betont. code kennzeichnet Text als Quelltext. address dient Webautoren dazu, Kontaktinformationen bereitzustellen.

Nur für Inline-Elemente:

vertikale Textausrichtung: vertikal-align:

baseline, sub, super, top, text-top, middle, bottom, text-bottom, <Länge> (Ein positiver Wert hebt die Basislinie des Texts an, ein negativer senkt sie ab.), <Prozent>, inherit

{font: italic bold (weight-style-variant, Reihenfolge egal) 0.9em/1.2 (Zeilenhöhe hinter font-size) Verdana, sans-serif (font-size vor font-family , beide sind obligatorisch) }

body: font: {100.01% Arial, Helvetica, sans-serif;}

Mac OS X 10.4.8, Firefox 2.0, ClearType enabled

Vista, IE 7, ClearType enabled

Die Standard-Palette wird eingesetzt, weil es immer Surfer gibt, die auf ihrem Computer nur 256 Farben anzeigen lassen. Sie haben dann die folgenden Farben zur Auswahl. Hier sehen Sie alle 216 Standardfarben und ihre hexadezimale Schreibweise:

Positionieren

Float positioning

A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it. You should always set a width on floated items. If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.

Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the "clear" property to these following elements.

The result seen here happens because the div elements don't "stretch" to contain the floated images within them. You have to clear the float to avoid this effect.

For example:

div.clearer {clear: left; line-height: 0; height: 0;}

<div class="item">

<img src="w6144.gif">

Widget 6144

<br />$39.95

<div class="clearer"> </div>

</div>

A floated element will expand to contain any floated elements that descend from it. So in our widget example, we could remove all of the "clearer" elements and instead write these styles:

div.item {float: left; border: 1px solid; padding: 5px; width: 60%;}

div.item img {float: left; margin: 5px;}

Note that we've floated both the images and the "item" divs. By setting the width of the divs to be greater than 50%, we ensure that they will never be next to each other, but will instead stack up vertically.

Relative positioning

Relatively positioned elements are positioned within the normal flow and then moved. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its ‘normal flow’ position - leaving a gap for it. #relative {

position: relative;

left: 10px;

top: 10px;

background-color: #F63;}

Absolute positioning

An absolute positioned box is moved out of the normal flow entirely.

#outofnormal{

position: absolute;

left: 500px;

top: 100px;

width: 200px;

padding: 10px;

background-color: #F63;}

Das absolut positionierte Element wird relativ zu seinem Elternelement verschoben, aber nur wenn dieses ebenfalls positioniert ist. Ansonsten wird es relativ zum Browserfenster positioniert.

static (default) - Follows the normal flow

Fixed positioning

Fixed positioned elements are moved out of the normal flow entirely - relative to the viewport. This means that they don't move if the page is scrolled.

#outofnormal{ position: fixed;

left: 500px;

top: 100px;

width: 200px;

padding: 10px;

background-color: #F63;

}

header, contents, footer sollte man prinzipiell mit der Eigenschaft position:relative versehen.

Ein Element unsichtbar machen: {position: absolute; left:30000px; }

visibility:hidden (Der Platz bleibt frei/reserviert.)

display:none (Das Element nimmt keinen Platz mehr ein.)

Breite: width

Eine Maßangabe für width regelt die Inhaltsbreite eines Elements. Den Platz den die ganze Box einnimmt errechnet sich aus width+padding+border+margin.

Der Wert auto lässt Block-Elemente die gesamte mögliche Breite einnehmen.

Prozentwerte beziehen sich auf die Breite des Elternelements.

Inline-Elemente können keine Breitenangabe bekommen (<a>, <span>, <em>, …).

Höhe: height

Eine Maßangabe für height regelt die Inhaltshöhe eines Elements. Mit dem Wert auto werden Block-Elemente so hoch, wie es der Inhalt erfordert.

Prozentwerte beziehen sich auf den height-Wert des Elternelements. Wenn das Elternelement keine explizite Höhenangabe hat, so wird der Wert auto verwendet.

Inline-Elemente können keine Höhenangabe bekommen.

Mindestbreite min-width und Maximalbreite max-width

Ein Blockelement, das keine oder eine Prozentbreite hat, ändert seine Breite je nach Größe des Browserfensters. Mit Angabe einer min-width wird dafür gesorgt, dass das Element unterhalb einer bestimmten Breite nicht mehr verkleinert wird.

Mit Angabe einer max-width wächst die Breite eines Elements ab einer gewissen Fenstergröße nicht weiter – dies ist sinnvoll, um unlesbar lange Zeilen zu verhindern.

Mindesthöhe min-height und Maximalhöhe max-height

Ein Blockelement ohne Höhenangabe ist so hoch, wie es sein Inhalt erfordert. Mit min-height kann einem Element mit wenig Inhalt eine gewisse Mindesthöhe gegeben werden. Wenn der Inhalt mehr Platz beansprucht, als die Mindesthöhe vorsieht, so wächst das Element mit seinem Inhalt (im Unterschied zu height!).

Mit max-height wächst ein Element nur bis zu einer gewissen Höhe mit seinem Inhalt. Wenn der Inhalt größer wird, als die Maximalhöhe vorsieht, fließt der Inhalt in der Standardeinstellung über.

Randabstände

Viele Elemente werden vom Browser bereits mit Standardwerten für margin und padding angezeigt; für eine neutrale Ausgangssituation kann man diese Werte im Stylesheet global auf 0 setzen:

* {

margin:0;

padding:0;

}

Soll ein Element so hoch wie das ganze Browser-Fenster sein, muss man für html und body die Höhe auf 100% setzen (und die Höhe des Elements auch auf 100%).

Soll die Box wirklich ganz oben beginnen setzt man padding und margin für html und body auf 0.

Außenabstände (margin)

Element zentrieren: margin: 10px auto;

2 Elemente untereinander mit je margin:3em � Zwischenabstand wird nicht addiert, bleibt 3em 2 Elemente untereinander eins mit margin:1em, das andere mit margin:3em � Zwischenabstand ist 3em (Der größere der beiden Außenabstände wird genommen.

Negative Abstände sind auch möglich, z.Bsp. um eine Überschrift mehr nach links einzurücken h1 { margin-left:-1em; }

Non-styled paragraphs generally have 1em margin on top and bottom - the equivalent of one line of text. If you want to remove this margin, use "p { margin-top: 0; }".

Ist der Inhalt größer als der Platz den die angegebenen Werte dafür vorsehen, passen die Browser die Größe der Box automatisch an, es sei denn, man verhindert mit overflow:hidden, dass der überschüssige Inhalt angezeigt wird.

Overflow

Wenn der Inhalt breiter wird, als der über width (oder max-width) definierte Bereich in dem er sich befindet, lässt sich über overflow festlegen, was passieren soll:

overflow: visible (der Inhalt bleibt sichtbar) overflow: hidden (der Inhalt wird beschnitten) overflow: scroll (es werden Rollbalken hinzugefügt)

Overflow benutzt man auch, wenn z.B. ein Bereich innerhalb eines <DIV>-Bereichs festgelegt wird und dieser größer ist, als die Abmessungen des <DIV>-Bereichs oder durch eine Positionierung über den Rand läuft.

Bsp. <div> <img /><p></p></div><hr> p hat eine Hintergrundfarbe, ist aber nicht so hoch wie img � div { overflow:hidden;} damit die Hintergrundfarbe den Bereich bis zum unteren Bildrand ausfüllt

Positionierung der Elemente übereinander: z-index

Je höher der Wert, desto weiter oben ist das Element angeordnet. Allerdings werden die Elternelemente stets unter den Kindelementen angezeigt, der z-index bestimmt demnach nur die Platzierung der Elemente einer Ebene.

Werte in Zehnerschritten angeben, damit man später z-Indexe hinzufügen kann, ohne dass man alles anpassen muss.

Bsp. .box1 { position:absolute; left:0; top: 1em; z-index: 20;} .box2 { position:absolute; left:4em; top: 2em; z-index: 30;}

Bilder – Hintergrundbilder

<img src=”media/Max.jpg” width=“150px“ height=“200px“ alt=“Foto von Max“ />

Hintergrundfarbe: background-color

Hintergrundbild: background-image: url(image.gif);

Wiederholung des Bildes: background-repeat repeat, no-repeat, repeat-x (horizontal), repeat-y (vertikal)

Scrolleigenschaft: background-attachment scroll, fixed

Platzierung: background-position % oder px/em (horizontal),

% % oder px/em px/em (horizontal, vertikal)

oder left, center, right mit top, center, bottom

oder left oder right mit % oder px/em

oder % oder px/em mit top oder bottom

Hintergrundbilder werden nur soweit angezeigt, wie das Element groß ist in dem sie stehen.

Um ein Bild zu zentrieren oder um ihm beim Kacheln einen bestimmten Abstand zu geben muss man aus ihm ein Blockelement (display:block) machen. Schaltflächen mit Bild: Das Bild wird als Hintergrundbild von a definiert.

Rahmen

Rahmenfarbe border-color

Rahmenart border-style none, dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double, groove (3D-

Linie), ridge, inset, outset (3D-Linien)

Rahmenbreite border-width thin, medium, thick, Längenangabe

Gleiche Möglichkeiten bestehen, wenn man nur eine bestimmte Seite definieren möchte: border-top, border-bottom, border-left, border-right (Bsp. border-left-style)

Mit inherit erben die Kindelemente die Eigenschaften des übergeordneten Elements.

background: b-color, b-image, b-repeat, b-attachment und b-position; (am besten die Hintergrundfarbe vor dem Bild angeben)

border: Breite (border-width), Art (border-style), Farbe (border-color) Bsp. border: {5px solid #0000ff;}

0% = oben oder ganz links 100% = unten oder ganz rechts zum übergeordneten Element

horizontal vor vertikal!

Listen

<ul> </ul> Aufzählungen mit Zeichen (unordered list) <li> </li> Aufzählungspunkt

Listenformatierung: list-style-type: square, disc, circle, none

{list-style-image: url(../media/pfeil.gif);} Achtung: Pfad relativ zur CSS-Datei ! (Zusätzlich immer list-style-type angeben, falls das Bild nicht geladen werden kann.)

Alternativ zu list-style-image kann man auch background-image benutzen, diese kann man genauer positionieren ! li { background-image:url(../media/pfeil.gif) no-repeat left top;}

list-style-position: inside (The bullets appear inside the content flow), outside, inherit (from the parent element)

<ol> </ol> Aufzählungen mit Nummerierung (ordered list)

Listenformatierung: list-style-type: inherit, none, disc (solid circle), circle (empty circle), square, decimal (1, 2, 3,), lower-roman (i, ii, iii,), upper-roman ( I, II, III,)

Verschachtelung: ul { list-style-image: url(pfeil.gif); } li ul { list-style-image: url(pfeil2.gif); } <ul> <li>Ein Punkt</li> <li>Ein weiterer Punkt <ul> <li>Unterpunkt</li> <li>Unterpunkt</li> </ul> </li> <li>Ein weiterer Punkt</li> </ul>

Einrückung nach links: ul { margin-left: 1em; (Mozilla) padding-left: 1em; (IE) }

Wenn man mit list-style-type:none die Listenzeichen entfernt, bleibt der Platz reserviert, man muss dann anschließend padding-left und margin-left auf 0 setzen.

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser.

Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer,

Opera) to set the amount of indentation. To remove this left-indentation consistently across all

browsers, set both padding and margins to "0" for the "UL"

list-style: [type] [position] [image]

Listenpunkte nebeneinander platzieren: ul { display: inline ;}

oder floaten Bsp. Fotogallery mit Beschriftung: <ul><li><img /></li>… li { float:left; text-align:center; width: 100px; } img { display:block; margin: auto; }

Horizontales Menü mit Schaltflächen (Bsp.):

ul {position:absolute; top:40px; left:140px; list-style-type: none;} (float left wär och méiglech)

li {float:left; width:150px; list-style-type: none; padding-left: 0; margin-left: 0; }

a {display:block; /* damit es das Listenelement ganz ausfüllt */

text-decoration:none; /* damit die Links nicht unterstrichen werden */ }

Anstatt absolut zu positionieren, kann man der ul padding (margin?) top und left relativ zum main geben.

Horizontales tabellenartiges Menü mit Schaltflächen

#navigation { width: 770px; float:right;}

#navigation ul { display:inline; margin: 1px 0;}

#navigation li { display:inline; margin: 1px 0; width:220px;}

#navigation a { display:block; float:left; width:180px;}

Verschachtelte Liste beim Hovern aufklappen:

<ul> <li>Ein Punkt</li> <li>Ein weiterer Punkt <ul class=“Unterliste“> <li>Unterpunkt</li> <li>Unterpunkt</li> </ul> </li> <li>Ein weiterer Punkt</li> </ul>

.Unterliste {position:absolute; left:30000px;}

.Unterliste li a:hover {position:static; top:Position; left:Position;}

Links

text-decoration: none Links werden nicht unterstrichen

list-style-type:none Liste ohne Zeichen

Wenn man beim Hovern unterstreichen möchte: a:hover { text-decoration:underline; }

a:link normale Anzeige

a:visited einen bereits vom Nutzer besuchter Link

a:focus wenn man über die TAB-Taste zu einem Link wandert

a:hover wenn man mit der Maus über den Link fährt

a:active gerade aktiver Link

Wichtig ist die Reihenfolge (Faustformel: LoVe HAte )

HTML <a href=”http://google.de” class=”extern”>

CSS a.extern:hover {Eigenschaft}

HTML <a href=”http://google.de” id=”extern”>

CSS #extern a:hover {Eigenschaft}

a ist ein Inline-Element, wenn das ganze Listenelement anklickbar sein soll:

a { display:block; text-decoration:none; width:100%; }

Man kann fast jedem Element das Universalattribut title zuweisen. Bewegt der User den Mauszeiger darüber wird der Text angezeigt. Suchmaschinen berücksichtigen diese Informationen bei der Indizierung. Ein weiteres Universalattribut ist lang für die Sprachangabe.

Tabellen - Tables

tr: table row

td: table data (Zellen für Tabelleninhalt)

th: table head (Zellen für Spalten und Zeilenkopf)

caption: Tabellenüberschrift

Sie können eine Tabelle logisch in Bereiche aufteilen: einen Kopfbereich, die Datenbereiche und einen Fußbereich: thead, tfoot, tbody (in dieser Reihenfolge notieren!)

<td colspan="2"> <td rowspan="2"> verbindet 2 Spalten/Zeilen

<table border="1">

<tr>

<th>Column 1 heading</th>



</tr>

<tr>

<td>Row 2, cell 1</td>

<td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>

</tr>

<tr>

<td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>



</tr>

<tr>



</tr>

</table>

<tr> <th> </th> <th> </th> <th> </th> </tr>

<tr> <td> </td> <td colspan="2"> </td> </tr>

<td> </td> <td> </td> </tr> <tr><td rowspan="2"> </td>

<tr> <td> </td> <td> </td> </tr>

Spaltenbreite definieren, Spalten identifizieren, Spalten verbinden:

<table>

<colgroup>

<col width=”33%” />

<col class="alternate" />

<col span=”2” /> verschmelzt die Kolonnen 3 + 4 miteinander.

</colgroup>

Ausrichten des Zelleninhalts: text-align left, center, right, justify

vertical-align baseline, top, middle, bottom

Tabellen nehmen nicht automatisch die ganze Breite ein, sondern richten sich nach dem Inhalt.

Zellen aneinander/mit Zwischenraum border-collapse: collapse / separate

Zwischenraum definieren border-spacing (erst ab IE8)

Tabellenlayout (feste Breite) table-layout: auto, fixed, inherit

Das automatische Tabellenlayout (auto) ist das für den Browser deutlich aufwendigere der beiden.

Die Tabellenbreite wird durch die Breite ihrer Spalten und der dazwischenliegenden Rahmen

festgelegt, wobei die Spaltenbreite sich an den Inhalten orientiert. Die Tabelle muss daher

vollständig heruntergeladen sein, bevor sie berechnet und dargestellt werden kann, vor allem dann,

wenn die Spaltenbreite nicht durch die Elemente colgroup und col festgelegt ist, sondern sich aus

der Breite der einzelnen Tabellenzellen ergibt. Für Webautoren ist dieser Algorithmus häufig der

komfortablere, da im Allgemeinen alle Zelleninhalte vollständig dargestellt werden; aus diesem

Grund ist auto der Initialwert.

Beim festen Tabellenlayout (fixed) ist die Tabellenbreite nur von den Vorgaben für die

Tabellenspalten mittels col und colgroup und den Breiten der Zellen der ersten Zeile abhängig.

Breitenangaben haben folglich Vorrang vor den Inhalten. So kann der Browser bereits mit dem

Aufbau der Tabelle auf dem Bildschirm beginnen, wenn er die Tabelle noch nicht vollständig

heruntergeladen hat. Sollte der Inhalt einer der folgenden Zellen breiter sein, als die Tabellenbreiten

beziehungsweise die Zellen der ersten Zeile festlegen, hängt es vom Wert der Eigenschaft overflow

ab, wie der überfließende Teil behandelt wird.

Bilder in Tabellenzellen:

Bilder sind Inline-Elemente und werden (wie Buchstaben) auf die Grundlinie platziert, es bleibt also ein Zwischenraum bis zum unteren Zellenrand.

� vertical-align: bottom oder td img { display: block; }

Ideensammlung

Flotten Hovereffekt op engem Bild:

#contents #pic {

float:right;

border:4px #FFF solid;

display:block;

margin: 35px 30px 35px 55px;

background-image:url('../../media/oswald-tanja/portrait_ouni_et.jpg');

width:155px;

height:182px

}

#contents #pic:hover {

background-image:url('../../media/oswald-tanja/portrait_mat_et.jpg');

width:155px;

height:182px

}

http://cepl.basename.de/1106/kurswebseite/oswald-tanja.htm

Hovereffekt op engem Bild wou just background-position vun top op bottom wiesselt:

#header h1 a{

display:block;

color: #9A1309;

font-weight:bold;

padding: 10px 0 0 60px;

margin:0;

height:50px;

background-image:url('../../media/pollex-jochen/sam_maul-auf-zu.png');

background-position:0px top;

background-repeat:no-repeat; /* border:1px solid green; */

}

#header h1 a:hover{

background-position:0px bottom;

background-repeat:no-repeat;

text-decoration:none;

}

http://cepl.basename.de/1106/kurswebseite/pollex-jochen.htm

Navigation in Form einer Tabelle

#main {

margin: 20px auto 30px auto;

padding:0 0 5px 0;

background:#013332;

background-image:url('../../media/pollex-

jochen/jp-bg-main_03.jpg');

background-repeat:no-repeat;

width: 833px;

border-bottom:2px dotted #D1CEAD;

}

img {

border:none;

}

a {


}

a:hover {

text-decoration: underline;

}

#navigation {

width: 770px;

float:right; /* border:1px solid red; */

}

#navigation ul {

display:inline;

margin: 1px 0;

}

#navigation li {

margin: 1px 0;

width:220px;

display:inline;

}

#navigation a {

display:block;

float:left;

width:180px;

padding: 3px;

background: #CAC6A1;

color: #723509;

font-size:11px;

border: 1px solid #A4B6A8;

/* border-left: 2px dotted #A4B6A8;

border-bottom:2px dotted #7AA8A5; */

}

#navigation a:hover {

background: #DFD8BE;


}

Documents

Grundkurs XHTML - CSSamsand.lu/kurswebseite/media/schmit-claude/CSS... · Grundkurs XHTML - CSS HEAD ... • Einige Blockelemente können auch andere Blockelemente enthalten