Autor |
Nachricht |
nel
Threadersteller
Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Di 09.06.2009 10:19
Titel Listen Problem |
|
|
hallo, ich habe mal zum besseren verständnis meines problems ein bild gezeichnet.
die schwarzen punkte sollen "bilder" sein, die schwarzen linien text, der auch umbricht (wobei die grafik links dann trotzdem vor ersten zeile stehen bleiben soll, also nicht zentriert -
und die roten linien sind trenner
die idee war, die trenner als hintergrundgrafik der LI's unten zu machen, und die pfeile als list-image,
das problem ist, das sich dann der umbrechende text in der zweiten zeile unter das bild, und nicht in eine reihe mit dem anderen text stellt
damit es momentan funktioniert hat das LI mit dem text das bild als hintergrund, und die trennlinie ist ein "leeres LI" mit nem anderen hintergrund, die lösung finde ich mehr als hässlich - deshalb frage ich hier auch
hat jemand eine lösung für das problem
hab auch nach listen gesucht die so aufgebaut sind, wie die, die ich bauen möchte. aber habe keine gefunden
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Di 09.06.2009 10:58
Titel
|
|
|
Du könntest dem LI auch ein border-bottom verpassen.
Also etwa so:
Code: | li {
list-style-type: none;
background: url(bilder/punkt.gif) no-repeat 0px 2px;
padding-left: 16px;
border-bottom: solid 4px #FF0000;
} |
|
|
|
|
|
nel
Threadersteller
Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Di 09.06.2009 11:04
Titel
|
|
|
sind leider grafiken, also fällt border-bottom schon mal raus
mit padding text-indet etc kdas habe ich schon versucht
leider funktioniert auch list-style-position nicht, weil die (in dem fall angewandten) list-images dann außerhalb des umschließenden divs sind, und wenn ich dem ul dann ein padding oder margin gebe, damit das nichtmehr passiert - dann gehen die trennlinien (die ja in den LIs sind) nichtmehr bis zum rand von dem div
hier mal ein auszug
Code: |
.teaserbox ul li {
padding: 4px 9px 4px 24px;
list-style-type: none;
background: url(/images/li_arrow.gif) no-repeat 10px 7px;
}
.teaserbox ul li.dot_line {
background: url(/images/dot_line.gif) repeat-x;
padding: 0;
margin: 0;
height: 1px;
font-size: 1px;
line-height: 1px;
}
|
font-size: 1px;
line-height: 1px;
die sachen stehen da, damit das li auch im ie6 nur 1px hoch ist, bitte nicht hauen dafür - ich weiss es ist scheiße;D
Code: |
<div class="teaserbox">
<div class="head">Stellenangebote</div>
<p class="powered">powered by xxx</p>
<ul>
<li><a href="#">Sicherheitsingenieur/Fachkraft für xxx (m/w) in xxx</a></li>
<li class="dot_line"> </li>
<li><a href="#">Referent (m/w) für xxx, xxx und xxx_ in der Lebensmittelherstellung!</a></li>
<li class="dot_line"> </li>
<li><a href="#">Facility Manager / Qualitätsmanager (m/w)</a></li>
<li class="dot_line"> </li>
</ul>
<p class="link_margin"><a href="#">» zum Stellenmarkt</a></p>
</div>
|
die dotline LIs sollen dann natürlich verschwinden
Zuletzt bearbeitet von nel am Di 09.06.2009 11:39, insgesamt 5-mal bearbeitet
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Di 09.06.2009 11:33
Titel
|
|
|
Wenn in jedem LI ein Link ist, würde ich so vorgehen:
Code: |
.teaserbox ul li {
background: url(/images/dot_line.gif) repeat-x left bottom;
padding: 0;
margin: 0;
list-style-type: none;
}
.teaserbox ul li a {
display: block;
padding: 4px 9px 4px 24px;
background: url(/images/li_arrow.gif) no-repeat 10px 7px;
}
|
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 09.06.2009 11:34
Titel
|
|
|
Du kannst Hintergrundbilder auch positionieren.
du kannst es zum Beispiel auch teilweise aus dem sichtbaren bereich schieben.
bei csssprites kommt diese technik zum einsatz.
|
|
|
|
|
nel
Threadersteller
Dabei seit: 18.09.2004
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Di 09.06.2009 11:37
Titel
|
|
|
Kash hat geschrieben: | Du kannst Hintergrundbilder auch positionieren.
du kannst es zum Beispiel auch teilweise aus dem sichtbaren bereich schieben.
bei csssprites kommt diese technik zum einsatz. |
ja, aber dann krig ich doch trotzdem nicht 2 hintergründe in ein Li, oder doch?
|
|
|
|
|
Zim
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht:
|
Verfasst Di 09.06.2009 11:40
Titel
|
|
|
Ist eigentlich mit list-style-position:outside; getan
ggf mit margin-left im ul-tag noch anpassen
|
|
|
|
|
|
|
|
Ähnliche Themen |
problem mit listen navigation
Problem mit 2 Listen (nebeneinander) in einem Div
Problem mit Listen-Menü (horizontal)
CSS Problem mit Abstand zwischen Listen-Elementen
[css] problem mit firefox und geschachtelten, unsort. listen
listen in ff?
|
|