filament
Erfahrenes Mitglied
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:
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:
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:
Ich wäre für Hilfestellung in beiden Dingen sehr dankbar!
Liebe Grüße
Ronny
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
