Automatische Breite bei with

[somersault]

Hallo Zusammen,

ich brauche nochmal euren Rat.

Bei den Frames in HTML schrieb man bei der Breite 30%,* damit z.B. die Navigation 30% und die Inhhaltsseite den Rest ausfüllt.

In meinem Fall habe ich die Breite der Navigationsleiste auf 380px festgelegt. Wie stelle ich jetzt mit CSS ein, dass der Inhalt den Rest der Seite in Anspruch nehmen darf?

Grüße

somersault

[whitemagic]

also wenn ich das richtig verstanden haben, ist deine site in frames einteilt. wenn wir mal von deinem bsp mit den 380px ausgehen...simpel dargestellt sieht dann die frame-def so aus:

Code: Alles auswählen

<frameset cols="380,*" framespacing="0" border="0" frameborder="0">
  <frame name="contents" target="main" src="naviseite.htm">
  <frame name="main" src="inhaltseite.htm" scrolling="auto">


etc...dann kannst du doch die inhaltseite mit 100% behandeln....also wie wenn du eine normale seite abfüllst. du lässt die inhaltseite mit dem "*" ja der fenstergrösse entsprechend dynamisch anpassen....

oder bin ich da jetzt komplett auf dem holzweg und hab die frage nicht verstanden?

[somersault]

Sorry, hab mich falsch ausgedrückt. Meine alte Page basierte auf Frames.

Bei meiner neuen Seite hab ich die Bereiche mit divs unterteilt.

Zur Verdeutlichung hier der Link zum Entwurf:

http://www.thyracont.com/Web_XHTMLCSS/grundgeruest.html

Ich möchte nun bei den beiden divs links eine feste Breite einstellen und bei dem übrigen Bereich eine variable Breite. Wenn ich bei width aber auto oder * eingebe funktioniert das nicht.

Grüße

somersault

[whitemagic]

dann weiss ich auch nicht weiter...wär ja schon froh ich hätte meine div's im griff. aber die vergackeiern mich gerade nach strich und faden^^

[Laus]

Ich möchte nun bei den beiden divs links eine feste Breite einstellen und bei dem übrigen Bereich eine variable Breite. Wenn ich bei width aber auto oder * eingebe funktioniert das nicht.

* ist nicht erlaubt
aber was genau funktioniert bei auto nicht?

Xaver

[somersault]

Ich müsste dann bei dem div, das den Rest der Seite ausfüllen soll, schreiben width: auto; richtig?

Muss ich dann nochmal ausprobieren. Ich glaub mich aber erinnern zu können, dass sich da nichts getan hat.

Poste Montag, obs geklappt hat.

Grüße

somersault

[somersault]

Guten Morgen,

also: wenn ich bei with: auto; eingebe verschiebt sich im FireFox alles außer der Navigation nach unten.

Hier der Link zur Seite: http://www.thyracont.com/Web_XHTMLCSS/grundgeruest.html

Den Rahmen hab ich nur mal zur Kontrolle eingefügt. Hier sieht man, dass sich das div ganz rechts nicht automatisch dehnt, wie es das sollte.

[somersault]

Im IE und in Opera bleibt zwar alles in einer Reihe, aber das div ganz rechts dehnt sich trotzdem nicht.

[Laus]

Hallo

Ändere mal dein css in diesen Punkten folgendermaßen ab:

Code: Alles auswählen

#content {
        float: left;
        height: 100%;
        background: url(../img/bg-content.gif) top right repeat-y #F0F0F0;
        }
#productdescription {
                      float: left;
                    width: auto;
                    padding: 80px 0 0 0;
                    text-align: left;
                }

Die Ausdehnung des Containers #productdescription erfolgt nun automatisch bei breiterem Content.
Auch solltest du deine Seite abschließend wieder -->clearen<--

[somersault]

Hallo Xaver,

die Soforthilfemaßnahmen haben gewirkt.

Nur zum clearen hab ich noch eine Frage. Wo bzw. wie baue ich im HTML-Code die Klasse clearfix:after ein? Brauche ich dazu nochmal einen Absatz oder kann ich das einfach zum letzten Element im div reinschreiben?

[Laus]

Benenne das .clarfix einfach in den Container um den du clearen willst.
ZB.: wenn du dein letztes float im Container content hast schreibst du anstatt clearfix einfach content in das css. Natürlich darauf achten ob dieser als classe oder id deklariert ist, also .content:after oder #content:after.
dadurch brauchst du im Quelltext keine weiteren angaben machen, da ja alles ins css ausgelagert ist.

[somersault]

Nur damit ich das jetzt richtig habe. Bei mir ist der letzte float im div scale, also steht im CSS steht jetzt wie folgt:

[code]#scale {
float: right;
width: 53px;
height: 100%;
background: url(../img/scale.gif) top right no-repeat;
}

#scale:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#scale {
display: inline-table;
}

/* Hides from IE-mac \*/
* html .scale {height: 1%;}
.scale {display: block;}
/* End hide from IE-mac */[/code]


