Div Größen verbinden?

antho0304 · 12.02.2010

Hallo liebes PSD Forum,

ich habe nun endlich eine eigene Homepage und bin auch schon sehr weit. Habe bereits ein gutes Design und dies größtenteils auch schon ins Webtechnische umgesetzt. Auch ein CMS (Ilch) ist bereits eingebunden und funktioniert auch tadellos. Aber dennoch (wie hätte man es anders erwarten können?) habe ich nun ein Problem:

Da ich es per CSS nicht gebacken bekommen, dem von Ilch per PHP eingebetteten Text 24px vom Rand des Div's zu schieben habe ich mir gedacht, dass ich es einfach so mache, das der Rand und das Haupttextfeld geteilt werden, sodass 3 einzelne Div's entstehen:

Div 1 = linker Rand
Div 2 = Hauptteil (wo der Text landet)
Div 3 = rechter Rand

So weit so gut nur ist ein Problem: Ich hab die größe der 3 Div's variabel gestaltet, sodass sich der Hauptteil immer der Textgröße anpasst. Das machen die beiden Seitenteile aber nicht mit (logisch eigentlich da auch hier die größe vom inhalt bestimmt wird). Naja jedenfalls wollte ich wissen, ob es eine Möglichkeit gibt die Höhe der beiden Rand-Div's automatisch immer mit der Höhe des Haupt-Div's gleichzusetzen. Praktisch wie bei einer Tabelle. Nur halt mit Div's...

Danke euch. Ich vermute mal das es ein CSS-technisches Problem ist. Sollte es mit CSS nicht gehen bin ich auch gerne offen für Ideen aus anderen Sprachen =)

So far
Antho0304

GrafiKman · 12.02.2010

AW: Div Größen verbinden?

Ich glaube du meinst Padding. Also den Innenabstand.

Likliksnek · 12.02.2010

AW: Div Größen verbinden?

Hallo Antho,

ich bin weit davon entfernt, Profi zu sein, aber könntest du nicht vielleicht statt 3 Kästen nebeneinander einen großen machen (eben breiter als das text div), in den dein textdiv eingebettet ist?
Wenn du das große sich dann flexibel der größe des Inhaltes anpassen läßt, müßte das doch klappen, oder?

Edit: Öhm, ja, oder Padding

kannst ja nur padding-left und padding-right festlegen.

Liebe Grüße
Liklik

sokie · 12.02.2010

AW: Div Größen verbinden?

Das ist ein frage, die häufiger vorkommt. Grundsätzlich ist es nicht möglich (HTML/CSS), dass sich benachbarte Container in der höhe aneinander anpassen. Eine recht simple lösung ist allerdings die drei Container in einen div zu setzen dem man dann eine hintergrundfarbe oder ein Hintergrundbild (oder beides) zuweist. Ein Hintergrundbild muss in der y-richtung kachelbar sein. so kann man optisch erreichen, dass man drei immer gleich hohe bereiche hat, obwohl die container unterschiedlich hoch sind. Es empfiehlt sich einem der inneren (drei) Container eine Mindesthöhe zu geben.
diese Technik nennt sich auch "Faux Columns" ->

antho0304 · 12.02.2010

AW: Div Größen verbinden?

@Grafikman: Inwiefern meinst du das mit Padding?
Also der Text lässt sich, da von Ilch per PHP eingebettet, nicht per CSS verarbeiten:

Ausschnitt aus CSS:

Code:

p, ul, ol {
  margin:0;
  padding:24px 0 0 24px;
}

#main {
    float: left;
    margin: 0 0 0 0;
    width: 764px;
    height: 0 auto;
    background:url(...) repeat-y;
}

#main_left {
    float:left;
    margin: 0 0 0 100px;
    width:21px;
    height: 0 auto;
    background:url(...) repeat-y;
}

#main_right {
    float:left;
    margin: 0 0 0 0;
    width:15px;
    height: 0 auto;
    background:url(...) repeat-y;
}

