Auf Thema antworten 2026

Beitrag

<blockquote data-quote="mike913" data-source="post: 2550588" data-attributes="member: 446164">Hallo, ich möchte eine Webseite erstellen, bei der die Navigation auf der rechten Seite fest positioniert ist.Der Inhalt/Content der Seite soll immer mittig positioniert sein, so dass der Abstand nach links zum Bildschirmrand und der Abstand zwischen Inhalt/Content und der Navigation auch beim Skalieren der Seite immer gleich groß bleibt.Zur Veranschaulichung hier ein ganz grober Entwurf des Layout:&nbsp;Das Ganze habe ich bereits versucht mit folgendem Code umzusetzen:[html]&lt;!DOCTYPE html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;layout.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;container&quot;&gt;&lt;div id=&quot;box&quot;&gt;&nbsp; &lt;h1&gt;Inhalt / Content&lt;/h1&gt;&lt;p&gt;Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et doloremLorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et doloremLorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et doloremLorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et doloremLorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et doloremLorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem&lt;/p&gt;&lt;/div&gt;&nbsp; &lt;div id=&quot;box2&quot;&gt;&nbsp; &nbsp; &lt;h1&gt;Navigation&lt;/h1&gt;&nbsp;&nbsp; &lt;/div&gt;&lt;/div&gt;&nbsp; &lt;/body&gt;&lt;/html&gt;[/html][code=CSS]*{margin:0;padding:0;}&nbsp;.container{max-width:600px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; margin:0 auto;}#box{max-width:600px;&nbsp; &nbsp;&nbsp; border:1px solid lime;&nbsp; &nbsp;&nbsp; text-align:center;&nbsp; &nbsp;&nbsp; padding:20px;&nbsp; &nbsp;&nbsp; box-sizing:border-box;&nbsp; &nbsp;&nbsp; position:abolute;&nbsp; &nbsp;&nbsp; margin-left:-160px;&nbsp; &nbsp; &nbsp; z-index:1;}&nbsp; &nbsp; #box2{width:320px;&nbsp; &nbsp; &nbsp; position:fixed;&nbsp; &nbsp; &nbsp; right:0;&nbsp; &nbsp; &nbsp; top:0;&nbsp; &nbsp; &nbsp; bottom:0;&nbsp; &nbsp; &nbsp; z-index:3;&nbsp; &nbsp; &nbsp; background:lime;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; #box2 h1{font-weight:bold;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; text-transform:upercase;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align:center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family:sans-serif;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @media screen and (max-width:950px) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #box2{width:200px;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #box{margin-left:-100px;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }[/code]Das Ganze funktioniert auf diese Weise soweit.Meine Frage ist, ob das Layout auch so richtig mit HTML und CSS umgesetz ist?Oder hätte man da anders vorgehen müssen?</blockquote>

[QUOTE="mike913, post: 2550588, member: 446164"] Hallo, ich möchte eine Webseite erstellen, bei der die Navigation auf der rechten Seite fest positioniert ist. Der Inhalt/Content der Seite soll immer mittig positioniert sein, so dass der Abstand nach links zum Bildschirmrand und der Abstand zwischen Inhalt/Content und der Navigation auch beim Skalieren der Seite immer gleich groß bleibt. Zur Veranschaulichung hier ein ganz grober Entwurf des Layout: Das Ganze habe ich bereits versucht mit folgendem Code umzusetzen: [html]<!DOCTYPE html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="layout.css"> </head> <body> <div class="container"> <div id="box"> <h1>Inhalt / Content</h1> Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem </div> <div id="box2"> <h1>Navigation</h1> </div> </div> </body> </html>[/html] [code=CSS]*{margin:0; padding:0;} .container{max-width:600px; margin:0 auto;} #box{max-width:600px; border:1px solid lime; text-align:center; padding:20px; box-sizing:border-box; position:abolute; margin-left:-160px; z-index:1;} #box2{width:320px; position:fixed; right:0; top:0; bottom:0; z-index:3; background:lime;} #box2 h1{font-weight:bold; text-transform:upercase; text-align:center; font-family:sans-serif;} @media screen and (max-width:950px) { #box2{width:200px;} #box{margin-left:-100px;} }[/code] Das Ganze funktioniert auf diese Weise soweit. Meine Frage ist, ob das Layout auch so richtig mit HTML und CSS umgesetz ist? Oder hätte man da anders vorgehen müssen? [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?