vermutlich verschachtelungsproblem

eS-COM

hallo
ich brauche hilfe bei einem projekt in der ausbildung

folgende 2 probleme:
1. der content soll an die fenstergröße (ich glaub heist viewport) angepasst werden footer und header fest ebenso der hintergrund und navigation ich schaffe es nicht das der content beim footer aufhört ich wollte eine unsichtbare klasse machen auf der selben höhe wie der footer und den content nur bis dahin laufen lassen aber leider hat das nicht gefunzt
2. sollen rechts und links hintergrundgrafiken hinkommen die aber auch hinter der navigation sind ich schätze mal das kann man mit 2 weiteren klassen machen die in ebene 2 verschoben werden nur hab ich grad keine idee wie ich das durchführen soll

kann mir jemand helfen? ich kann die bilder und den aktuellen stand uploaden als rar datei aber tpf ist hier definitiv geblockt

der code (ich kann hier kein ftp uploaden is vom proxy gesperrt)

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Vorlage</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="thrColLiqHdr.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* Dieser negative Rand mit 1 Pixel hat   in jeder Spalte in diesem Layout die gleiche korrigierende Auswirkung.   */
ul.nav a { zoom: 1; }  /* Mit der zoom-Eigenschaft erhält IE den   Auslöser hasLayout, der erforderlich ist, um den zusätzlichen Leerraum   zwischen den Hyperlinks zu korrigieren. */
</style>
<![endif]-->
</head>


<body>
<div class="header">


    <div class="container1">
     <a href="#"><img src="grafiken\es-com.png" alt="eS-COM"   name="Insert_logo" width="404" height="124"   id="Insert_logo"/></a>

    <!-- end .container1 --></div>
<!-- end .header --></div>
<div class="container">


  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#"><img src="grafiken\home.png" alt="Home"></a></li>
      <li><a href="#"><img src="grafiken\partnersuche.png" alt="Partnersuche"></a></li>
      <li><a href="#"><img src="grafiken\nachhilfe.png" alt="Nachhilfe"></a></li>
      <li><a href="#"><img src="grafiken\freizeit.png" alt="Freizeit"></a></li>
      <li><a href="#"><img src="grafiken\extern.png" alt="Extern"></a></li>
      <li><a href="#"><img src="grafiken\intern.png" alt="Intern"></a></li>    
      <li><a href="#"><img src="grafiken\online.png" alt="Online"></a></li>
      <li><a href="#"><img src="grafiken\einkaufsgruppe.png" alt="Einkaufsgruppe"></a></li>
      <li><a href="#"><img src="grafiken\heimfahrten.png" alt="Heimfahrten"></a></li>
      <li><a href="#"><img src="grafiken\öffentlich.png" alt="Öffentlich"></a></li>
      <li><a href="#"><img src="grafiken\privat.png" alt="Privat"></a></li>
    </ul>
  <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>&nbsp;</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,   sed diam nonumy eirmod tempor invidunt ut labore et dolore magna   aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo   dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus   est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur   sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et   dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam  et  justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea   takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit   amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor   invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At   vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd   gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse   molestie consequat, vel illum 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. 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 exerci tation ullamcorper   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem   vel eum iriure dolor in hendrerit in vulputate velit esse molestie   consequat, vel illum 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.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet   doming id quod mazim placerat facer possim assum. 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 exerci tation ullamcorper suscipit  lobortis  nisl ut aliquip ex ea commodo consequat.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse   molestie consequat, vel illum dolore eu feugiat nulla facilisis.   


At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd   gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam  nonumy  eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  sed  diam voluptua. At vero eos et accusam et justo duo dolores et ea  rebum.  Stet clita kasd gubergren, no sea takimata sanctus est Lorem  ipsum dolor  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing  elitr, At  accusam aliquyam diam diam dolore dolores duo eirmod eos  erat, et nonumy  sed tempor et et invidunt justo labore Stet clita ea et  gubergren, kasd  magna no rebum. sanctus sea sed takimata ut vero  voluptua. est Lorem  ipsum dolor sit amet. Lorem ipsum dolor sit amet,  consetetur sadipscing  elitr, sed diam nonumy eirmod tempor invidunt ut  labore et dolore magna  aliquyam erat.   


Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut   labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et   accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,  no  sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum  dolor  sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod  tempor  invidunt ut labore et dolore magna aliquyam erat, sed diam  voluptua. At  vero eos et accusam et justo duo dolores et ea rebum. Stet  clita kasd  gubergren, no sea takimata sanctus est Lorem ipsum dolor  sit amet. Lorem  ipsum dolor sit amet, consetetur sadipscing elitr, sed  diam nonumy  eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam  voluptua. At vero eos et accusam et justo duo dolores et  ea rebum. Stet  clita kasd gubergren, no sea takimata sanctus.   


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed   diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.   Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum  dolor  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing  elitr, sed  diam nonumy eirmod tempor invidunt ut labore et dolore magna  aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo  dolores et  ea rebum. Stet clita kasd gubergren, no sea takimata sanctus  est Lorem  ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur  sadipscing  elitr, sed diam nonumy eirmod tempor invidunt ut labore et  dolore magna  aliquyam erat, sed diam voluptua. At vero eos et accusam  et justo duo  dolores et ea rebum. Stet clita kasd gubergren, no sea  takimata sanctus  est Lorem ipsum dolor sit amet.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse   molestie consequat, vel illum 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. 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 exerci tation ullamcorper   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem   vel eum iriure dolor in hendrerit in vulputate velit esse molestie   consequat, vel illum 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.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet   doming id quod mazim placerat facer possim assum. 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 exerci tation ullamcorper suscipit  lobortis  nisl ut aliquip ex ea commodo</p>
    <!-- end .content --></div>
     <div class="sidebar2">
     <!-- end .sidebar2 --></div>
     <div class="footer2">
     </div>
     <!-- end .container --></div>
     <div class="footer">
     <div class="container1">
    <a href="#"><img src="grafiken\impressum.png"   alt="Impressum"></a><a href="#"><img   src="grafiken\agb.png" alt="AGB's"></a><a   href="#"><img src="grafiken\partner.png"   alt="Partner"></a><a href="#"><img   src="grafiken\kontakt.png" alt="Kontakt"></a>
    <!-- end .container1 --></div>
    <!-- end .footer --></div>


</body>
</html>

Alles anzeigen

- - - Aktualisiert - - -

Code

@charset "utf-8";
html
{
    height:100%;
}
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCC;
    margin: 0;
    padding: 0;
    color: #000;
    height:100%;
}


/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;     /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
    padding-right: 15px;
    padding-left: 15px; /* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
    position: static;
    color: #000;
    font-size: 9px;
}
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
    border: none;
}


/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
    text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */

}
a:visited {
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
    text-decoration: underline;    
}


/* ~~ Dieser Container umschließt alle anderen div-Tags und weist ihnen ihre als Prozentwert definierte Breite zu. ~~ */
.container {
    width: 60%;
    height:100%;
    position: relative;
    max-width: 1260px;/* Es empfiehlt sich die Eingabe einer maximalen Breite (Eigenschaft max-width), damit dieses Layout auf einem großen Bildschirm nicht zu breit angezeigt wird. Dadurch bleibt die Zeilenlänge besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    min-width: 780px;/* Es empfiehlt sich die Eingabe einer minimalen Breite (Eigenschaft min-width), damit dieses Layout nicht zu schmal angezeigt wird. Dadurch bleibt die Zeilenlänge in den seitlichen Spalten besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. Er ist nicht erforderlich, wenn Sie die Breite von .container auf 100 Prozent setzen. */
}


/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. Sie enthält einen Bild-Platzhalter, der durch Ihr eigenes, mit Hyperlink versehenes Logo ersetzt werden sollte. ~~ */
.header {
    background-color: rgba(255,255,255,0);
    background-image: url(grafiken/oben.png);
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    width: 100%;
    height: auto;
    height: 125px;
}


.container1 {
    width: 60%;
    position:relative;
    max-width: 1260px;/* Es empfiehlt sich die Eingabe einer maximalen Breite (Eigenschaft max-width), damit dieses Layout auf einem großen Bildschirm nicht zu breit angezeigt wird. Dadurch bleibt die Zeilenlänge besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    min-width: 780px;/* Es empfiehlt sich die Eingabe einer minimalen Breite (Eigenschaft min-width), damit dieses Layout nicht zu schmal angezeigt wird. Dadurch bleibt die Zeilenlänge in den seitlichen Spalten besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. Er ist nicht erforderlich, wenn Sie die Breite von .container auf 100 Prozent setzen. */
}


/* ~~ Dies sind die Spalten für das Layout. ~~ 


1) Eine Auffüllung wird nur oben und/oder unten in den div-Tags positioniert. Die Elemente innerhalb dieser div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.


2) Für die Spalten wurde kein Rand angegeben, da es sich um fließende Spalten handelt. Wenn Sie unbedingt einen Rand hinzufügen möchten, platzieren Sie ihn nicht auf der Seite in Flussrichtung (z. B. ein rechter Rand in einem div-Tag, das so festgelegt ist, dass das Element nach rechts fließt). In vielen Fällen kann stattdessen eine Auffüllung verwendet werden. Bei div-Tags, bei denen diese Regel gebrochen werden muss, sollten Sie der Regel des div-Tags eine display:inline-Deklaration hinzufügen, um das Problem zu umgehen, dass in einigen Versionen von Internet Explorer der Rand doppelt angezeigt wird.


3) Da Klassen in einem Dokument mehrmals verwendet werden können (und zudem auf ein Element mehrere Klassen angewendet werden können), wurden den Spalten Klassennamen statt IDs zugewiesen. Beispielsweise können zwei div-Tags für eine Seitenleiste bei Bedarf gestapelt werden. Diese div-Tags können problemlos in IDs geändert werden, solange Sie sie nur einmal pro Dokument verwenden.


4) Wenn Sie die Navigation auf der rechten statt auf der linken Seite platzieren möchten, lassen Sie diese Spalten einfach in die andere Richtung fließen (alle nach rechts anstatt alle nach links). Die Spalten werden dann in umgekehrter Reihenfolge dargestellt. Die div-Tags in der HTML-Quelle müssen nicht verschoben werden.


*/
.sidebar1 {
    padding: 10px 0;
    float: left;
    width: 25%;
    padding-bottom: 10px;
    height:100%;


    background-color: rgba(255,255,255,0.3);

}
.content {
    padding: 10px 0;
    width: 50%;
    overflow:auto;
    float: left;
    height:100%;
    background: linear-gradient(to bottom, #E6F4F6 0%,#98C0C0 100%);
    background: #e6f4f6; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZjRmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OGMwYzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #e6f4f6 0%, #98c0c0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f4f6), color-stop(100%,#98c0c0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f4f6 0%,#98c0c0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f4f6 0%,#98c0c0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f4f6 0%,#98c0c0 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f4f6', endColorstr='#98c0c0',GradientType=0 ); /* IE6-8 */


}
.sidebar2 {
    float: right;
    width: 25%;
    padding-bottom: 10px;
    height:100%;
    background: rgba(255,255,255);
    background-color: rgba(255,255,255,0.3);
    padding: 10px 0;
}


/* ~~ Dieser gruppierte Selektor gibt die Listen im .content-Bereich an. ~~ */
.content ul, .content ol { 
    padding: 0 15px 15px 40px; /* Diese Auffüllung setzt die rechte Auffüllung in der obigen Regel für Überschriften und Absätze fort. Die Auffüllung wurde unten für den Abstand zwischen anderen Elementen in den Listen und links für den Einzug platziert. Sie können die Werte nach Bedarf ändern. */
    height: 100%;
}


/* ~~ Stile für die Navigationslisten (können entfernt werden, wenn Sie ein vordefiniertes Ausklappmenü wie Spry verwenden) ~~ */
ul.nav {
    list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
    margin-bottom: 15px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den Inhalten unten erstellt. */
    height: 100%;


}


ul.nav2 {
    list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
    height: 100%;
}
ul.nav a, ul.nav a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
    padding: 5px 5px 5px 15px;
    display: block;  /*Hiermit werden die Blockeigenschaften für den Hyperlink angegeben, sodass das gesamte umschließende LI-Element aufgefüllt wird. Hiermit wird angegeben, dass der gesamte Bereich auf einen Mausklick reagiert. */
    text-decoration: none;
    height: 100%;



}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {/*  Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */    
    background: rgba(255,255,255);
    background-color: rgba(255,255,255,0.9);
    height: 100%;



}