Und der Abschnitt aus der index.htm:

HTML:

    <div id="main_left"></div>
    <div id="main"><p>{EXPLODE}<p></div>
    <div id="main_right"></div>

@Likliksnek: Das hatte ich schon versucht, wie man an meinem padding abschnitt im CSS Teil sieht, dennoch scheint Ilch sowas schlicht und ergreifend nciht umzusetzen. Deswegen habe ich mir gedacht, dass ich es Ilch einfach technisch unmöglich mache bis an den Rand meines Div's zu gehen =)

btw.: Danke für die schnellen Antworten =)

Helmschrot · 12.02.2010

AW: Div Größen verbinden?

Hi,

so wie du die Grafiken eingebunden hast funktioniert das nicht.

Das richtige Stichwort (Faux Columns technik) ist schon gefallen.

Arbeite das mal durch, damit du es verstehst.

Für flüssige Layouts gibts noch Faux Columns Liquid.

@sokie Warum sollte man einem der inneren Container eine Mindesthöhe geben? Ist imho vollkommen unnötig.

antho0304 · 12.02.2010

AW: Div Größen verbinden?

Hey,

die Sache mit den Faux Columns ist nicht das was ich gebrauchen kann, denn dann hätte ich ja wieder ein komplettes Hintergrundbild. Aber genau das versuche ich zu vermeiden, da ich bei Ilch leider nicht in der Lage bin den News einen bestimmtem CSS Stil zu unterwerfen, was wiederum zur Folge hat, dass der Text über den Rand meines Hintergrundbildes hinaustritt. Und genau das will ich ja vermeiden =)

Gibts da keine Möglichkeit per Javascript oder PHP was zu machen? Ich würde sowieso gerne JS einsetzen, um den Main Part, also den Part mit dem Inhalt, ein und auszufaden. Je nachdem ob der Inhalt gewechselt wird oder nicht.

Noch eine Möglichkeit wäre, dass mir jemand erklärt, wie ich der News.php bei Ilch meinen CSS Code aufzwinge? Wie ihr seht habe ich schon versucht die gesamt Ilch Inhalts Ausgabe mit meinem CSS zu behaften, aber das geht nicht ^^ Das wird schlicht und ergreifend ignoriert. Bei Selfpages geht es, da ich dort HTML einsetzen kann und somit den Inhalt mit <p>-Tag versehen kann. Bei allem anderen gehts net...

So far
Antho0304

sokie · 12.02.2010

AW: Div Größen verbinden?

antho0304 schrieb:
Wie ihr seht habe ich schon versucht die gesamt Ilch Inhalts Ausgabe mit meinem CSS zu behaften, aber das geht nicht ^^

nein, das sehen wir nicht;-) wir haben doch nur die paar Zeilen code, wie wärs denn mit einem link zur Seite?

antho0304 schrieb:
Gibts da keine Möglichkeit per Javascript oder PHP was zu machen?

also per php kannst du im groben sowieso nur machen was du machst, nämlich code und inhalte ausgeben.

übrigens height: 0 auto; ist keine gültige regel, height lässt nur ein value zu.

antho0304 · 12.02.2010

AW: Div Größen verbinden?

Code:

p, ul, ol {
  margin:0;
  padding:24px 0 0 24px;
}

Hier habe ich definiert, dass sämtliche Inhalte bzw. sämtliche <p>-Tag's 24px von oben und links entfernt sein sollen.

HTML:

<div id="main"><p>{EXPLODE}</p></div>

Und hier habe ich dann den Ilch-Inhalt in einen <p>-Tag eingeschlossen. Was mich vermuten ließ, dass dann der gesamte Inhalt 24px von oben und links entfernt ist.

Aber meine Vermutung war falsch ^^

joa ich hab mir schon gedacht, dass height: 0 auto; nicht wirklich richtig ist, aber die Höhe wird ja vom Inhalt definiert, deswegen ist es ja im Prinzip schon egal, was da steht ^^

Und per Javascript? Gibt es da nicht die Möglichkeit irgendwie die Höhe des Haupt-Divs auszumessen und den beiden anderen Div's links und rechts mit der selben Größe zu schmücken?

Ich kann jetzt zwar nicht mit einem Link aufwarten, da die Seite noch nicht für alle online ist, aber ich kann euch ein Bild zeigen, wie es letztendlich aussehen soll:

Und nur im grauen Teil des Kastens soll Text.

so far

sokie · 12.02.2010

AW: Div Größen verbinden?

mit

Code:

p, ul, ol {
  margin:0;
  padding:24px 0 0 24px;
}

legst du fest dass ALLE Listen unordered/odered im Dokument und alle p-elemente einen Innenabstand von oben und links haben sollen. (da kann kaum das sein, was du willst, oder?
wenn die Element in einer box einen abstand vom rand der box haben sollen gibst du der box einfach ein padding:24px; und das wars (die anderen (inhalts-)elemente bekommen dann kein padding.
Du solltest dir die Grundlagen für das css nochmal genau ansehen.

natürlich lassen sich alle inhalte die aus dem CMS kommen über ihre entsprechenden selektoren per css formatieren.

antho0304 · 12.02.2010

AW: Div Größen verbinden?

antho0304 schrieb:
AHA Jetzt hab ich das mit margin und padding gerallt ^^ Also padding ist für den Abstand der elemente die INNERHALB des durch css deklarierten Objektes sind und margin für den Abstand der Elemente die durch CSS deklariert sind. Sehr gut ^^ Jetzt hab ichs verstanden =) Gleich mal ausprobieren.

Danke dir

?dit: Super! Riesen Lob an sokie! Hast wirklich geholfen =) Nicht nur, dass ich mich jetzt noch besser mit CSS auskenne, nein du hast auch meine Website einen großen Schritt nach vorn gebracht! Danke

Und schon ergibt sich das nächste Problem: Trotz der Tatsache, dass mein Inhalt dank sokie's Hilfe mittlerweile den Abstand zur linken Seite korrekt einhält und ich auch den Abstand zur rechten Seite definiert habe schiebt sich mein Text immer noch über den Rand hinaus. Wie kann ich das unterbinden? Also so, dass sich bei Text ein neuer Zeilenumbruch auslöst und bei Grafiken oder ähnliches weiter in die Mitte geschoben wird?

Danke

so far

sokie · 12.02.2010

AW: Div Größen verbinden?

dann lad den kram doch einfach mal ins netz. So mit dem Raten, was da letztendlich passiert ist das echt schwierig. Ich bin sicher, dass es da für alle Probleme eine Lösung gibt, nur muss man wirklich mal sehen, was letztendlich in der Seite drinsteht.
alternative screenshot und den kompletten code der im browser angezeigten Seite.

antho0304 · 12.02.2010

AW: Div Größen verbinden?

Also wie gesagt die Seite ist noch im Aufbau, daher funktioniert im Moment auch nur der "Home" und "Kontakt" button, aber da es sowieso am deutlichsten auf der Startseite wird brauch man sich da gar nicht groß drum kümmern ^^

==> DELETED <==

So far

sokie · 13.02.2010

AW: Div Größen verbinden?

jo, der div #main ist einfach zu breit.
du musst das padding links und rechts von der Breite abziehen

Code:

#main {
    margin: 24px;
    width: 716px; /* 764 - 2*24 */
    /*height gestrichen! falsche Angaben machen später Probleme*/
    background:url(...) repeat-y;
}

Helmschrot · 13.02.2010

AW: Div Größen verbinden?

antho0304 schrieb:
Also wie gesagt die Seite ist noch im Aufbau, daher funktioniert im Moment auch nur der "Home" und "Kontakt" button, aber da es sowieso am deutlichsten auf der Startseite wird brauch man sich da gar nicht groß drum kümmern ^^

umpf, jetzt hab ichs auch gesehen.

Du hantierst mit divs, floatest wild durch die Gegend (wo clearst du eigentlich??), verstehst aber offensichtlich nicht was du da tust.

Du setzt Tabellen ohne tabellarische Daten zu haben ein.

Dem Layout sieht man die Tabellendenke an.

Sorry wenn ich das so hart sage, aber so wird das nix mit dem modernen Webdesign.

Vielleicht solltest du erst mal einen vernünftigen Onlinekurs durcharbeiten, um deine Tabellendenke abzulegen.

antho0304 · 13.02.2010

AW: Div Größen verbinden?

Hey,

also erstmal an sokie: Danke für die schnelle und hilfreiche Antwort. Nur hat der nu irgendwie auf einer Seite zu viel abgezogen :hmpf: Ich hab ein Padding von 16px links und rechts und nur noch 1 Hintergrund Bild, statt dem geplanten links-mitte-rechts Verfahren. Aber dafür das da jetz ein Stück fehlt ist der Inhalt wenigstens richtig positioniert :?:

Code:

#main {
    display:block;
    float: left;
    margin: 0 0 0 100px;
    width: 760px; /* 792px - (2*16px) */
    padding: 0 16px 0 16px;
    background:url(...) repeat-y;
}

An Helmschrot: Öhm ahso...naja danke für die Seite werde die mal bei Gelegenheit durcharbeiten, aber ich habe nirgendswo Tabellen eingesetzt? Davon wüsste ich

Wo ich cleare :eek:

? Siehste ? Ich wusste das ich was vergessen habe :lol:

hubspe · 13.02.2010

AW: Div Größen verbinden?

antho0304 schrieb:
aber ich habe nirgendswo Tabellen eingesetzt? Davon wüsste ich

äh..., willst du mich für dumm verkaufen?? :rolleyes:

Der Link, den du hier eingestellst hast enthält jede Menge Tabellen. Um das zu sehen braucht man sich nur mal den Quelltext anzuschauen.

antho0304 · 13.02.2010

AW: Div Größen verbinden?

Ok gerade nochmal alles nachkontrolliert und folgendes kommt dabei raus: Ich habe keine einzige Tabelle verwendet.

Ich weiß jetzt jedoch auch mit 100%iger Gewissheit, dass mein verwendetes CMS (Ilch) Tabellen verwendet. Aber das werde ich bestimmt net überarbeiten, denn diese Tabellen sind innerhalb von Ilch bereits fertig gestaltet, da brauch ich in meinem Template Css-File nichts mehr dran zu schrauben.

so far

hubspe · 13.02.2010

AW: Div Größen verbinden?

antho0304 schrieb:
Ok gerade nochmal alles nachkontrolliert und folgendes kommt dabei raus: Ich habe keine einzige Tabelle verwendet.

Ich weiß jetzt jedoch auch mit 100%iger Gewissheit, dass mein verwendetes CMS (Ilch) Tabellen verwendet.

also so nach dem Motto:"Ich wars nich, der Knüppel hat zugeschlagen." :lol:

antho0304 · 13.02.2010

AW: Div Größen verbinden?

:lol: joa so in etwa

Ne jetzt mal im Ernst, hatte ja ehrlich gesagt nicht damit gerechnet, dass der Inhalt meiner Seite in tabellen ausgegeben wird. Naja jedenfalls bin ich jetzt wieder etwas klüger

Bleibt immer noch das Problem, dass mein #main Div zur Zeit zu klein ist ?

€dit: und da fällt mir gleich noch eine Frage ein: Wie kann ich eigentlich dafür sorgen, dass die Navi-MausOver-Bilder nicht nachträglich geladen werden, sondern schon zusammen mit dem rest der Seite? Denn wenn ich meine Seite aufrufe und dann über die Buttons gehe wird beim ersten Seitenbesuch immer erst dann der Hover Effekt geladen, wenn ich die Buttons das erste mal nutze, aber, dass is ja blöd, denn dann ist für so ne Sekunde oder so der Button einfach weg. Jemand ne Idee? Danke =)

so far