zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Background image lässt sich nicht nach unten "schieben"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.05.2012, 18:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2012
Beiträge: 33
elLiLly befindet sich auf einem aufstrebenden Ast
Frage 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;
}
Anmerkung: background-attachement und background-position haben irgendwie überhaupt keine Auswirkung...

Wär euch furchtbar dankbar, wenn ihr mir helfen könnt!

elLiLly

Geändert von elLiLly (13.05.2012 um 18:13 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.05.2012, 21:05
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.136
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Code:
height: 1px;
bedeutet, dass dein Link (bei hover) nur 1px hoch ist!
Ansonsten stell das Beispiel mal online (Freehoster).

Basis Lektüre: Little Boxes
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.05.2012, 21:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2012
Beiträge: 33
elLiLly befindet sich auf einem aufstrebenden Ast
Standard

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).
Mit Zitat antworten
  #4 (permalink)  
Alt 13.05.2012, 21:24
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.825
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von elLiLly Beitrag anzeigen
Anmerkung: background-attachement und background-position haben irgendwie überhaupt keine Auswirkung...
Es gibt keine Eigenschaft namens background-attachement. Ein Validator hätte dir das verraten
__________________
Ü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.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.05.2012, 21:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2012
Beiträge: 33
elLiLly befindet sich auf einem aufstrebenden Ast
Standard

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;
}
hat jetzt schon jemand eine Idee?
Mit Zitat antworten
  #6 (permalink)  
Alt 13.05.2012, 22:17
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo!
Zitat:
ja, es soll ja auch nur 1px hoch sein.... das passt schon so.
Bist du sicher, dass du hier keinen Denkfehler machst???
Ich würde mir den Tipp von Manfred nochmal zu Herzen nehmen und testweise mal auf "height:1px" verzichten!
Mit Zitat antworten
  #7 (permalink)  
Alt 13.05.2012, 22:24
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 13.05.2012, 23:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von elLiLly Beitrag anzeigen
hat jetzt schon jemand eine Idee?
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
Mit Zitat antworten
  #9 (permalink)  
Alt 14.05.2012, 18:16
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.05.2012
Beiträge: 33
elLiLly befindet sich auf einem aufstrebenden Ast
Standard

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....
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.05.2012, 18:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von elLiLly Beitrag anzeigen
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.
Ja, so ist das. Da wir nach wie vor nicht wissen, wie dein Bild und dein Code aussehen, ist es schlicht unmöglich dir zu sagen, was du falsch machst.
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:
Aber ich will ja nur einen dünnen Strich, der die Textzeile unterstreicht.
Dafür gibt es die border-Eigenschaft.

Zitat:
Wie lade ich denn das Beispiel hoch?? Müssen ja dann die entsprechenden Bilddateien mitgeladen werden....
Ja, es muss alles hochgeladen werden. Such dir einen Freehoster (<- Suchbegriff)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
background, background image, background-position, border, bottom, css, image, verschieben

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:11 Uhr.