Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[GELÖST] Warum div class nicht schleßen
#1
Ich bin derzeit beim Videotutorial für typo3 8 LTS Kapitel 4 Video 20 angelangt und hatte das Problem, dass mein Footer nicht im Container eingebunden war und daher falsch (bis zum Bildschirmrand und daher breiter als alle anderen Elemente) dargesellt wurde.
Nachdem ich meinen Code mit mit dem Übungsmaterial verglichen hatte konnte ich den Fehler finden und verstehe nicht warum die classes Multicolumn und 2 Spalten und 1 Spalte nie geschlossen werden DÜRFEN.

Daher meine Frage zu folgenden Code
Code:
<f:section name="1Spalte">
 <!-- Rootline -->
 <div class="container rootline">
   <ol class="breadcrumb">
     <li class="breadcrumb-item"><a href="#">Home</a></li>
     <li class="breadcrumb-item"><a href="#">Library</a></li>
     <li class="breadcrumb-item active">Data</li>
   </ol>
 </div>
 <div class="container maincontent"><!-- Content Container -->
   <div class="row">
     <div class="col-md-12">
         <f:format.raw>{content0}</f:format.raw>
     </div>
   </div>
</f:section>

Ich hätte hier die div class "container maincontent" geschlossen vor </fConfusedection>
Bei Multicolumn und 2Splaten wird es genauso gehandhabt. Nur bei Jumbotron nicht
Kann mir bitte jemand erklären warum!
Besten Dank im voraus
Lg, Gernot

EDIT: wie kann ich das Smiley nach f verhindern?
Zitieren
#2
Du musst beachten, dass die HTML-Vorlage ja in verschiedene Bereiche aufgeteilt wird. Teilweise sind öffnende Elemente in anderen Dateien als die schließenden Pendants.
Zitieren
#3
Danke für die rasche Antwort!
Zitat:Du musst beachten, dass die HTML-Vorlage ja in verschiedene Bereiche aufgeteilt wird. Teilweise sind öffnende Elemente in anderen Dateien als die schließenden Pendants.

So weit war ich gedanklich auch schon aber ich konnte die schließenden Pendants nicht finden.
Wo wird bitte die div class "container maincontent" geschlossen?

Im Standard.html passiert es nicht...
Zitieren
#4
Schau dir dazu einfach die Original-Vorlage an, da solltest du das eigentlich finden.
Zitieren
#5
Da ich schon lange Suche zur Sicherheit:
Geschlossen kann das Pendant in Footer doch eigentlich nur entweder in der Templates/Default.html, Partials/Footer.html oder Layouts/Standard.html werden richtig?
Ich find dort nämlich das Schließen des Pendants einfach nicht
Zitieren
#6
Das pendant wird in der Layouts/Standard.html geschlossen

Code:
</div> <!-- Ende Content Container -->

So wird glaube ich je nachdem welche Section gerade gerendert wird geschlossen.
Ich habe versucht das div in Layouts/Standard.html zu löschen und dafür in Templates/Default.html einzutragen in den Sections Multicolumn, 2Spalten und 1Spalte
Mein IDE beschwert sich nicht mehr über nicht geschlossene Pendants.
Aber der Footer wird wieder falsch angezeigt


templates/Default.html

Code:
<f:layout name="Standard"/>

<f:section name="Jumbotron">
<!-- Main jumbotron for a primary marketing message or call to action -->
   <div class="jumbotron">
     <div class="container">
       <f:format.raw>{content4}</f:format.raw>
     </div>
   </div>
</f:section>


<f:section name="Multicolumn">
 <div class="container maincontent"><!-- Content Container -->
   <!-- Content Bereich ueber ganze Breite -->
   <div class="row">
     <div class="col-md-12">
       <f:format.raw>{content0}</f:format.raw>
     </div>
   </div>
   <!-- Example row of columns -->
   <div class="row">
     <div class="col-md-4">
       <f:format.raw>{content1}</f:format.raw>
     </div>
     <div class="col-md-4">
       <f:format.raw>{content3}</f:format.raw>
     </div>
     <div class="col-md-4">
       <f:format.raw>{content2}</f:format.raw>
     </div>
   </div>
   <!-- Content Bereich ueber ganze Breite --><div class="row">
     <div class="col-md-12">
       <f:format.raw>{content5}</f:format.raw>
     </div>
   </div>
 </div>
</f:section>

<f:section name="2Spalten">
 <!-- Rootline -->
 <div class="container rootline">
   <ol class="breadcrumb">
     <li class="breadcrumb-item"><a href="#">Home</a></li>
     <li class="breadcrumb-item"><a href="#">Library</a></li>
     <li class="breadcrumb-item active">Data</li>
   </ol>
 </div>
 <div class="container maincontent"><!-- Content Container -->
   <div class="row">
     <div class="col-md-8">
         <f:format.raw>{content0}</f:format.raw>
     </div>
     <div class="col-md-4">
       <!-- Subnavigation -->
       <div class="card">
         <div class="card-block">
           <ul class="nav nav-pills nav-stacked mysubnav">
             <li class="nav-item">
               <a class="nav-link active" href="#">Active</a>
               <ul>
                 <li class="nav-item">
                   <a class="nav-link current" href="#">Subpage</a>
                   <ul>
                     <li class="nav-item">
                       <a class="nav-link" href="#">Subpage</a>
                     </li>
                     <li class="nav-item">
                       <a class="nav-link current" href="#">Subpage</a>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="#">Subpage</a>
                 </li>
               </ul>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#">Link</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#">Link</a>
             </li>
           </ul>
         </div>
       </div>
       <!-- Subnavigation Ende -->
         <f:format.raw>{content2}</f:format.raw>
     </div>
   </div>
 </div>
</f:section>

<f:section name="1Spalte">
 <!-- Rootline -->
 <div class="container rootline">
   <ol class="breadcrumb">
     <li class="breadcrumb-item"><a href="#">Home</a></li>
     <li class="breadcrumb-item"><a href="#">Library</a></li>
     <li class="breadcrumb-item active">Data</li>
   </ol>
 </div>
 <div class="container maincontent"><!-- Content Container -->
   <div class="row">
     <div class="col-md-12">
         <f:format.raw>{content0}</f:format.raw>
     </div>
   </div>
 </div>
</f:section>
Layouts/Standard.html
Code:
<div class="pageheader container" xmlns:f="http://www.w3.org/1999/html" xmlns:f="http://www.w3.org/1999/html">
 <div class="row">
   <div class="col-sm-4">
     <f:render partial="LanguageMenu"/>
   </div>
   <div class="col-sm-8">
     <f:render partial="SearchForm"/>
   </div>
 </div>
</div>
<div class="mainnav">
 <nav class="main-nav container" role="navigation">

   <!-- Mobile menu toggle button (hamburger/x icon) -->
   <input id="main-menu-state" type="checkbox"/>
   <label class="main-menu-btn" for="main-menu-state">
     <span class="main-menu-btn-icon"></span> Toggle main menu visibility
   </label>

   <f:render partial="MainNavigation" arguments="{_all}"/>
 </nav>
</div><!-- Ende mainnav -->

<!-- Hier die Inhalte -->
<f:if condition="{backendlayout}=='jumbotron'">
   <f:render section="Jumbotron"/>
   <f:render section="Multicolumn"/>
</f:if>

<f:if condition="{backendlayout}=='2spalten'">
   <f:render section="2Spalten"/>
</f:if>

<f:if condition="{backendlayout}=='1spalte'">
   <f:render section="1Spalte"/>
</f:if>

<!-- Beginn Footer Bereich -->

<br>

<f:render partial="Footer"/>
<!-- Ende Content Container -->
Zitieren
#7
Frage: warum machst du das nicht einfach 1:1 so, wie im Video gezeigt? Da funktioniert es doch.
Zitieren
#8
ich möchte es gerne verstehen
Würde ich ein eigenes Projekt starten wäre es für mich selbstverständlich die Pendants immer in den Templates (wurden ja auch in den Templates/Default.html) geöffnet) zu schließen.
Hier scheint es so als ob ich das nicht machen darf.
Sobald ich alle Pendants in den Templates direkt schließen will anstatt in den Layouts/Standard.html funktioniert die Site nicht mehr korrekt.
Ich gehe daher davon aus es muss so gemacht werden und ich verstehe nicht warum
Zitieren
#9
Ok ich glaube ich habe es verstanden!
Der Footer muss mit in den Container rein daher darf dieser nicht schon vorher geschlossen werden.
Danke
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste