Syntax bei Flexbox; Vererbung?


filament

Erfahrenes Mitglied
#1
Hallo,

ich habe mal ein paar grundsätzliche Fragen zum Syntax.

Ich arbeite mich gerade etwas intensiver ins Flexbox Modell ein. Einige Grundgerüste habe ich auch schon hinbekommen, waren keine große Schwierigkeit. Nun sitze ich aber vor einem etwas aufwendigerem Aufbau, möchte es möglichst sauber und übersichtlich angehen.

Deswegen würde ich gern mal wissen, wie denn genau der Syntax von den Befehlen rund um Flex aussehen sollte. Welche Erweiterungen für andere Browser brauche ich zwingend, welche kann ich weglassen? Im Internet gibt es so viele Informationen zum Thema, die einen fast erschlagen und man nicht wirklich weiß was man davon braucht und was nicht.

Was ich bisher gelesen habe:

CSS:
display:           flex;
display:           -webkit-flex;
display:            -ms-flexbox;
Das sollen die Erweiterungen für IE und Mozilla sein. Brauch ich noch mehr? Oder brauche ich die überhaupt?

Dann hab ich noch das hier gelesen als zwei verschiedene Verwendungsmöglichkeiten:

CSS:
flex:           1;
flex:           1 1 0%;
Was davon nuzte ich denn? Was bedeuten die drei Ziffern genau?

Und dann habe ich ganz aktuell noch folgendes Problem:

Ich habe eine Box mit zwei (Haupt-)Elementen, die sich flexibel nebeneinander im Verhältnis 4 (Content) und 1 (Menü) darstellen sollen. Das Content Element ist ein div, das Menü ein nav mit einer integrierten Liste (ul).

Statt die Liste im nav Element untereinander darzustellen, werden die einzelnen Listenelemente nun neben dem Content div Element dargestellt. Leider verstehe ich das nicht so ganz, warum das geschieht.

Was mache ich falsch? Hat das was mit Vererbung zu tun?

Hier mein Code:

HTML:
<article>
           <div id="breadcrumb-container">
               <ul id="breadcrumb">
                   <li><a href="#home">Link</a></li>
                   <li><a href="#home">Link</a></li>
                   <li><a href="#home">Link</a></li>
               </ul>
               <button id="login-button">Login</button>
               <button id="register-button">Register</button>
           </div>
           <div id="content-container">
               <div id="inhalt"><h2>Testüberschrift</h2><p>Text</p></div>
               <nav id="inhalt-rechts">
                   <ul>
                       <li><h2>Überschrift1</h2><a href="#home">Link</a></li>
                       <li><h2>Überschrift2</h2><a href="#home">Link</a></li>
                       <li><h2>Überschrift3</h2><a href="#home">Link</a></li>
                       <li><h2>Überschrift4</h2><p>Statt Link ein Absatz!</p></li>
                   </ul>
               </nav>
           </div>
       </article>
CSS:
#content-container {
   display:           flex;
   display:           -webkit-flex;
   display:            -ms-flexbox;
   flex-direction:        row;
   border:           1px solid #252525;
   border-radius:       2px;
   margin-top:       5px;
}

#inhalt {
   flex:           4;
   padding:           5px;
}

#inhalt h2 {
   font:           1em Arial, Helvetica, sans-serif;
   color:           #252525;
   margin-bottom:       20px;
}

#inhalt p {
   font:           1em Arial, Helvetica, sans-serif;
   color:           #252525;
   margin-bottom:       10px;
   text-align:           justify;
}

#inhalt-rechts {
   flex:           1;
}

#inhalt-rechts ul {
   background:       #121212;
}

#inhalt-rechts li {
   margin-bottom:       20px;
}

#inhalt-rechts h2 {
   color:           #ffffff;
   font:           1em Arial, Helvetica, sans-serif;
}

#inhalt-rechts p {
   color:           #ffffff;
   font:           0.8em Arial, Helvetica, sans-serif;
}

#inhalt-rechts a {
   color:           #ffffff;
   font:           0.8em Arial, Helvetica, sans-serif;
   text-decoration:       none;
}
Ich wäre für Hilfestellung in beiden Dingen sehr dankbar! ;)

Liebe Grüße
Ronny
 
#2
Hallo

Welche Erweiterungen für andere Browser brauche ich zwingend
Die Antwort kann kurz ausfallen: Keine. Die Zeiten sind schon lange vorbei.

Im Internet gibt es so viele Informationen zum Thema
Die sind meist veraltet.

Dann hab ich noch das hier gelesen als zwei verschiedene Verwendungsmöglichkeiten:
Flex ist eine Kurzschreibweise, wie es sie auch für andere CSS-Anweisungen gibt.

Damit werden die Werte für flex-grow, flex-shrink und flex-basis zusammengefasst.

Ich empfehle auch um Probleme zu vermeiden die drei Werte einzeln anzugeben.

Zunächst werden bei der Schreibweise

Code:
flex: 1;
auch die Werte von flex-shrink und flex-basis mit Standardwerten hinzugefügt. Ein Problem ist, dass die Browser dafür teilweise unterschiedliche Standardwerte setzen, was in der Regel überhaupt nicht gewollt ist.

Auf die Schreibweise

Code:
flex: 1 1 0%;
sollte dann verzichtet werden, wenn für flex-basis ein Wert mit calc berechnet werden soll, da damit wiederum einige Browser nicht zurechtkommen.

Da ich grundsätzlich alle drei Anweisungen einzeln eingebe vermeide ich solche Probleme von vornherein.

Und dann habe ich ganz aktuell noch folgendes Problem:
Das Problem kann ich nicht so richtig nachvollziehen.

Statt die Liste im nav Element untereinander darzustellen
Bei mir wird die Liste untereinander dargestellt.

Etwas praxisgerechterer Inhalt würde dem Problemverständnis auch gut tun. Bei Überschriften in einer Navigation sträubt sich bei mir alles. Die sind in diesem Zusammenhang zu 99% sachlich falsch.

Gruss

MrMurphy
 

filament

Erfahrenes Mitglied
#4
Bei Überschriften in einer Navigation sträubt sich bei mir alles. Die sind in diesem Zusammenhang zu 99% sachlich falsch
Inwiefern das denn?

Ich versuche damit die Übersichtlichkeit für den Besucher zu erhöhen.

Ich habe mal eine Lösung für dein Problem erstellt, so wie ich es zu verstehen glaube:
Ja so soll es aussehen.

Das tut es aber bei mir nicht. Ich bin gerade nicht zu Hause. Ich poste später mal ein Bild davon.

Bei mir werden die Listenelemente wie Kind-Elemente innerhalb des containers behandelt und sämtlich neben dem Inhalt div platziert.
 
#5
Hallo

Inwiefern das denn?
Weil es dem Sinn von Listen widerspricht, wenn li-Elemente jeweils eine Überschrift und eine Verlinkung enthalten. Zudem haben Überschriften bestimmte Aufgaben, die bei so einem Quelltext auch nicht passen.

Du hast die Überschrift offensichtlich wegen der fetten Schrift gewählt. HTML-Elemente dürfen aber nicht nach ihrem Aussehen im Browser ausgwählt werden, sondern nur nach ihrer Bedeutung. Das Aussehen wird später durch das CSS angepasst.

Das ist nicht so einfach zu erklären, weil du dir die Liste nur optisch vorstellen kannst. Und dein Inhalt keine Bedeutung hat.

Suchmaschinen, Screenreader und andere nicht visuelle Ausgabegeräte bekommen mit deinem Quelltext aber nicht die für sie korrekten Informationen.

Bei mir werden die Listenelemente wie Kind-Elemente innerhalb des containers behandelt und sämtlich neben dem Inhalt div platziert.
Das kann ich aus deinem hier gezeigten Quelltext nicht nachvollziehen. Wahrscheinlich hast du den dafür verantwortlichen Teil des HTML / CSS in dem hier gezeigten Quelltext weggelassen.

