|
|||
Hilfe, ich kann nicht mehr ;-) (CSS und runde Ecken ;-))
CSS RUNDE ECKEN IN INLINE-ELEMENTEN UNMÖGLICH?
Hallo zusammen, ich kämpfe seit guten 5 Stunden mit einem Problem, ich möchte gerne auf einer meine Projekte die Partnerlinks verschönern und habe mir dafür folgendes Layout vorgestellt: Ich konnte das fürs Erste auch mit 2 Grafiken die ich per span-Element eingebunden habe lösen, in Safari wurden die Links auch sofort so wie oben abgebildet dargestellt, allerdings fing meine Odyssee an: 1. im aktuellen Firefox ist das a-Element um 2 Pixel verschoben, die scheint am unterschiedlichen Rendering der Schrift zu liegen. 2. im Safari taucht das Problem auf wenn ich die Schriftart um 1 Pixel verkleinere, da es in a- sowie in span-Elementen keine “height” Angabe gibt, kann ich die größe des a-Elements nicht an die Grafiken anpassen die bei 21 Pixel liegt. Ich kann das ganze jetzt auch nicht in ein Block-Element packen da dieses eine Widht-Angabe benötigt und ich diese nicht so gerne für jedes Element vergeben möchte. Ich habe nun folgende Zeilen zusammen gebracht funktioniert im Safari & Firefox auch allerdings zeigt der IE nur eine eckige Box mit den Links. HTML: HTML-Code:
<span class="abox_left"> </span><span class="abox"> <a href="'.$v['url'].'" target="'.$v['target'].'" title="'.$v['title'].'">'.$v['text'].'</a> </span><span class="abox_right"> </span> HTML-Code:
.abox { background: url('../images/abox.png') repeat-x; padding-top:3px; padding-bottom:3px; padding-left:3px; padding-right:3px; } .abox_left { background: url('../images/abox_left.png') no-repeat; padding-top:3px; padding-bottom:3px; } .abox_right { background: url('../images/abox_right.png') no-repeat; padding-top:3px; padding-bottom:3px; } Viele Grüße, Tim |
Sponsored Links |
|
||||
Moin,
Zitat:
width für Blockelemente vergebe ich nur da, wo es notwendig ist. Warum sollte ich mein CSS unnötig aufblähen? Informier dich doch mal hier, wie man ein vernünftiges grafisches Menü baut. Das deine Menügrafiken verschieden breit sind macht nix, da jede normal ne eigene id bekommt und so leicht individuell per CSS angesprochen werden kann.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus Geändert von hubspe (02.11.2008 um 08:16 Uhr) |
Sponsored Links |
|
|||
Es, klappt so auch nicht, ich bekomme es einfach nicht hin 2 Grafiken einzubinden, hab dem a jetzt ein Background gegeben mit der linken ecke
die rechte Ecke will er jetzt aber einfach nicht einblenden außerdem ist der Linktext eher oben als in der Mitte das sieht mal mega übel aus Wie würdest du das denn lösen oder hat hier jmd. ein Beispiel? Ich hab im Netz auch nichts gefunden was bei mir passen könnte Viele Grüße und schönen Dank, Tim |
|
||||
Hi,
hast du das Beispiel aus der FAQ denn verstanden. Schau dir mal den ganzen Artikel an, d.h. über alle Arten von Menüs und bau die mal alle nach. Wenn bei dir der Linktext nicht in der Grafik ist, sondern im Quelltext steht und die Grafik nur den Hintergrund zum Linktext bildet, gib a etwas padding-top , das hilft oft. Um die Technik des grafischen Menüs in der FAQ zu verstehen, mußt du natürlich erstmal Image Replacement nach Gilder/Levin kapiert haben. Aber hier noch mal exklusiv für dich ein Tut für ein grafisches Menü: Erstellung eines einfachen, horizontalen, grafischen Menüs: Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift. Normalzustand ist oben in der Grafik, der Hoverzustand darunter. Doctype ist "strict" um immer im Standardmodus zu sein. Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt. Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen. Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin XHTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Grafisches Menü</title> </head> <body> <ul> <li id="navi01"><strong><span></span>Startseite</strong></li> <li id="navi02"><a href="#"><span></span>Kontakt</a></li> <li id="navi03"><a href="#"><span></span>Galerie</a></li> </ul> </body> </html> Code:
* { padding:0; margin:0; } ul { width:400px; margin:2em auto; } li { float:left; width:120px; list-style-type:none; } overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann. Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!): Code:
a, strong { position:relative; overflow:hidden; display:block; width:100%; height:40px; } Code:
#navi01 a span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(startseite.jpg) no-repeat 0 0; } #navi01 strong span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(startseite.jpg) no-repeat 0 -40px; } #navi02 a span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(kontakt.jpg) no-repeat 0 0; } #navi02 strong span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(kontakt.jpg) no-repeat 0 -40px; } #navi03 a span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(galerie.jpg) no-repeat 0 0; } #navi03 strong span { position:absolute; width:100%; height:40px; top:0; left:0; background:url(galerie.jpg) no-repeat 0 -40px; } Code:
#navi01 a:hover span, #navi01 a:focus span, #navi02 a:hover span, #navi02 a:focus span, #navi03 a:hover span, #navi03 a:focus span { background-position:0 -40px; } Nicht ganz: Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss. Das wird ihm per CC wieder beigebracht. Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern in der hover-position stehen und springt nicht zurück auf die "Normal-Position". Der dafür definierte Hack mit background-position mutet unsinnig und absurd an, hilft aber. Code:
<!--[if lte IE 7]> <style type="text/css"> ul a span { cursor:pointer; } a:hover { background-position:0 0; } </style> <![endif]--> Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor auf das betroffene Menü angewendet wird.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Hallo erstmal vielen Dank für deine Hilfe,
ein einfaches Menü mit Listelementen bekomme ich ja hin auch das das Bild beim überfahren des Links verändert wird nur muss ich ja 2 Bilder auf einmal anzeigen(linke & rechte Ecke) das bekomme ich einfach nicht zum laufen eine Seite darzustellen ist kein Problem aber beide klappen irgendwie einfach nicht. Ich möchte jetzt ja nicht für jeden Link eine Grafik machen die die volle breite des Links abdeckt damit wäre das Problem zwar gelöst aber würde bei jedem neuen Link erneut arbeit machen. |
|
||||
Hi,
ach so, dann mußt du dich wohl mit der Schiebetürentechnik auseinandersetzen. Das Arbeitsweise in der FAQ ist aber eine bewährte und gerne angewendete Technik.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Hallo zusammen,
ich habe fast eine Lösung: HTML-Code:
#footer_links li { list-style-type:none; float: left; background: #575555 url('../images/abox_right.png') right no-repeat; margin-right:5px; } #footer_links a { background: #464242 url('../images/abox_left.png') left no-repeat; padding:3px 3px 3px 7px; display:block; text-align: center; margin-right:5px; color:#FFFFFF; font-size:11px; font-weight:bold; } |
|
|||
Hallo zusammen,
also es klappt ich habe abox_right.png jetzt 500 Breite gegeben und alles schaut aus wie ich es mir gewünscht habe, schade das das 10 Stunden gedauert hat aber hab ja was dabei gelernt*g* |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! | Web4Live | CSS | 2 | 13.07.2011 17:01 |
IE - runde Ecken mit Transparenz ohne Grafiken? | freshUser | CSS | 19 | 17.03.2011 21:55 |
Hilfe bei gesamten CSS Layout | mexxat | CSS | 0 | 22.08.2007 14:40 |
css hilfe | victorwooten | CSS | 1 | 19.11.2006 14:15 |