zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anker: Text vertikal ausrichten + hintergrundgrafik über komplettes element

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.07.2009, 18:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2009
Beiträge: 22
ebimail befindet sich auf einem aufstrebenden Ast
Standard Anker: Text vertikal ausrichten + hintergrundgrafik über komplettes element

Hey,

ich würde gerne meine Navigation ein wenig entzerren und die Abstände zwischen den einzelnen Links vertikal vergrößern. Dazu passend soll sich auch der Hintergrund (hover) der einzlenen Elemente vertikal vergrößern, so dass kein weißer (freier) Raum zwischen den Ankern entsteht.
Der Text soll dabei vertikal mittig ausgerichtet sein.

zu eng:


der freiraum muss weg:




Code:
a.navlinks, a.navlinks:link, a.navlinks:visited, a.navlinks:active {
  font-family: "Trebuchet MS", Verdana;
  font-weight: bold;
  font-size: 12px;
  color: #737373;
  
  text-decoration: none;
  outline: none;
  
  vertical-align: middle; 
  line-height: 21px;
  
  padding: 0px 0px 0px 16px;
  height: 21px;
  width: 185px;
  
  display: block;  
}

a.navlinks:hover {
  background-image: url(img/grundgeruest/navlinkshover.jpg);
  background-repeat: repeat-x;
  
  color: #737373;
}

a.navlinks#navliaktiv {
  background-image: url(img/grundgeruest/navlinksaktiv.jpg);
  background-repeat: repeat-x;
  
  color: #3e3e3e;
}

HTML-Code:
<a class="navlinks" href="">Kurzbeschreibung</a>
<a class="navlinks" id="navliaktiv" href="">Zielsetzung</a>
<a class="navlinks" href="">Lösungsansatz</a>

Leider funktioniert es bei mir nicht, wenn ich line-height: 21px; oder height: 21px; auf 30px ändere. Es tritt dann immer der Freiraum zwischen den Ankern auf.

Vll hat jemand eine Idee.
LG

Geändert von ebimail (02.07.2009 um 19:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.07.2009, 23:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

[FAQ]FAQ[/FAQ] "CSS-Prolog" sowie mein Beitrag. height ist keine gute Idee, da Text enthalten ist (d.h. Textzoom zerschießt Deine Navi).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.07.2009, 03:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2009
Beiträge: 22
ebimail befindet sich auf einem aufstrebenden Ast
Standard

Hey,
danke für deine Antwort.

Der CSS Prolog ist bereits berücksichtigt.
display: block; ebenfalls

und die Randabstände über Padding zu definieren bringt leider keinen Erfolg - weiterhin entstehen diese Lücken.

LG
Mit Zitat antworten
  #4 (permalink)  
Alt 03.07.2009, 11:54
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.989
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Kannst du mal einen Link auf dein Problem posten?
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 03.07.2009, 12:39
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

In meinem FAQ-Beitrag (auf den ich ebenfalls hingewiesen hatte), wärest Du schon fündig geworden...

Aber wenn ich Dich richtig verstehe, müsste vertikales padding helfen. height sollte allerdings raus (ist überflüssig & kontraproduktiv).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #6 (permalink)  
Alt 03.07.2009, 13:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2009
Beiträge: 22
ebimail befindet sich auf einem aufstrebenden Ast
Standard

Habe deinen FAQ Beitrag gelesen. Jedoch möchte ich ja nicht den Text durch Grafiken ersetzten... sondern nur eine Hintergrundgrafik definieren, die sich endlich wiederholt.

Würde es aber gerne weiterhin ohne Listen machen. Muss doch auch ohne funktionieren, oder?!

height ist bereits nicht mehr vorhanden.
Mit dem Padding hilft einfach nicht, da kann ich mich auf den Kopf stellen! ...
es erscheint immer wieder folgende fehlerhafte Darstellung.



__
Im Anhang der Auszug meiner Seite mit allen relevanten Definitionen!
Warum der Code oben nicht reicht - kp ... aber wenns hilft gerne!
__

LG & Danke
Angehängte Dateien
Dateityp: zip seite.zip (2,5 KB, 2x aufgerufen)
Mit Zitat antworten
  #7 (permalink)  
Alt 03.07.2009, 14:06
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.989
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Probiers mal, indem du in deinem CSS folgende Zeilen änderst (wenn es falsch ist, dann habe ich dich falsch verstanden...)

Code:
a.navlinks, a.navlinks:link, a.navlinks:visited, a.navlinks:active {
  padding: 5px 0px 5px 16px;
}
a.navlinks:hover {
  background-repeat:repeat;
}
a.navlinks#navliaktiv {
  background-repeat: repeat;
}
Die Codesgmente sind jeweils nur Ausschnitte!
Ich hoffe, dass ich das was du wolltest

Die Werte bei padding kannst du natürlich nach belieben ändern
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #8 (permalink)  
Alt 03.07.2009, 14:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Stimmt, die Lücken sind nur scheinbar da, padding wirkt sehr wohl, aber da er background-repeat: repeat-x; verwendet und die HG-Grafik anscheinend nicht höher ist (ich habe die zip-Datei nicht geöffnet), entstehen weiße Flächen innerhalb der Links. Das kommt davon, wenn kein Link gepostet wird, pures Rätselraten

Die repeat-Deklaration kann übrigens komplett entfallen (denn repeat ist Initialwert).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 03.07.2009, 14:26
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.989
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Die repeat-Deklaration kann übrigens komplett entfallen (denn repeat ist Initialwert).
Stimmt, daran habe ich nicht gedacht
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.07.2009, 14:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2009
Beiträge: 22
ebimail befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen

Code:
a.navlinks:hover {
  background-repeat:repeat;
}
a.navlinks#navliaktiv {
  background-repeat: repeat;
}
So dumm.... *omg* kann ja nicht funktionieren wenn die Grafik in die Falsche Richtung wiederholt wird! Vor lauter Bäumen sieht man schon den Wald nicht mehr....

Jetzt bitte nochmal eine kurze Erklärung wann wie die der Text verzerrt wird in einem Anker, sobald ich height einsetzte. Bei welchen Browsern - im FF siehts nämlich okay aus. Bzw. wo weitere Nachteile liegen.

VIELEN DANK übrigens!
LG
Mit Zitat antworten
Sponsored Links
Antwort

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
Wachsende Container Andy CD CSS 13 10.02.2010 13:08
DIV bis GANZ unten burnZ CSS 5 27.07.2008 13:14
Zeilenabstand bei font-Angabe wieder weg nick CSS 7 16.02.2008 14:39
Problem mit div und Höhe deep4 CSS 2 13.11.2007 20:03
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 00:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:17 Uhr.