body und wrapper passen sich dem Inhalt nicht an

flori_weber · #1 (**permalink**) 26.06.2013, 22:01

Guten Abend,

ich sitze schon ein wenig länger an einem Problem und komme nicht weiter.
Im Internet finde ich auch nicht die wirklich richtige Lösung, oder ich suche einfach falsch. Deshalb hoffe ich, dass ich hier Hilfe finde.

Ich bin gerade dabei eine Internetseite zu erstellen. Die Seite macht auch fast alles was sie soll, aber ich habe das Problem, dass sich der body-Bereich und der wrapper zum zentrieren der Seite nicht an den Inhalt anpasst. Deshalb wird z.B. der Hintergrundverlauf nicht richtig angezeigt oder der Abstand unterhalb der Seite kann nicht berücksichtigt werden.

Was kann ich tun, damit sich der body und dann auch der wrapper an den Inhalt anpasst?

HTML-Code:

<html>
<body>
<div id="gruener_verlauf"><img src="img/hg_gruen_2800x270.png" border="0" alt="grüner Hintergrund"></div>
<div id="wrapper">
	<div id="logo">Bild</div>
        <div id="sprache">...</div>
        <div id="navi">...</div>

        <div id="schatten">
	        <div id="contentfloatholder">
		        <div id="center">
			      <div id="news"></div>
		        </div>
		        <div id="left">
			      <div id="content">Hier steht der Inhalt drin.</div>
		        </div>
	       </div>
               <div id="footer"></div>
        </div>
</div> <!-- Ende wrapper -->

</body>
</html>

Code:

* {
margin: 0;
padding:0;
}

html, body {
height:100%;
background-color:#cdcdcd;
}

body {
text-align:center; /* horizontal centering for IE Win quirks */
background-image: url(../img/verlauf_grau.png);
background-repeat: repeat-x;
overflow-x: hidden;
}

#gruener_verlauf {
top: 75px;
position: absolute;
margin-left: -250px;
}

#wrapper {
text-align:left;
width: 927px;
margin:0 auto;
position: relative;
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: visible !important; /* FF Scroll-leiste */
}

#schatten {
position: absolute;
top: 125px;
width: 927px;
height: auto;
box-shadow: 0 0 5px 1px #000000;
-webkit-box-shadow: 0px 0px 5px 1px #000000;
-moz-box-shadow: 0px 0px 5px 1px #000000;
}

#logo {
position: absolute;
top: 25px;
left: -35px;
height: 140px;
width: 352px;
z-index: 10;
}

#sprache {
position: absolute;
top: 87px;
left: 745px;
height: 26px;
z-index: 9;
}

#navi {
position: absolute;
top: 125px;
left: 305px;
height: 40px;
line-height: 40px;
width: 622px;
z-index: 9;
background-image: url(../img/verlauf_navi.png);
background-repeat: repeat-x;
}

#header_bild {
position: absolute;
top: 40px;
left: 0px;
height: 180px;
width: 927px;
z-index: 8;
}

#footer {
clear: both;
height: 43px;
line-height: 43px;
background-image: url(../img/verlauf_fuss.png);
background-repeat: repeat-x;
padding-left: 60px;
}

#contentfloatholder {
float: left;
width: 100%;
position: relative;
margin-top: 0px;
padding-bottom: 30px;
background-color: #FFFFFF;
}

#center {
float: left;
width: 100%;
margin-right: -95%;
}

#news {
margin-top: 240px;
margin-left: 687px;
margin-right: 18px;
}

#left {
float: left;
width: 647px;
margin-left: -5%;
}

#content {
margin-left: 60px;
margin-top: 240px;
}

Vielen Dank!

Gruß,
Florian

explanator · #2 (**permalink**) 27.06.2013, 06:44

Wie es ausschaut, hast du gleich mehrere Schwierigkeiten.
Du musst verstehen wie sich Html aufbaut, wie sich die Elemente anordnen und was Block-, Inline- und Inlineblockelemente sind.

Es fehlt bei dir im HTML der Dokumententyp, die Zeichenkodierung und der Titel, das ist schon mal essentiell.

Das Dokument beginnt mit dem Element html, das heisst du kannst dort schon mal die Hintergrundfarbe der gesamten Webseite festlegen.
Danach kommt body. Soll die Seite grundsätzlich zentriert mit einer festen Breite dargestellt werden, kannst du das dort festlegen. Das erspart dir den Wrapper.

Hintergrundverläufe mit Bildern zu machen ist nicht mehr aktuell, das macht man mit CSS und Hintergrundverläufen.
Du kannst dazu Ultimate CSS Gradient Generator - ColorZilla.com verwenden, das macht die Sache einfacher.

Im CSS hast du den unversalselektor * verwendet um allen Elementen jegliche Abstände zu nehmen. Das ist nicht praxistauglich und kann später zu Problemen führen. Wenn du den Abstand vom body weg haben willst, dann reicht dort ein

HTML-Code:

body {margin:0;}

und der Rahmen ist verschwunden.

Die Textzentrierung für alte IE Browser ist Vergangenheit. Konzentriere dich auf die aktuellen Browser und für IE brauchst du lediglich eine Lösung für IE8 und evtl 9. Die älteren sind so gut wie ausgestorben und IE10 kann CSS3.
Schaue auch immer bei Can I use... Support tables for HTML5, CSS3, etc nach, welche Browser schon welche CSS Eigenschaften und andere Funktionen, die du nutzen willst beherrschen.

Im CSS muss nichts mit !important gekennzeichnet werden, lass es weg.

Nutze alle Elemente von HTML 5, das ist seit Dezember 2012 Standard. Eine Übersicht findest du hier HTML5 Elemente.

Vermeide absolute Positionierungen, speziell wenn du nicht weisst, wie sie sich verhalten. Im den meisten Fällen kann man darauf verzichten. Gleiches gilt für Z-Index.

Verwende für deine IDs und Klassen aussagekräftige Namen.
Also nicht Schatten oder gruener_Verlauf. Schatten ist eine Eigenschaft. Besser article, content, wrapper, section, oder deutsche Namen wenn dir das mehr liegt. Du solltest aber konsistent sein und ein Sprachwirrwarr vermeiden.

Ebenso solltest du dir im klaren sein ob du ein festes Design haben willst oder ein flexibles. Abstände (Margin, Padding) mal in Pixel und mal in Prozentwerten anzugeben macht die Sache nur kompliziert.

Verwende einen Editor der die Seite in UTF-8 abspeichern kann, so kannst du Umlaute direkt verwenden.

Zum Testen nehme Firefox und installiere dir das Addon Firebug um dir die Entwicklung deiner Seite zu erleichtern.

Ich würde jetzt an deiner Stelle noch mal neu anfangen..

Manfred62 · #3 (**permalink**) 27.06.2013, 15:05

@flori_weber
ich vermute mal, du bist noch Einsteiger? Dann schau dir das hier mal an: Little Boxes

wegen dem Universalselektor:

Code:

* {
margin: 0;
padding: 0;
}

klar kann man das so machen. Bei Formularelementen gibts Unstimmigkeiten. Ansonsten kein Problem.

zu der Anmerkung html5: kann man, muss man nicht. Als Einsteiger tust du dich sicher leichter mit der "alten" Variante.

explanator · #4 (**permalink**) 27.06.2013, 16:53

Zitat:

Zitat von Manfred62

klar kann man das so machen. Bei Formularelementen gibts Unstimmigkeiten. Ansonsten kein Problem.

Das Entfernen der Abstände aller Elemente ist bei manchen Browsern für Formularelemente eine Katastrophe.
Für Anfänger stellt sich die Hürde auf bei Listenelementen, Überschriften und Quotes(Zitate).

Das hinterher wieder gerade zu biegen ist für viele nicht machbar.

Interessanter Artikel dazu: Verrückte Formulare | Webkrauts

Und warum der Doctype aus HTML5 Anfängern mehr Schwierigkeiten machen sollte als andere doctypes leuchtet mir nicht ein.
Microsoft empfiehlt ->Aktivieren der Unterstützung von Standards (Windows)

Manfred62 · #5 (**permalink**) 27.06.2013, 17:06

Zitat:

Zitat von Manfred62

Bei Formularelementen gibts Unstimmigkeiten.

gesehen?

Zitat:

Zitat von explanator

Nutze alle Elemente von HTML 5

Oh, du redest nur vom doctype?

Egal. Ich halt mich raus...

explanator · #6 (**permalink**) 27.06.2013, 17:24

Zitat:

Zitat von Manfred62

gesehen?

Ja sicher. Du schriebst aber auch: "ansonsten kein Problem", und dem neige ich zu widersprechen.

Zitat:

Oh, du redest nur vom doctype?

Nein, ich meine es schon so wie ich schrieb. Warum soll man nur div verwenden, wenn das Element Section angebrachter wäre. Ist jetzt nur mal ein Beispiel.

Zitat:

Egal. Ich halt mich raus...

Schade eigentlich.

flori_weber · #7 (**permalink**) 28.06.2013, 13:24

Hallo,

Der Hinweis mit der absoluten Positionierung war die Hilfe zu meiner eigentlichen Frage. Damit hat nun alles geklappt.

Den angehängte Code war auf das nötige reduziert, deshalb passen einige Hinweise hier nicht rein.
Und was die Unterstützung von alten Browsern und die Verwendung von HTML5 betrifft, da gibt es verschiedene Meinungen und ich denke jeder sollte selber entscheiden, ob er die mit berücksichtigt oder nicht. Ein richtig oder falsch gibt es da nicht.

Gruß,
Florian Weber

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Content Bereich wächst nicht mit dem Inhalt	claude	CSS	2	03.05.2011 20:09
Ein Bild "rechts unten" positionieren	bueno	CSS	5	04.04.2006 14:47
Browserneurose	SimonWpt	CSS	39	15.07.2005 10:51
Scrollbares Textfeld mit purem CSS	Dancer	CSS	6	24.01.2005 15:58
Breite von DIVs	Daniel	CSS	8	23.06.2003 18:01