Bei vielen Anwendungsbereichen ist es nötig, die Größe von Objekten nicht den Grundeinstellungen des Browsers zu überlassen, sondern eine exakte Größenangabe zu machen. Dies wird zum Beispiel sehr oft bei DIV-Boxen oder bei eingebundenen Bildern verwendet.
Prinzipiell können Größenangaben, so wie bei der Schrift, in Pixel und in Prozent gemacht werden, die Propertys hierfür sind:
Height: [Höhenangabe];
Width: [Breitenangabe];
Folgendes Beispiel zeigt die Anwendung in Bezug auf die DIV-Box aus dem vorigen Kapitel:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
.blauebox {
Border: #0044FF solid 2px;
Background-color: #B0C5FF;
Padding: 10px;
Height: 600px;
Width: 40%;
}
</style>
</head>
<body>
<div class=“blauebox“>
<h1>Überschrift</h1>
<p>Text</p>
</div>
</body>
</html>
Zu beachten ist, dass der innere Abstand (padding) zur Gesamtgröße der DIV-Box hinzugerechnet wird. Die Box ist also im Moment 600 + 20 Pixel breit (10 Pixel padding nach links, 10 Pixel padding nach rechts) und 40% des Bildschirms + 20 Pixel hoch (10 Pixel padding nach oben, 10 nach unten).
Dynamische Größen
Damit Boxen sich automatisch, innerhalb eines gewissen Rahmens, an Inhalte anpassen können, ist es möglich, dynamische Größen zu definieren. Wir können also eine Mindestgröße und/oder Höchstgröße festlegen, innerhalb derer sich die Box dann von selbst an die Menge des sichtbaren Inhaltes anpasst. Die Propertys dazu lauten:
Min-Height: [Mindesthöhe];
Min-Width: [Mindestbreite];
Max-Height: [Maximalhöhe];
Max-Width: [Maximalbreite];
Dynamische Größenangaben können auch einzeln vorkommen (zum Beispiel nur eine Maximalbreite mit allen anderen Angaben als fixen Wert). Selbstverständlich greifen die dynamischen Angaben aber nur, wenn wir keine fixe Angabe machen. Wenn also eine fixe Höhe wie
Height: 800px;
Definiert wird und dann eine Maximalhöhe von 600 Pixel benannt wird, wird die Box dennoch 800 Pixel hoch sein.
Overflow
Wir können Objekte per exakter Größenangabe auch kleiner als ihren Inhalt machen. Je nach Standardeinstellung des Browsers wird der Inhalt dann einfach über das Objekt herausragen, oder es erscheinen Scrollbalken mit denen man in der Box navigieren kann. Den Browser testet man, indem man die DIV-Box mit sehr viel sichtbarem Inhalt befüllen und dabei die Größe entsprechend klein halten:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
.blauebox {
Border: #0044FF solid 2px;
Background-color: #B0C5FF;
Padding: 10px;
Height: 100px;
Width: 300px;
}
</style>
</head>
<body>
<div class=“blauebox“>
<h1>Überschrift</h1>
<p>Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text </p>
</div>
</body>
</html>
Um in so einem Fall keine völlig unterschiedlichen, browserabhängigen Designs zu erhalten, gibt es einen CSS-Property, mit dem man bestimmt, wie der „Überhang“ (overflow) an Inhalt dargestellt werden soll:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
<style>
.blauebox {
Border: #0044FF solid 2px;
Background-color: #B0C5FF;
Padding: 10px;
Height: 100px;
Width: 300px;
Overflow: scroll;
}
</style>
</head>
<body>
<div class=“blauebox“>
<h1>Überschrift</h1>
<p>Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text </p>
</div>
</body>
</html>
Mittels
Overflow: scroll;
wird die Box mit Scrollbalken versehen, durch die der Benutzer navigieren kann. Folgende Möglichkeiten bietet die Overflow-Property:
- Visible Inhalt ragt über die Box hinaus
- Hidden Überstehender Inhalt wird abgeschnitten
- Scroll Scrollbalken erscheinen immer
- Auto Scrollbalken erscheinen, aber nur, wenn es nötig ist