Grafikelemente werden unschön angezeigt

Hi Leute
Auf meiner Seite www.kibukri.ch wird teilweise - wahrscheinlich je nach Bildschirmauflösung - das Modul "Anmeldung" unschön dargestellt. Der graue dünne Rahmen (welcher ich sowieso mal wegbringen möchte - wer weiss wie?)rund um Benutzername bis Anmedung liegt ausserhalb des Moduls. (Ebenso das Gästebuch im Top-Menu). Wie schon gesagt, auf vielen Bildschirmen ist dies nicht so, aber ich habe schon auf anderen Monitoren gesehen, wie diese Grafikelemente unschön verzogen dargestellt werden.

Vielen Dank für die wertvolle Hilfe!!!

Sieht mir nach einem Browser problem aus. Im FF8 ist das layout so wie du beschriebst. Im IE9 ist es ok. Folglich müsste das in JOOMLA selber irgendwo korrigiert werden. Ich Tippe mal auf CSS Optionen des Templates. Frag mich aber nicht welche und wie. CSS experten gibst hier im Forum.
Aber mit den Einschlägigen Browser Tools sollte das schnell gefunden sein..

Vielen Dank für wertvollen den Hinweis. In dem Fall ein Aufruf: Welcher CSS-Experte weiss, wo ich die entsprechenden Einstellungen nachschlagen kann??

Hallo snooze,
bei mir zeigt es die das Modul im Firefox und IE richtig an, dafür sind die Inputboxen in Opera zu lang.

Um den Rahmen weg zu bekommen:
im File: templates/beeteddy/css/template.css unter fieldset auf Linie 182 ergänzen:
border: none;

(es nimmt dann bei allen fieldsets den Rahmen weg, find ich eh schöner)

Damit die Inputboxes in einigen Browsern nicht zu gross dargestellt werden, könntest du versuchen, eine width anzugeben (im gleichen .css File wie oben)

zum Beispiel so:

form#form-login .inputbox {
width: 130px;
}

ich kann nicht kontrollieren, ob es funktioniert, einen Versuch ist es wert.

Liebe Grüsse, Pascale

Hi Pascale
Vielen herzlichen Dank! Wie man auf der Website sieht, haben deine Vorschläge 1A funktioniert!!

Ein kleiner "Schönheitsfehler" bleibt noch offen: Der Button bei "Angemeldet bleiben" ist jetzt irgendwie verschoben. Eigentlich brauch ich das ganze sowieso nicht. Könnte ich da einfach ein paar Zeilen im CSS rauslöschen, damit das verschwindet, oder ist das nicht zu empfehlen?

Hallo Snooze
Super, es sieht besser aus!
Das "Angemeldet bleiben", kannst du so fixen:
Anstatt:

form#form-login .inputbox {
width: 130px;
}

schreibst du:
form#form-login .inputbox #modlgn_username, form#form-login .inputbox #modlgn_passwd {
width: 130px;
}

oder wenn du es gar nicht willst, dann geht es mit:
p#form-login-remember {
display: none;
}

oder du machst ein overwrite des files: modules/mod_login/tmpl/default.php
docs.joomla.org/How_to_override_the_outp...rom_the_Joomla!_core

Liebe Grüsse, Pascale

Hi Pascale
WOW, Hammer, kann ich da nur sagen! Das ist ja unglaublich. Eine Codezeile reicht, und schon klappts! Vielen Dank!!!
Da du dich mit dem Ausmerzen solcher grafischen "Schönheitsfehler" ganz offensichtlich sehr gut auskennst, nutze ich gleich meine Chance um dich noch drei weitere Dinge zu fragen:
1. Wie kann ich oberhalb des Buttons "Anmeldung" noch einen kleinen Abstand einfügen?
2. Im Top-Menu sind alle Titel fettgedruckt. Das möchte ich eigentlich nicht. Wie kann ich das ändern?
3. Bei "Kontakt": Wie bringe ich das Bild des Wiesels von der rechten auf die linke Seite?

Nochmals vielen Dank für deine Top-Hilfe!
Liebe Grüsse
Roman

Hallo Roman,
super dass ich dir helfen konnte.
was du brauchst ist der firebug (ein add-on für Firefox)
addons.mozilla.org/de/firefox/addon/firebug/
Hier hat es ein ausführliches Video, wie du diesen verwenden kannst:
www.lernvid.com/lernvideos/82-webdesign/...eiten-verwenden.html

hier ein paar Hints
1.
form#form-login input.button {
margin-top: 10px;
}

2.
template.css bei Zeile 21 font-weight ändern:
#topmenu li {
color: #000000;
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 1.2em;
/*font-weight: 800;*/
font-weight: normal;
}
3. ist schwieriger, da es ein inline-style ist.
<div style="float: right;">
<img align="middle" alt="Kontakt" src="/images/stories/Wiesel einzeln - Mini.png">
</div>
sollte aber "float: left;" sein.

Also, entweder wie schon erwähnt ein override des php-core-files von Joomla machen.

Oder mit .css geht es so: (Einziger Haken bei dieser Variante: es funktioniert nicht im IE6 (IE7 ?), dieser ignoriert den [style] Selektor komplett.):

div#component-contact div[style] {
float: left !important;
}
das musst du ausprobieren.

Oder du machst das Bild mit dem Wiesel breiter und das Wiesel kommt links in Bild.

Liebe Grüsse, Pascale

Hallo Pascale
Vielen Dank für deine Hints Ich werde sie heute Nachmittag ausprobieren...

Firebug habe ich bereits schon und das Tool war mir schon häufig eine grosse Hilfe. Ich konnte damit etliche andere "Schönheitsfehler" selbständig finden und korrigieren. Schwierig wirds für mich aber immer dann, wenn man eigene Code-Zeilen hinzufügen muss. Zwar hab ich dies auch schon erfolgreich geschafft, aber nur, wenn es um kleinere Dinge geht und Standartbefehle sind, wie man sie auch gut auf diversen Seiten im Netz nachlesen kann. Sobald es aber komplizierter wird, bin ich auf Hilfe angewiesen....

EDIT: Hab nun alle Änderungen vorgenommen, und wie man sieht, hat es gleich wieder super funktioniert (hab zwar das Top-Menü doch nicht ganz ohne Fettdruck, aber hab den Wert von 800 auf 700 geändert). Beim Bild des Wiesels habe ich im php-core file die Änderung vorgenommen.
Danke auch noch für den Link zum Lernvideo von Firebug! Ebenfalls eine tolle Bereicherung um das Programm besser verstehen und anwenden zu können. Dadurch werde ich dieses Forum wohl weniger um Hilfe bitten müssen
Schöner Sonntag!!

super, dass es geklappt hat.
Deine Webseite gefäll mir.
Bis zur nächsten Frage
Pascale