Hintergrundimage gleich lang

Jens_Ullmert_54197b · 10. November 2019 um 07:30

Hallöle ihr alle,
ich komme gleich zum Punkt:

Ich habe mir mit CSS eine Leiste gebastelt, in der Links liegen. Code folgendermaßen:

---------- CSS ----------
.navi {
padding-right: 5px;
}

.navi a {
font-weight: bold;
background: URL(data/bg-normal.jpg);
color: #FFFFFF;
text-decoration: none;
padding: 5px;
}

.navi a:hover {
font-weight: bold;
color: #000000;
background: URL(data/bg-hover.jpg);
}

.navi li {
padding: 5px;
list-style-type: none;
float: left;
margin-left: 5px;
}

---------- Ende CSS ----------

Das Problem ist, das die Hintergründe immer nur so lange sind, wie die Schrift. Sieht blöd aus. Wie kann ich es machen, das alles gleichlang ist ??

Gruß
Jens

Sven_Marcus · 10. November 2019 um 07:30

Das Problem ist, das die Hintergründe immer nur so lange sind,
wie die Schrift. Sieht blöd aus. Wie kann ich es machen, das
alles gleichlang ist ??

Gruß
Jens

Da Du leider keinen Link zur Problemseite gepostet hast, was übrigens immer besser (weil anschaulicher) ist, kann ich nur vermuten was Du meinst.

Eventuell hilft:

.navi a {
font-weight: bold;
background: URL(data/bg-normal.jpg);
color: #FFFFFF;
text-decoration: none;
padding: 5px;
display: block;
}

Da ein Link ein Inline-Element und nur so breit wie nötig ist, wird auch dessen Hintergrund nur so breit wie nötig dargestellt. Durch display: block; wird der Link wie ein Blockelement dargestellt, das sich naturgemäß über die ganze Breite erstreckt. Somit wird auch die Hintergrundgrafik über die ganze Breite dargestellt.

http://marcus-ringer.de/horiz_nav.shtml

Gruß Marcus

Jens_Ullmert_54197b · 10. November 2019 um 07:31

Moin

display: block;

Funktiuoniert leider nicht.

Was ich immoment noch „witziges“ habe ist, dass es keinen Umbruch für jeden - -Befehl gibt.
Es hengt dann alles in einer Reihe was da nur hengen kann.

Dazu ist unter der Grafik ein grauer Balken den ich da -glaube ich- nicht reinprogrammiert habe.

Gruß
Jens

Efchen · 10. November 2019 um 07:31

Funktiuoniert leider nicht.

Du solltest unbedingt den vollständigen Code angeben, am besten in Form eines Links. Das CSS ohne HTML dazu ist ja auch nicht viel wert.

Was ich immoment noch „witziges“ habe ist, dass es keinen
Umbruch für jeden - -Befehl gibt.

In HTML gibt es keine Befehle. Die Dinger heißen „Tags“.
HTML und CSS sind auch keine Programmiersprachen.

Es hengt dann alles in einer Reihe was da nur hengen kann.

Dein „ä“ ist kaputt
Du hast ja auch angegeben, dass Deine Listenelemente nebeneinander sein sollen, wie kommt es, dass Du Dich darüber beschwerst?

Gruß,
-Efchen

Jens_Ullmert_54197b · 10. November 2019 um 07:31

Du solltest unbedingt den vollständigen Code angeben, am
besten in Form eines Links. Das CSS ohne HTML dazu ist ja auch
nicht viel wert.

Link1
1
Längerer Link 2

In HTML gibt es keine Befehle. Die Dinger heißen „Tags“.
HTML und CSS sind auch keine Programmiersprachen.

Das weiß ich so früh am Morgen noch nicht
Mein ich ja aber…

Dein „ä“ ist kaputt

*unschuldig in die Luft kuck und Pfeif*

Du hast ja auch angegeben, dass Deine Listenelemente
nebeneinander sein sollen, wie kommt es, dass Du Dich darüber
beschwerst?

Habe ich nirgendwo angegeben.

Korrekt währe Untereinander angeordnet und alle Hintergründe gleich lang.

Gruß
Jens

Efchen · 10. November 2019 um 07:31

Du hast ja auch angegeben, dass Deine Listenelemente
nebeneinander sein sollen, wie kommt es, dass Du Dich darüber
beschwerst?

Habe ich nirgendwo angegeben.

Das kommt davon, wenn man nicht den vollständigen Code postet.
Im CSS sah es so aus, als wäre Deine Navigation eine Liste (wie man es üblicherweise auch macht), tatsächlich ist Deine Semantik eine andere (nicht geeignete, btw). Warum Du allerdings von „li“ gesprochen hast, obwohl Du das nicht verwendest, verstehe ich nicht.
Im „.navi li“ stand float:left. Das heißt, alles nebeneinander.

