[modercol]

Ich hab ein kleines bis mittel großes CSS Problem (siehe Screen).
Das links abgerundete ist class=wr, die mitte "wm" und rechts die class=wr.
Es sollte nur einmal das bild angezeigt werden, sodass der ganze kasten schön rund aussieht.
Im Opera sieht alles wunderbar aus, nur im FF nicht(Screen)

So sieht es in meiner Hauptseite aus:

PHP-Code:

<div style="padding-left:10px; padding-right:10px; padding-top:20px; "><table cellspacing="0" cellpadding="0"><tr><td class="wl">&nbsp;</td><td class="wm">
&nbsp;&nbsp;<?php
$S = date("H");
if ($S < 4) echo "<b>Ab ins Bett, bis sp&auml;ter</b>,";
elseif ($S < 10) echo "<b>Guten Morgen</b>,";
elseif ($S < 12) echo "<b>Guten Tag</b>,";
elseif ($S < 14) echo "<b>Mahlzeit</b>";
elseif ($S < 18) echo "<b>Guten Tag</b>,";
elseif ($S < 21) echo "<b>Guten Abend</b>,";
elseif ($S >= 21) echo "<b>Gute Nacht</b>,";
?>
&nbsp;Gast!&nbsp;|&nbsp;<a href="forum/member.php?action=login">Login</a>&nbsp;-&nbsp;<a href="forum/member.php?action=register">Registrieren</a>&nbsp;|&nbsp;
<iframe width="596" height="30" scrolling="no" frameborder="0" src="box.php" name="box" align="middle"></iframe>
</td><td class="wr">&nbsp;</td></tr></table></div> 


CSS:

PHP-Code:

/* Welcome */
.wl {
    background-image:url('images/welcome-l.png');
         height:30px;
         width:5px;
         float:left;
}
.wm {
    background-image:url('images/welcome-m.png');
         height:30px;
         float:left;
         vertical-align:middle;
}
.wr {
    background-image:url('images/welcome-r.png');
        height:30px;
        width:5px;
        float:left;
}
/* Welcome Ende */ 


Wie kann ich dieses Grafik Problem lösen, ich selber verzweifle daran, es richtig hinzubekommen, den ich sehe keinen Fehler im Code.[/php]

[Jan]

Ja, der fehler ist der iframe.
Der wird etwas anders interpretiert von Opera, oder FF, je nachdem welchen du als Standard nimmst.
ich würde versuchen über Ajax zu arbeiten. Allerdings habe ich mich mit dem thema noch nicht groß auseinander gesetzt, leider
Wird aber am Iframe liegen, so wie es aussieht.

[modercol]

Dann passt das aber nicht mit dem unterem Kasten, dieser hat keine iframe, wird aber trotzdem unten und an den Seiten falsch angezeigt.

[Jan]

Kannst du mir mal den Link geben?
Damit ich des mal mit beiden anschauen kann.

[modercol]

Link per PN und ICQ geschickt.

[Jan]

Okay, kannst du mal schauen ob die Grafik wirklich 5px breit ist?

Es kann sein das die Tabelle des Problem ist.
Kannst du es mal ohne Tabelle versuchen?

HTML/PHP

PHP-Code:

<div style="padding-left:10px; padding-right:10px; padding-top:20px; ">
<div class="wl">
   <div class="wm">
<?php
$S = date("H");
if ($S < 4) echo "<b>Ab ins Bett, bis später</b>,";
elseif ($S < 10) echo "<b>Guten Morgen</b>,";
elseif ($S < 12) echo "<b>Guten Tag</b>,";
elseif ($S < 14) echo "<b>Mahlzeit</b>";
elseif ($S < 18) echo "<b>Guten Tag</b>,";
elseif ($S < 21) echo "<b>Guten Abend</b>,";
elseif ($S >= 21) echo "<b>Gute Nacht</b>,";
if($mybb->user['username'] !='') { echo " $mybb->user['username']"; }
else { echo ' Gast'; }
?>
 | <a href="forum/member.php?action=login">Login</a> - <a href="forum/member.php?action=register">Registrieren</a> | 
<iframe width="596" height="30" scrolling="no" frameborder="0" src="box.php" name="box" align="middle"></iframe>
   </div>
   <div class="wr">
   </div>
</div> 


CSS

Code:

/* Welcome */
.wl {
    background:red url('images/welcome-l.png') no-repeat;
         height:30px;
         width:100%;
}
.wm {
    background:green url('images/welcome-m.png') repeat-x;
         height:30px;
         width:100%;
         padding-left:5px;
         float:left;
         vertical-align:middle;
}
.wr {
    background:blue url('images/welcome-r.png') no-repeat;
        height:30px;
        width:5px;
        float:right;
}
/* Welcome Ende */

Die Farben hab ich mal dazu gemacht, damit ich bei P[/php]roblemem erkennen kann wo das Problem liegt.

[modercol]

Also, ich hab jetzt deinen code eingefügt, was dabei rauskommt, siehe screen. Ich hab nur die obere leiste verändert, wundere dich nicht, über die untere, die hat doch tabellen.

[Jan]

Okay,

dieser CSS Code sollte gehen:

Code:

/* Welcome */
.wl {
    background:red url('images/welcome-l.png') no-repeat;
         height:30px;
         width:1024px;
}
.wm {
    background:green url('images/welcome-m.png') repeat-x;
         height:30px;
         width:1014px;
         margin-left:5px;
         float:left;
         vertical-align:middle;
}
.wr {
    background:blue url('images/welcome-r.png') no-repeat;
        height:30px;
        width:5px;
        margin-left:1019px;
}
/* Welcome Ende */

Disen Code für des Orangene in der Mitte unten drunter

Code:

/* Welcome */
.wl_down {
    background:red url('images/welcome-l.png') no-repeat;
         height:30px;
         width:500px;
}
.wm_down {
    background:green url('images/welcome-m.png') repeat-x;
         height:30px;
         width:490px;
         margin-left:5px;
         float:left;
         vertical-align:middle;
}
.wr_down {
    background:blue url('images/welcome-r.png') no-repeat;
        height:30px;
        width:5px;
        margin-left:495px;
}
/* Welcome Ende */

[modercol]

Naja, die Lösung ist schon gut, aber ich hab noch auf anderen Unterseiten, diesen Orangen Balken. Und der soll eben nicht immer über den ganzen Bildschirm reichen.
Und für jeden ne einzelne CSS erstellen ist doof.

Im übrigen ist der normale obere Balken immer noch zu breit.

[Jan]

Das Problem wurde über ICQ/Jabber weiter besprochen. Damit ihr das hier nachvollziehen könnt eine kleine Zusammanfassung der Zwischenschritte:

1. Änderung des rechten Bildes.
   Das Bild wurde nach links um 50px erweitert. Somit sind Prozentangaben bei der Breite wirksam.
   

Mit den angepassten Bilder sollte dieser Code gehen:

Code:

/* Welcome */
.wl {
    background:red url('images/welcome-l.png') no-repeat;
         height:30px;
         width:100%;
}
.wm {
    background:green url('images/welcome-m.png') repeat-x;
         height:30px;
         width:95%;
         margin-left:5px;
         float:left;
         vertical-align:middle;
}
.wr {
    background:blue url('images/welcome-r.jpg')top right no-repeat;
        height:30px;
        width:5%;
        margin-left:95%;
}
/* Welcome Ende */