Ich hab noch was festgestellt. Das mit dem auto bei width stimmt nicht so ganz. Hier der Link zur Seite: http://www.thyracont.com/Web_XHTMLCSS/aboutus.html

Das div content hat zwar die benötigte Breite, aber es zieht sich nicht bis zum div scale ganz rechts.

Wenn ich das Fenster verkleinere rutschen im Firefox die divs content und scale nach unten. Im IE funktioniert es so wie es soll. Was kann das sein?

Grüße

somersault

[Laus]

Wenn ich das Fenster verkleinere rutschen im Firefox die divs content und scale nach unten. Im IE funktioniert es so wie es soll. Was kann das sein?

Das ist sowohl im FF, Opera, Konqueror, Mozilla und IE so das sich die divs nach unten verschieben, ist ja auch richtig so bei float.
Die Eigenschaft Float besagt:
Das mit float formatierte Element wird in ein Block-Element gewandelt und links oder rechts von den Elementen platziert, die es um-fließen. Wenn der Platz zum Um-fließen nicht ausreicht wird das um-fließende Element nach unten verschoben.
Da du für content float:left und für scale float:right angegeben hast werden beide nach unten verschoben. Gibst du für scale auch float left an wird je nach Fenstergröße nur das letzte Element verschoben.
Willst du keine Verschiebung bei kleineren Fenstergrößen dann musst du entwerder deiner Seite im wrap eine feste Größe zuweisen oder die Elemente absolut positionieren. Bedenke dabei jedoch das ca 80% aller User noch mit einer Auflösung von 1024*768px im Netz unterwegs sind und bei dieser Auflösung ist deine Testseite jetzt schon zu breit.
Eine weitere möglichkeit ist bei der Breite ein overflow:scroll; oder auto anzugeben.

Bei mir ist der letzte float im div scale, also steht im CSS steht jetzt wie folgt:

Genau so ist es gedacht.

[somersault]

Komplizierte Sache...

Aber zu meiner Verteidigung: Es ist ein Anfängerforum

Am liebsten wäre es mir, wenn alle divs außer dem content-div eine feste Breite hätten und das content-div den Rest der Seite einnimmt. Wobei das scale-div immer ganz rechts sein muss und nicht verrutschen darf.

Beim IE wird die Definitionsliste, wenn ich das Fenster kleiner mache, zusammengeschoben. Es befinden sich dann also nicht vier Bilder nebeneinander sondern 2 in der ersten und 2 in der zweiten Reihe. Und es wird nicht das ganze content-div und das scale-div nach unten verschoben. Kann man das im FF etc. auch irgendwie erreichen?

Ich würde gerne nur drei Bilder in der ersten Reihe haben und das vierte gleich in der zweiten. Aber wie kriege ich da einen Zeilenumbruch rein? Wenn ich nur eine neue Liste beginne, geht sie in der selben Zeile weiter. Absatz und Break bringen nichts. Und display: block klappt auch nicht.

Ich werd am Wochenende meine zwei neuen CSS-Bücher durchforsten. Vielleicht kommt hier der fehlende Geistesblitz...

Für Ideen wäre ich euch trotzdem dankbar.

Schönes Wochenende!

[Laus]

Hallo somersault

Ich würde gerne nur drei Bilder in der ersten Reihe haben und das vierte gleich in der zweiten. Aber wie kriege ich da einen Zeilenumbruch rein?

indem du beim gewünschten Zeilenumbruch zum Beispiel ein

Code: Alles auswählen

<dl style="clear:both;">

einfügst

Am liebsten wäre es mir, wenn alle divs außer dem content-div eine feste Breite hätten und das content-div den Rest der Seite einnimmt. Wobei das scale-div immer ganz rechts sein muss und nicht verrutschen darf.

Warum benutzt du dafür nicht einen komplett anderen Ansatz zum formatieren deiner Seite. Versuch mal das abändern deines css Codes folgendermaßen:
Die navigation fest positionieren

Code: Alles auswählen

#navigation {
            position:absolute;top:0;left:0;
            width: 380px;
            height: 100%;
            background: #AFAFAF url(../img/bg-navi.gif) right top repeat-y;
      }

die anderen Elemente der Navigation brauchst du nicht zu verändern
der Content zieht sich dann über die gesamte Breite und wird mit margin und padding richtig formatiert.

Code: Alles auswählen

#content {
        margin-left:390px;
        height: 100%;       
        background: #F0F0F0;
        background: url(../img/scale.gif) top right no-repeat;
        }

Dadurch hast du deine scale Leiste immer Rechts.
Das <div id="scale"> und den css code dazu kannst du komplett entfernen. Der Seitenaufbau wird einfacher und die Probleme weniger

Aber zu meiner Verteidigung: Es ist ein Anfängerforum

Sorry wenn mein letzter Beitrag sich anders gelesen hat, aber ich wollte dir genau aus diesem Grund (Anfänger) lediglich eine möglichst einfache und verständliche Definition des Begriffes float aufzeigen.

Gruß Xaver