px-Fehler mit Hintergrund-Grafik

[Max-Philipp Richter]

Hi,

ich bin latent am verzeifeln:
Ich versuche krampfhaft 3 verschiedene Elemente sauber nebeneinander zu setzen!
Code:
<style type="text/css">
body {
 color: black;
 background-color: #00473b;
 }
#lefttopmenue {
 position:absolute;
 top:50px;
 left:50px;
 width: 200px;
 height: 50px;
 padding-left: 55px;
 padding-right: 20px;
 border: solid 1px #fff;
 background-image: url(left_new.gif);
 background-repeat: no-repeat;
 color: #fff;
 font-family: Calibri, Courier;
}
#box {
 position: absolute;
 top: 50px;
 left: 260px;
 width: 200px;
 height: 290px;
 padding: 20px;
 font-family: Calibri, Courier;
 color: #00473b;
 background-image: url(box1.gif);
 background-repeat: no-repeat;
 border: solid 1px #fff;
}
#box1 {
 position: absolute;
 top: 50px;
 left: 470px;
 width: 200px;
 height: 290px;
 padding: 20px;
 font-family: Calibri, Courier;
 color: #00473b;
 background-image: url(box1.gif);
 background-repeat: no-repeat;
 border: solid 1px #fff;
}
  </style>

Das Ergebnis könnt ihr Euch unter
www.richter-reichenbach.de/marv_battle
anschauen!
Entscheidend ist, daß der Browser KEINE px Angabe außer die von oben und links korrekt interpretiert... Alles fließt ineinander und hat nicht die korrekte Größe!
Wenn ihr auf die Seite geht, wißt ihr, was ich meine, da habe ichs auch noch mal erklärt!
Danke für die Hilfe!

Gruß Max

[Auge]

Hallo

ich bin latent am verzeifeln:

Solange es nur 'latent' ist ...

Mal ganz am Anfang: Mit welchen Browsern testest du?

Ich versuche krampfhaft 3 verschiedene Elemente sauber nebeneinander zu setzen!

#lefttopmenue {
position:absolute;
top:50px;
left:50px;
width: 200px;
height: 50px;
padding-left: 55px;
padding-right: 20px;
border: solid 1px #fff;

Setze mal padding auf '0' (egal, wie es aussieht). Ich gehe davon aus, dass du mit dem Firefox oder Opera testest, die sich nach dem (Box-Model-)Standard richten, wonach padding zu den Breiten (und Höhen) -angaben hinzuaddiert wird, wodurch dein Menü 275 Pixel breit wird. Das gilt, so ich recht habe, mit anderen Maßen, so auch für die anderen Boxen.

}

Tschö, Auge

[Markus]

Hallo,

also erstmal Vorweg ich weiß nicht warum dein Ansatz nicht funktioniert. Aber ich stand vor einiger Zeit mal vor der gleichen Aufgabe (3 Elemente nebeneinander). Ich habe dies mit Float und entsprechenden Margins gelöst. Vielleicht hilft es dir ja weiter.

Gruß

Markus

[Thorsten]

Hallo!

ich bin latent am verzeifeln:

Das musst du nicht!
Die padding und width Angaben werden vom Browser addiert, daraus ergibt sich die Gesamtbreite der Box (was ein korrektes Verhalten ist).

Versuche folgende Angaben:

#lefttopmenue {
 position:absolute;
 top:50px;
 left:50px;
 width: 125px;
 height: 50px;
 padding-left: 55px;
 padding-right: 20px;
 border: solid 1px #fff;
 background-image: url(left_new.gif);
 background-repeat: no-repeat;
 color: #fff;
 font-family: Calibri, Courier;
}
#box {
 position: absolute;
 top: 50px;
 left: 260px;
 width: 160px;
 height: 290px;
 padding: 20px;
 font-family: Calibri, Courier;
 color: #00473b;
 background-image: url(box1.gif);
 background-repeat: no-repeat;
 border: solid 1px #fff;
}
#box1 {
 position: absolute;
 top: 50px;
 left: 470px;
 width: 160px;
 height: 290px;
 padding: 20px;
 font-family: Calibri, Courier;
 color: #00473b;
 background-image: url(box1.gif);
 background-repeat: no-repeat;
 border: solid 1px #fff;
}

Viele Grüße
Thorsten

[Engin]

Hi Max,

da hast du dir ja was zusammengebaut.  ;-)
Ich hab mal das unwichtige gelöscht.

#lefttopmenue {
left:50px;
width: 200px;
padding-left: 55px;
padding-right: 20px;
}

Die erste Box ist 275px breit und ist left 50px=325px

#box {
left: 260px;
width: 200px;
padding: 20px;
}

Diese Box ist 220px breit und ist left 260px=480px

#box1 {
left: 470px;
width: 200px;
padding: 20px;

Und diese Box misst auch nochmal 220px und ist left 470px=690px

Liess dir mal das Kapitel zum Thema Padding (innenabstand) durch.

Der Rest ist dann einfache Mathematik.  ;-)

Grüße,
Engin
 GYRO

[Kai345]

Grütze .. äh ... Grüße!

Liess dir mal das Kapitel zum Thema Padding (innenabstand) durch.

Und zusätzlich vor allem das Boxmodell

Cü
Kai

[Max-Philipp Richter]

Vielen Dank für alle Antworten!

Wirklich großartig und ihr habt mir alle zu der späten Stunde noch geholfen...

Wer das Ergebnis, sowie nochmal ein kleines Dankeschön sehen will:
www.richter-reichenbach.de/marv_battle

Gruß, der Max