Hast du überhaupt aus deinem hier gezeigten Quelltext mal eine Webseite erstellt? Es passiert leider immer wieder, das grade Anfänger nur einen Teil ihres HTML- / CSS-Quelltextes posten, problematische Teile weglassen und fröhlich über Probleme berichten, die wir dann überhaupt nicht nachvollziehen können.

Mit deinem Quelltext erhalte ich zum Beispiel folgende Seite

http://boratb.bplaced.net/index50.html

Daraus kann ich nicht nachvollziehen was neben welchem div stehen soll.

Aber zurück zu den Listen:

Deine Listen sind überflüssig und stören zudem bei der Gestaltung. Du kannst ja bei Gelegenheit in meinen Quelltext schauen.

Ich habe meine Beispielseite nach den aktuellen HTML- / CSS-Regeln und -Möglichkeiten erstellt. Dadurch wird der Quelltext viel einfacher und übersichtlicher.

Gruss

MrMurphy
 
Zuletzt bearbeitet:

filament

Erfahrenes Mitglied
#6
Also danke zunächst für Deine Mühe!

Blutiger Anfänger bin ich nun nicht mehr. Aber, ja ich habe nur den betroffenen Bereich gepostet. Davor befinden sich natürlich noch weitere Elemente. (u.a. ein Logo mit daneben befindlicher Liste als erste Navi, eine zweite (Haupt-)Navi, ein Header und dann der Content Container den ich gepostet habe.) Die habe ich ausgespart.

Deinen Quelltext werde ich mir heute Abend genauer ansehen. Ich poste dann mal einen Screenshot von der Seite wie sie mir angezeigt wird. ;)

Also genau genommen ist das hier auch keine richtige Navigation. Es sollen eher Boxen mit Inhalten werden, die natürlich auch Überschriften und Texte beinhalten, nicht nur reine Links. Sollte ich vielleicht von einer Liste weggehen und doch lieber divs nutzen?

Kannst du mal kurz anhauchen, wann man denn Listen, Überschriften, Navis aus HTML Sicht nutzen sollte und wann nicht?

Ich will ja meinen Code auch sinnvoll gestalten und möglichst so wie der Code dafür vorgesehen ist. Das wäre nett.
 
#7
Hallo

Also genau genommen ist das hier auch keine richtige Navigation.
Dann ist wahrscheinlich als umgebender Container das aside-Element angebracht.

die natürlich auch Überschriften und Texte beinhalten
Dann sind Listen grundsätzlich falsch.

doch lieber divs nutzen
Nein. Für eine weitere Unterteilung neben den Überschriften ist eher das section-Element angebracht. Aber nur, wenn es überhaupt erforderlich ist. Das hängt aber vom Inhalt ab.

Kannst du mal kurz anhauchen, wann man denn Listen, Überschriften, Navis aus HTML Sicht nutzen sollte und wann nicht?
Listen, genauer deren Einträge, enthalten nur einzelne Worte oder kurze Stichpunkte aus mehreren Worten. Ganze Sätze sind hingegen Text.

Überschriften gliedern Texte oder zusammenhängende Informationsblöcke. Ein Informationsblock kann zum Beispiel eine Liste sein. Innerhalb einer Liste sind Überschriften zu 99% Unsinn.

Navis sind zusammengefasste Verweise, die meist einen ähnlichen Bezug haben. Sie mussten und müssen aber keine Listen sein.

Da der HTML-Quelltext hauptsächlich von dem Inhalt einer Webseite abhängt sind solche Zusammenhänge an inhaltsleeren Webseiten leider nur begrenzt zu erklären.

Gruss

MrMurphy
 

filament

Erfahrenes Mitglied
#8
Ansicht.png So also hier nochmal die Ansicht wie es bei mir aussieht:

Der vollständige Quellcode ist Folgender:

HTML:
<!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><!--- Head --->
   <title>Titel der Seite</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta name="Content-Language" content="de" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <link href="images/logo/logo.ico" rel="shortcut icon" type="image/x-icon">
   <link href="css/reset2-0.css" rel="stylesheet" type="text/css" media="screen" />  
   <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
   <link href="css/responsive.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
   <main id="container-all">      
       <div id="logo">
           <nav id="upper-navi">
               <ul>
                   <li><a href="#home">Über uns</a></li>
                   <li><a href="#home">Partner</a></li>
                   <li><a href="#home">Kontakt</a></li>
                   <li><a href="#home">Impressum</a></li>
                   <li>
                       <span id="search">
                           <form action="search.php" method="post">
                               <input type="text" name="search" placeholder="Suchbegriff">
                               <button id="search-button" type="submit">Suchen</button>
                           </form>
                       </span>
                   </li>
                   <li>
                       <span id="social-buttons">
                           <img src="images/icons/bookmark.png" /><img src="images/icons/options.png" />
                       </span>
                   </li>
               </ul>
           </nav>
       </div>
       <nav id="main-navi">
           <ul>
               <li><a href="#home">Gegnersuche</a></li>
               <li><a href="#home">Trainersuche</a></li>
               <li><a href="#home">Vereinssuche</a></li>
               <li><a href="#home">Marktplatz</a></li>
           </ul>
       </div>
       <header>
           <div class="header-boxen">Inhalt</div>
           <div class="header-boxen">Inhalt</div>
           <div class="header-boxen">Inhalt</div>
           <div class="header-boxen">Inhalt</div>
           <div class="header-boxen">Inhalt</div>
       </header>
       <article>
           <div id="breadcrumb-container">
               <ul id="breadcrumb">
                   <li><a href="#home">Link</a></li>
                   <li><a href="#home">Link</a></li>
                   <li><a href="#home">Link</a></li>
               </ul>
               <button id="login-button">Login</button>
               <button id="register-button">Register</button>
           </div>
           <div id="content-container">
               <div id="inhalt"><h2>Testüberschrift</h2><p>Text</p></div>
               <nav id="inhalt-rechts">
                   <ul>
                       <li><h2>Überschrift1</h2><a href="#home">Link</a></li>
                       <li><h2>Überschrift2</h2><a href="#home">Link</a></li>
                       <li><h2>Überschrift3</h2><a href="#home">Link</a></li>
                       <li><h2>Überschrift4</h2><p>Statt Link ein Absatz!</p></li>
                   </ul>
               </nav>
           </div>
       </article>
       <footer>
           <div class="footer-boxen"><h2>Erste Spalte</h2><p>Inhalt</p></div>
           <div class="footer-boxen"><h2>Zweite Spalte</h2><p>Inhalt</p></div>
           <div class="footer-boxen"><h2>Dritte Spalte</h2><p>Inhalt</p></div>
       </footer>
   </div>
</body>
</html>
CSS:
/* CSS Document */



/* Allgemeines */

html {
   width:            100%;
   padding:            0;
   margin:            0;
   background:        #e8e8e8;
}

body {
   width:            100%;
   padding:            0;
   margin:            0;
   background:        #e8e8e8;
}

div, h1, h2, p, form, label, input, textarea, img, span {       /* Normalisierung */
   padding:            0;
   margin:            0;
}

strong {
   font-weight:       bold;
}

.hyperlinks {
   text-decoration:       none;
   color:           #b33706;
   font-weight:       bold;
}

.hyperlinks[href^='http://'], .hyperlinks[href^='https://'] {
   padding-right:       14px;
   background-image:       url(../images/icons/extern.png);
   background-position:   right;
   background-repeat:       no-repeat;
   background-size:        10px;
}

.hyperlinks[href^='http://']:hover, .hyperlinks[href^='https://']:hover, .hyperlinks:hover {
   color:           #000000;
   text-decoration:       underline;
}



/* Container für Alle Elemente */



#container-all {
   width:           80%;
   margin:           auto;
}



/* Logo, erste Navigation, Suchfeld */



#logo {
   margin:           0;
   padding:           0;
   height:           100px;
   background-image:       url(../images/logo/logo185-150.png);
   background-repeat:       no-repeat;
   background-size:       auto 100px;
}

#upper-navi {
   width:           100%;
}

#upper-navi ul{
   height:           100px;
   display:           flex;
   display:           -webkit-flex;
   display:            -ms-flexbox;
   flex-direction:        row;
   align-items:        flex-end;
   padding:           0;
   margin:           0;
   margin-left:       180px;
}

#upper-navi li {
   height:           30px;
   padding:           0;
   margin:           0;
   list-style-type:        none;
}

#upper-navi a {
   margin:           0;
   padding:           0;
   padding-top:       5px;
   margin-left:       10px;
   margin-right:       30px;
   text-decoration:        none;
   font:           1em Arial, Helvetica, sans-serif;
   color:            #252525;
}

#main-navi {
   margin:           0;
   padding:           0;
   width:           100%;
   height:           30px;
   background:       #252525;
   margin-top:       10px;
   border-top:       3px solid red;
}

#main-navi ul{
   height:           30px;
   display:           flex;
   display:           -webkit-flex;
   display:            -ms-flexbox;
   flex-direction:        row;
   justify-content:       flex-start;
}

#main-navi li {
   height:           25px;
   padding:           5px;
   margin:           0;
   list-style-type:        none;
}

#main-navi a {
   margin:           0;
   padding:           0;
   padding-top:       5px;
   margin-left:       10px;
   margin-right:       30px;
   text-decoration:        none;
   font:           1em Arial, Helvetica, sans-serif;
   color:            #ffffff;
}

#search {
   margin:           0;
   padding:           0;
}

#social-buttons {
   margin:           0;
   margin-left:       20px;
   padding:           0;
}

#social-buttons img {
   width:           25px;
   height:           25px;
}



/* Header */



header {
   display:           flex;
   display:           -webkit-flex;
   display:            -ms-flexbox;
   flex-direction:        row;
   align-items:        flex-start;
   justify-content:       space-around;
   margin-top:       3px;
   height:           300px;
   background-image:       url(../images/tennis-923659_1920.jpg);
   background-repeat:       no-repeat;
   background-size:       auto 1400px;
   background-position:   0 -400px;
   border:           1px solid #252525;
}

.header-boxen {
   height:           180px;
   background:       #ffffff;
   opacity:           0.85;
   border:           1px solid #000000;
   border-radius:       5px;
   margin-top:       20px;
   margin-left:       5px;
   margin-right:       5px;
   padding:           5px;
   font:           1em Arial, Helvetica, sans-serif;
   text-align:           justify;
}



/* Main Bereich */



article {
   margin:           0;
   margin-top:       5px;
   padding:           5px;
   min-height:       400px;
   background:       #f3f3f3;
   color:           #252525;
   font:           1em Arial, Helvetica, sans-serif;
   border:           1px solid #252525;
}

#breadcrumb-container {
   display:           flex;
   display:           -webkit-flex;
   display:            -ms-flexbox;
   flex-direction:        row;
   align-items:        flex-start;
   justify-content:       flex-start;
   margin:           0;
   padding:           5px;
   background:       #252525;
   color:           #ffffff;
}

#breadcrumb {
   flex:           6;
}

#breadcrumb a {
   margin:           0;
}

#breadcrumb li:not(:first-child)::before {
   content:            "» ";
}

#login-button {
   flex:           0.8;
   background:       #2e5c72;
   color:           #ffffff;
   padding:           5px;
   margin-right:       10px;
   border:           0;
   font:           1em Arial, Helvetica, sans-serif;
}

