Beispiellösung der Hausaufgabe zum 09.11.2015 – Einspaltiges Layout

Stildefinitionen in css/style.css

body {

	font-family: Comic Sans MS;
	background-color: pink;
	color: brown;
	
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

header {
	
	height: 100px;
	background-color: teal;
	padding: 25px;
}

nav {

	background-color: yellow;
	padding: 15px;
}

main {
	
	background-color: white;
	padding: 25px;
}

footer {
	padding: 25px;
	background-color: lightblue;
	text-align: center;
}

/* Kurzschreibweise */
header, main, footer, article {
	
	padding: 25px !important;
}

article {
	text-align: justify;
	border: 2px solid orange;
	/* solid: durchgezogene Linie
		dotted: gepunktete L.
		dashed: gestrichelte L.
	*/
	margin-bottom: 15px;
	display: inline-block;
}

article img {
	
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
	width: 300px;
}

p {
	/* Blocksatz */
	text-align: justify;
}

/* Jedes Bild innerhalb jedes Absatzes */
p img {

	float: right;
	width: 250px;
	border: 3px dashed purple;
}
/* Überschreiben... */
.teaserbild {

	float: left;
	margin-right: 25px;
	margin-bottom: 25px;
	padding: 10px;
}

a {
	
	text-decoration: none;
	color: blue;
}

nav ul {

    text-align: center;
    margin: 0;
    padding: 0;
}

nav ul li {

    display: inline-block;
}

nav ul li a {

    padding: 10px;
    color: red;
    background-color: lime;
}

nav ul li a:hover {

    background-color: #00d6b2;
    color: white;
}

Startseite Index.htm

<!DOCTYPE html>

<html>
	<head>
		<!-- Metainformationen -->
		<title>Star Wars - Jar Jar Binks</title>
		<meta charset="utf-8">
		<meta name="description"
			content="Eine wunderschöne Fanseite">
		<meta name="keywords"
			content="Star Wars, Jar Jar Binks">
		<meta name="author"
			content="Jan Wieners">
		
		<link type="text/css"
			rel="stylesheet"
			media="all"
			href="css/style.css">
		<!--
			media="all": Stildefinitionen für alle Ausgabegeräte
			media="screen": Stildef. für Anzeige auf Monitoren
			media="print": Stildef. nur für Drucker
		-->
	</head>
	
	<body>
	
		<header>
			Logobereich
		</header>
		
		<nav role="navigation">
			<ul>
				<li><a href="#">Wikipedia</a></li>
				<li><a href="#">Filmstarts</a></li>
				<li><a href="#">Youtube</a></li>
			</ul>
		</nav>
		
		<main role="main">
			<article>
				<h1>The curious life of Jar Jar Binks</h1>
				<img src="http://www.fischkiller.lima-city.de/bilder/promi_memory/promi_memory55.jpg"
				alt="Jar Jar Binks und Ronaldinho">			 
				Minions ipsum me want 
				<a href="http://www.bananen-seite.de/">
				bananaaa
				</a>! Tank yuuu! Baboiii bee do bee do bee do underweaaar aaaaaah para tú bappleees poopayee. Hahaha bappleees jeje daa uuuhhh pepete tulaliloo potatoooo po kass belloo! Para tú. Underweaaar wiiiii daa poulet tikka masala bappleees. Aaaaaah underweaaar po kass po kass. Jiji para tú bappleees tatata bala tu jiji belloo! Underweaaar poopayee. Poopayee jeje belloo! Bee do bee do bee do tulaliloo aaaaaah.
			</article>
			<article>
				<h1>Zweiter Beitrag über Jar Jar Binks</h1>
				<img src="img/binks.jpg"
				alt="Ronaldinho, again">
				Bananaaaa potatoooo jeje la bodaaa underweaaar jiji bananaaaa. Me want bananaaa! tank yuuu! Tulaliloo me want bananaaa! La bodaaa me want bananaaa! Jiji la bodaaa baboiii poulet tikka masala. Hana dul sae wiiiii potatoooo potatoooo poopayee jeje daa underweaaar. Para tú tulaliloo baboiii underweaaar wiiiii potatoooo jiji underweaaar butt chasy. Jiji butt baboiii chasy baboiii me want bananaaa! Butt bee do bee do bee do ti aamoo! Poopayee. Jeje poulet tikka masala ti aamoo! Jiji tatata bala tu butt. Wiiiii uuuhhh jiji underweaaar jeje. Bee do bee do bee do potatoooo butt bappleees. Hahaha me want bananaaa! Belloo! Underweaaar uuuhhh hahaha.
			</article>
			<article>
				<h1>Zweiter Beitrag über Jar Jar Binks</h1>
				<img src="img/binks.jpg"
				alt="Ronaldinho, again">
				Bananaaaa potatoooo jeje la bodaaa underweaaar jiji bananaaaa. Me want bananaaa! tank yuuu! Tulaliloo me want bananaaa! La bodaaa me want bananaaa! Jiji la bodaaa baboiii poulet tikka masala. Hana dul sae wiiiii potatoooo potatoooo poopayee jeje daa underweaaar. Para tú tulaliloo baboiii underweaaar wiiiii potatoooo jiji underweaaar butt chasy. Jiji butt baboiii chasy baboiii me want bananaaa! Butt bee do bee do bee do ti aamoo! Poopayee. Jeje poulet tikka masala ti aamoo! Jiji tatata bala tu butt. Wiiiii uuuhhh jiji underweaaar jeje. Bee do bee do bee do potatoooo butt bappleees. Hahaha me want bananaaa! Belloo! Underweaaar uuuhhh hahaha.
			</article>
		</main>
		
		<footer>
			&copy; 2015 Jan Wieners | <a href="#">Impressum</a>		
		</footer>
		
	</body>
</html>

Detailseite detailseite.htm

<!DOCTYPE html>

<html>
	<head>
		<!-- Metainformationen -->
		<title>Star Wars - Jar Jar Binks</title>
		<meta charset="utf-8">
		<meta name="description"
			content="Eine wunderschöne Fanseite">
		<meta name="keywords"
			content="Star Wars, Jar Jar Binks">
		<meta name="author"
			content="Jan Wieners">
		
		<link type="text/css"
			rel="stylesheet"
			media="all"
			href="css/style.css">
		<!--
			media="all": Stildefinitionen für alle Ausgabegeräte
			media="screen": Stildef. für Anzeige auf Monitoren
			media="print": Stildef. nur für Drucker
		-->
	</head>
	
	<body>
	
		<header>
			Logobereich
		</header>
		
		<nav role="navigation">
			<ul>
				<li><a href="#">Wikipedia</a></li>
				<li><a href="#">Filmstarts</a></li>
				<li><a href="#">Youtube</a></li>
			</ul>
		</nav>
		
		<main role="main">
			<article>
				<h1>The curious life of Jar Jar Binks</h1>
				<img src="http://www.fischkiller.lima-city.de/bilder/promi_memory/promi_memory55.jpg"
				alt="Jar Jar Binks und Ronaldinho">			 
				<p>
					Minions ipsum wiiiii daa para tú. Hana dul sae tatata bala tu wiiiii po kass aaaaaah potatoooo poopayee tank yuuu! Ti aamoo! belloo! Jeje aaaaaah wiiiii jeje butt. Baboiii tank yuuu! Uuuhhh gelatooo jiji jiji po kass. Bappleees hahaha wiiiii bananaaaa hana dul sae underweaaar baboiii. Gelatooo butt uuuhhh baboiii tulaliloo tank yuuu! Tulaliloo wiiiii butt jeje tulaliloo.
				</p>
				<p>
					Baboiii pepete uuuhhh bee do bee do bee do po kass bappleees hahaha. Underweaaar jiji baboiii bappleees tank yuuu! Me want bananaaa! Wiiiii hahaha gelatooo. Chasy chasy ti aamoo! Baboiii. Para tú tulaliloo belloo! Underweaaar gelatooo bee do bee do bee do bananaaaa poulet tikka masala. Tank yuuu! wiiiii hahaha tatata bala tu me want bananaaa! Uuuhhh po kass tulaliloo hana dul sae ti aamoo! Jeje. La bodaaa tatata bala tu underweaaar tank yuuu! Bappleees belloo! Aaaaaah tulaliloo. Hana dul sae pepete underweaaar ti aamoo! Baboiii butt.
				</p>
				<p>
					Poopayee potatoooo baboiii uuuhhh aaaaaah poulet tikka masala jeje. Butt underweaaar wiiiii bappleees tulaliloo poulet tikka masala la bodaaa ti aamoo! Bee do bee do bee do belloo! Hahaha po kass jiji aaaaaah tulaliloo daa. Uuuhhh aaaaaah poulet tikka masala wiiiii baboiii. Hahaha tank yuuu! Underweaaar tulaliloo me want bananaaa! Butt po kass hahaha gelatooo poulet tikka masala. Me want bananaaa! gelatooo para tú potatoooo hahaha butt po kass potatoooo wiiiii hana dul sae.
				</p>
			</article>

		</main>
		
		<footer>
			&copy; 2015 Jan Wieners | <a href="#">Impressum</a>		
		</footer>
		
	</body>
</html>

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.