zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Images in Liste nebeneinander ohne Abstand auflisten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.02.2004, 21:32
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard 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; 
}
Und hier der HTML-Code:
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>
Und ja, ich hab diesen Thread gesehen, aber dort gehts einfach darum Bilder allgem. nebeneinander aufzulisten und ich möchte wissen wie ich das mit ner Liste hinbekomme
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.02.2004, 18:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

Weiß tatsächlich niemand eine Lösung?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.02.2004, 19:46
AbX AbX ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 16.02.2004
Beiträge: 11
AbX befindet sich auf einem aufstrebenden Ast
Standard

gerade nicht viel zeit....

/*
EDIT:
war falsch... bringt nichts...


*/
(vielleicht klappts)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.02.2004, 14:19
MLB MLB ist offline
Benutzer
neuer user
 
Registriert seit: 02.09.2003
Beiträge: 32
MLB befindet sich auf einem aufstrebenden Ast
Standard 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]
Ist wie in alten Zeiten im Netscape 4x.

Muss alles ohne Leerzeichen in eine Zeile. Zumindest geht es dann im IE5.0.

Gruss

MLB
Mit Zitat antworten
  #5 (permalink)  
Alt 25.02.2004, 16:21
Neuer Benutzer
neuer user
 
Registriert seit: 25.02.2004
Beiträge: 3
Ralf befindet sich auf einem aufstrebenden Ast
Standard 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");}
Und hier der Code aus der Datei:

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]"; ?>
Was kann ich tun. Die Tipps die hier genannt waren haben irgendwie nicht gefunzt!?
Mit Zitat antworten
  #6 (permalink)  
Alt 25.02.2004, 21:23
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.09.2003
Beiträge: 129
Alex befindet sich auf einem aufstrebenden Ast
Standard

@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.
Mit Zitat antworten
  #7 (permalink)  
Alt 25.02.2004, 22:53
Neuer Benutzer
neuer user
 
Registriert seit: 25.02.2004
Beiträge: 3
Ralf befindet sich auf einem aufstrebenden Ast
Standard

@ 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!
Mit Zitat antworten
  #8 (permalink)  
Alt 26.02.2004, 15:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Vielleicht verstehe ich ja Euer Anliegen nicht, aber kann es sein das es hier um eine horizentale Navigation geht.

Zitat:
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).
Warum als Listen, dann doch einfach den a-Tag als BLOCK-Element und mit Float nebeneinander postitionieren. Die Größe im a-Tag festlegen und die Bilder als Hintergrund des a-Tag.

Float-Bug am Ende aufheben, die gesamte Jauche in einen Container - fertisch
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 02.03.2004, 14:28
Neuer Benutzer
neuer user
 
Registriert seit: 25.02.2004
Beiträge: 3
Ralf befindet sich auf einem aufstrebenden Ast
Standard

Hallo Ulle!

Vermutlich bin ich einfach so doof.
Könntest Du mal nen Beispielcode posten!?

Thanks!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.03.2004, 20:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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>
und im CSS ungefähr sowas:

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);
}
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:37 Uhr.