div-Container an Inhalt anpassen.

Gingerbread23

Hey,

ich hab mir gestern vorgenommen wieder ein wenig HTML zu lernen. Da ich noch nie richtig viel mit HTML gemacht aheb (und dazu ist es etwas länger her.), darum wollte ich wieder bei den basics anfangen.

Nun habe ich eine kleine Website erstellt, sie gewinnt zwar kein Schönheitspreis doch es funktioniert.
Nun hab ich aber das Problem das der div-Container der für den Inhalt zuständig ist immer gleich groß ist, ich hätte aber gerne das er sich dem Text anpasst (Zusammen mit der Navigationsleiste.).

Nun wie mach ich das am einfachsten?

Hier mein aktueller Code:

index.html

HTML

<html>
<head>
	<title>Titel</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="website">
		<div id="logo">
		    <a href="index.html"><img src="images/logo.png"/></a>
		</div>
		<div id="header">
			<h1>Titel der Website</h1>
		</div>
		<div id="main">
			<div id="menu">
                 <ul id="Navigation">
                    <li><h2>Navigation</h2></li>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="news.html">News</a></li>
                    <li><a href="platzhalter1.html">Platzhalter</a></li>


                    <li><h2>Info</h2></li>
                    <li><span>Kontakt</span></li>
                    <li><a href="impressum.html">Impressum</a></li>
                    <li><a href="platzhalter2.html">Platzhalter</a></li>
                 </ul>
			</div>
			<div id="content">
				<div id="content-text">
					<h1>Kontakt</h1>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
					nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
					volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
					ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
					Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
					molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
					at vero eros et accumsan et iusto odio dignissim qui blandit praesent
					luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
					<p>&nbsp;</p>
					<p>Li Europan lingues es membres del sam familie. Lor separat existentie
					es un myth. Por scientie, musica, sport etc., li tot Europa usa li
					sam vocabularium. Li lingues differe solmen in li grammatica, li
					pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&Dagger; de
					un nov lingua franca: on refusa continuar payar custosi traductores.
					It solmen va esser necessi far uniform grammatica, pronunciation
					e plu sommun paroles.</p>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Copyright: -Name-<p>
		</div>
	</div>
</body>
</html>

Alles anzeigen

style.css

Code

body {
background-color: #3E3E3E;
text-align: center;
}


#website {
width: 980px;
margin: 0 auto;
}


#logo {
float: left;
width: 200px;
height: 150px;
background: #B3B3B3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}


#logo img {
padding-top: 20px;
}


#header {
float: right;
width: 775px;
height: 150px;
float: right;
background: #B3B3B3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}


#header h1 {
text-align: left;
margin-left: 15px;
padding-top: 25px;
font-size: 40px;
font-weight: bold;
}


#main {
width: 980px;
}


#menu {
clear: both;
float: left;
width: 200px;
height: 600px;
background: #B3B3B3;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}


ul#Navigation {
width: 170px;
padding: 15px;
margin: 0;
}


ul#Navigation li {
list-style: none;
margin: 0.4em;
padding: 0;
}


ul#Navigation a, ul#Navigation h2, ul#Navigation span {
display:block;
padding: 0.2em;
text-decoration: none;
font-weight: bold;
border: 1px solid black;
border-left-color: white;
border-top-color: white;
color: maroon;
background-color: #ccc;
}


ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black;
border-top-color: black;
color: white;
background-color: gray;
}


ul#Navigation h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: black;
background-color: #eee;
}


#content {
float: right;
width: 775px;
height: 600px;
background: #B3B3B3;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}


#content-text {
text-align: left;
margin: 15px;
}


#footer {
width: 980px;
height: 30px;
background: #B3B3B3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
clear: both;
}

Alles anzeigen

Hoffe jemand kann mir helfen.

Mfg Gingerbread

Jetzt mitmachen!