/* ~~ Fußzeile ~~ */
.footer {
    padding: 10px 0;
    background-color: rgba(255,255,255,0);
    background-image: url(grafiken/oben.png);
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    position: absolute; bottom: 0px;
    clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
    font-size: 8px;
    margin-bottom:auto;
    width: 100%;
    color: #000;
    height: 15px;
    z-index:2;
}
.footer2{
    padding: 10px 0;
    position: absolute; bottom: 0px;
    clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
    font-size: 8px;
    margin-bottom:-30px;
    width: 100%;
    height: 15px;
    background-color:#000;
}


/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Alles anzeigen

Bleistift

Zitat

folgende 2 probleme:
1. der content soll an die fenstergröße (ich glaub heist viewport) angepasst werden footer und header fest ebenso der hintergrund und navigation ich schaffe es nicht das der content beim footer aufhört ich wollte eine unsichtbare klasse machen auf der selben höhe wie der footer und den content nur bis dahin laufen lassen aber leider hat das nicht gefunzt

Wie soll sich denn dein Content anpassen, meinst du prozentual an die Bildschirmgröße oder wie?
Ich seh nix das sich viewpoint nennt.
Wenn ich das richtig verstehe, soll der Content bis zu einer bestimmten Größe laufen und der Footer direkt dadrunter sein?!
Dann setzt du margin-bottom vom Content und margin-top vom Footer auf 0 damit dürften die sich "berühren".

Zitat

2. sollen rechts und links hintergrundgrafiken hinkommen die aber auch hinter der navigation sind ich schätze mal das kann man mit 2 weiteren klassen machen die in ebene 2 verschoben werden nur hab ich grad keine idee wie ich das durchführen soll

float, z-index und position benötigst du dafür
2 Bilder sehe ich jedoch nur im Footer

eS-COM

naja viewpoint dachte nennt sich das was ich meine net im code
anpassen soll es sich insofern das der footer 15px hoch ist der head 125px hoch ist und der gesamte raum dazwischen die site selbst ist footer und header aber immer angezeigt werden
das mit dem margin wird leider nicht so gut gehn da der footer1 wo die hintergrundgrafik ist zwar richtig ist aber ausserhalb des hauptcontainers (da dieser nicht die volle größe nimt)
der footer 2 ist im hauptcontainer und hat die selben attribute wie der footer1 aber ist nicht auf der selben höhe wie der footer1

die bilder für den hintergrund hab ich noch nicht eingebaut bzw wieder rausgenommen da die mein layout etwas verballert haben aber da setz ich mich nochmal drann

leider haben wir für heute keine stunden mehr für das projekt kann also erst morgen weiter machen

explanator

Schau dir mal dir folgenden Links an und such dir dort dein passendes Layout aus:
http://www.cssplay.co.uk/layouts/
http://csslayoutgenerator.com/

Bleistift

Entweder bin ich dumm oder man kann dein Ziel nicht ganz herauslesen.

Zitat

naja viewpoint dachte nennt sich das was ich meine net im code

Was dann?

Zitat

der gesamte raum dazwischen die site selbst ist footer und header aber immer angezeigt werden

Du könntest mit JS diesen Bereich errechnen window.innerWidth - headerHeight - footerHeight = contentHeight

Zitat

da der footer1 wo die hintergrundgrafik ist

Warum hast du in einem Footer eine Hintergrundgrafik?

Zitat

der footer 2 ist im hauptcontainer und hat die selben attribute wie der footer1 aber ist nicht auf der selben höhe wie der footer1

float: left und float: right einsetzen und Breite entsprechend skalieren oder ein anderes Parent für den footer2 definieren

Hm also entweder einen Generator oder fertige Sachen benutzen oder das ganze etwas genauer erklären.
Aber ich würde dir empfehlen erstmal klar zu strukturieren. Eine Hintergrundgrafik gehört nach meiner Meinung nicht in einen Footer

explanator

