XHTMLforum - Breite von DIVs

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Breite von DIVs (http://xhtmlforum.de/showthread.php?t=31964)

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

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

Hi,

genau, das linke ist float:left. Bei der rechten Spalte hab ich das float:right; gesetzt.

Daniel

Zitat:

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.

Eine schlechte Idee

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>

:roll:

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%........

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

ich kämpfte schon lange mit einem ähnlichen Problem. margin-left ist die Lösung. Danke für den Tip Thomas

:oops: 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

Zitat:

Zitat von Anonymous

:oops: da habe ich mich ja schön auf's Glatteis führen lassen.........

:?: :?: das war ich.........., ich war aber angemeldet :?: :?:

Hi,

danke nochmal. Die Lösung ist ja genial einfach. :o

Daniel