Problem gelöst
Da jetzt alles klappt könnt ihr ja mal was zum Design sagen
_____________________________________________________________
Hallo ihr da draussen, ich habe ein klitzekleines Problem.
Funpic mag mein Design wohl nicht, könntet ihr mal einen Blick drauf werfen?
Erklärt sich eigendlich von selbst das Problem, die Knuddeluffschaltzentrale
gehört eigendlich unten in den Inhalt rein.
http://tintwo.ti.funpic.de/index.html
Quelltexte:
HTML:
HTML
<!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" xml:lang="de" lang="de">
<head>
<title>Pokémon</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="tintwo" />
<meta name="keywords" content="" />
<meta name="generator" content="" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="seite">
<!-- linker Rand -->
<div id="seitelinks">
<img src="pikachu.jpg" width="100" height="96"/>
<hr> </hr>
<img src="glumanda.jpg" width="100" height="100"/>
<hr> </hr>
<img src="bisasam.jpg" width="100" height="100"/>
</div>
<!-- rechter Rand -->
<div id="seiterechts">
<img src="pikachu.jpg" width="100" height="96"/>
<hr> </hr>
<img src="glumanda.jpg" width="100" height="100"/>
<hr> </hr>
<img src="bisasam.jpg" width="100" height="100"/>
</div>
<!-- Kopfbereich -->
<div id="kopfbereich">
<img src="pokemon_logo.jpg" width="700" height="200"/>
</div>
<!-- Steuerung -->
<div id="steuerung">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="index.html">Was ist Pokémon</a></li>
</ul>
</div>
<!-- Inhalt -->
<div id="inhalt">
<p><h1>Pokémon</h1></p>
<br />
<p>Hallo...</p>
<p>Ich heisse euch herzlich willkommen in der Welt der Pokémon. Genau in diese Welt möchte ich euch nun entführen,</p>
<p>ich hoffe natürlich das ich euere Begeisterung für Pokémon wecken oder ein wenig auffrischen kann.</p>
<br />
<br />
<hr></hr>
<br />
<br />
<p>
Vielleicht sollte ich euch noch euren treuen begleiter Knuddeluff vorstellen. Knuddeluff wird dir immer weiter helfen
wenn du ein Problem hast, sprecht ihn einfach an wenn etwas ist. Ihr erkennt ihn ausserdem daran das er in seiner
Lieblingsfarbe schreibt,
</p>
<p><font color="green">Grün!</font></p>
<br />
<p>
<img src="knuddeluff.jpg" width="180" height="220" alt="Das ist Knuddeluff." style="margin-left: 250px;"/>
</p>
<br />
<p>Doch nun wünsche ich euch noch Viel Spass in der Welt der Pokémon!</p>
</div>
<div id="knuddeluff">
<div id="knuddeluffpic">
<img src="knuddeluff1.jpg" width="60" height="80" alt="Das ist Knuddeluff." />
</div>
<p>Wie kann ich helfen?</p>
</div>
</div>
<!-- Fussbereich -->
<div id="footer">
<p><h6>©Copyright 2009 tintwo</h6></p>
</div>
</body>
</html>
Alles anzeigen
CSS:
Code
* {
margin:0;
padding:0;
}
#seite {
width: 900px;
height: 1315px;
margin: 0 auto;
margin-top: 60px;
}
#kopfbereich {
float: none;
width: 700px;
height: 200px;
margin: 0 auto;
background-color: #CCCCCC;
}
#seitelinks {
float: left;
width: 100px;
height: 1315px;
margin: 0 auto;
background-color: #CEB98E;
}
#seiterechts {
float: right;
width: 100px;
height: 1315px;
margin: 0 auto;
background-color: #CEB98E;
}
#steuerung {
float: none;
width: 700px;
height: 40px;
margin: 0 auto;
background-color: #CEB98E;
}
#steuerung ul {
list-style: none;
}
#steuerung ul a:link {
text-decoration: none;
font-family: fantasy;
color: #000000;
float: left;
padding: 9.8px;
margin-right: 5px;
background-color: #CEB98E;
border-left: 1px solid black;
border-right: 1px solid black;
}
#steuerung ul a:visited {
text-decoration: none;
font-family: fantasy;
color: #000000;
float: left;
padding: 9.8px;
margin-right: 5px;
background-color: #CEB98E;
border-left: 1px solid black;
border-right: 1px solid black;
}
#steuerung ul a:hover {
text-decoration: none;
font-family: fantasy;
color: #000000;
float: left;
padding: 9.8px;
margin-right: 5px;
background-color: #CEB674;
border-left: 1px solid black;
border-right: 1px solid black;
}
#inhalt {
font-size: medium;
font-family: Courier;
color: #333333;
letter-spacing: 0.5px;
padding: 10px;
width: 700px;
height: 960px;
margin-left: 100px;
background-color: #CCCCCC;
}
#inhalt h1 {
font-size: x-large;
font-family: Courier;
color: #333333;
text-align: center;
}
#knuddeluff {
color: green;
font-size: large;
width: 700px;
height: 115px;
margin-left: 100px;
background-color: #CCCCCC;
border-top: 15px solid #CEB98E;
}
#knuddeluffpic {
float: right;
width: 60px;
height: 80px;
background-color: #CCCCCC;
}
#footer {
width: 900px;
height: 50px;
margin: 0 auto;
margin-bottom: 150px;
background-color: #CEB98E;
}
#footer h6 {
color: #333333;
text-align: center;
}
Alles anzeigen