<header> und <nav> nebeneinander statt untereinander?

[Sid786]

Hi html.de,

ist es möglich <header> und <nav> nebeneinander zu setzen? Der Header enthält nur ein Logo und die Navigation soll direkt daneben.

Gruß und Dank

 

[MrMurphy]

Hallo

Ja, dafür gibt es verschiedene Lösungen, die auch vom HTML-Quelltext abhängen.

Am sinnvollsten ist aktuell das Flexbox-Modell.

Gruss

MrMurphy

 

[SpiceLab]

ist es möglich <header> und <nav> nebeneinander zu setzen?

Gegenfrage: Warum sollte das nicht möglich sein?

Rein technisch betrachtet, spielt es erstmal keine Rolle, um welche HTML-Elemente es sich hierbei handelt.

Aber wie @MrMurphy schon angedeutet hat, sind solche Vorhaben kontextabhängig, und je nach Konstellation des HTML-Codes dann auch unterschiedliche Techniken opportun.

Aber Flexbox ist aktuell einfach schier unschlagbar mit seinen Möglichkeiten - vor allem u. spätestens, wenn Responsive Webdesign ins Spiel kommt.

Da sich Deine Frage offensichtlich auf die technische CSS-Umsetzung bezieht, wird das Thema entsprechend umplatziert.

 

[Sid786]

Danke. Ich les mich mal zum Thema Flexbox ein.

 

[SpiceLab]

Danke. Ich les mich mal zum Thema Flexbox ein.

Guter Plan und lobenswerte Einstellung :)

Könnte sich so manch' anderer User mal eine dicke Scheibe von abschneiden, anstatt auf seinem Anfängerstatus zu beharren :(

Hätte noch ein paar Links im Angebot, um Flexbox näher kennenzulernen:

1. https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
2. https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Größenangaben/Flexbox
3. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
   • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
   • https://developer.mozilla.org/en-US...out/Using_flexbox_to_lay_out_web_applications
4. https://css-tricks.com/snippets/css/a-guide-to-flexbox
5. https://davidwalsh.name/flexbox-layouts
6. https://tympanus.net/codrops/css_reference/flexbox/
   
7. http://www.w3schools.com/css/css3_flexbox.asp

Sowie Live-Demos und experimentelle Playgrounds:

• https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
• https://demo.agektmr.com/flexbox/
• http://fairwaytech.com/flexbox/flexbox-demos/
• http://flexboxgrid.com/
• https://umaar.github.io/css-flexbox-demo/
• ...

Für den Fall, dass Dir das Angebot (noch) nicht genügt, können weitere Quellen bei Google erfragt werden