|
|||
Images in Liste nebeneinander ohne Abstand auflisten
Es gibt ja diverse gute Ideen wie man mit CSS-formatierten Listen (<ul>) horizontale Navigationen hinbekommt. Darauf basierend wollte ich das auch mal versuchen, und zwar mit Bildern, die ich so nebeneinander platziere (nahtlos, ohne Abstand).
Doch leider wird mir trotzdem zwischen den Bildern jeweils ein Abstand von ein paar Pixeln fabriziert. Hat jemand eine Idee weshalb das so ist bzw. was ich dagegen unternehmen kann? Code:
div#topnav{ margin: 0px; padding: 0px; height: 33px; width: 749px; } div#topnav ul, div#topnav li{ display: inline; list-style: none; margin: 0px; padding: 0px; border: none; text-decoration: none; } Code:
<div id="topnav"> <ul>[*][img]img/bild1.gif[/img][*][img]img/bild2.gif[/img][*][img]img/bild3.gif[/img][*][img]img/bild4.gif[/img][*][img]img/bild5.gif[/img][*][img]img/bild6.gif[/img][*][img]img/bild7.gif[/img][/list]</div> |
Sponsored Links |
|
|||
Ja!
Ja:
Code:
<ul>[*][img]img/bild1.gif[/img][*][img]img/bild2.gif[/img][*][img]img/bild3.gif[/img][*][img]img/bild4.gif[/img][*][img]img/bild5.gif[/img][*][img]img/bild6.gif[/img][*][img]img/bild7.gif[/img][/list] Muss alles ohne Leerzeichen in eine Zeile. Zumindest geht es dann im IE5.0. Gruss MLB |
|
|||
Problem bleibt...
Moin!
Bei mir bleiben die Graphiken auch untereinander. Hier der Code aus meiner *.css Datei: Code:
/* navi header textreplace elements */ h1 { margin:0; font:bold 190%/1em Georgia,"Trebuchet MS",Arial,Sans-serif; } h1 span {font-weight:normal;} h1.swap { height:22px; background-repeat:no-repeat; } h1.swap span, h1 em {display:none;} h1.swap img {display: block;} h1#home {background-image:url("house.jpg");} h1#cv {background-image:url("navi_01.jpg");} h1#hobbies {background-image:url("navi_02.jpg");} h1#photos {background-image:url("navi_03.jpg");} h1#studies {background-image:url("navi_05.jpg");} h1#mail {background-image:url("exclam.jpg");} h1#help {background-image:url("question.jpg");} Code:
<div align="left"> <h1 class="swap" id="home"><span>Home</span></h1> <h1 class="swap" id="cv"><span>CV</span></h1> <h1 class="swap" id="hobbies"><span>Hobbys</span></h1> <a href="/photos.php" title="Photos"> <h1 class="swap" id="photos"> <span>Photos </span> </h1> </a> <a href="/studies.php" title="Studies"> <h1 class="swap" id="studies"> <span>Studies </span> </h1> </a> <a href="/mail.php" title="Mail"> <h1 class="swap" id="mail"> <span>Mail </span> </h1> </a> <a href="/help.php" title="Help"> <span style="cursor:help"> <h1 class="swap" id="help"> <span>Help </span> </h1> </div> </a> [img]/Bilder/t_01.gif[/img] [img]/Bilder/t_02.gif[/img] </div> <div align="right" valign="bottom"> <span class=date> <a name="top"> </a> <?php $datum = getdate(); echo "$datum[weekday], $datum[mday]. $datum[month] $datum[year]"; ?> |
|
|||
@shakron:
wenn deine elemente als inline formatiert sind ist es klar, dass du abstände drin hast, wenn sie nicht direkt hintereinander stehen, da die whitespaces zwischendrin logischerweise wie in jedem fließtext auch als leerzeichen angezeigt werden. die lösung ist ja oben schon geschrieben worden, nicht sehr schön, aber die einzige mir bekannte, wenn du es beim inline lassen willst. ansonsten einfach die li's mit float:left formatieren und die bilder als display:block, das sollte auch gehen. @ralf: du hast innerhalb deiner links h1's drin. das ist zum einen syntaktisch falsch, da a ein inline element ist und somit kein block element wie eine h1 enthalten darf, zum andren ist es auch der grund, warum das zeug nicht mehr nebeneinander steht: block elemente verursachen immer zeilenumbrüche. |
|
|||
@ Alex:
Ich habe das mit dem h1 auch nur aus einem Tutorial http://www.stopdesign.com/articles/css/replace-text/. Auf seiner Seite hat er dann auch Grafiken in einer Zeile. Anders gesagt:ich möchte die Grafiken über das CSS definieren und trotzdem in einer Zeile darstellen können. Thats all! Danke auf jeden Fall! |
|
|||
Vielleicht verstehe ich ja Euer Anliegen nicht, aber kann es sein das es hier um eine horizentale Navigation geht.
Zitat:
Float-Bug am Ende aufheben, die gesamte Jauche in einen Container - fertisch
__________________
</ulle> |
|
|||
Ich wäre dir genauso wie der Schreiber über mir für einen kurzen Beispielcode deiner Idee dankbar, denn ich bin mir nicht so ganz sicher ob ich weiß wie du das meinst. Wenn ich Links nehme und für diese die Bilder im CSS definiere, würde ja keinerlei Alternativtext da stehen, wenn das CSS ausfällt oder? Sprich die Site wäre dann unnavigierbar. Liege ich da richtig, oder habe ich dich grundsätzlich falsch verstanden?
Wenn ich dich richtig verstanden habe, würde im HTML-Code einfach ein Link neben dem anderen stehen (mit der jeweiligen ID): Code:
<div id="topnav"></div> Code:
a#link1, a#link2, a#link3, a#link4, a#link5, a#link6, a#link7 { height:33px; width:107px; margin: 0px; padding: 0px; text-decoration: none; } a#link1 { background: url(../img/bild1.gif); } a#link2 { background: url(../img/bild2.gif); } a#link3 { background: url(../img/bild3.gif); } a#link4 { background: url(../img/bild4.gif); } a#link5 { background: url(../img/bild5.gif); } a#link6 { background: url(../img/bild6.gif); } a#link7 { background: url(../img/bild7.gif); } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Liste untereinander und nebeneinander | Enter Code | CSS | 2 | 21.02.2012 19:54 |
Liste: Zwei Punkte nebeneinander | crossgolfer | CSS | 2 | 06.08.2008 14:30 |
Liste (inline) Umbruch erzeugen | Steakfred | CSS | 3 | 09.05.2006 13:27 |
images nebeneinander floaten lassen und hspace | nexus6 | CSS | 6 | 07.04.2004 14:26 |