|
|||
Background image lässt sich nicht nach unten "schieben"
Hallo erstmal ihr lieben,
ich weiß ja gar nischt ob Sie es schon wussten, aber...... ... ok Spaß beiseite Hi, ich bin neu hier, noch ziemliche CSS-Anfängerin und habe ein Problem: Ich wollte auf meiner HP in der Navigation die einzelnen Menüpunkte bei hover mit einem dünnen unteren Rand mit Farbverlauf versehen. Dafür habe ich ein Bild genommen und dieses als background-image eingefügt mit einer Bild-Höhe von 1px, erstreckt sich über die ganze Zeile. Ich hoffe, ihr könnt euch vorstellen, wie das aussehen soll in etwa. Ich habe schon alles versucht, um den Strich unter die Zeile zu bekommen, aber er ist und bleibt über der Schrift! Weiß absolut nicht, wie ich den Strich unter die Schrift bekomme... Könnt ihr mir helfen und mir Tipps geben, wie ich das hinbekomme, dass der Strich endlich drunter und nicht drüber ist?? Hier noch der Code: Code:
#Navigation a:hover { background-image: url(border_navi.png); background-attachement: fixed; background-position: left bottom; display: block; height: 1px; padding:0px 1px 0px 1px; margin:0px 0px 25px 0px; color:#660033; } Wär euch furchtbar dankbar, wenn ihr mir helfen könnt! elLiLly Geändert von elLiLly (13.05.2012 um 18:13 Uhr) |
Sponsored Links |
|
||||
Code:
height: 1px; Ansonsten stell das Beispiel mal online (Freehoster). Basis Lektüre: Little Boxes |
Sponsored Links |
|
|||
ja, es soll ja auch nur 1px hoch sein.... das passt schon so.
Mein Problem ist ja nur, dass der 1px hohe Strich über der Schrift ist, statt unterhalb, wo er sein sollte (üblicherweise sind ja auch links in der Navigation unterstrichen standardmäßig, und so will ich das halt auch machen mit meiner Bilddatei). |
|
|||
Zitat:
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
|
|||
danke... in meinem blöden CSS Buch stand das so drin: "attachement" mit "e"...
Naja, aber das nützt mir sowieso nichts, also jetzt habe ichs einfach rausgetan, schaut jetzt so aus: Code:
#Navigation a:hover { background-image: url(border_navi.png); background-position: left bottom; display: block; height: 1px; padding:0px 1px 0px 1px; margin:0px 0px 25px 0px; color:#660033; } |
|
|||
Hallo!
Zitat:
Ich würde mir den Tipp von Manfred nochmal zu Herzen nehmen und testweise mal auf "height:1px" verzichten! |
|
||||
Das was du schreibst ergibt keinen Sinn.
Du hast ein Anker-Element (a). Dieses Element hat eine bestimmte Höhe durch den darin enthaltenen Text. Wenn du nun dem Element eine Höhe von einem Pixel gibst, ergibt das keinen Sinn. Nimm die Höhe raus, dann sollte es funktionieren. Ansonsten lad deine bisherigen versuche hoch.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
Und damit dein Vorhaben gelinkt braucht es noch Backgroundrepeat.
Code:
} a { background-color: #ccc; color: #00008b; display: block; padding: 1px 0; } a:hover { background-image: url(border_navi.png); background-position: left bottom; background-repeat: repeat-x; /* oder no-repeat */ background-color: white; color:#660033; } Gruß, Roland |
|
|||
wenn ich die Höhe rausnehme, ist der Text mit meiner Bild-Datei unterlegt, markiert also quasi. Wie wenn ich eine Hintergrundfarbe angebe, nur halt eben statt der Farbe, das Bild. Aber ich will ja nur einen dünnen Strich, der die Textzeile unterstreicht.
Wie lade ich denn das Beispiel hoch?? Müssen ja dann die entsprechenden Bilddateien mitgeladen werden.... |
Sponsored Links |
|
|||
Zitat:
Bitte lies und beachte jetzt und in Zukunft unsere Hinweise für Fragende. Das erspart allen Beteiligten unnötig in die Länge gezogene Threads. Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Stichwörter |
background, background image, background-position, border, bottom, css, image, verschieben |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Inline Listenelement wird nicht richtig im background befüllt | SteveB | CSS | 3 | 28.04.2011 21:41 |
Float-Reihenfolge? | wolf1985 | CSS | 0 | 21.08.2008 02:35 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |