nicht angemeldet
Höhe der Seite passt sich Content nicht an
0 0 
Gunnar Bittersmann
0 Gunnar Bittersmann
0
Höhe der Seite passt sich Content nicht an
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;
}
-
હેલો
ich bin sowohl hier ein Neuling als auch in HTML/css und ich hoffe ihr verzeiht mir, falls meine Frage allzu blöd ist.
Blöd ist, wer nicht fragt, wenn er nicht weiß.
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.
Das liegt an den vielen floats, die du hast. Manchmal ist weniger mehr.
http://fiddle.jshell.net/DLAj9/show/
Es reicht, wenn du
#section-wrapper { margin-bottom: 50px; width: 100%; /* float:left; <- am besten ganz weg */ overflow:hidden; }änderst. http://fiddle.jshell.net/PD4f8/show/, Quelltext
બાય
--
.
..: -
@@celdri:
nuqneH
Ein paar Anmerkungen zum HTML:
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Die zweite Zeile ist unsinnig. Die Zeichencodierung sollte im Dokument nur einmal angegeben werden; in HTML5 auf die erste Art.
<div id="side-wrapper">
Das Element ist unsinnig.
Die ID auch. „Side“ heißt Seite im Sinne von rechts oder links. Eine Buchseite oder Webseite heißt englisch „page“.
<header> <h1>Die Überschrift</h1> </header> <div id="breadcrumb"> Startseite </div>Eine Breadcrumb-Navigation ist etwas, was durchaus mit ins header-Element gehört.
<section id="sidebar">Wenn es das Element Inhalt enthält, der nicht direkt zum Hauptinhalt gehört, sollte das kein section-Element, sondern ein aside-Element sein.
Hier scheint es die Navigation zu beinhalten, also nav (statt section, die inneren nav fallen weg).
<section id="content">Ein sicheres zeichen, dass hier
<[link:http://www.w3.org/TR/html5/grouping-content.html#the-main-element@title=main] role="main">statt section angebracht ist.Generell gilt: section dient zur Strukturierung des Inhalts; nicht zur Strukturierung der Seite.
Neue Elemente für die Seitenstruktur, Inhalte strukturieren
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
@@celdri:
nuqneH
@font-face
{
font-family: Architect;
src: url(../fonts/ArchitectsDaughter.ttf);
}@font-face
{
font-family: Libertine;
src: url(../fonts/LinLibertine_R.woff);
}Wenn’s cross-browser funktionieren soll, kann’s nicht schaden, die Schriften in verschiedenen Formaten anzubieten.
font-size: 14pt;
pt ist für Druckausgaben. Das ist keine geeignete Einheit für die Bildschirmdarstellung. Verwende px oder noch viel besser em bzw. rem.
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 */Bis auf die Zeilen mit -webkit-Präfix und ohne Präfix kannst du alles andere löschen. -moz- und -o- sind lange obsolet, -ms- hat es für Gradienten nie gegeben. http://caniuse.com/css-gradients
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;Bei border-radius können sämtliche Präfixe weg. http://caniuse.com/border-radius
#sidebar{
background: rgba(100,100,100,0.4);Hier fehlt ein Fallback für Browser, die rgba() nicht kennen. Einfach davor eine opake Hintergrundfarbe angeben:
background: #646464;
background: rgba(100,100,100,0.4);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;Syntaxfehler: '-' fehlt.
Außerdem gilt das für Gradienten Gesagte, s.a. http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/#comment-901
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Vielen Dank euch!
Ich werd mir das alles mal in Ruhe anschauen, vor allem <main role="main"> hab ich ehrlich gesagt noch gar nicht gehört. Hab das meiste, was ich bisher weiß und eben auch die Strukturierung (auch das mit den Floats und den vielen div-Elementen) aus einer Tutorial-Reihe. Diese hier, falls es jemanden interessiert: http://www.youtube.com/watch?v=kqMVdEgWN40.Danke nochmal und Gruß
celdri