Aber auch mit dem jetzt geposteten HTML-Code hast Du natürlich alle Links nebeneinander, weil Du nur Anchor verwendest, das sind Inline-Elemente und die sind nunmal nebeneinander.

Dein Code passt nicht zu Deinen Aussagen und nicht zu Deinem Stylesheet. Bringe da bitte Ordnung rein und wenn dann immer noch etwas nicht geht, lad die Seite hoch und gib uns den Link.

Korrekt währe Untereinander angeordnet und alle Hintergründe
gleich lang.

Korrekt ist alles nebeneinander, weil Du lauter Inline-Elemente hast.

Gruß,
-Efchen

Sven_Marcus · 10. November 2019 um 07:32

Dazu ist unter der Grafik ein grauer Balken den ich da -glaube
ich- nicht reinprogrammiert habe.

Programmiert hast Du mit Sicherheit ohnehin nichts, außer HTML ist über Nacht zur Programmiersprache geworden…

Setz die Seite bitte mal online und poste bitte einen Link dazu.

Gruß Marcus

Jens_Ullmert_54197b · 10. November 2019 um 07:33

Setz die Seite bitte mal online und poste bitte einen Link
dazu.

http://progis-web.bplaced.net/

Gleich lang ist jetzt alles. Keine Ahnung was mein PC da nicht machen wollte… Aber bei mir ist da immernoch ein grauer Balken…

Fals es etwas bringt:
„normaler“ Hintergrund: http://progis-web.bplaced.net/data/bg-normal.jpg
Hover: http://progis-web.bplaced.net/data/bg-hover.jpg

Gruß
Jens

Efchen · 10. November 2019 um 07:34

http://progis-web.bplaced.net/

Aber bei mir ist da immernoch ein grauer Balken…

Bei mir nicht (Firefox 1.5.0.9/Linux).

Aber ich würde Dir noch folgende Sachen empfehlen, die wahrscheinlich alle nichts mit Deinem Problem zu tun haben, aber Dich technisch weiter bringen:

Nimm keinen Transitional DOCTYPE, das ist was für Weicheier, nimm Strict, am besten XHTML 1.0 Strict.
Verbessere Deine Semantik. Schmeiss die
raus. Mach aus der Navigation eine
, keine Gruppe von Links.

Jaja, „das ist nur ne Testseite“. Aber man muss doch auch in Testseiten nicht Dinge tun, die man sonst nie tun würde (sollte).

Gruß,
-Efchen

Felix_W_9c131d · 10. November 2019 um 07:34

Hallo,

http://progis-web.bplaced.net/

Aber bei mir ist da immernoch ein grauer Balken…

Bei mir nicht (Firefox 1.5.0.9/Linux).

Bei mir schon (FF 2.0.0.12/Linux), und zwar weil die 150px bei normalgroßer Schrift bei mir zu kurz sind. Also werden aus dem langen Link zwei Zeilen und das Hintergundbild kommt zweimal. Versuch mal, bei dir die Schrift zu vergrößern, dann kriegst du das vielleicht auch.

Cheers, Felix

Sven_Marcus · 10. November 2019 um 07:34

Vorab: wenn Du solche Grafiken machst, dann geh bei einem Farbverlauf möglichst bald in die Endfarbe über. In deinem Fall ist zu lange Grau bis endlich mal Schwarz kommt! Das führt gerade bei kleiner Schrift beim hovern des Links zu einem schwarzen Balken.

Ich kann dir ganz genau sagen was der Fehler ist: Die Hintergrundgrafik ist nicht hoch genug. Wenn der Link bzw. dessen Schriftgröße also größer ist als die Grafik, wird die sie einfach gekachelt. Was Du also als grauen Balken siehst, ist in Wahrheit schon wieder der Anfang der Grafik.

Wie behebt man das? Ich würde - von besserem Quellcode mal abgesehen - entweder die Grafik höher machen, oder besser, den Hintergrund des Link schwarz machen, so wie eben der untere bereich der Grafik. Außerdem würde ich beim letzterem das automatische kacheln nur auf der X-Achse (horizontal) erlauben:

#navi a {

text-decoration: none;
padding: 7px;
background: URL(…bplaced.net/data/bg-normal.jpg) repeat-x ;
color: #FFFFFF;
background-color: #000;
display: block;

}

#navi a:hover {

text-decoration: none;
padding: 7px;
background: URL(…bplaced.net/data/bg-hover.jpg) repeat-x ;
color: #FFFFFF;
background-color: #000;
display: block;

}

Und jetzt lerne bitte die Basics! Dein Quellcode lässt sehr zu wünschen übrig!

Gruß Marcus

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]