Dynamische Webseiten

Virtueller Campus Projekt, PHBern

StartseiteJavaScriptCSSJSPPHPMySQLDrucken

Schriftgrösse: kleiner - zurücksetzen - grösser

Positionierung – tabellen und frameloses Layout

Elemente auf einer Webseiten können ohne Frames und Tabellen nur mittels CSS positioniert werden. Die Positionierung wird so flexibler, der Programmcode stark vereinfacht und Inhalt und Layout können völlig getrennt werden. Webseiten, die das Design nur mittels CSS festlegen, können ohne grossen Aufwand völlig neu gestaltet werden, ohne dass alle Inhalt-Seiten angepasst werden müssen.

Ein Beispiel hierfür ist die Seite www.csszengarden.com. Im Menü "select a design" kann ein CSS für die Darstellung der Seite ausgewählt werden. Diese CSS-Dateien wurden von Grafikern erstellt. Die Beispiele zeigen sehr eindrücklich wie eine Seite nur mittels CSS anpepasst und völlig neu gestaltet werden kann.

Position und Grösse eines Bereiches definieren

Die Position eines Bildschirmbereiches wird in der Regel durch den Abstand von Oben (top) und den Abstand von links (left) definiert. Die Grösse wird durch die Breite und Höhe definiert.

Alle Masse können absolut (in px) oder in % angegeben werden. Bei der Angabe in % werden die Masse der Browserfenstergrösse angepasst. Die height wir häufig auf auto gesetzt, dabei passt sich die Höhe eines Boxes dem Inhalt (z.B. Anzahl der Zeilen) an. Wenn die Höhe grösser als das Browserfenster ist, wird automatisch eine vertikale Scrolleiste agezeigt. Mit Padding wird der Abstand des Boxinhalts zum Rand definiert.

 

Im Beispiel 1 werden zwei Bildschirmbereiche definiert:
<html>
<head>

<style type="text/css">
body  {
font : normal 11px Verdana,Arial,Helfetica,sans-serif;
height: 80%;
margin: 0px 0px;
}

h1 {
font-size : 1.6em;
font-weight: bold;
letter-spacing:3px;
color: #FF0000;
}

#box1{
background-color:#E0E0E0;
height: auto;
width: 20%; 
top: 90px;
left: 5%;
padding: 10px 15px 10px 15px;
position: absolute;
}

#box2{
background-color:#CCCCCC;
height: auto;
width: 50%; 
top: 90px;
left: 30%;
padding: 10px 15px 10px 15px;
position: absolute;
}
</style>

</head>
<body>
<div id="box1">
  <h1>Box 1</h1>
  <p>normaler Text</p>
  <p>normaler Text</p>
  </div>

<div id="box2">
  <h1>Box2 </h1>
  <p>normaler Text</p>
  <p>normaler Text</p>
  <p>normaler Text</p>
  <p>normaler Text</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  
</div>
</body>
</html>

Beispiel zeigen

CSS Online Bearbeiten

Eingemittete Box

Im Beispiel 2 wird ein Bereich mit einer festen Breite von 400 Pixeln und einer Höhe von 300 Pixeln definiert. Vom Seitenrand hat der Bereich einen relativen Abstand, welcher der Browser selbst festlegt (auto). Der Bereich ändert nun also je nach Browserfenstergrösse die Höhe, hat aber eine feste Breite und ist in der horizontalen Achse zentriert. Die horizontale Zentrierung ist aber nicht ganz einfach. Normal kann man das mit der Angabe margin:auto; machen, indem man diese Angabe dem zu zentrierenden <div> Bereich zuweist, das Problem, der Internet Explorer versteht das nicht und setzt den Bereich nach links.
Um das Problem zu lösen, bringt man den IE (gilt nur für 6er Version) in den "standards-compliant mode" indem man den entsprechenden Doctype angibt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Beispiel 2 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<style type="text/css">
#box1{
position: relative;
margin: auto;

width: 400px;
height: 300px;

background-color:#fe9;
border: 4px solid #fe4; 

color:#111;
}
</style>

</head>
<body>

<div id="box1"> 
  <p>Dies ist eine eingemittete Box...</p>
</div>

</body>
</html>

Beispiel zeigen / Code ohne Zeilennummerierung anzeigen

CSS Online Bearbeiten



Eine komplette Webseite

Beispiel 3: Positionierung der Webseite-Elemente "kopf", "inhalt_links" und "inhalt_mitte"

Programmcode der CSS-Datei:

/*positionierung3.css*/
body  {
font : normal 11px Verdana,Arial,Helfetica,sans-serif;
min-width: 780px;
height: 80%;
margin: 0px 0px;
}

#kopf {
background-color:#CCCCCC;
padding: 5px 5px 5px 15px;
font-size : 1.1em;
height: 85px
position: absolute;
width: 100%;
}

