nicht angemeldet
Hallo zusammen,
ich bin sowohl hier ein Neuling als auch in HTML/css und ich hoffe ihr verzeiht mir, falls meine Frage allzu blöd ist.
Ich versuche eine Website aufzubauen und habe das Problem, dass die Höhe meines Wrappers, in den ich den ganzen restlichen Inhalt eingepackt hab, sich nicht automatisch der Höhe des Inhalts anpasst. Ich kann die Höhe natürlich von Hand mit height einstellen, aber das müsste ich ja jedes Mal machen, wenn ich an der Seite was ändere, daher hätte ich gerne, dass das automatisch passiert.
Ich habe mal die ganzen Dateien angehänt, da ich leider nicht sagen kann, wo genau der Knackpunkt ist. Es ist aber auch noch nicht so viel, ich hoffe ihr könnt mir helfen...
Grüße und Danke
celdri
<!doctype html>
<html>
<head>
<!-- meta description muss noch geschrieben werden -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Autor">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="index_fragen.css" title="Mustertemplate-Style">
<title> Der Titel </title>
</head>
<body>
<div id="side-wrapper">
<header>
<h1>Die Überschrift</h1>
</header>
<div id="breadcrumb">
Startseite
</div>
<div id="section-wrapper">
<section id="sidebar">
<h3> Hilfe?! </h3>
<nav>
<ul class="menu">
<li><a href="intro.html">Was soll das überhaupt?</a></li>
<li><a href="description.html">Wie funktioniert das?</a></li>
</ul>
</nav>
<h3> Blablabla </h3>
<nav>
<ul class="menu">
<li><a href="#">... blabla</a></li>
<li><a href="#">... blabla</a></li>
<li><a href="#">... blabla</a></li>
<li><a href="#">... blabla</a></li>
</ul>
</nav>
</section>
<section id="content">
Hier kommt der Text hin
</section>
</div>
<footer>
hier eventuell der Footer
</footer
</div>
</body>
</html>
/*
author: Autor
SOFTWARE
Editor: Kate
Images: Inkscape, GIMP
*/
/* ******* ALLGEMEIN ********************************
****************************************************/
*{
margin: 0;
padding: 0;
}
/* ******* TYPOGRAPHY *******************************
****************************************************/
@font-face
{
font-family: Architect;
src: url(../fonts/ArchitectsDaughter.ttf);
}
@font-face
{
font-family: Libertine;
src: url(../fonts/LinLibertine_R.woff);
}
body{
font-family: Libertine, serif;
font-size: 14pt;
color: #000000;
}
h1{
font-family: Architect, sans-serif;
color: #000000;
}
#breadcrumb{
font-family: Libertine, serif;
font-size: 13pt;
}
h3{
font-family: Architect, sans-serif;
font-size: 16pt;
color: #000000;
}
#sidebar .menu li a{
font-family: Libertine, serif;
font-size: 14pt;
}
footer{
font-family: Libertine, serif;
font-size: 13pt;
}
/* ******* LAYOUT ***********************************
****************************************************/
body{
background: #89d789;
}
#side-wrapper{
margin: 20px;
min-width: 900px;
max-width: 1900px;
min-height: 500px;
height: auto !important;
background: #62c8f5; /* Old browsers */
background: -moz-linear-gradient(top, #62c8f5 0%, #62c8f5 320px, #96d8f5 320px, #96d8f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62c8f5), color-stop(320px,#62c8f5), color-stop(320px,#96d8f5), color-stop(100%,#96d8f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #62c8f5 0%, #62c8f5 320px, #96d8f5 320px, #96d8f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #62c8f5 0%, #62c8f5 320px, #96d8f5 320px, #96d8f5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #62c8f5 0%, #62c8f5 320px, #96d8f5 320px, #96d8f5 100%); /* IE10+ */
background: linear-gradient(to bottom, #62c8f5 0% #62c8f5 320px, #96d8f5 320px, #96d8f5 100%); /* W3C */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-style:solid;
border-width:3px;
border-color:#666666;
}
header{
height: 280px;
}
h1{
line-height: 280px;
text-indent: 0px;
text-align: center;
text-shadow: 2px 1px 2px #262626;
}
#breadcrumb{
text-indent: 100px;
height: 40px;
line-height: 40px;
background: #666666;
color: #ffffff;
}
#section-wrapper{
margin-bottom: 50px;
float:left;
width: 100%
}
#sidebar{
width: 280px;
float:left;
margin-top: 70px;
margin-left: 60px;
background: rgba(100,100,100,0.4);
text-indent: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 10px 2px #525252;
box-shadow: 2px 2px 10px 2px #525252;
}
h3{
margin-left: 5px;
margin-top: 15px;
margin-bottom: 10px;
}
#content{
float:left;
}
footer{
text-align: center;
color: #ffffff;
height: 40px;
width: 100%;
line-height: 40px;
background: #666666;
float:left;
}
/* ******* NAVIGATION********************************
****************************************************/
#sidebar .menu{
list-style-type: none;
width: 280px;
}
#sidebar .menu li a{
width: 280px;
height: 35px;
display: block;
float: left;
text-decoration: none;
color: #000000;
line-height: 35px;
text-indent: 30px;
border-bottom: 1px dotted #666666;
webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#sidebar .menu li a:hover{
background: #bbbbbb;
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;
}
#sidebar .menu li:first-child a{
border-top: 1px dotted #666666;
}
#sidebar .menu li:last-child a{
margin-bottom: 20px;
}
Gunnar Bittersmann