Viewport, nicht viewpoint nennt sich der sichtbare Darstellungsbreich in einem Browser, also dort wo die Webseite erscheint.

Zitat von Bleistift

Du könntest mit JS diesen Bereich errechnen window.innerWidth - headerHeight - footerHeight = contentHeight

Warum Javascript? Er will doch nur ein Layout das Header und Footer fix plaziert hat.Also Header oben immer sichtbar und Footer unten immer sichtbar, egal wie gross der Content ist.
Das ist ganz einfach mit CSS umsetzbar.

Bleistift

OK gut das hatte ich bei ihm nicht rausgelesen ich dachte er will den Content von der Größe anpassen damit er dazwischen ist ohne Scrollbalken
Aber so ist das natürlich mit position fixed zu lösen
Sorry

Friedel

Hallo.

Beim Schreiben von Fragen und von Quellcde muss man sich an gewisse Regeln halten. Wenn du keine Lust hast, dich mit Satzzeichen und sowas zu belasten um deine Frage verständlich zu stellen, solltest du auch nicht erwarten, dass andere sich voel Mühe geben. Ich vermute, dass http://www.ohne-css.gehts-gar.net/0044.php dir helfen kann, aber genau weiß ich es nicht weil ich deine Frage nicht verstehe.

eS-COM

Zitat von Bleistift

Aber so ist das natürlich mit position fixed zu lösen

und wo muss ich das reinschieben mit der position fixed?

sorry das ich mich nich an satzzeichen etc halte wir stehn unter zeitdruck da wir erst am dienstag erfahren haben das wir am 11. präsentieren dürfen

explanator

Zitat von eS-COM

und wo muss ich das reinschieben mit der position fixed?

Ins CSS.

Zitat

sorry das ich mich nich an satzzeichen etc halte wir stehn unter zeitdruck da wir erst am dienstag erfahren haben das wir am 11. präsentieren dürfen

Tja und ich halte mich jetzt auch an meine Regel, Leuten nicht die Arbeit abzunehmen für die sie hinterher die Lorbeeren ernten werden.

eS-COM

Zitat von explanator

Ins CSS.

is mir schon klar nur welche klasse in meinem fall? der footer1 ist ja an der richtigen stelle also im footer2 oder wie?

Zitat von explanator

Tja und ich halte mich jetzt auch an meine Regel, Leuten nicht die Arbeit abzunehmen für die sie hinterher die Lorbeeren ernten werden.

wie gesagt wir haben nur kurzfristig erfahren das der projekttag am dienstag ist und somit alles vorgestellt werden muss lorbeeren bekommen wir dafür nicht mal es is einfach ne verpflichtung von der ausbildung her und so ziemlich jeder hat nun deswegen streß

Bleistift

Denke auch nicht dass sich jemand deinen quellcode so anschaut das er dir das sagen kann
nach deinem.quellcode her müsstest du wissen wohin
oder in der schule.nicht aufgepasst?

zeig doch wenigstens nur relevanten code

eS-COM

also das is eig kein unterrichtsstoff wir haben zwar html aber nur 90min pro woche un nur im ersten lehrjahr da gehts nur um grundlegende formatierung und html/css vorschriften als informatik-kaufmann geht man da net so tief rein aber ich hab das früher mal als hobby gemacht is aber nen stück her actionscript liegt mir mehr
ich hatte alles gepostet da ich langsam selbst nicht mehr durchgeblickt hab un alles x mal verschachtelt wurd...

im grunde hab ich jetzt neu angefangen wo nun auch fast alles sitzt - nur mit teilen der DW-vorlage die ich vorher nutzte
folgende probleme hab ich noch:
ich benutz jetzt eine tabelle bei einer spalte hab ich einen abstand drin den ich nicht möchte und eine andere hat keinen abstand zum inhalt bzw der inhalt zum rand
http://666kb.com/i/ceqn11yzydkx9f129.jpg
dort wo die links stehen ist ein zu großer abstand die sollen ein stück weiter vor
der text in der mitte ist mir zu nah am rand das man da 5-10px nimt zum abstand des tabellenrandes

HTML

