|
|||
Frameset mit CSS - Kleinigkeit fehlt noch
Hallo allerseits,
hoffe, dass mir einer von euch bei meinem Problem helfen kann. Ich habe eine Seite, die ich komplett auf CSS umstellen möchte und verzweifle gerade ein wenig Habe mal alles hochgeladen unter http://www.r2host.de. Das Problem besteht darin, dass die Optik im Firefox stimmt, im IE aber leider voll daneben aussieht. Der Scrollbalken geht über die komplette Seite und der Hintergrund der Navigation geht nicht bis zum Ende der Seite. Bin schon auf zig Seiten gewesen mit fertigen Layouts, habe meines aber leider nicht gefunden. Bin für jeden Tip dankbar. Gruß Hannes |
Sponsored Links |
|
||||
Zitat:
Oder suchst du eine Möglichkeit nur den Content Bereich scrollen zu lassen? Dann siehe overflow: auto. Zitat:
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde - #me { position: absolute; } |
Sponsored Links |
|
|||
Danke für die schnelle Antwort!
Zitat:
Das mit dem Overflow funktioniert im Firefox sehr gut, nur im IE leider nicht. Da der Balken nicht direkt am Content kleben soll habe ich einen Container drumherum gesetzt, der mit dem folgenden Code kombiniert wird: Code:
.contentframe{ position:absolute; top:90px; left:220px; right: 0px; bottom: 0px; margin: 0px; padding: 0px; background-color: #ffffff; overflow:auto; } Zitat:
Vielen Dank, Hannes Geändert von Skeeve (26.07.2006 um 18:50 Uhr) |
|
|||
Zitat:
bin auf den Code nicht besonders fixiert. Ich würde auch nochmal von vorne anfangen. Die Optik sollte aber genau so sein wie das Layout derzeit im Firefox dargestellt wird. Ich bin mit CSS noch nicht so tief vertraut und bin mir daher nicht sicher wie das mit fixed und floating ist. Ich habe als Styles folgendes definiert: Code:
html,body{ height: 100%; max-height:100%; width: auto; background: #fff url(lightblue.gif) repeat-y 0 0; color: #000; font-size: 100.01%; font-family:Verdana,Arial,Geneva,sans-serif; margin: 0px; padding: 0px; } .head{ position:absolute; top:0px; left:0px; margin: 0px; padding: 0px; width: 100%; height: 90px; background-image: url(header.gif); display:block; } .contentframe{ /* umschließt navigation und content damit der scrollbalken am rechten rand ist */ position:absolute; top:90px; left:220px; right: 0px; bottom: 0px; margin: 0px; padding: 0px; background-color: #ffffff; overflow:auto; } .content{ width: 580px; padding: 0px; padding-left:50px; padding-right:50px; padding-top: 40px; background-color: #cccccc; } .navi{ position:absolute; top: 90px; bottom: 0px; width: 220px; margin: 0px; background-color: #d9e6f3; font-family:Arial,Verdana,Geneva,sans-serif; } |
|
|||
Wie macht man 100% minus 220px?
Edit:
Habs hinbekommen. FF und IE6.0 zeigen alles so an wie ich das möchte. Jetzt installiere ich gerade ein paar VMs, um Betriebssysteme und Browservarianten zu checken. Hier der Code, falls jemand ein ähnliches Layout braucht (habs noch nicht schöngeräumt) Code:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Layout</title> <link rel="stylesheet" media="all" type="text/css" href="style.css" /> <link rel="stylesheet" media="all" type="text/css" href="navi.css" /> </head> <body> <!-- Rahmen um den Content --> <div id="contentframe"> <!-- Anfang des Contentbereichs --> <div class="content"> <h1>Topic</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent in turpis eu tortor viverra laoreet. Donec faucibus tristique magna. Suspendisse vel arcu ac arcu lacinia vestibulum. Fusce tempus ligula ut nisl. Sed porttitor vulputate elit. Fusce porta, est in porttitor viverra, nisl mi posuere lacus, sit amet posuere odio nibh at leo. Integer nisl enim, venenatis in, nonummy ut, ullamcorper ac, diam. Aenean ultrices, tortor at mollis dapibus, nisi turpis fringilla erat, non iaculis lorem risus vitae lacus. Etiam mi lorem, scelerisque et, scelerisque nec, dapibus consequat, ante. Donec iaculis sodales leo. Aliquam feugiat. Sed sed mi et turpis pulvinar fringilla. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vitae nulla a est aliquam. </p> </div> <!-- Ende des Contentbereichs --> </div> <!-- Ende des Contentframes --> <!-- Navigation --> <div class="navi"> <img src="header_klein.gif" alt="Header" /> <ul> <li><a href="index2.html" target="_self">Link 1</a></li> <li><a href="index2.html" target="_self">Link 2</a> <ul class="subnavi"> <li><a href="index.html" target="_self">Link 2.1</a></li> <li> <a href="index.html" target="_self">Link 2.2</a> <ul> <li><a href="index.html" target="_self">Link 2.2.1</a></li> <li><a href="index.html" target="_self">Link 2.2.2</a></li> <li><a href="index.html" target="_self">Link 2.2.3</a></li> </ul> </li> <li><a href="index.html" target="_self">Link 2.3</a></li> </ul> </li> <li><a href="index.html" target="_self">Link 3</a></li> <li><a href="index.html" target="_self">Link 4</a></li> <li><a href="index.html" target="_self">Link 5</a></li> <li><a href="index.html" target="_self">Link 6</a></li> <li><a href="index.html" target="_self">Link 7</a></li> <li><a href="index.html" target="_self">Link 8</a></li> </ul> </div> <!-- Ende der Navigation --> <!-- Bannerbereich: Topnavigation etc --> <div class="head"> <div class="logo"> <img src="logo.gif" width="210" height="65" alt="Logo" /> </div> <ul class="topnavi"> <li><a href="index.html">Link 1</a></li> <li><a href="index.html">Link 2</a></li> <li><a href="index.html">Link 3</a></li> <li><a href="index.html">Link 4</a></li> <li><a href="index.html">Link 5</a></li> <li><a href="index.html">Link 6</a></li> </ul> </div> <!-- Ende des Bannerbereichs --> </body> </html> Code:
body{ max-height:100%; width: auto; background: #fff url(lightblue.gif) repeat-y 0 0; color: #000; font-size: 100.01%; font-family:Verdana,Arial,Geneva,sans-serif; margin: 0px; padding: 0px; overflow: hidden; } .head{ position:absolute; top:0px; left:0px; margin: 0px; padding: 0px; width: 100%; height: 90px; background-image: url(header.gif); display:block; } #contentframe{ position:fixed; top: 90px; left:0; right: 0px; bottom: 0px; margin: 0; padding-left: 220px; overflow:auto; } .content{ width: 480px; margin: 0; padding:40px 50px 200px 50px; /* padding: 0px; padding-left:50px; padding-right:50px; padding-top: 40px; */ background-color: #cccccc; } .content p{ font-family:Verdana,Geneva,Arial,sans-serif; font-size:11px; color: #000000; line-height: 18px } .content h1{ font-size:14px; color: #3f4c59; font-weight: bold; line-height: 16px } .logo{ position:absolute; top:12px; left:12px; margin:0px; padding: 0px; } .navi{ position:absolute; top: 90px; bottom: 0px; width: 220px; margin: 0px; background-color: #d9e6f3; font-family:Arial,Verdana,Geneva,sans-serif; } /* ###################### ie hacks ###################### */ /* Contentbereich erst bei 90 Pixeln von oben starten lassen */ * html body { padding:90px 0 0 0; } /* Contenframebox auf 100% bringen da die innere Box die Contentframbox auf über 100% dehnt und kein overflow zustande kommt */ * html #contentframe { height: 100%; } * html .content { height: 100%; width: 580px; } /* ###################### Hacks Ende ###################### */ Geändert von Skeeve (27.07.2006 um 16:25 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 CSS Files -> 1 CSS File | Habi | CSS | 7 | 17.02.2010 16:25 |
Verschachteln und Erweitern von CSS? | DerJo | CSS | 4 | 25.01.2010 19:07 |
MYspace mehr als nur CSS oder ? | Vinceone | CSS | 0 | 12.07.2007 03:21 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |