Sandkasten

From 2009.igem.org

(Difference between revisions)
(New page: <!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"> <head> <meta http-equi...)
 
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
-
<head>
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<title>Unbenanntes Dokument</title>
+
<meta name="Author" content="Thomas Pehlgrim" />
-
<style type="text/css">
+
<meta name="description" content="Layouten ohne Tabellen, CSS 4 You - The Finest in Stylesheets: Workshops und Referenzen zu CSS" />
-
<!--
+
<meta name="keywords" content="Tabellenloses Layout, ohne Tabellen, CSS 4 You, CSS for You, CSS 1, CSS 2, CSS Level 1, CSS Level 2, Cascading Stylesheets, Referenz, Gestaltung ohne Tabellen, tabellenloses Design, div zentrieren" />
-
.menucontainer {border:1px solid #000;
+
<style type="text/css"><!--
-
background-color:#<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
body
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
{
-
<head>
+
font-family:Verdana;
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
font-size:12px;
-
<title>Unbenanntes Dokument</title>
+
background-color:#ffefde;
-
<style type="text/css">
+
-
<!--
+
-
.menucontainer {border:1px solid #000;
+
-
background-color:#7b7d8e;
+
-
width:106px;
+
-
margin:10px;
+
}
}
-
.menutitle {font-weight:bold;
+
h1 {font-size:18px;color:#000000;margin-bottom:0px;}
-
text-align:center;
+
h2 {font-size:16px;color:#000000;}
-
margin:2px;
+
h3 {font-size:14px;color:#000000;}
 +
p {margin-top:0px;}
 +
 
 +
code {font-size:14px;color:#0000ff;}
 +
pre
 +
{
 +
font-size:14px;
 +
color:#0000ff;
 +
padding:5px;
}
}
-
a.menu { display:block;
+
a:link, a:visited, a:active, a:hover
-
padding:3px;
+
{
-
border-top:1px solid #000;
+
  text-decoration:none;
-
background-color:#737994;
+
  font-weight:bold;
-
text-align:center;
+
  color:#634142;
-
color:#eeeeee;
+
  font-size:12px;
-
text-decoration:none;
+
}
}
-
body {
+
a:active, a:hover
-
background-color: #026CB6;
+
{  
 +
text-decoration:underline;
}
}
-
#apDiv1 {
 
-
position:absolute;
 
-
width:833px;
 
-
height:157px;
 
-
z-index:1;
 
-
left: 139px;
 
-
top: 223px;
 
-
}
 
-
-->
 
-
</style>
 
-
</head>
 
-
<body>
+
#title {
-
<div style= width:"965";><img src="https://static.igem.org/mediawiki/2009/0/09/Freiburg09_Blauer_header.png" width="965" height="199" /></div>
+
height:34px;
-
<div class="menucontainer">
+
padding:5px;
-
  <p class="menutitle">MENU 1
+
border-bottom:1px solid #000000;
-
  <a class="menu" href="#">Hyperlink 1</a> <a class="menu" href="#">Hyperlink 2</a> <a class="menu" href="#">Hyperlink 3</a></p>
+
margin-bottom:20px;
-
  <div id="apDiv1">This is only a test</div>
+
-
  <p class="menutitle"> <a class="menu" href="#">Hyperlink 4</a> <a class="menu" href="#">Hyperlink 5</a> </p>
+
-
</div>
+
-
</body>
+
-
</html>
+
-
;
+
-
width:106px;
+
-
margin:10px;
+
}
}
-
.menutitle {font-weight:bold;
+
#left, #right {
-
text-align:center;
+
width:14%;
-
margin:2px;
+
line-height:18px;
}
}
-
a.menu { display:block;
+
#left {
-
padding:3px;
+
float:left;
-
border-top:1px solid #000;
+
-
background-color:#737994;
+
-
text-align:center;
+
-
color:#eeeeee;
+
-
text-decoration:none;
+
}
}
-
body {
+
#right {
-
background-color: #026CB6;
+
float:right;
}
}
-
#apDiv1 {
+
.menutitle
-
position:absolute;
+
{
-
width:833px;
+
font-weight:bold;
-
height:157px;
+
border-top:1px dashed #000000;
-
z-index:1;
+
margin-top:15px;
-
left: 139px;
+
-
top: 223px;
+
}
}
-
-->
 
-
</style>
 
-
</head>
 
 +
#content {
 +
