Allgemeiner Fragenthread II

**rgb** · 12.04.2012 21:17

Moin,

bräuchte mal Hilfe mit meinem neuen Design.
Und zwar möchte ich es vermeiden, der content-div box eine feste größe zuzuweisen. Aber da in dieser Box bis auf weiter boxen kein Inhalt wie text steht, taucht die box garnicht erst auf wenn ich keine feste Größe zuweise, hat jemand eine Idee?

http://www.rdn-online.com/hosted/test/index.html

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <title>Band Layout</title>
         <style type="text/css">
                 #background {
                         position: fixed;
                         left: 0px;
                         top: 0px;
                         width: 100%;
                         height: 100%;
                         background-image: url(images/hintergrund_kachel.jpg);
                         background-repeat: repeat-y;
                 }
                 #center {
                         width: 1000px;
                         top: 0px;
                         bottom: 0px;
                         background: #000000;
                         border: 1px solid #000000;
                         margin: 0 auto;
                 }
                 #header {
                         position: relative;
                         top: 0px;
                         bottom: 0px;
                         height: 205px;
                         background-image: url(images/header.png);
                         background-repeat: no-repeat;
                         z-index: 101;
                 }
                 #content {
                         position: relative;
                         background-color: transparent;
                         color: #FFFFFF;
                         top:0px;
                         bottom: 0px;
                         z-index: 101;
                 }
                 #band1 {
                         position: absolute;
                         left: 10px;
                         top: 10px;
                         width: 440px;
                         height: 300px;
                         background-color: transparent;
                         background-image: url(images/pics.png);
                         background-repeat: no-repeat;
                         z-index: 101;
                 }
                 #band2 {
                         position: absolute;
                         right: 10px;
                         top: 10px;
                         width: 440px;
                         height: 300px;
                         background-color: transparent;
                         background-image: url(images/band.png);
                         background-repeat: no-repeat;
                         z-index: 101;
                 }
                 #band3 {
                         position: absolute;
                         left: 10px;
                         bottom: 10px;
                         width: 440px;
                         height: 300px;
                         background-color: transparent;
                         background-image: url(images/dates.png);
                         background-repeat: no-repeat;
                         z-index: 101;
                 }
                 #band4 {
                         position: absolute;
                         right: 10px;
                         bottom: 10px;
                         width: 440px;
                         height: 300px;
                         background-color: transparent;
                         background-image: url(images/blog.png);
                         background-repeat: no-repeat;
                         z-index: 101;
                 }
                 #footer {
                         position: relative;
                         background: #b7d84b;
                         top:0px;
                         bottom: 0px;
                         height: 20px;
                         color: #008000;
                         z-index: 101;
                 }
div.box {
     border: 1px solid #000000;
     position: relative;
     width: 1000px;
     margin: 0 auto;
}
div.box_contents {
     background-color:transparent;
     color: #FFFFFF;
     height: 650px;
     position: relative;
     width: 100%;
     z-index: 101;
}
div.box_background {
     background-color: #000000;
     height: 100%;
     filter:alpha(opacity=60);
     left: 0px;
     opacity: 0.60;
     position: absolute;
     top: 0px;
     width: 100%;
     z-index: 99;
}
         </style>
</head>
<body>
         <div id="background"></div>
         <div class="box" id="box">
                 <div class="box_background"> </div>
                 <div id="header"></div>
                 <div class="box_contents">
                         <div id="band1"></div>
                         <div id="band2"></div>
                         <div id="band3"></div>
                         <div id="band4"></div>
                 </div>
                 <div id="footer">Copyright blabla</div>
         </div>
</body>
</html>

Dann habe ich noch eine Frage bzgl.

HTML-Code:

<html xmlns="http://www.w3.org/1999/xhtml">

Und zwar verstehe ich nicht so richtig was es mit diesem xmlns="..." auf sich hat, der Validator hat mir das so vorgeschlagen und ich habe mir das alles durchgelesen was da stand aber den Sinn doch nicht verstanden, kann jemand das einfach erläutern?

**Whiz-zarD** · 13.04.2012 19:23

Ich weiß gar nicht, wo man da am Besten anfangen kann, da dort doch recht viele Fehler drinnen sind.

Ich hab mal auf die Schnelle die Webseite nachgebastelt. Das liegt im Anhang als Zip-Datei.

Transparenz ist noch so ne Sache. Da kann man lieber auf einen alten Trick zurückgreifen:
Man nehme eine .png Datei, die 1x1 Pixel groß ist, mit einem Alpha-Kanal und benutzt dieses als Hintergrund.

Diese ganze z-index Geschichte braucht man auch nicht und band1, band2, ... kann man auch zusammenfassen.

(Muss aber zugeben, dass meine Kenntnisse ein wenig eingerostet sind, da ich kein Bock mehr auf ~~diesen Mist~~ Webentwicklung habe)

xmlns heißt "XML Namespace". Um das zu verstehen, muss man wissen, dass HTML auf XML basiert. Der Namespace wird verwendet, um das Vokabular eindeutig zu identifizieren.
Alle Elemente zwischen den Element-Paar <html> gehören in deinem Fall zum Namensraum "xhtml". Namensräume werden aber erst wichtig, wenn man mehrere XML-Sprachen mischen möchte. Es gibt ja mehr Sprachen, als nur HTML, die auf XML basieren. Ein Problem, was nämlich auftauchen kann, wenn man zwei Sprachen mischen möchte, die teilweise die selben Elementnamen besitzen. Ein Parser hätte Probleme, die Elemente richtig der Sprache zuzuordnen.
Mit diesem Namespace-Mechanismus hätte man nun die Möglichkeit, die Sprachen von einander zu trennen.

Thema: Allgemeiner Fragenthread II

Themen-Optionen

Anzeige

Hybrid-Darstellung

Berechtigungen