<table width="60%" align="center" cellspacing="0">
        <tr>
            <td width="25%" valign="top" class="sidebar1">
                 <ul class="nav">
      <li><a href="#"><img src="grafiken\home.png" alt="Home"></a></li>
      <li>nochn paar mehr verlinkugen</li>
    </ul>

            </td>
            <td width="50%" class="content">
                 <h1>Lorem ipsum</h1>
    <p>riesen Lorem ipsum</p>
            </td>
            <td width="25%" class="sidebar2">

            </td>
        </tr>
    </table>


die klassen:
ul.nav {
        list-style: none;
        margin-bottom: 15px;
        height: 100%;
    }


    ul.nav2 {
        list-style: none;
        height: 100%;
    }
    ul.nav a, ul.nav a:visited { 
        padding: 5px 5px 5px 15px;
        display: block; 
        text-decoration: none;
        height: 100%;
    }
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
        background: rgba(255,255,255);
        background-color: rgba(255,255,255,0.9);
        height: 100%;
    }
    .sidebar1 {
        background-color: rgba(255,255,255,0.3);
    }
    .sidebar2 {
        background-color: rgba(255,255,255,0.3);
    }
.content {
        padding: 10px 0;
        margin-bottom:15px;
        overflow:auto;
        dicker farbverlaufcode
    }

Alles anzeigen

das größere problem ist das die seite fest sein soll wie ich shcon versuchte zu erklären in etwa so hier:
http://f.666kb.com/i/ceqn4hsko9odpbin5.jpg
nur hat es bei der alten version den text nach unten rausgehauen:
http://666kb.com/i/ceqn5tg7g5jvypqg1.jpg
in der neuen müsste der footer wieder hochgesetzt werden nur bin ich ratlos wie ich das in diesem fall machen soll aktuell siehts so aus:
http://666kb.com/i/ceqn9hj7a0rjo9wdd.jpg

das mit der tabelle ist relativ einfach sobald mir die attribute/eigenschaften wieder einfallen
das problem mit dem footer krieg ich bisjetzt nicht hin und ich fürchte dafür mus ich den gesamten code posten
das mit position:fixed; funzt in diesem fall net da verschwindet der footer ganz

explanator

Ich finde es echt frech alles klein zu schreiben und keinerlei Satzzeichen zu verwenden. Und das du unter Zeitdruck stehst ist eh nur eine Ausrede, die dir keiner Abnimmt.
Zudem habe ich dir 2 Links gepostet. Einer davon ist sogar ein Generator, damit kannst du dir dein Grundgerüst erstellen lassen, aber wahrscheinlich hast du dir die Seiten nicht einmal angesehen, sonst währe dein Problem längst erledigt.

Ich bin hiermeit raus.

Bandit

Auszug aus den Forenregeln:

Zitat

