Problem mit Breitenangabe

[Michael]

Hallo,

ich möchte, dass ein Element zum linken Rand 100 Pixel Abstand hat. Zum rechten Rand 15 Pixel Abstand. Dazwischen soll das Element sich flexibel der Auflösung anpassen.

Ich hab es mal so gemacht:

HTML-Dokument:

<div class="main_text">Hier kommt der Text hin</div>

CSS-Datei:

.main_text
{
position:absolute;
top:0px;
left:100px;
width:100%;
margin:0 15px 0 0;
padding:0;
font-size:12px;
font-weight:normal;
border-style:solid;
border-width:1px;
border-color:#2F4F88;
background-color:#D1E6FB;
color:#000000;
z-index:99;
}

Aber leider klappt das überhaupt nicht. Es ragt zum rechten Rand hinaus (egal ob IE/Mozilla/Opera). Zum nachvollziehen ist das Ganze übrigens in einer Testdatei unter http://www.netradio-live.de/test.htm abrufbar.

Wie kann ich das Problem lösen?

Grüsse
Michael

[Sönke Tesch]

ich möchte, dass ein Element zum linken Rand 100 Pixel Abstand hat. Zum rechten Rand 15 Pixel Abstand. Dazwischen soll das Element sich flexibel der Auflösung anpassen.

left:100px;
width:100%;
margin:0 15px 0 0;

Wenn es zum rechten Fensterrand 15 Pixel Abstand haben soll, dann solltest Du auch besser die rechte Ecke (right) angeben anstatt einen Randbereich (margin) zu wählen: http://www.w3.org/TR/CSS2/visuren.html#position-props.

Gruß,
  soenk.e

[Michael]

Hallo,

Wenn es zum rechten Fensterrand 15 Pixel Abstand haben soll, dann solltest Du auch besser die rechte Ecke (right) angeben anstatt einen Randbereich (margin) zu wählen:

Das habe ich doch auch schon gemacht. Habe es jetzt so gemacht (und ausserdem überflüssiges entfernt):

CSS-Datei:

.main_text
{
position:absolute;
top:0px;
left:100px;
right:15px;
width:100%;
margin:0;
padding:0;
border-style:solid;
border-width:1px;
}

Nichts... selbes Ergebnis (anzusehen unter http://www.netradio-live.de/test.htm).

Grüsse
Michael

[Sönke Tesch]

Wenn es zum rechten Fensterrand 15 Pixel Abstand haben soll, dann solltest Du auch besser die rechte Ecke (right) angeben anstatt einen Randbereich (margin) zu wählen:

Das habe ich doch auch schon gemacht.

Das hast Du nicht gesagt.

position:absolute;
top:0px;
left:100px;
right:15px;
width:100%;

Nichts... selbes Ergebnis (anzusehen unter http://www.netradio-live.de/test.htm).

Du solltest, wie Marc schon gesagt hat, width rausnehmen. Ein Element kann schlecht gleichzeitig volle Breite und Breite abzüglich 115 Pixel haben. Behaupte ich mal so :)

Gruß,
  soenk.e

[Michael]

Du solltest, wie Marc schon gesagt hat, width rausnehmen. Ein Element kann schlecht gleichzeitig volle Breite und Breite abzüglich 115 Pixel haben. Behaupte ich mal so :)

Nagut, habe es jetzt rausgenommen. In Opera und Netscape wunderbar, dort wird jetzt der Bereich zwischen left:100px und right:15px komplett dargestellt.

Der Internet Explorer interpretiert das jedoch anders... ohne Angabe von width macht er die Ebene nur so breit, wie der Text darin... und das soll ja nicht.

Tabellenlayout wird wohl doch einfacher sein... trotzdem Danke für die Hilfe :-)

Grüsse
Michael

[Marc Reichelt]

Hi Michael!

trotzdem Danke für die Hilfe :-)

Bitteschön von mir aus hier schon mal   ;-)

--> Tabellen sind einfach momentan noch eine gute Lösung, wenn CSS nicht weiterhilft.
Außerdem kann man CSS auch viel einfacher vom Browser aus abschalten als Tabellen, wenn das so ist ist dein ganzes Design im Eimer!
Meistens lohnt es sich momentan noch, beides zu verwenden. Schaden tut es ja nicht ;-)

cu

Marc Reichelt || http://www.marcreichelt.de/

[Michael]

--> Tabellen sind einfach momentan noch eine gute Lösung, wenn CSS nicht weiterhilft.

Ja, die Erfahrung hab ich auch schon gemacht. Besten Dank an dieser Stelle auch nochmal an dich, auch wenn ich jetzt doch eine CSS-Lösung gefunden habe. ;-)

Außerdem kann man CSS auch viel einfacher vom Browser aus abschalten als Tabellen, wenn das so ist ist dein ganzes Design im Eimer!

Eben, das ist der Nachteil.

Meistens lohnt es sich momentan noch, beides zu verwenden. Schaden tut es ja nicht ;-)

Genau... sollte jeder für sich entscheiden. :)

Grüsse
Michael

[Sönke Tesch]

Außerdem kann man CSS auch viel einfacher vom Browser aus abschalten als Tabellen, wenn das so ist ist dein ganzes Design im Eimer!

Wenn ohne CSS das komplette Layout im Eimer ist, dann hat der Seitenautor etwas falsch gemacht (oder es handelt sich um eine äußerst spezielle Anwendung), denn korrekt eingesetztes HTML kann wirklich _jeder_ halbwegs aktuelle Browser gut lesbar darstellen.

Leider kapieren viele Leute nicht, daß <div> und <span> nur Notbehelfe sind und kein Ersatz für "echte" Elemente wie <h1>, <strong> oder <li>. Unter dieser Voraussetzung ist es dann kein Wunder, wenn ohne CSS alles auseinander fällt und/oder nur eine Textwüste sichtbar wird.

Und: Was zählt ist normalerweise der Inhalt, nicht die Verpackung.

Ich empfehle in diesem Zusammenhang zumindest probehalber die Benutzung von Lynx: http://www.delorie.com/web/lynxview.html (und wie sich etwas weiter unten im Forum herausgestellt hat: Google auch).

Gruß,
  soenk.e

[HarryS]

Hallo Michael,

Du solltest, wie Marc schon gesagt hat, width rausnehmen. Ein Element kann schlecht gleichzeitig volle Breite und Breite abzüglich 115 Pixel haben. Behaupte ich mal so :)

Nagut, habe es jetzt rausgenommen. In Opera und Netscape wunderbar, dort wird jetzt der Bereich zwischen left:100px und right:15px komplett dargestellt.

Der Internet Explorer interpretiert das jedoch anders... ohne Angabe von width macht er die Ebene nur so breit, wie der Text darin... und das soll ja nicht.

Tabellenlayout wird wohl doch einfacher sein... trotzdem Danke für die Hilfe :-)

Nenene. bleib beim 'div-design'. Ich behaupte jetzt mal das Problem ist nicht nur das width sondern auch das position:absolute. Mit nachstehendem style sollte es eigentlich genauso aussehen wie Du es möchtest:

<style type="text/css">
html body {
  margin:0;
  padding:0;
  width:100%;
  height:100%}

.maint_est {
  margin:0 15px 0 100px;
  font-size:12px;
  border:1px solid #2F4F88;
  background-color:#D1E6FB;
  color:#000000;
  z-index:99; }
</style>

Grüße aus Nürnberg,
HarryS

[Michael]

Nenene. bleib beim 'div-design'. Ich behaupte jetzt mal das Problem ist nicht nur das width sondern auch das position:absolute. Mit nachstehendem style sollte es eigentlich genauso aussehen wie Du es möchtest: [...]

Danke dafür, ich werd das gleich mal ausprobieren. Hab übrigens selbst auch noch eine DIV-Lösung gefunden: Einfach erst ein DIV festlegen mit left:100px und right:15px und in dieses DIV ein weiteres DIV mit der Angabe width:100%; dann klappt es auch super :)

Werd deine Lösung aber auch mal testen, die wäre eleganter gelöst.

Grüsse
Michael

[HarryS]

Hallo Michael,

Danke dafür, ich werd das gleich mal ausprobieren. Hab übrigens selbst auch noch eine DIV-Lösung gefunden: Einfach erst ein DIV festlegen mit left:100px und right:15px und in dieses DIV ein weiteres DIV mit der Angabe width:100%; dann klappt es auch super :)

Jau, gefällt mir auch gut, vor allem ist meine Lösung nur dann was, wenn Du nur ein div so plazieren willst, (wegen body {margin...}. Bei Deiner Lösung kannst Du beliebig viele divs verwenden und das äußere div kannst Du außerdem auch leicht positionieren.

Grüße aus Nürnberg,
HarryS

[Marc Reichelt]

Hi Michael!

Das ganze sieht in allen Browsern so aus weil du das auch so hingeschrieben hast:

width:100%

Damit wird dem div-Tag die Breite des gesamten Dokuments zugewiesen, da es allerdings schon einen Abstand von 100 Pixeln zum linken Rand hat geht es halt über die Seite hinaus.

Lösung:

Eine Tabelle erstellen mit drei Feldern (100 Pixel, variabel, 15 Pixel): TADA! :-D

Have a lot of fun!

Marc Reichelt || http://www.marcreichelt.de/

[Michael]

Damit wird dem div-Tag die Breite des gesamten Dokuments zugewiesen, da es allerdings schon einen Abstand von 100 Pixeln zum linken Rand hat geht es halt über die Seite hinaus.

Korrekt. Und wie löse ich das?

Lösung:

Eine Tabelle erstellen mit drei Feldern (100 Pixel, variabel, 15 Pixel): TADA! :-D

Sorry, falsch ausgedrückt. Ich meinte natürlich: Wie löse ich es ohne Tabellen? Tabellenlayouts sind veraltet und nicht mehr nötig, man kann alles mit CSS machen... wenn man weiss, wie.

Grüsse
Michael

[Thomas]

Hi,
versuche es mit:

left:100px;
right:15px;

Gruß
Thomas