|
|||
CSS-Layout der Browsergröße anpassen
Hallo zusammen,
ich hab mal wieder ein Problem mit meinem CSS-Layout. Ich möchte es gerne so anpassen das es in allen Browsern und in jeder Browsergröße gleich aussieht. Auf meinem 20" Bildschirm mit Firefox passt das ganze. Ich möchte es aber so anpassen, das wenn man das Browserfenster verkleinert sich der Inhalt verschiebt und mitverkleinert. Ich habe oben einen Kopf (Banner), links darunter die Navigation und rechts neben der Navigation der Inhalt. Jedes mal wenn ich die Größe des Browserfensters verkleinere, wird die Navigation und Inhalt zu Einem. Es wird also alles verschoben. Ich glaube es liegt daran, das kein automatischer Zeilenumbruch erzeugt wird. Was mache ich falsch, bzw. was muss ich ändern. Mein index und css sehen folgendermaßen aus: index: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="./format.css"> </head> <body> <div id="logo"> <div id="links"><img src="./pics/links.jpg"></div> <div id="mitte"><img src="./pics/mitte.jpg"></div> <div id="rechts"><img src="./pics/rechts.jpg"></div> </div> <div id="container"> <div id="left"> Navigation </div> <div id="content"> Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </div> <div id="footer">Footer</div> </div> </body> </html> Code:
body { font-family: Arial; color:#ffffff; background-color:#000000; padding:1em; margin:0; } /* ----------container zentriert das layout hintergrung-------------- */ #container { margin: 0; padding: 0; background-color: #000000; border: 1px; border-color:#ffffff; border-style: solid; min-width:900px; } /* ----------banner for logo-------------- */ #logo[id]{ margin: 0 0 1em; background-color: #000000; border: 1px; border-color:#ffffff; border-style: solid; height:11.2em; min-width:900px; } div#links{ height:11.3em; text-align:left; float:left; } div#mitte{ height:11.3em; margin-left:5em; float:left; } div#rechts{ height:11.3em; text-align:right; float:right; } /* -----------------Inhalt--------------------- */ #content{ float: left; min-height:800px; padding: 1em 2.5em; margin: 0; width:50em; border-left: 1px; border-color:#ffffff; border-style: solid; border-right:0; border-bottom:0; border-top:0; } /* --------------left navigavtion------------- */ #left{ float: left; width: 19em; margin: 0; padding: 0; color:#ffffff; min-height:600px; } /* -----------footer--------------------------- */ #footer { clear: left; padding: 0; margin: 0; margin-left: 19em; border-left: 1px; border-color:#ffffff; border-style: solid; border-right:0; border-bottom:0; border-top:0; } Lg Jen |
Sponsored Links |
|
|||
Du hast min-width in px drin, das verhindert das Schrumpfen in guten Browsern in gewissem Maß.
Auch em ist eine "feste" Größe, bezogen auf die Schriftgröße. Verwende Prozentangaben für ALLE Breiten wichtiger Container, wenn Du eine Anpassung an das Browserfenster willst. ( Klar, min-width geht trotzdem, dann ist das Design nur halbflexibel) Dann allerdings musst Du aufpassen mit margin- und padding-Werten solcher Container. Gib margins und paddings lieber den innen liegenden Elementen.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
So ich hab jetzt ma die breiten in %-Angaben geändert.
Leider geht es immer noch nicht. Was meinst du genau mit den margin und padding? Was soll ich da ändern? Mein css sieht nun folgendermaßen aus: Code:
body { font-family: Arial; color:#ffffff; background-color:#000000; padding:1em; margin:0; } /* ----------container zentriert das layout-------------- */ #container { margin: 0; padding: 0; background-color: #000000; border: 1px; border-color:#ffffff; border-style: solid; width:100%; } /* ----------banner for logo-------------- */ #logo[id]{ margin: 0 0 1em; background-color: #000000; border: 1px; border-color:#ffffff; border-style: solid; height:11.2em; min-width:900px; } div#links{ height:11.3em; text-align:left; float:left; } div#mitte{ height:11.3em; margin-left:5em; float:left; } div#rechts{ height:11.3em; text-align:right; float:right; } /* -----------------Inhalt--------------------- */ #content{ float: left; min-height:800px; padding: 1em 2.5em; margin: 0; width:60%; border-left: 1px; border-color:#ffffff; border-style: solid; border-right:0; border-bottom:0; border-top:0; } /* --------------left navigavtion------------- */ #left{ float: left; width: 19em; margin: 0; padding: 0; color:#ffffff; min-height:600px; } /* -----------footer--------------------------- */ #footer { clear: left; padding: 0; margin: 0; margin-left: 19em; border-left: 1px; border-color:#ffffff; border-style: solid; border-right:0; border-bottom:0; border-top:0; } |
|
|||
Ich gebe Dir mal ein ganz einfaches Beispiel für ein veränderliches Layout abhängig von der Browserfenstergröße bzw. -breite ( liquid Layout)
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>liquid 3 columns</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <style type="text/css"><!-- * { margin: 0; padding: 0; } #wrapper { width: 80%; margin: 0 auto; color: #000; background-color: #333; } #lnavi { float: left; width: 20%; min-height: 500px; background-color: #aaa; /*padding-left: 30%; */ } #rnavi { float: right; width: 20%; min-height: 500px; background-color: #ddd; } #content { margin: 0 20%; background-color: #cc0; min-height: 100% ; width: 60%; } #footer { height: 5em; background-color: #ff0; width: 100%; clear: both; margin-bottom: -5em; } --></style> </head> <body> <div id="wrapper"><div id="lnavi"><p>lnavi</p></div><div id="rnavi"><p>rnavi</p></div><div id="content"><p>content</p></div><div id="footer"><p>footer</p></div></div> </body> </html> Deshalb meine ich, dass es besser ist, padding und margins (zum Beispiel, um Textabsätze oder Bilder zu positionieren) den jeweiligen Absätzen oder Bildern mitzugeben als dem umgebenden Container.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Stichwörter |
browsergröße, css, layout |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Layout Komplex | yanu | CSS | 0 | 01.04.2009 21:27 |
CSS Layout für Fortgeschrittene | StefanE | CSS | 2 | 15.01.2009 08:39 |
Joomla und CSS Layout ohne Tabellen ... | MoYo | CSS | 2 | 15.02.2007 11:19 |
CSS Layout - ist das so möglich? | berlina | CSS | 18 | 12.02.2007 22:55 |
Layout Problem CSS | david.bellem | CSS | 8 | 17.09.2004 12:59 |