Breite von Elementen


(letzte Änderung an dieser Seite: 03.08.2010)

Folien



(letzte Synchronisation der PDF-Präsentation: 02.08.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.

***** Übungen: CSS - Breite von Elementen *****

CSS_10-1: Listing interpretieren

Skizzieren Sie auf einem Stück Papier, wie die Seite im Browser ungefähr aussehen wird.


Quellcode:

HTML-Code
<html>
<head>
	<title>Uebung: Breite von Elementen bestimmen</title>
	<style type="text/css">
		ul.schmal
		{
			width : 300px;
		}
		ul.breit
		{
			width : 80%;
		}
		p.schmal
		{
			width : 20%;
		}
		p.breit
		{
			width : 2000px;
		}
	</style>
</head>
<body>
 
<p class="breit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<p class="schmal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<ul class="schmal">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
<ul class="breit">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
</body>
</html>
 



CSS_10-2: p und ul Breiten via gebundene Klasse zuweisen

Sorgen Sie über Stildefinitionen dafür, dass
1. die ersten beiden Absätze 70% der Breite des Browserfensters einnehmen.
2. die beiden Listen genau 400px breit sind.
3. der Absatz unter den Listen genau 800px breit ist.



Quellcode:

HTML-Code
<html>
<head>
	<title>Uebung: Breite zuweisen</title>
</head>
<body>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
<ul>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
</body>
</html>
 




CSS_10-3: Breiten ändern

Bedienen Sie sich für diese Aufgabe des folgenden Quellcodes.Verändern Sie ihn möglichst unaufwändig so, dass
1. alle Elemente höchstens 80% der Breite des Browserfensters einnehmen.
2. alle Elemente genau 450px breit sind.


HTML-Code
<html>
<head>
	<title>Uebung: Ungebundene Klassen</title>
</head>
<body>
 
<h1 class="informationsbereich">Unsere AGB</h1>
<p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<ul class="liste">
	<li>Sie haben eine Garantie von einem Jahr.</li>
	<li>Wir geben drei Jahre Gewährleistung auf alle Produkte.</li>
	<li>Sie können alle Einkäufe innerhalb von 30 Tagen ohne die Angabe von Gründen zurückgeben und erhalten den vollen Kaufpreis erstattet.</li>
</ul>
 
<p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1 class="informationsbereich">Kontakt</h1>
 
<p class="fliesstextfett">Kontaktieren Sie bitte eine der folgenden Stellen:</p>
 
<h2 class="informationsbereich">Frau Schmitt</h2>
 
<p class="personeninfo">Frau Schmitt ist verantwortlich für PR und Marketing.</p>
 
<p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h2 class="informationsbereich">Herr Schmitt</h2>
 
<p class="personeninfo">Herr Schmitt ist verantwortlich für Versand und Zustellung.</p>
 
<p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h2 class="informationsbereich">Herr Maier</h2>
 
<p class="personeninfo">Herr Maier ist verantwortlich für Rücksendungen.</p>
 
<p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<ul class="liste">
	<li>Rücksendungen müssen innerhalb von 30 Tagen nach Kaufdatum erfolgen.</li>
	<li>Die Ware muss originalverpackt sein.</li>
</ul>
 
<h1 class="informationsbereich">Probleme?</h1>
 
<p class="fliesstextfett">Sollten bei Ihrer Bestellung Probleme auftreten, wenden Sie sich bitte an Herrn Super.</p>
 
</body>
</html>
 


Nach oben