#inhalt_links{
background-color:#E0E0E0;
height: auto;
width: 18%; 
top: 90px;
left: 10px;
padding: 10px 15px 10px 15px;
position: absolute;
}

#inhalt_mitte {
    height: 85%;
    width: 75%;
    padding: 10px 15px 10px 15px;
    position: absolute;
    bottom: 145px;
    top:89px;
    left: 22%;
    right: 10px;
    border: 1px dotted #90909B;
    overflow: auto;
    overflow-x: hidden;
}

h1 {
font-size : 1.6em;
font-weight: bold;
letter-spacing:3px;
color: #FF0000;
line-height: 1.5;
margin: 3px 2px 5px 0px;
}

Programmcode der HTML-Datei:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bsp/positionierung3.css">
</head>
<body>
<div id="kopf">
  <h1>Kopf</h1>
</div>
<div id="inhalt_links">
  <p>Inhalt links</p>
</div>
<div id="inhalt_mitte">
  <p>Inhalt mitte. </p>
</div>
</body>
</html> 


Beispiel zeigen / CSS Online Bearbeiten

Dateien zum Bearbeiten downloaden


Beispiel 4: Eine Komplette Webseite mit weiteren CSS-Formatierungen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<style type="text/css">
/* CSS Document */
html, body, div, p, h1, h2, h3, li, ul,
span, a, table, td, form, img {
   margin: 0px;
   padding: 0px;
}

body {
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#000000;  
  text-align:center;
 }

/**************************************************/
/*  accessiblity */
#accessibility {
    margin: 0;
    position: fixed;
    top: 5px;
    left: -1000px;
    }

#accessibility a:focus, #accessibility a:hover, #accessibility a:active {
    margin: 0;
    padding:  0 10px;
    position: absolute;
    top: 0;
    left: 1020px;
    width: 15em;
    display: block;
    color: #000;
    background: #fff;
    font: 85%/1.5em verdana,arial,helvetica,sans-serif;
    border: 1px solid #fff;
    z-index: 3;
    }

#accessibility a:hover {
    text-decoration: none;
    }


/**************************************************/
/*  Positionierung der verschiedenen Div-Elementen*/
/**************************************************/

#box {
width:780px;
margin: 0px auto;
padding:0px;
text-align:left;
}

/**************************************************/
/* Kopf */
#kopf {
background-color:#FF0000;
padding:5px;
}

/**************************************************/
/* 1. Spalte */
/*allgemeine CSS-Definitionen für die ganze erste Spalte*/
#spalte1 {
width:auto;
float: left;
}


/*Definitionen für die einzelnen Module der Spalte*/
#spalte1_1,#spalte1_2,#spalte1_3 {
width:175px;
padding:10px 5px;
background-color:#FFFF00;
border-top:1px solid white;
}


/**************************************************/
/* 2. Spalte */
#spalte2 {
width:400px;
padding:10px 5px;
float:left;
background-color:#0000FF;
border-top:1px solid white;
}


/**************************************************/
/* 3. Spalte */
#spalte3 {
width:175px;
padding:10px 5px;
float:left;
overflow:hidden;
background-color:#00FFFF;
border-top:1px solid white;
}
</style>

</head>

<body>
<p id="accessibility">
<a tabindex="1" href="#spalte2">Direkt zum Inhalt</a> | 
<a tabindex="2" href="#spalte1_1">Direkt zur Navigation</a> |
</p>

<div id="box">

    <div id="kopf">
    <h1>Kopf</h1>
    </div>
        
    <div id=spalte1>
        <div id="spalte1_1">
            <h1>Spalte 1, Modul 1</h1>
            <p>
            <a target="_blank" href="http://www.google.ch">www.google.ch</a>
            <a target="_blank" href="http://www.phbern.ch">www.phbern.ch</a>
            </p>
        </div>
        <div id="spalte1_2" >
            <h1>Spalte 1, Modul 2</h1>
        </div>
        <div id="spalte1_3" >
            <h1>Spalte 1, Modul 2</h1>    
        </div>
    </div>
    
    
    <div id="spalte2" tabindex="5">
        <h2>Spalte2</h2>
        <p>Dies ist der Inhalt.</p>
    </div>
    
    <div id="spalte3" tabindex="6">
        <h2>Spalte3</h2>
    </div>
    
</div>

</body>
</html>


Beispiel zeigen

CSS Online Bearbeiten

 

Übungen

Verwandeln Sie die angezeigte Box in eine Box, welche rechtsbündig (verwenden Sie den Befehl position: absolute), 200px breit und 600px hoch ist. Der Hintergrund der Seite neben der Box soll grau sein. Die Box selbst soll einen roten Rahmen erhalten.

Aufgabe 6

 

Entscheiden Sie sich für eine Textfarbe und zwei verschiedene Farben für die Webseite. Färben Sie die Webseite ein. Die Linke und die rechte Spalte der Webseite sollen nur noch 150px breit sein. Passen Sie hierzu die gesamte Webseite an.

Aufgabe 7