Inhalt von Beiträgen:
[FONT=Verdana, Arial, Helvetica, sans-serif]Forum-Hilfe behält sich das Recht vor, jederzeit Beiträge zu löschen, zu verschieben oder zu überarbeiten, die nicht den Forumsregeln entsprechen. Dies geschieht ohne vorherige Information des Verfassers. Die User ist alleine für die von ihnen publizierten Inhalte (Texte; Bilder oder andere Veröffentlichungen) verantwortlich und bestätigt auch damit, das er keine Copyrightgeschütze Werke und Texte hier im Forum veröffentlicht.
Verboten oder auch unerwünscht sind folgende Inhalte: [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]extrem politisch oder religiös orientierte Postings [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]strafbare, pornographische, jugendgefährdende, beleidigende oder ehrverletzende Inhalte[/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Warez oder fremde copyrightgeschütze Werke [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]E-Mail Adressen [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]Songtexte [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]persönliche Angaben wie Telefonnummern, Adressen usw (diese bitte per PN austauschen) [/FONT]

[FONT=Verdana, Arial, Helvetica, sans-serif]oder anderweitig inakzeptabel Postings, die hier nicht erfasst wurden, aber gegen geltendes Recht, die guten Sitten, allgemeines Moralempfinden oder eben gegen die Forenregeln verstossen.[/FONT]

Crosspostings - die gleiche Frage in mehreren anderen Foren gleichzeitig stellen

eS-COM

sorry bandit ich wusste net das der thread doch noch erstellt wurde nach gut 1h war mein thread auf html.de nicht angezeigt worden laut meinem konto hab ich auch keine beiträge gehabt da hats mir gelangt un ich hab nen andres forum gesucht konnt ja nich ahnen das es dort stunden dauert bis nen thread erstellt is...

vorlagen un generatoren hab ich schon benutzt das problem war immer der footer genau das problem was ich hier geschildert habe darum hab ich mir ja nen forum gesucht - erst html.de nund hier weil html.de mein thread erst nach stunden wies scheint erstellt hat

Friedel

Anstatt die Ratschläge zu befolgen diskutierst du hier seit 2 Tagen darüber, dass du keine Zeit hast. Damit verrimgern sich nicht nur die Chancen, noch helfende Antworten zu bekommen, vor allem verringern sich die Chancen, dass dir die gegebenen Hilfen etwas nützen. enn du nicht lernen willst, wie es geht, sondern eine fertige Lösumg präsentiert bekommen willst, schreibst du in der falschen Rubrik. Dann gehört das ins Jobforum.

eS-COM

ok dann gib mir doch einen tipp wie ich das hinbekommen soll
seit 10 sitz ich an diesem problem das heist 8 stunden (nur heute) und weder diese links die gepostet wurden noch position:fixed; haben was gebracht - andere hinweise/tips wurden nicht genannt
ich habe ca 5 generatoren und x info seiten durchgesehn und nirgends hat das was dort stand funktioniert oder ich hab es nicht recht verstanden darum bin ich ja hier ich suche HILFE und keine hinweise auf rechtschreibung oder sonst was
es geht rein um den footer und bisher hat keiner nen tipp oder hinweis geliefert der helfen kann
ich kann gern den aktuellen code in der gänze hier reinstellen der ist um einiges kürzer als der erste
ich sitz seit wochen an diesem problem ich hab meine 2 wochen ferien dafür geopfert und alles probiert was ich kenne und diverse schritt für schritt tutorials angeschaut
NICHTS hat geholfen
ich bin kein anfänger gut ich bin eingerostet aber dennoch kein anfänger
ich frag nach hilfe wenn ich sie wirklich brauche aber bisher waren vllt 5 hilfposts dabei wo auf 3 links und auf position:fixed eingegangen wird auf sonst nichts soweit ich das gesehen habe

ich hoffe jemand is nu bereit sich eine der dateien anzuschauen bzw die codes und mir dabei zu helfen das verdammte projekt fertig zu stellen
dienstag früh müssen wir das an unsrem stand vorstellen..
wirklich ich bin am verzweifeln selbst meine html lehrerin weis nich weiter (aber sie ist auch eher durchschnitt)

synaptic

ich gestehe... Ich bin lesefaul!
poste deinen aktuellen Code und erneut bitte kurz wo dein Problem liegt. Lade deine aktuelle Seite bitte auf nen freispace hoch und poste den link dazu.
wenn ich dein Problem gelöst bekommen sollte will ich die Hälfte deiner Note haben!

Bleistift

Weißt du eS-Com, wenn man sagt das es mit position: fixed; zu lösen ist und du mehrmals position in deiner CSS verwendest,
verstehe ich nicht wieso dir der Tipp nicht reicht.

Dein Header und dein Footer sollen doch fixiert werden oder?
Also diese beiden Elemente sollen immer sichtbar sein, wo denkst du denn dann position: fixed zu benötigten?

Wenn ein CSS Generator dir nicht helfen konnte, wirds hier auch keiner schaffen..
Dann ist das nämlich schon bisschen hoffnungslos.

Wie gesagt du hast in deiner CSS eigentlich alles drin um das Problem zu lösen soweit wie ich das gesehen hab.
Außerdem wurde ja nun oft genug gesagt das deine Rechtschreibung und Grammatik für den Ar*** ist.
Wenn du das mal verbessern würdest und dir statt 8h ein sinnloses Layout umzuschreiben oder was auch immer,
könntest du dir mal 10-15Minuten nehmen und deinen relevanten Code mit einer lesbaren und verständlichen Erklärung zu deinem Problem posten.

Aber wie gesagt eigentlich müsstest du dieses Problem bei deiner CSS lösen können

Tags

Benutzer online in diesem Thema