Seite 1 von 5 12345 LetzteLetzte
Ergebnis 1 bis 10 von 46

Thema: vermutlich verschachtelungsproblem

  1. #1
    Youngster
    Registriert seit
    06.06.2013
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard vermutlich verschachtelungsproblem

    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-Code:
        <!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>
    - - - 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;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: vermutlich verschachtelungsproblem

    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".

    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


  3. #3
    Youngster
    Themenstarter

    Registriert seit
    06.06.2013
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vermutlich verschachtelungsproblem

    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

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: vermutlich verschachtelungsproblem

    Schau dir mal dir folgenden Links an und such dir dort dein passendes Layout aus:
    http://www.cssplay.co.uk/layouts/
    http://csslayoutgenerator.com/
    Geändert von explanator (06.06.2013 um 13:37 Uhr)

  5. #5
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: vermutlich verschachtelungsproblem

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

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

    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

    da der footer1 wo die hintergrundgrafik ist
    Warum hast du in einem Footer eine Hintergrundgrafik?

    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 ^^


  6. #6
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: vermutlich verschachtelungsproblem

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

    Zitat Zitat von Bleistift Beitrag anzeigen
    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.

  7. #7
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: vermutlich verschachtelungsproblem

    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


  8. #8
    Interessierte/r Avatar von Friedel
    Registriert seit
    18.09.2008
    Ort
    Weingarten/Pfalz
    Beiträge
    102
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: vermutlich verschachtelungsproblem

    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.

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    06.06.2013
    Beiträge
    17
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: vermutlich verschachtelungsproblem

    Zitat Zitat von Bleistift Beitrag anzeigen
    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

  10. #10
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: vermutlich verschachtelungsproblem

    Zitat Zitat von eS-COM Beitrag anzeigen
    und wo muss ich das reinschieben mit der position fixed?
    Ins CSS.

    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.

Ähnliche Themen

  1. HTTP 500 ERROR vermutlich wegen zu altem script
    Von Julian Rüßmann im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 18.05.2012, 12:45
  2. [suche] Suche einen Webprogrammierer (vermutlich)
    Von mcs86 im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 1
    Letzter Beitrag: 09.03.2011, 20:27
  3. Suche altes (vermutlich) DOS-Spiel
    Von crAzywuLf im Forum Off Topic und Quasselbox
    Antworten: 2
    Letzter Beitrag: 21.11.2009, 17:23

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •