MyBB.de Forum

MyBB.de Forum > Sonstiges > Programmierung > [gelöst]CSS Problem
Normale Version: [gelöst]CSS Problem
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Seiten: 1 2

modercol

29.06.2007, 21:45
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

29.06.2007, 22:15
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, leiderSad
Wird aber am Iframe liegen, so wie es aussieht.

modercol

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

Jan

29.06.2007, 22:18
Kannst du mir mal den Link geben?
Damit ich des mal mit beiden anschauen kann.

modercol

29.06.2007, 22:38
Link per PN und ICQ geschickt.

Jan

29.06.2007, 23:30
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

30.06.2007, 12:34
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

30.06.2007, 13:41
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

30.06.2007, 16:15
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.ShySad

Jan

30.06.2007, 16:32
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 */
Seiten: 1 2
MyBB.de Forum > Sonstiges > Programmierung > [gelöst]CSS Problem