Benutzer:Beatovich/LaoutTipps
Aus SELFHTML-Wiki
Inhaltsverzeichnis
Layout - Tipps
Diese Seite ist eine Sammlung von Snippets, die eventuell auf anderen Seiten eingearbeitet werden sollen.
FAQs (Häufige Fragen)
Wie kann man einen Link als Button darstellen?
Die Darstellung soll dabei der Standard GUI des Browsers folgen.
Lösungen
- Verwenden Sie ein Button Element als Inhalt des Ankerelements.
- Wenn Sie zudem noch Bots vom Folgen des Links abschrecken möchten, verwenden Sie ein Formular.
Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Link als Button darstellen</title>
</head>
<body>
<p>Dieser
<a href="http://example.org">
<button>Link</button>
</a>
soll wie ein Button aussehen.
</p>
</body>
</html>
Obiger Link operiert als normaler Link. Bots folgen ihm wie einem normalen Link.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Link als Formular darstellen</title>
<style type="text/css">
form{display:inline;}
</style>
</head>
<body>
<div>Dieses ist ein
<form action="href="http://example.org" method="get">
<input type="submit" value="Formular">
</form>
-Button!
</div>
</body>
</html>
Obiger Link ist ein Formular. Bots folgen ihm in der Regel nicht.
Via CSS wurde das Form-Element als inline-Element dargestellt.
CSS Layout Strategien
Logischen Fluss umstellen mittels direction Attribut
Man möchte im logischen Fluss den Hauptinhalt vor dem Aside platzieren.
- Soll das Aside gefloatet werden, dann ist es notwendiger Weise vor dem Hauptinhalt. Abhilfe: Floate den Hauptinhalt ebenfalls:
- Kommt display:inline-Block zur Anwendung, so steht der linke Block (in einem ltr Kontext) vor dem rechten Block. Dieser Tipp beschreibt eine Strategie, welche die Schreibrichtung kurzfristig umkehrt, um den logisch ersten Block rechts zu platzieren.
Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Reihenfolge im logischen Fluss mit CSS umkehren</title>
<style type="text/css">
#main {
direction:rtl; /* Stelle die Kinder von Rechts nach Links dar*/
}
#content,
#sidebar {
display:inline-block;
direction:ltr; /* Restauriere die ursprüngliche Schreibrichtung */
vertical-align:top; /* Toprand bündig bezüglich Baseline des parent */
}
#content {
width:65%; /* oder width:auto */
background:#ffc;
}
#sidebar {
width:35%; /* oder width: nnn px*/
margin-right:-5px; /* Kompensiere den Whitespace zwischen den Boxen */
background:#cff;
}
</style>
</head>
<body>
<h1>Header</h1>
<div id="main">
<div id="content">
<h2>Hauptinhalt</h2>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
</div>
</div><!-- #main -->
</body>
</html>
Ein vorbildliches zugängliches Multilevel-Dropdown-Menu
Diese Demo wurde verschoben nach:
[[Artikel:Eine_zugängliche_Multilevel-Dropdown-Navigation]] Beat 10:47, 20. Jan. 2011 (CET)
