Wildcard bei CSS-width-Angaben möglich?

[Victor]

Hi,

ich habe da ein kleines Problem. Meine Seite besteht aus zwei Bereichen, die in CSS vorformatiert wurden. Links ein Teil für ein Menü und rechts der Hauptteil für Texte, Bilder usw.

Mein linkes Menü sollte nach Möglichkeit immer mit einer Breite von 150px dargestellt werden damit ein enthaltenenes Bild (das ist 150px breit) angezeigt werden kann. Gleichzeitig soll die Seite insgesamt aber stets den kompletten Bildschirm ausfüllen - egal was für eine Auflösung der Besucher der Webseite hat.

Kann man man Problem, ähnlich wie in HTML Tabellen mit einer Wildcard (*) lösen? Irgendwie klappte das bei meinen Versuchen nicht (linkes Menü mit 150px festlegen und den Hauptteilmit * geht nicht). Meine bisherige Lösung ist eine mit Prozentwerten, doch dann muß ich das Bild mit 150px rausnehmen, da bei niedrigen Auflösungen (800x600 oder kleiner) die 15% für das linke Menü weniger als 150px ergeben und somit einiges durcheinandergerät.

Mein Code bisher:

#menuLinks{
  float: left;
  width: 15%;
  margin: 10px 10px 0px 0px;
}

#inhalt{
  float: right;
  width: 75%;
  margin: 0px 10px 0px 0px;
}

[Zeromancer]

Hallo Victor,

Mein Code bisher:

width: 15%;

float: right;
  width: 75%;

wenn du 'links' mit 150px formatierst und "inhalt" ohne Breitenangabe, was passiert dann? Muss "inhalt" gefloatet werden? Es dürfte doch reichen, wenn "links" gefloatet wird.

André

[Victor]

Hallo André,

danke für den Tipp. Leider befindet sich der Hautpteil der Seite (inhalt) nach Ausführung deines Tipps unter dem Menü und nicht mehr daneben. Habe ich hier etwas falsch gemacht oder falsch verstanden ?

So habe ich es verstanden, daß ich es machen sollte (float: right habe ich testweise auch weggelassen - ohne Effekt):

#menuLinks{
  width: 160px;
  margin: 10px 10px 0px 0px;
}

#inhalt{
  float: right;
  margin: 0px 10px 0px 0px;
}

Danke ;)

Victor

[schwarze Piste]

Tachchen!

Gib dem linken Bereich ruhig eine feste Breite. Wichtig ist nur, dass du
ihn aus dem Textfluss nimmst.
Den rechten Bereich "positionierst" du dann ausschließlich über margin
und schon klappt alles wie gewünscht und bei jeder Fenstergröße.

Gruß

Die schwarze Piste

[Victor]

Hallo Schwarze Piste,

vielen Dank für den Tipp. Wenn ich alles auf den unten stehenden Code ändere, klappt es zwar unter dem Intenet Explorer, nicht aber unter dem Firefox :( Beim Firefox ist nur das linke Menü zu sehen und der Hauptteil steht unten drunter statt daneben.

#menuLinks{
  float: left;
  width: 160px;
  margin: 10px 10px 0px 0px;
}

#inhalt{
  float: right;
  margin: 0px 10px 0px 0px;
}

Deine vorgeschlagene Variante wäre wohl die untenstehende (das float: right habe ich auch weggelassen ohne Effekt). In diesem Fall bockt der Internet Explorer jedoch genauso wie im oberen Beispiel der Firefox :(

#menuLinks{
  width: 160px;
  margin: 10px 10px 0px 0px;
}

#inhalt{
  float: right;
  margin: 0px 10px 0px 180px;
}

Unter dem Explorer klappt es ja schon, wenn ich dies mache, doch der Firefox bleibt beim oberen Problem...

#menuLinks{
  float: left;
  width: 160px;
  margin: 10px 10px 0px 0px;
}

#inhalt{
  float: right;
  margin: 0px 10px 0px 0px;
}

Hast du vielleicht noch eine andere Idee oder habe ich etwas falsch umgesetzt ?

Danke ;)

Victor

[Ingo Turski]

Hi,

Wenn ich alles auf den unten stehenden Code ändere, klappt es zwar unter dem Intenet Explorer, nicht aber unter dem Firefox :( Beim Firefox ist nur das linke Menü zu sehen und der Hauptteil steht unten drunter statt daneben.

Logisch - float erfordert width. Lasse den rechten Bereich nicht floaten und gebe ihm keine Breite, sondern wie vorgeschlagen nur ein margin-left.

freundliche Grüße
Ingo

[Victor]

Hallo Ingo,

alles klar - nun klappt es. Hier für alle Interessierten die Lösung, die beim Internet Explorer und Firefox funktioniert:

#menuLinks{
  float: left;
  width: 160px;
  margin: 10px 10px 0px 0px;
}

#inhalt{
  margin: 0px 10px 0px 180px;
}

Vielen Dank an alle, die mir geholfen haben! Ihr seid echt super!

Liebe Grüße

Victor

[Candid Dauth]

Hallo du da draußen,

#menuLinks{
  float: left;
  width: 160px;
  margin: 10px 10px 0px 0px;
}

[...]

Im Konqueror durfte man damals padding-left nicht verändern, da er damit die Verschiebung des Text-Bereiches gesteuert hat. Möglicherweise macht Firefox dies mit margin-left (ich weiß nicht, wie die »Specs« das vorsehen); ich würde jedenfalls margin-left nicht setzen. Wenn du einen Abstand zwischen Menü und Text erreichen willst, benutze stattdessen margin-right für das Menü.

Ich übernehme keine Garantie dafür, dass dies stimmt, aber diverse Probleme mit diesen Angaben haben mich dazu geführt, es immer so zu machen, wie ich es gerade aufgeführt habe.

Grüße von hier drinnen, aus Biberach an der Riss,
Candid Dauth (Dogfish)

[PeterK]

Hallo

Möglicherweise macht Firefox dies mit margin-left

Ich konnte im Firefox 1.0 kein solches verhalten nachvollziehen

Gruß, Peter

[schwarze Piste]

Tachchen!

Hast du vielleicht noch eine andere Idee oder habe ich etwas falsch umgesetzt ?

Für Float-Lösungen müsste ich jetzt im Zweifel erst selbst ausprobieren,
was browserübergreifend bei welchem Doctype funktioniert. Gehen müsste
das aber auch.

Die einfachste Lösung - wenn nicht andere Umstände dagegen sprechen - wäre
wahrscheinlich ein Aus-dem-Fluss-nehmen per position:absolute. ;-)

Gruß

Die schwarze Piste

[Ringelnatz]

Mein Code bisher:

#menuLinks{
  float: left;
  width: 15%;
  margin: 10px 10px 0px 0px;
}

#inhalt{
  float: right;
  width: 75%;
  margin: 0px 10px 0px 0px;
}

So sollte es gehen:

#menuLinks {
width: 160px; float: left;
}

#inhalt {
margin-left: 160px;
}