HTML HTML/CSS wird nicht angenommen

Halus

Lt. Junior Grade
Dabei seit
Juli 2013
Beiträge
373
Hi,
Ich habe heir ein kleines Problem aber keine Ahnung wo das problem sein soll.
Das Script ist nicht von mir, nur für meine Zwecke verändert.

Code:
<!DOCTYPE html>
<html>
    <head>
        <title> {{ chapterInfo.title }} </title>
         <link rel="stylesheet" type="text/css" href="../../templates/style.css">
      </head>
    <body>
    <div class="content">
        <h1> 
            <p class="chapterTitle">{{ chapterInfo.title }} </p>
            {% if is_author_past == True %}
            <small> By: <a href = "..."> {{chapterInfo.author_name}} </a></small>
            {% endif %}
        </h1>
        <div>
            {% if previouschapter != '' %}
                <a href="{{ previouschapter +".html"}}">Go back</a>
            {% endif %}
            
        </div>
        
        <p class="chapterText"> {{ chapterInfo.content }} </p>
        <br>
        {% if emptychoices %}
        <p><b> The End. </b></p>
        {% else %}
        <p><b> Your choices: </b></p>
        <ol class="chapterSelection">
            {% for choice in chapterInfo.choices %}
            {% set choicedescent = descent + loop.index|string + ".html" %}
            {% if existingdescents[loop.index-1] %}
                <li> <b><a href="{{ choicedescent }}">{{choice}}</a></b></li>
            {% else %}
                <li> {{ choice }}</li>
            {% endif %}
            {% endfor %}
        </ol>
        {% endif %}
        <br>
        
        <a  href = "outline.html" class="outline">View all chapters</a>
        <br>
        
    <p><b>Retrieved {{ date }}</b></p>
    </div>
    </body>
</html>

Meine Probleme:

1.)"chapterText" wird nicht angenommen.
Im Editor sind sämtliche "class" orange und deren Namen violett. Aber in diesem Fall ist "<p class" violett und chapterText schwarz wie normaler Text. Wenn ich irgendwas im style dafür ändere ändert sich einfach gar nichts.
Das div direkt darüber war im original ein offenes, aber das passt ja da nicht hin und ändert auch nichts.

2.)"Your choices" ist links oberhalb von der Liste. Wie mache ich den Text bündig mit der Liste darunter?


Code:
<!DOCTYPE html>
<html>
  <title> {{ title }} </title>
  <head>
    <link rel="stylesheet" type="text/css" href="../../templates/style.css">
  </head>
  <body>
    <div class="content">
      <h1> {{ title }} </h1>
      <ul>
    {% for i in num %}
    <li class="outLineTitles"> 
        <a href="{{ descents[i] + ".html"}}">
        <div class="parent">
            <p class="chapterNumbers">{{ descents[i] + "# "}}</p>
            <p class="chapterNames">{{ names[i]}} </p>
        </div>
        </a>
    </li>
    {% endfor %}
      </ul>
    </div>
  </body>
</html>

3.) chapterNumbers und Names gehört zusammen in eine Zeile. So wie ich das hier habe werden sie mir in verschiedenen Zeilen ausgegeben. Wenn ich das jetzt mit float oder inline-block "zusammenführe" dann werden alle Nachfolgenden ebenfalls zusammengeführt.

4.) Ist so eine Zusammensetzung von <p> innerhalb von <div> innerhalb von <a> überhaupt erlaubt?

Ich bin mir sicher, dass das alles ganz einfach zu richten ist, aber nicht für mich :D

Und noch die style zum Rumspielen:

Code:
body {
    background: lightgray;
}
.content {
    width: 80%;
    margin: 0 auto;
    padding: 10px 10px;
    background: white;
}
.content ul {
    list-style: none;
}

h1 small {
    font-size: 50%;
}


li.outLineTitles{
    font-size:130%;
    line-height:135%;
}

 .chapterText{
    font-size: 25px;
    
}

.chapterSelection{
        font-size:115%;
        line-height:120%;

}

.outline{
    font-size:110%;
}

 .chapterNumbers{
    word-spacing:25px;
    float:left;
    font-size:150%;
}

.parent .chapterNames{
    float:left;
}

.chapterTitle{
    
}
 
ich hab das mal in ein JS Fiddle eingebaut:
https://jsfiddle.net/8jqxpy0o/

die ../../templates/style.css ist das gezeigte CSS?
Stellt das Fiddle deine Probleme auf die gleiche weise dar?

was mir auf den ersten blick auffällt:
  • P in H1 ist invalid
  • P in DIV in A in LI ist OK weil die eltern der anker(list-items) flow-content kind-elemente erlauben, vor HTML5 war das invalid.
    zb P in DIV in A in H1 wäre invalid weil der anker in der H1 liegt und die keine Block-Level Elemente in sich erlaubt.
  • Von der verwendung von BR linebreaks nach Block-Level Elementen(zb OL) würde ich abraten und eher empfehlen den Abstand mit CSS zu verwalten. Dann verhält sich das einheitlich.
  • in deinem code kommen viele leerzeichen vor, die editoren verwirren könnten, hier kann es weiters sein, das Twig für verwirrung sorgt, ist der Syntax-highlighter auf Twig eingestellt? Welcher Editor? Tritt das Verhalten noch auf, wenn der Twig-Code entfernt wird?

die paragraphen in der 2. liste floaten. daher würde ich den umschließenden DIV containern einen clearfix geben:
CSS:
.parent::after{
  display:block;
  content:' ';
  height:0;
  clear:both;
}
info aus 2011:
http://nicolasgallagher.com/micro-clearfix-hack/

damit bleibt die höhe der floatenden elemente für die Eltern erhalten.

Floaten ist eigentlich für Bilder/Figures gedacht um die Text fließt.

Alternativ kann man das auch mit flex lösen:
CSS:
.parent{
  display:flex;
}
.parent .chapterNames{
  /* float:left; // kann gelöscht werden */
}
nähere Informationen zu flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: Hayda Ministral
p in h1 funktioniert zumindest. Aber ich habe einfach mal den Titel in h1 und den authorname in h2 gesteckt.

Im Fiddle wird es in der Tat anders dargestellt. Da kann ich den chapterText mit css ändern aber bei mir hier lokal eben nicht.

Naja br sind halt angenehm zu verwenden :D

Das mit dem clearfix ist mir nicht ganz klar, dass muss ich mir nochmal durchlesen.

Weder der fix noch flex funktioniert. Wenn man das verwendet sind die Elemente in einer eigenen Zeile und immer weiter nach rechts gerückt.

descents und names von i soll eben nebeneinander stehen und dann i+1 in der nächsten Zeile.
 
ist halt schwer genauer darauf einzugehen, wenn man unterschiedliche dinge sieht ;-)

am besten bearbeite das fiddle so, das man die probleme sehen kann, dann kann man am besten darauf eingehen.

wenn dein CSS gar nicht angewendet wird hats irgendwas grundlegendes, entweder ein anderes Stylesheet wie von Hancock angenommen oder der Pfad passt nicht.

und natürlich wärs auch gut zu wissen, wie es aussehen sollte ;-)


Zitat von Halus:
Weder der fix noch flex funktioniert. Wenn man das verwendet sind die Elemente in einer eigenen Zeile und immer weiter nach rechts gerückt.

das bedeutet, die sollen untereinander sein? dann solltest du das "float:left" ganz entfernen - wozu wurde es hingeschrieben?
 
Zuletzt bearbeitet:
chaperNumbers und chapterNames sollen nebeneinander sein:

Code:
1... name1
2... name2
3...name3
 
für 1,2,3 braucht es eigentlich den index garnicht, es wäre eine OL (ordered list):
HTML:
<ol class="outline-titles">
{% for i in num %}
  <li><a href="{{ descents[i] + ".html" }}">{{ names[i] }}</a></li>
{% endfor %}
</ol>
Um die nummern zu layouten (1...) gibt es noch verschiedene möglichkeiten mit ::marker oder ::before, siehe:
https://catalin.red/css3-ordered-list-styles/
 
Ja, das wäre einfacher.
Aber ich will ja die id´s von descents auch wissen, deswegen hab ich es so umgeschrieben habe.

In wie fern soll bei mir das falsche Stylesheet drin sein wenn das bei drei html files verwendet wird und funktioniert sowie andere .class in der selben html angewandt werden.
Außerdem funktioniert der Dreck auch nicht wenn ich direkt in den tag einen style reinschreibe.

Bei deinem Link, kannst du mir vielleicht verraten wo da eingestellt wird, dass es ein Kreis bzw Rechteck ist?
 
Bei dem Link werden "Pseudo-Elemente" ::before genutzt. Mittels display:block werden sie Rechtecke, mittels border-radius werden sie rund. Wozu willst du den den Index als Zahl sehen? Worin unterscheidet er sich von den Index-Zahlen die die Liste ausspuckt?

Was bei dir falsch läuft wenn CSS notationen nicht greifen kann ich auch nicht sagen aber ich weiß das es geht sobald du es richtig machst. Wenn du das als Dreck bezeichnest, verliere ich die Lust zu helfen.
 
Zurück
Top