Autor |
Nachricht |
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mo 11.02.2008 18:16
Titel CSS -> listenproblem |
|
|
Hi Leute hab n Listenproblem in einem CMS.
Arbeite gerade mit Typolight.
und zwar folgendes.
Ich hab ein list-style-type image 4x4 px groß
nun soll das natürlich in der mitte des textes jedes Navi punktes angezeigt werden.
Allerdings is das im IE6 bzw 7 zu weit oben und im FF n tick zu weit unten.
Das CMS generiert folgenden html code:
Code: |
<div id="navi">
<!-- indexer::stop -->
<div class="mod_navigation block">
<a href="index.php/home.html#skipNavigation_1" class="invisible" title="Navigation überspringen"></a>
<ul class="level_1">
<li class="active first"><p class="active first">Home</p></li>
<li><a href="index.php/marken.html" title="Marken" onclick="this.blur();">Marken</a></li>
<li><a href="index.php/leistungen.html" title="Leistungen" onclick="this.blur();">Leistungen</a></li>
<li><a href="index.php/referenzen.html" title="Referenzen" onclick="this.blur();">Referenzen</a></li>
<li><a href="index.php/partner.html" title="Partner" onclick="this.blur();">Partner</a></li>
<li><a href="index.php/ansprechpartner.html" title="Ansprechpartner" onclick="this.blur();">Ansprechpartner</a></li>
<li><a href="index.php/ihr-weg-zu-uns.html" title="Ihr Weg zu uns" onclick="this.blur();">Ihr Weg zu uns</a></li>
<li><a href="index.php/kontakt.html" title="Kontakt" onclick="this.blur();">Kontakt</a></li>
<li><a href="index.php/intranet.html" title="Intranet" onclick="this.blur();">Intranet</a></li>
<li class="last"><a href="index.php/download.html" title="Download" class="last" onclick="this.blur();">Download</a></li>
</ul>
<a id="skipNavigation_1" class="invisible" title="Navigation überspringen"></a>
</div>
<!-- indexer::continue -->
</div>
|
sooo
dann hab ich mal sone quick n dirty css geschrieben:
Code: |
#navi ul li {
margin:0px;
padding:0px;
}
#navi li {
line-height:26px;
border-bottom:#CCCCCC solid 1px;
}
#navi a {
text-decoration:none;
color:#333333;
}
#navi ul {
list-style-image:url(pix/dot.gif);
}
|
hier mal n pic zur verdeutlichung.
Is das erste mal dass ich list-style benutze und hab da relativ wenig schimmer.
Jemand ne Idee?
|
|
|
|
|
LioGetz
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht:
|
Verfasst Mo 11.02.2008 19:36
Titel
|
|
|
weiß nicht obs hilft, aber warum machst du dafür extra n image?
schonmal mit
Code: |
list-style-type:square;
|
probiert? Vielleicht macht das weniger Probleme als ein Bild?!
CU
Lio
|
|
|
|
|
Anzeige
|
|
|
dastef
Dabei seit: 03.11.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 11.02.2008 21:32
Titel
|
|
|
kleiner tipp bei sowas .. schmeiß das list-style-image raus .. und
verwende statt dessen nen background-image .. ob nun auf dem
<li> oder dem <a> element ist egal. ob da haste einfach mehr
kontrolle über das ding - v.a. die position.
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mo 11.02.2008 23:11
Titel
|
|
|
Wenn's unbedingt eine Grafik sein soll, rate auch ich zu background-image (da list-style-image von den verschiedenen Browsern einfach zu indifferent dargestellt wird), am Besten mit top-Postion in em, damit sie bei auch Textvergrößerung möglichst vertikal mittig bleibt (und nicht immer stur oben klebt). 50% wäre prinzipiell zwar auch möglich, aber sieht nicht toll aus bei Zeilenumbruch.
|
|
|
|
|
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Di 12.02.2008 09:34
Titel
|
|
|
i'll try it.
thx 4 info, melde mich dann nochmal
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Di 12.02.2008 10:43
Titel
|
|
|
über die SUCHE das gefunden
reset styles
|
|
|
|
|
stry
Dabei seit: 24.02.2006
Ort: Minden
Alter: 37
Geschlecht:
|
Verfasst Do 13.03.2008 12:20
Titel
|
|
|
ich habe ein ähnliches problem und die zeichen als background-image deklariert.
aber die positionierung fällt mir schwer, da der iexp die schriftzeilen 1 px weiter nach unten setzt.
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 13.03.2008 12:45
Titel
|
|
|
Wenn Dich dieses 1px wirklich so sehr stört und Du es weder durch leicht angepasste Werte für background-position, vert. padding oder line-height in den Griff bekommst, musst Du notgedrungen in Deinem separaten IE-CSS (am besten per Conditional Comment zugewiesen) einen individuellen Wert deklarieren. Aber denke daran, das Web ist nicht aus Papier
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] - Listenproblem IE6
[CSS] Haeder-/Listenproblem
|
|