float:left;
 +
width:66%;
 +
margin-left:3%;
 +
}
 +
//--></style>
 +
<title>CSS 4 You - The Finest in Stylesheets: Workshop Layouten ohne Tabellen</title>
 +
</head>
<body>
<body>
-
<div style= width:"965";><img src="https://static.igem.org/mediawiki/2009/0/09/Freiburg09_Blauer_header.png" width="965" height="199" /></div>
+
<div id="title">
-
<div class="menucontainer">
+
<img src="logo6.gif" style="float:right;width:156px; height:39px;margin-left:3px;" alt="Logo" />
-
  <p class="menutitle">MENU 1
+
<h1>10. Dreispaltiges Layout, 100% breit</h1></div>
-
  <a class="menu" href="#">Hyperlink 1</a> <a class="menu" href="#">Hyperlink 2</a> <a class="menu" href="#">Hyperlink 3</a></p>
+
 
-
  <div id="apDiv1">This is only a test</div>
+
<div id="left" style="clear:right;">
-
  <p class="menutitle"> <a class="menu" href="#">Hyperlink 4</a> <a class="menu" href="#">Hyperlink 5</a> </p>
+
<p class="menutitle">MENU 1</p>
-
</div>
+
&raquo; <a class="menu" href="#">HYPERLINK 1</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 2</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 3</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 4</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 5</a><br />
 +
 
 +
<p class="menutitle">MENU 2</p>
 +
&raquo; <a class="menu" href="#">HYPERLINK 1</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 2</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 3</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 4</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 5</a><br />
 +
 
 +
<p class="menutitle">MENU 3</p>
 +
&raquo; <a class="menu" href="#">HYPERLINK 1</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 2</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 3</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 4</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 5</a><br /><br />
 +
 
 +
</div>
 +
 +
<div id="right">
 +
<p class="menutitle">MENU 4</p>
 +
&raquo; <a class="menu" href="#">HYPERLINK 1</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 2</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 3</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 4</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 5</a><br />
 +
 
 +
<p class="menutitle">MENU 5</p>
 +
&raquo; <a class="menu" href="#">HYPERLINK 1</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 2</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 3</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 4</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 5</a><br />
 +
 
 +
<p class="menutitle">MENU 6</p>
 +
&raquo; <a class="menu" href="#">HYPERLINK 1</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 2</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 3</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 4</a><br />
 +
&raquo; <a class="menu" href="#">HYPERLINK 5</a><br />
 +
</div>
 +
 
 +
 +
<div id="content">
 +
<h2>Drei Bereiche</h2>
 +
Wenn du dir die anderen Beispiele angesehen hast, dann dürfte mehrspaltiges Layout
 +
kein Problem mehr für dich sein. Dieses Beispiel teilt sich in vier Bereiche auf:
 +
Die Titelleiste, die Menüs und der Inhalt
 +
<h2>Die Titelleiste</h2>
 +
Für die Titelleiste habe ich einen <em>&lt;div&gt;</em>-Container verwendet,
 +
da der gesamte Bereich mit einem <a href="../border-bottom.html">unteren Rahmen</a>
 +
versehen werden soll und es mit zwei nebeneinander floatenden Elementen nicht immer möglich ist
 +
einen lückenlosen Rahmen zu erzeugen.<br />
 +
Das Logo und das <em>&lt;h1&gt;</em>-Tag floaten nebeneinander,
 +
wie in <a href="ex0004.html">Beispiel 4</a> bereits erklärt.
 +
<h2>Die Menüs</h2>
 +
Die Menüs sind ebenfalls in <em>&lt;div&gt;</em>-Container eingefügt,
 +
die mit den folgenden Stylesheets formatiert sind:
 +
<pre>
 +
#left, #right {
 +
width:14%;
 +
line-height:18px;
 +
}
 +
#left {
 +
float:left;
 +
}
 +
#right {
 +
float:right;
 +
}
 +
</pre>
 +
Für die <em>&lt;div&gt;</em>-Container ist jeweils das <em>ID</em>-Attribut angegeben:
 +
<pre>
 +
&lt;div id=&quot;left&quot;&gt;
 +
Linkes Menü
 +
&lt;/div&gt;
 +
 
 +
...
 +
 
 +
&lt;div id=&quot;right&quot;&gt;
 +
Rechtes Menü
 +
&lt;/div&gt;
 +
</pre>
 +
