Guten Abend,

für meine Pfadfindergruppe bin ich dabei, das neue Layout zu erstellen. Soweit klappt es auch, bis auf ein paar Kleinigkeiten. Ein Problem habe ich nur mit der rechten, unteren Ecke des Menue. Sie sollte nämlich abgerundet sein. Die Suche hier im Forum hat mir zwar einiges gezeigt, was mich bislang aber noch nicht weiter brachte.

Mein Lösungsweg war der, dass ich eine Hintergrundgrafik genommen habe, die ich dann unten und rechts angeordnet habe:

Code :

1 2 3 4

background-color:#999;     background-image: url(Grafiken/ecke.jpg);     background-repeat:no-repeat;     background-position:bottom right;

Doch leider sieht das Ergebnis alles andere als gut aus, wie man unter http://test.jurtenrunde.de/ambronen2/ sehen kann.

Es würde nun ja noch die Möglichkeit geben, das ganze per css zu lösen, was zum Beispiel hier oder hier beschrieben wurde. Doch wenn ich es nur über die Rahmen mache, haben einige Browser damit ihre Probleme gehabt, weshalb ich (noch) lieber die alte Variante nutzen möchte.

Wie kann ich mein Problem lösen? Wo liegt der Fehler?

Hoffe sehr, dass ihr mir helfen könnt.
Lieben Gruß
Muckel

Hi,

mal abgesehen davon, dass für background-position zuerst die horizontale Position genannt wird, ist ansonsten mit dem gezeigten CSS-Code alles in bester Ordnung - dafür ist dem Anschein nach wohl eher in der Grafik der Radius für den Viertelkreis ein paar Nummern zu klein ausgefallen.



mfg Maik

Guten Abend,

wie kann ich denn die richtige Radius Größe bestimmen? Denn die Außenrahmen und die breite sind Prozent Werte. Sprich mit meiner Auflösung des Notebooks ist es ja eine andere als bei dem PC meiner Eltern zum Beispiel.

Angenommen ich mache das nun nach dem Beispiel von css4you und den Rahmen - wie schaut es dann mit dem Internet Explorer zum Beispiel aus?


habe das nun mittels CSS und der Rahmenfunktion ausprobiert:

Code :

1 2 3

border: 0.25em solid #999;     -moz-border-radius-bottomright:25px;     -khtml-border-radius-bottomright:60px;

Im Firefox klappt das auch ohne Problem. Doch im Opera ist es eine normale Ecke und im Internet Explorer auch (wobei der noch andere Fehler mit der Grafik Anordnung hat...).

Gruß Muckel

Den Radius kannst du doch frei wählen - du musst nur den Kreismittelpunkt richtig platzieren

Zitat von http://www.css4you.de/trickkiste/tr00012.html

Gecko-browser wie Netscape, Mozilla und Firefox (mit -moz-prefix) und KHTML-Browser wie Safari und Konqueror (mit -khtml-prefix) können es bereits.

Da fallen Opera und IE erstmal durchs Lattenrost

mfg Maik

Zitat von Maik

(...)

Da fallen Opera und IE erstmal durchs Lattenrost

(...)

Und genau da liegt ja das "Problem". Da sich die breite meines div und auch alle anderen Abstände als Prozentangabe wieder findet, sind die dargestellten Flächen ja unterschiedlich je nach Auflösung. Das wiederum ist gewollt, damit man die Seite überall gut sehen kann - doch gibt es dabei jetzt nicht Probleme?

Gruß Muckel

Ich weiß jetzt nicht, wo es da Probleme geben soll?

Alternativ kannst du ja auch mal die nachfolgenden Techniken studieren und testen:

• 25 Rounded Corners Techniques with CSS
• CSS Rounded Corners 'Roundup'

mfg Maik

Guten Abend,

danke, dass werde ich versuchen. Habe es erstmal mit'm Bild gelöst. Morgen mal schauen wie es anstatt von 1440x900 mit 1024x768 ausschaut.

Kleine Frage am Rand - wie kann ich eine Wellenlinie in Photoshop erstellen? Möchte am oberen, rechten Anfang des Menu noch einen Übergang zum Rest haben...

Gruß und vielen Dank
Muckel

Guten Abend,

habe eben nochmal ein wenig mit Hintergrundbildern und deren Positionen gespielt und habe nun von meinem Mittelfeld die Ecken abgerundet. Das könnt ihr auch auf der Seite sehen: http://test.jurtenrunde.de/ambronen2/.

Wie ihr dort sehen könnt, habe ich unterhalb dieser Feuergrafik einen Übergang zu dem Menu. Bei mir passt es mit diesem Bogen, wie man an diesem Screenshot sehen kann:



Das Problem ist nun wieder, dass es mit der Breite des Bildes ja nicht mehr passt, wenn man

• eine andere Auflösung hat
• den Brwoser nicht maximiert hat
• mit einer Variablen Größe arbeiten möchte

Bin ich richtig in der Annahme, dass es dafür keine Lösung gibt?

Was ich kenne ist die Breite des Feuerbildes und die Breite des Menu - somit habe ich auch die Breitenangabe, die dieser Übergang haben muss. Ich könnte ihn also als Bild einfügen, was aber zur folge hätte, dass mein Text erst daneben oder darunter beginnt, was ich ja auch nicht unbedingt möchte.

Gruß Muckel

Solange das obere Grafikelement in der Breite relativ, und das darunterfolgende Hintergrundbild in der Breite fix ist, kann das in dieser diskrepanten Konstellation auch nicht funktionieren - eigentlich logisch, oder?

mfg Maik

Guten Morgen

ja da hast Du Recht - und einen Lösung wird es da ja wahrscheinlich auch nicht geben... oder?

Aber eine letzte Frage zu dieser Thematik. Ich möchte unter dem Inhalt der eigentlichen Seite nochmal die neusten dire Beiträge oder anzeigen lassen. Damit auch jene zum Inhalt passen, muss ich ja in jeder Ecke dieses Bildchen haben. Ich habe es jetzt mit einer Tabelle gelöst: http://test.jurtenrunde.de/ambronen2/.

Laut den Validierungsüberprüfungen von W3C ist es damit auch Valid. Ist es sinvoll das so zu gestalten oder sollte man das besser mit div's machen? Bei jenem Versuch hatte ich das Problem, dass die Hintergrundfarbe des div sich auch auf den Außenrahmen Bereich mit ausgeweitet hat - und damit waren die Bilder dann wieder in dem hellen Grauton drin, was sie ja nicht sein sollten.

Ich hatte ein DIV welches die anderen umgibt. Dann kamen die zwei oberen Grafiken, die eine links und die andere rechtes gefloatet. Danach der Text und dann die beiden unteren Grafiken. Aber vom aussehen her ein Ergebnis wie mit der Tabelle hatte ich leider nicht.

Um die Seite bzw. das Layout möglichst Barrierearm zu gestalten, würde ich Tabellen halt nur sehr ungerne nutzen...

Hast Du da auch eine Idee?

Gruß und vielen Dank
Muckel

Schau dir einfach meine Linkempfehlungen an. All diese Techniken kommen ohne Tabellen aus.

Zitat von Maik

Alternativ kannst du ja auch mal die nachfolgenden Techniken studieren und testen:

• 25 Rounded Corners Techniques with CSS
• CSS Rounded Corners 'Roundup'

mfg Maik