layout-frage

davidos_no.1

ich habe hier ein layout, das ich nicht umgesetzt bekomme. mit tabellen ist es kein problem, jedoch will ich es jetzt gerne mit div's machen und das bereitet mir probleme. anhand ein bild, das mein layout zeigt. probleme bereiten mir die div's wrapper, content und info.
der wrapper soll die gleiche weite wie die anderen (header, navi, footer) div's haben. im wrapper soll links ein div (content) und rechts ein div (info) stehen, die beide einen abstand (oben und unten) zum wrapper von 10px haben.
ich hoffe ihr könnt mir weiter helfen!

gruß

p.s.: der abstand zwischen content und info sollte gleich 0 sein (im bild falsch dargestellt)...

synaptic

content und info müssen nen float:left; bekommen und dürfen zusammen(mit padding und margin) nich breiter sein, als der sie umliegende wrapper..

koslowski

Hi,

Zitat von synaptic

content und info müssen nen float:left; bekommen und dürfen zusammen(mit padding und margin) nich breiter sein, als der sie umliegende wrapper..

stimmt, die würde ich auch floaten lassen (clearen nicht vergessen!).

#wrapper sollte allerdings alle container auf der Seite umschließen.
Dann tust du dich auch leichter, wenn du die komplette Seite horizontal zentrieren willst.

koslowski

davidos_no.1

super!
kann ich "clear" (left oder both?) im footer einfügen?
ne, ich will die seite nicht zentrieren, das ist so schon ok - trotzdem danke!

synaptic

ich würd das clearen immer dann machen, wenn ich mit floaten fertig bin.
kommen keine anderen elemente mehr in deinen wrapper für content und info, würd ich im code hinter info nen span oder div einfügen und dem nen clear:both; verpassen

davidos_no.1

ok...habe ich das so richtig verstanden, dass das div mit "clear" dann keine rolle als darstellendes objekt hat, sondern nur, um die formatierung der anderen div's aufzuheben? es spielt sonst praktisch keine rolle, solange ihm keine weite, höhe, inhalt gegeben wird?

koslowski

Hi,

Zitat von davidos_no.1

super!
kann ich "clear" (left oder both?) im footer einfügen?
ne, ich will die seite nicht zentrieren, das ist so schon ok - trotzdem danke!

Hier einfach mal ein paar Merksätze zu float/clear:

Zitat

Merksätze zu Float
Beim float schwebt die gefloatete Box in der umgebenden Box nach oben und dann je nach float entweder ganz nach rechts oder ganz nach links.
Nachfolgende Elemente ordnen sich daneben an, solange es der Platz zulässt.
Nur die Inhalte umfließen den Float, die Box selber erstreckt sich auch unter dem Float.
Ein Element wird durch float immer als Blockelement dargestellt.
Elemente mit float schrumpfen auf die Breite ihres Inhalts zusammen, sofern es keine Breitenangabe für das gefloatete Element gibt.
Mehrere Floats ordnen sich nebeneinander an, solange es der Platz zulässt.
Elemente mit float hängen aus umgebenden Elementen raus, wenn keine Maßnahmen zum Einschließen ergriffen werden.

Merksätze zuClear
Mit clear wird das Umfließen von float-Elementen beendet.
Ein Element mit clear ordnet sich unter dem gefloateten Element an, d.h. der normale Textfluß wird wiederhergestellt.
Ein Element mit clear nach den Floats lässt umgebende Elemente die Floats einschließen.
clear ist nur auf Blockelemente anwendbar die nicht absolut positioniert sind.
Maßnahmen zum Clearen:
-Wenn ein nachfolgendes Element (z.B. Fußzeile) die Aufgabe des clearens übernehmen kann, so nutze sie.
-ein hardcodiertes clear in Form z.B. einer <hr />, die die clear-Eigenschaft bekommt.
- das umgebende Element des Floats in Verbindung mit einer Breite ebenfalls floaten lassen (set a float to fix a float!).