Die <a href="../width.html">Breite</a> ist auf 14% festgelegt und die
 +
<a href="../line-height.html">Zeilenhöhe</a> sorgt für etwas Abstand unter den
 +
Hyperlinks im Menü.<br />
 +
Die Eigenschaft <a href="../float.html">float</a> plaziert Elemente
 +
auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem
 +
<em>&lt;div&gt;</em>-Container für das linke Menü <code>float:left</code>
 +
und dem Rechten <code>float:right</code> zugewiesen, um sie links- und rechtsbündig
 +
auf der Seite zu plazieren.
 +
<h2>Inhalt</h2>
 +
Ähnlich wie in <a href="ex0007.html">Beispiel 7</a> soll der Inhalt in der Mitte stehen.
 +
Nur dass in diesem Fall ein <em>&lt;div&gt;</em>-Container mit den folgenden Stylesheets
 +
verwendet wird, damit der Spalteneffekt entsteht:
 +
<pre>
 +
float:left;
 +
width:66%;
 +
margin-left:3%;
 +
</pre>
 +
Deshalb ist für den Inhalt, genauer gesagt für den <em>&lt;div&gt;</em>-Container des Inhalts,
 +
<code>float:left</code> angegeben, um ihn rechtsbündig neben dem Menü auszurichten.
 +
Weiterhin ist die Breite auf 82% festgelegt. Rechnet man die 12% vom Menü dazu, bleiben
 +
6% als horizontaler Abstand zwischen beiden Bereichen übrig. Das ist alles.<br />
 +
Hier ist noch eine auf die <em>&lt;div&gt;</em>-Container reduzierte
 +
<a href="ed0010.html">vereinfachte Darstellung</a>
 +
</div>
 +
<p style="text-align:left;clear:both;margin-top:20px;"><a class="prev" href="index.html#example">Zurück</a></p>
</body>
</body>
</html>
</html>

Latest revision as of 07:35, 17 September 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">

CSS 4 You - The Finest in Stylesheets: Workshop Layouten ohne Tabellen

Logo

10. Dreispaltiges Layout, 100% breit

Drei Bereiche

Wenn du dir die anderen Beispiele angesehen hast, dann dürfte mehrspaltiges Layout kein Problem mehr für dich sein. Dieses Beispiel teilt sich in vier Bereiche auf: Die Titelleiste, die Menüs und der Inhalt

Die Titelleiste

Für die Titelleiste habe ich einen <div>-Container verwendet, da der gesamte Bereich mit einem unteren Rahmen versehen werden soll und es mit zwei nebeneinander floatenden Elementen nicht immer möglich ist einen lückenlosen Rahmen zu erzeugen.
Das Logo und das <h1>-Tag floaten nebeneinander, wie in Beispiel 4 bereits erklärt.

Die Menüs

Die Menüs sind ebenfalls in <div>-Container eingefügt, die mit den folgenden Stylesheets formatiert sind: 
#left, #right {
width:14%;
line-height:18px;
}
#left {
float:left;
}
#right {
float:right;
}
Für die <div>-Container ist jeweils das ID-Attribut angegeben: 
<div id="left">
Linkes Menü
</div>

...

<div id="right">
Rechtes Menü
</div>
Die Breite ist auf 14% festgelegt und die Zeilenhöhe sorgt für etwas Abstand unter den Hyperlinks im Menü.
Die Eigenschaft float plaziert Elemente auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem <div>-Container für das linke Menü float:left und dem Rechten float:right zugewiesen, um sie links- und rechtsbündig auf der Seite zu plazieren.

Inhalt

Ähnlich wie in Beispiel 7 soll der Inhalt in der Mitte stehen. Nur dass in diesem Fall ein <div>-Container mit den folgenden Stylesheets verwendet wird, damit der Spalteneffekt entsteht: 
float:left;
width:66%;
margin-left:3%;
Deshalb ist für den Inhalt, genauer gesagt für den <div>-Container des Inhalts, float:left angegeben, um ihn rechtsbündig neben dem Menü auszurichten. Weiterhin ist die Breite auf 82% festgelegt. Rechnet man die 12% vom Menü dazu, bleiben 6% als horizontaler Abstand zwischen beiden Bereichen übrig. Das ist alles.
Hier ist noch eine auf die <div>-Container reduzierte vereinfachte Darstellung

Retrieved from "http://2009.igem.org/Sandkasten"