|
|||
Breite von DIVs
Hallo,
habe jetzt mal angefangen mit XhTML und CSS das Design für meine Homepage zu erstellen. Dabei möchte ich ein 2 spaltiges Layout benutzen. Die linke Seite soll dabei 160px (Prozentangabe benutze ich nicht, damit das Menü nicht zusammengeschoben wird) groß sein. Der Conent-Bereich auf der rechten soll den Rest ausfüllen. Welche Breite muß ich dort angeben? Gebe ich nichts an wird der Bereich so breit wie der Inhalt. Eine feste Pixelbreite will ich nicht angeben, da es ja unabhängig von der Auflösung sein soll. Thx, Daniel |
Sponsored Links |
|
|||
Moin,
ich habe gerade gestern mit einem ähnlichen Problem gekämpft. Lösung: hab ich nicht. Nur alternativen... Es ist eine gute Idee, die Breite des Layots auf 760px zu begrenzen, da 1. die meissten Leute mit 800x600 surfen und 2. das Layout nicht so gestreckt wird falls mal jemand mit 1280x1024 surft. Was hast du denn beim rechten div angegeben? Das linke wird wohl float:left sein, oder ? Hast du das rechte mit float:right oder ohne Angabe dazu gesetzt? Ich werde da auch noch einmal rumprobieren. MfG |
Sponsored Links |
|
|||
Zitat:
Generell sollte der Besucher einer Website doch selbst entscheiden in welcher Auflösung er Surft. Sprechen wir doch von Client-Unabhänig; soweit so gut - sicher sollte man natürlich eine Mindestauflösung ( 800x600 ) berücksichtigen. Aus diesem Grund sieht CSS2 ja auch die Werte MAX-WIDTH und MIN-WIDTH vor. Leider kann die der IE6 noch nicht. Deshalb mein Vorschlag: 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"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- html,body { background-color: #FFFFFF; /* Hintergrungfarbe zur Kontrolle */ color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.9em; margin: 0px; padding: 0px; } #nav { width: 195px; background-color: #FF9900; float: left; } #minimumrest { background-color: #00FF00; /* Hintergrungfarbe nur zur Kontrolle */ width: 100%; /* Prozentual vom Eltern-Element (#rest); d.h. volle verbleibende Breite; für IE */ height: 4px; /* 4px nur zur Kontrolle ; besser 1px weil sowieso nicht sichtbar */ border: 0px; } #rest { background-color: #0099FF; float: left; max-width: 75%; /* 75% von 780px = 585px; damit wird die 800x600 ordentlich Angezeigt */ min-width: 585px; } .box { border: 1px solid #000000; margin: 5px; padding: 8px; } --> </style> </head> <body><div id="nav"> <div class="box">Inhalt</div> <div class="box">Inhalt & & </div> </div><div id="rest"> <div class="box">Inhalt</div> <div class="box">Inhalt & & & & </div> <div class="box">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> [img]x.gif[/img]</div></body></html> Die 2 Container die das Layout in NAV und Rest unterteilen sollten in jedem Fall ohne Border, Padding und Margin definiert werden; Da ja nach dem BOX-Modell genau diese Werte zu den Width-Angaben addiert werden und dann ist Essi-sch(-g) mit 100%........
__________________
</ulle> |
|
|||
Es gibt eine Lösung:
Du lässt den div-Container für die Navigation links floaten, den für den Inhalt nicht. Da der Navi-Container floatet, gehört er nicht mehr zum Textfluß und liegt über dem Inhalts-Container. Dieser hat eine voreingestellte Breite von 100%. Nun gibst du ihm noch ein margin-left von z.B. 170px. Fertig: Code:
<div style="float:left;width:160px;border:1px solid #000;"> Navigation </div> <div style="margin-left:170px;border:1px solid #000;"> inhalt </div> Gruß Thomas |
|
|||
da habe ich mich ja schön auf's Glatteis führen lassen.........
zumal die css4you-site ja genau auf diesem Prinzip beruht und Thomas dies schon mal ausführlich in diesem Forum (alt) erklärt hat. TOP-Lösung von Thomas übrigens es gibt noch einen Effekt mit FLOAT: http://www.webwriting.de/sogehts/css...utfloater.html hier der gesamte workaround: http://www.webwriting.de/sogehts/css...al/tutalle.htm nun steht ja einer Website mit relativer Breite nichts mehr im weg |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div über volle Breite innerhalb eines divs mit fester Breite möglich? | philippsen | CSS | 1 | 24.11.2013 19:28 |
Horizontaler Scroll mit DIVs und Breite über Javascript | kolarsky | Javascript & Ajax | 1 | 16.08.2010 11:18 |
3 Spalten Layout mit Divs - mitte fest, Seiten dynamische Breite | devnull | CSS | 3 | 02.02.2009 11:03 |
floaten von divs ohne breite | dany | CSS | 18 | 27.03.2008 12:34 |
100 % breite divs nebeneinander mit innenabstand verutsch natürlich alles... | bastien | CSS | 3 | 17.01.2008 23:40 |