|
|||
Einfaches Grundgerüst Navi verschiebt Content
Hallo Leute,
ich komme mal wieder mit einem Problem. Ich habe mir mal ein einfaches HTML/CSS Grundgerüst gebaut aber die Navi verschiebt mir immer die anderen bereiche. Ich habe nun schon versucht das mit Z-Index zu verhindern aber es will nicht so recht gehen. HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Einfaches Grundgerüst</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; border:none; } #wrapper { background:#eee; width:960px; margin:0 auto; position:relative; } #wrapper:before { content:""; position:absolute; left:0px; top:0; bottom:0; width:200px; background:#aaa; } #wrapper:after { content:""; position:absolute; right:0px; top:0; bottom:0; width:200px; background:#dad; } #header , #footer { position:relative; z-index:10; } #header { padding:20px; background:#cdc; text-align:center; } #navigation { padding:20px; background:#FF0000; text-align:center; position:relative; z-index:10; } #left { position:relative; z-index:1; width:200px; float:left; } #right { position:relative; z-index:1; width:200px; float:left; } #content { width:559px; float:left; } #footer { padding:20px; clear:both; background:#cdc; } h4 , p , pre, ul{ padding:10px; } /* Beginn Navigation */ #navi li { width:128px; float:left; } #navi li ul { display:none; } #navi li:hover ul, #navi li:hover ul li { display:block; z-index: 99; } </style> </head> <body> <div id="wrapper"> <div id="header">Header</div> <div id="navigation"> <div id="navcontainer"> <ul id="navi"> <li><a href="#">Test1</a></li> <li><a href="#">Test2</a> <ul> <li><a href="#">Test 2.1</a></li> <li><a href="#">Test 2.2</a></li> <li><a href="#">Test 2.3</a></li> </ul> </li> <li><a href="#">Test3</a> <ul> <li><a href="#">Test3.1</a></li> <li><a href="#">Test3.2</a></li> <li><a href="#">Test3.3</a></li> </ul> </li> <li><a href="#">Test4</a></li> </ul> </div> </div> <div id="left">Links</div> <div id="content">Content</div> <div id="right">Rechts</div> <div id="footer">Footer</div> </div> </body> </html> Gruß StandBy1 |
Sponsored Links |
|
|||
Richtig klären! Und was soll das Ganze mit z-index?
Beispiel: Edit fiddle - JSFiddle Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> * { margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } p { padding: 1em; } html { background-color:#fff; font-family: Verdana, sans-serif; font-size: 120%; } body { background-color: #cdc; max-width: 960px; margin: 0 auto; } header { text-align: center; } nav { padding: 20px; background-color: #f00; } nav ul:after { display: block; content: ""; clear: both; } nav ul { border: 1px dotted #000; list-style-type: none; } nav ul li { width: 128px; float: left; } nav ul li a { background-color: white; color: black; display: block; } main { background-color: #fff; position: relative; overflow: hidden; } main:before { background-color: #aaa; content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 200px; } main:after { background-color: #dad; content:""; position: absolute; right: 0; top: 0; bottom: 0; width: 200px; } #left { position: relative; z-index: 1; width: 200px; float: left; } #content { margin: 0 200px; } #right { position: relative; z-index: 1; float: right; width: 200px; } footer { font-weight: bold; } @media screen and (max-width: 800px) { main:after, main:before { content: normal; position: static; } #content { margin: 0; } #right, #left { position: static; float: none; width: 100%; } #right { background: #dad; } #left { background: #aaa; } } </style> </head> <body> <header> <h1>Lorem ipsum.</h1> <nav> <ul> <li><a href="#">Test1</a></li> <li><a href="#">Test2</a></li> </ul> </nav> </header> <main> <div id="left"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div id="right"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae.</p> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae.</p> </div> </main> <footer> <p>Lorem ipsum.</p> </footer> </body> </html> MfG Roland __________________________________________________ __ Du möchtest gleich hohe Spalten die kann auch mit Flexbox umsetzen. Falls du dich neu umorientieren möchtest. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Geändert von K.Roland (08.03.2015 um 17:35 Uhr) Grund: Nachtrag |
Sponsored Links |
|
|||
Hallo Roland,
ich verstehe gerade nicht was du mit "Richtig klären!" meinst. Aber ich werde mir Morgen deinen ansatz mal anschauen. Die Z-Index sind dafür da das keine Box die andere überlagert. Der Witz an Vorlage ist ja das egal welche der 3 Boxen länger wird ( Links, Content, Rechts ) immer die 2 beiden anderen mit größer werden. Gruß StandBy1 |
|
|||
An einer richtigen Stelle muss Float gecleart werden.
Finde es selbst heraus. Zitat:
http://jsfiddle.net/jsbmnmu4/ Bei deinem Beispiel ja z-index auch für ... _____________ MfG Roland Geändert von K.Roland (08.03.2015 um 22:07 Uhr) Grund: Nachtrag |
|
|||
Halo Roland,
danke für das abnehmen der Tomaten vor meinen Augen. Das mit dem Float hätte ich eigentlich selbst sehen müssen. Und mit den Z-Indexen hast du sicher recht muss ich noch mal schauen weil ich da einige zum Testen eingebaut hatte. Danke und Gruß StandBy1 |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Validator verbietet Attribut bei Link - Hilfe! ;) | bastkrug | (X)HTML | 7 | 20.02.2014 13:28 |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 18:40 |
Ungewöhnlicher abstand beim clearen von floats | adrianno | CSS | 14 | 16.09.2009 15:20 |
Seitenaufbau mit DIVs und 100% Höhe | vespasquire | CSS | 6 | 12.09.2004 16:21 |