#register-button {
   flex:           0.8;
   background:       #308700;
   color:           #ffffff;
   padding:           5px;
   margin-right:       10px;
   border:           0;
   font:           1em Arial, Helvetica, sans-serif;
}

#content-container {
   display:           flex;
   display:           -webkit-flex;
   display:            -ms-flexbox;
   flex-direction:        row;
   border:           1px solid #252525;
   border-radius:       2px;
   margin-top:       5px;
}

#inhalt {
   flex:           4;
   padding:           5px;
}

#inhalt h2 {
   font:           1em Arial, Helvetica, sans-serif;
   color:           #252525;
   margin-bottom:       20px;
}

#inhalt p {
   font:           1em Arial, Helvetica, sans-serif;
   color:           #252525;
   margin-bottom:       10px;
   text-align:           justify;
}

#inhalt-rechts {
   flex:           1;
}

#inhalt-rechts ul {
   background:       #121212;
}

#inhalt-rechts li {
   margin-bottom:       20px;
}

#inhalt-rechts h2 {
   color:           #ffffff;
   font:           1em Arial, Helvetica, sans-serif;
}

#inhalt-rechts p {
   color:           #ffffff;
   font:           0.8em Arial, Helvetica, sans-serif;
}

#inhalt-rechts a {
   color:           #ffffff;
   font:           0.8em Arial, Helvetica, sans-serif;
   text-decoration:       none;
}

footer {
   display:           flex;
   display:           -webkit-flex;
   display:            -ms-flexbox;
   flex-direction:        row;
   align-items:        flex-start;
   justify-content:       flex-start;
   margin:           0;
   margin-top:       10px;
   padding:           5px;
   min-height:       200px;
   background:       #252525;
   color:           #ffffff;
   font:           1em Arial, Helvetica, sans-serif;
}

.footer-boxen {
   flex:           1;
   padding:           5px;
}

.footer-boxen h2 {
   background:       #121212;
   border-bottom:       1px solid #e8e8e8;
   border-left:       1px solid #e8e8e8;
   border-right:       1px solid #e8e8e8;
   padding:           5px;
   margin-bottom:       10px;
   margin-top:       -20px;
   font:           1em Arial, Helvetica, sans-serif;
}

.footer-boxen p {
   padding:           10px;
   color:           #919191;
   font:           0.9em Arial, Helvetica, sans-serif;
   text-align:           justify;
   border-bottom:       1px solid #313131;      
}
Also wenn ich dich jetzt richtig verstanden habe, kann ich statt mehreren div Container jetzt <section></section> nutzen, richtig und diese in den <aside></aside> Container stecken? Das gleiche gilt sicher dann auch oben für die fünf Boxen im Header, die nebeneinander angeordnet sind? (hinsichtlich der sections)
 
#9
Hallo

Du erschwerst es leider ungemein dir zu helfen. Bislang hast du offensichtlich weder aus deinem ersten noch aus deinem zweiten Quelltext selbst html-Dateien erstellt. Alle die dir helfen wollen sollen das aber jeder für sich machen und dir dann mit den Krüppelseiten helfen.

Das die vollständige Seite bei dir wie im Bild angezeigt wird hilft uns überhaupt nicht weiter um dir zu helfen.

Dein erster Quelltext erzeugt bei uns diese Seite

http://boratb.bplaced.net/index50.html

und der zweite Quelltext diese

http://boratb.bplaced.net/index51.html

Grundsätzlich solltest du zunächst die Fehler beseitigen

https://validator.w3.org/check?verbose=1&uri=http://boratb.bplaced.net/index51.html

Also wenn ich dich jetzt richtig verstanden habe, kann ich statt mehreren div Container jetzt <section></section> nutzen, richtig und diese in den <aside></aside> Container stecken?
Das kommt auf den Inhalt der Webseite an.

Zunächst musst du dich aber entscheiden ob du XHTML oder HTML5 verwenden willst und dich dann nach den jeweils zulässigen Regeln richten.

Im Moment bestimmst du durch den Doctype du deine Seite zu einer XHTML-Seite. Damit darfst du aber keine HTML5-Elemente verwenden. In XHTML sind nur div-Elemente zulässig.

Die Browser werden zwar XHTML-Seiten weiterhin anzeigen. Aber XHTML wurde offiziell bereits 2008 zu Grabe getragen und sollte seitdem nicht mehr verwendet werden.

Wenn in XHTML HTML5-Elemente verwendet werden ist es teilweise reine Glückssache, ob die wie gewünscht angezeigt werden.

Das gleiche gilt sicher dann auch oben für die fünf Boxen im Header, die nebeneinander angeordnet sind? (hinsichtlich der sections)
Auch das lässt sich ohne konkreten Inhalt nicht beantworten.

Gruss

MrMurphy
 

filament

Erfahrenes Mitglied
#10
Du erschwerst es leider ungemein dir zu helfen. Bislang hast du offensichtlich weder aus deinem ersten noch aus deinem zweiten Quelltext selbst html-Dateien erstellt. Alle die dir helfen wollen sollen das aber jeder für sich machen und dir dann mit den Krüppelseiten helfen.
Selbstverständlich habe ich die html Datei mit meinem Code vorliegen. Das Ergebnis ist der Screenshot o_O

Im Moment bestimmst du durch den Doctype du deine Seite zu einer XHTML-Seite. Damit darfst du aber keine HTML5-Elemente verwenden. In XHTML sind nur div-Elemente zulässig.
Das wusste ich gar nicht. Ändere ich mal :)
Das die vollständige Seite bei dir wie im Bild angezeigt wird hilft uns überhaupt nicht weiter um dir zu helfen.
Naja ich hab den Quellcode gepostet und einen Screenshot vom Problem. Ich wüsste jetzt nicht was ich sonst noch tun sollte? :(
 

Jan-Frederik Stieler

Monsterator
Moderator
#12
Hi,

zur Semantik mit der Liste und Überschriften, wenn Du eine Liste mit Auszeichnung benötigst könnte auch eine Definitionlist (DL > DT/DD)richtig sein.
Das es diese gibt wird oft vergessen.
Aber wenn Du richtige Überschriften hast dann gehört das wirklich nicht in eine Liste. Wenns nur Fett sein soll dann mach ein Strong rein oder eben wenns die Semantik hergibt eine Definitionlist.

Bei der Auswahl der HTML-Elemente nicht nach visuellen Gesichtspunkten auswählen sondern nach semantischen!

Grüße
 

filament

Erfahrenes Mitglied
#13
Danke für deinen Tipp.

Ich habe den Doctype jetzt geändert und mein Vorhaben nochmal überdacht.

Habe dazu auch einen sehr guten Beitrag bei Selfhtml mit Verlinkung zu einem Blogartikel gefunden, der wie ich finde die neuen Elemente sehr gut beschrieben hat.

Ich habe von der Liste jetzt schließlich Abstand genommen und dort sections genutzt, wo ich mit Überschriften, Links und Absätzen arbeite. Ich glaube das kommt meinen Vorstellungen am nächsten und ist semantisch korrekt.

Die Darstellung ist dadurch auch so geworden, wie ich es mir vorgestellt habe.

Dennoch möchte ich nochmal betonen, dass ich die Webseite auf meinem Rechner als HTML Datei gespeichert und betrachtet habe! Sonst hätte ich den Screenshot ja nicht machen können. Warum das bei euch so anders ausschaute kann ich mir nicht erklären :(:rolleyes:o_O

Ich bedanke mich besonders bei MrMurphy der mich nochmal hat nachlesen lassen zu HTML5. Ich glaube das war notwendig, um meinen Code zu verbessern. Es wird sicher noch nicht perfekt sein. Aber ich arbeite daran und werde noch weiter lesen ;)

P.S.: Gibt es ein Tool mit dem man sich seine Webseite in den verschiedenen Browsern ansehen kann, ohne sich jetzt alle installieren zu müssen?