+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Sonstiges (https://www.mybb.de/forum/forum-1.html)
+--- Forum: Programmierung (https://www.mybb.de/forum/forum-32.html)
+--- Thema: [gelöst]CSS Problem (/thread-6325.html)
Seiten: Seiten:
1
2
[gelöst]CSS Problem - modercol - 29.06.2007
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"> </td><td 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>,";
?>
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>
</td><td class="wr"> </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]
RE: CSS Problem - Jan - 29.06.2007
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.
RE: CSS Problem - modercol - 29.06.2007
Dann passt das aber nicht mit dem unterem Kasten, dieser hat keine iframe, wird aber trotzdem unten und an den Seiten falsch angezeigt.
RE: CSS Problem - Jan - 29.06.2007
Kannst du mir mal den Link geben?
Damit ich des mal mit beiden anschauen kann.
RE: CSS Problem - modercol - 29.06.2007
Link per PN und ICQ geschickt.
RE: CSS Problem - Jan - 29.06.2007
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 */RE: CSS Problem - modercol - 30.06.2007
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.
RE: CSS Problem - Jan - 30.06.2007
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 */RE: CSS Problem - modercol - 30.06.2007
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.
RE: CSS Problem - Jan - 30.06.2007
Das Problem wurde über ICQ/Jabber weiter besprochen. Damit ihr das hier nachvollziehen könnt eine kleine Zusammanfassung der Zwischenschritte:
- Ä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 */