overflow:hidden; zum Einschließen von Floats ist zwar simpel aber nicht anzuraten.
In älteren Geckos ist es z.B. nicht möglich ein Dropdown-Menü über einem Container mit overflow:hidden; aufklappen zu lassen.
Inhaltsbereiche werden abgeschnitten und somit unzugänglich. Besonders wenn größere Bereiche mit mehreren gefloateten Spalten eingeschlossen werden sollen.

Alles anzeigen

vielleicht ist das ja nützlich für dich.

koslowski

synaptic

Zitat von davidos_no.1

ok...habe ich das so richtig verstanden, dass das div mit "clear" dann keine rolle als darstellendes objekt hat, sondern nur, um die formatierung der anderen div's aufzuheben? es spielt sonst praktisch keine rolle, solange ihm keine weite, höhe, inhalt gegeben wird?

haste richtig erkannt, ansonsten ist den worten vom koslowski nix hinzuzufügen:-D:D

davidos_no.1

habe jetzt alles verstanden, nur eine frage kann ich nicht selbst lösen...
meine div's habe ich jetzt folgender maßen formatiert

Code

#wrapper
{width:80%;
 height:190px;
 background:#111111;
 margin-bottom:10px; } 
#content
{width:???;
 height:180px;
 background:#111111;
 float:left;
 margin-top:5px;
 margin-bottom:5px;
 padding-left:5px;
 padding-right:5px; }
#info
{width:???;
 height:180px;
 background:#111111;
 float:left;
 margin-top:5px;
 margin-bottom:5px;
 padding-left:5px;
 padding-right:5px; } 
#clearer
{clear:both; }

Alles anzeigen

info soll 190px groß sein und content den rest 80% vom wrapper füllen. habe schon einiges probiert, aber es hat sich immer alles verschoben. kann mir jemand helfen?

synaptic

also wenn der wrapper 80% haben soll, content 80% vom wrapper haben soll und info immer 190px, wird sich das ganze verschieben, sobald der platz nich mehr ausreicht- denke ich zumindest...
gib mal bitte den html-code dazu, dann teste ich mal was rum

sejuma

Versuch's mal so:

Code

#content
{
 height:180px;
 background:green;
width: auto;
 margin-top:5px;
 margin-bottom:5px;
 padding-left:5px;
 padding-right:5px; }


#info
{width:190px;
 height:180px;
 background:red;
float: right;
 margin-top:5px;
 margin-bottom:5px;
 padding-left:5px;
 padding-right:5px; }

Alles anzeigen

Code

<div id="wrapper">
<div id="info">info</div>
<div id="content">content</div>
</div>

davidos_no.1

Zitat von synaptic

also wenn der wrapper 80% haben soll, content 80% vom wrapper haben soll und info immer 190px, wird sich das ganze verschieben, sobald der platz nich mehr ausreicht- denke ich zumindest...
gib mal bitte den html-code dazu, dann teste ich mal was rum

ne ne, der wrapper ist 80% groß. nun soll info 190px groß sein und content soll den rest (80% - 190px) abdecken...

Code

<div id="wrapper">
<div id="content">&nbsp;</div>
<div id="info">&nbsp;</div>
<div id="clearer">&nbsp;</div>

Code

#wrapper
{width:80%;
 height:190px;
 background:#111111;
 margin-bottom:10px; } 
#content
{width:70%;
 height:180px;
 background:#111111;
 float:left;
 margin-top:5px;
 margin-bottom:5px;
 padding-left:5px;
 padding-right:5px; }
#info
{width:25%;
 height:180px;
 background:#111111;
 float:left;
 margin-top:5px;
 margin-bottom:5px;
 padding-left:5px;
 padding-right:5px; } 
#clearer
{clear:both; }

Alles anzeigen

synaptic

funktioniert sejumas lösung nicht? müsste doch eigentlich
was er anpackt wird valide^^

aber nur fürs richtige verständis nochmal:
wrapper 80% vom bildschirm
und in diesem wrapper 190px für info, den rest mit content auffüllen und kein margin zwischen content und info..?!?

edit: also ich hab grad mal sejumas variante getestet und wider erwartens klappte es leider nicht, meine ideen sind auch ausgeschöpft. ich vermute, dass feste werte in kombination mit prozentwerten einfach nich so gut sind
evtl klappts ja mit ner min-width von rund 70% und ner width von auto, habs net getstet fällt mir grad nur so ein.

koslowski

Moin,

Zitat von davidos_no.1

ne ne, der wrapper ist 80% groß. nun soll info 190px groß sein und content soll den rest (80% - 190px) abdecken...

deine Intensionen sind imho leider suboptimal.

den #wrapper eine 80%-Breite zuweisen schön und gut, leider kann das Layout bei sehr breiten Bildschirmen dann nicht mehr ganz so schön ausschauen.

Besser wäre es imho mit min-width/max-width und entsprechendem workaround für den IE6 und kleiner zu arbeiten.
Und Höhen vergibt man für Spalten normal auch nicht, da das dein Layout unflexibel macht.

Wenn ich das richtig gelesen habe hast du dich gerade für einen "Tabellenausstieg" entschieden.

An deiner Stelle würde ich es erstmal mit festen Breiten probieren, um ein Gefühl für div-Layouts mit CSS zu bekommen.

Du mußt bedenken, wenn du bisher mit Tabellen gearbeitet hast, ist das Tabellendenken ja im Moment immer noch in deinem Kopf drin.
Dieses Denken ist leider mehr als hinderlich für den Umstieg.

Den Umstieg zu schaffen ist keinesfalls leicht und mit viel Arbeit verbunden, aber die Arbeit lohnt sich.

Es gibt ausgezeichnete Bücher, die dir den Umstieg erleichtern und nebenbei noch Spaß machen zu lesen.
Für den Anfang: Little Boxes 1 u. 2

Für den fortgeschrittenen Fortgeschrittenen: Fortgeschrittene CSS-Techniken.
Dieses Buch ist vom Niveau her schon sehr weit oben anzusiedeln und bietet auch CSS'lern, die denken sie wüßten schon ne Menge die Erkenntnis, das es mit ihrem Können wohl doch nicht so weit her ist.

koslowski

davidos_no.1

erstmal vielen dank!
ich versuche mal eure tipps umzusetzen...

davidos_no.1

ich habe jetzt ein bisschen herum probiert, aber ich schaffe es einfach nicht, vielleicht sieht einer ja den fehler.

HTML

<!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>
<link rel="stylesheet" href="css/config.css" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<body>


<div id="header"></div>


<div id="menu">
    <a href="" target="_self">Blog</a> |
    <a href="" target="_self">Bio</a> |
    <a href="" target="_self">Contact</a>
</div>


<div id="titel"></div>


<div id="wrapper">
<div id="content">
    <h2># Lorem Ipsum Dolor</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat     volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla         facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla         facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna    aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea    commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu             feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te    feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer    possim assum.
</div>
<div id="info">
    <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat     volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo                 consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla         facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla         facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna    aliquam erat volutpat.
    </div>
</div>
</div>


<div id="footer">
Copyright &copy;2008 - All Rights Reserved
</div>


</body>
</html>

Alles anzeigen

Code

body
{margin:0px;
 padding:0px;
 background-image:url(../images/bg.png);
 background-color:#111111; }
div
{font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:x-small;
 color:#CCCCCC;
 text-align:justify; }
 
#header
{width:55%;
 height:auto;
 margin-bottom:22px;
 padding:10px 25px 25px 120px;
 background:#111111; }
#menu
{width:55%;
 height:auto;
 margin-bottom:22px;
 padding:5px 25px 5px 120px;
 background:#111111; }
    #menu a:link, a:visited, a:active, a:hover
    {font-family:Verdana, Arial, Helvetica, sans-serif;
     font-size:x-small;
     color:#00CC00;
     text-decoration:none;
    font-weight:bold; }
    #menu a:hover
    {text-decoration:underline;}


#wrapper
{width:55%;
 height:auto;
 margin-bottom:22px; }
#content
{width:auto;
 height:auto;
 padding:10px 10px 25px 100px;
 background:#111111;
 float:left; }
    #content h2
    {font-family:Arial, Helvetica, sans-serif;
     font-size:medium;
     color:#999999;
     border-bottom:1px solid #333333; }
#info
{width:auto;
 height:auto;
 padding:10px 10px 25px 10px;
 background:#111111; }
    #info div
    {width:170px;
     height:auto; }
#footer
{width:55%;
 height:auto;
 margin-bottom:22px;
 padding:5px 25px 5px 120px;
 background:#111111;
 clear:both; }

Alles anzeigen

das layout sollte folgender maßen aussehen: #wrapper umschließt #content und #info, damit #content + #info immer noch die gleiche weite, wie die anderen container haben. nun soll sich #info rechts neben #content platzieren. ich habe viel versucht, aber es leider nicht geschafft. der umstieg von tabellen zu div's ist gar nicht so einfach...

koslowski

Hi,

#content und #info brauchen eine feste Breite und sollten beide floaten schon um einen "Block Formatting Context" zu erzeugen.
Ohne feste Breite werden Blockelemente so breit wie es geht.

#wrapper sollte eigentlich alles umschließen.

#header, #menue und #footer sind übrigens breiter als 55%.

Boxmodell!!
Die wahre Breite einer Box:
padding + width +border + margin

Nochmal: Schau dir meine Literaturempfehlungen an, bzw. arbeite sie durch.
Das ist alles nicht so leicht zu verstehen.

Mit trial und error holst du dir nur den Frust.

koslowski

davidos_no.1

Zitat von koslowski

Hi,

#content und #info brauchen eine feste Breite und sollten beide floaten schon um einen "Block Formatting Context" zu erzeugen.
Ohne feste Breite werden Blockelemente so breit wie es geht.

#wrapper sollte eigentlich alles umschließen.

#header, #menue und #footer sind übrigens breiter als 55%.

Boxmodell!!
Die wahre Breite einer Box:
padding + width +border + margin

Nochmal: Schau dir meine Literaturempfehlungen an, bzw. arbeite sie durch.
Das ist alles nicht so leicht zu verstehen.

Mit trial und error holst du dir nur den Frust.

koslowski

Alles anzeigen

ok, sie brauchen eine feste breite, aber wie mache ich das denn? ich kann ja schlecht sagen #content=30% + #info=25% = 55% (wenn die wahre breite 55% wäre)...
das mit der wahren breite überarbeite ich nochmal, aber auch hier weiß ich nicht genau, wie ich das machen soll. margin/padding habe ich in px angegeben - wie kann ich die zur relativen breite 55% dazu zählen?
danke für die bücher, aber das programmieren ist nur eine nebenbeschäftigung und dafür will ich kein geld für bücher ausgeben. da mache ich es doch lieber mit trial und error.

koslowski

Tach

Zitat von davidos_no.1

ok, sie brauchen eine feste breite, aber wie mache ich das denn? ich kann ja schlecht sagen #content=30% + #info=25% = 55% (wenn die wahre breite 55% wäre)...

dann vergiß % und arbeite einheitlich mit em und/oder px.
Da tust du dich bei deinem Kenntnisstand leichter.

Zitat von davidos_no.1

danke für die bücher, aber das programmieren ist nur eine nebenbeschäftigung und dafür will ich kein geld für bücher ausgeben. da mache ich es doch lieber mit trial und error.

Kein Problem, deine Entscheidung.

davidos_no.1

ok, mit px bekomme ich es hin...dann irgendwann mache ich es vielleicht mal mit %. der tipp mit der wahren breite hat mir auch weiter geholfen - vielen dank!

layout-frage

Tags

Benutzer online in diesem Thema