Zur Navigation

Links horizontal ausrichten

1 Less

Hallo Gemeinde

Ich hab durch mehr oder weniger googeln hier her gefunden. Denn ich bin so Langsam am verzweifeln. Ich wollte mir für mein WP Blog eine Bookmark Liste erstellen. Die unter jedem Beitrag eben erscheint. Die einzelnen Dienste sollten nebeneinander sein. Nur bekomme ich es nicht hin. Ich habe hin und her probiert sie Icons bzw.Linksymbole ordnen sich immer untereinander ein. Im moment ist der Code folgendermassen:
<ul id="bookmark">
      <li>
        <a href="http://feeds2.feedburner.com/" title="Full RSS Feed">
            <img class="small" src="/images/RSS.png" alt="Full RSS" />
            </a>
      </li>
      <li>
        <script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script> <script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script> 
        </a>
      </li>
      <li>
        <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
        </a>
      </li>................
...........


Und die CSS:
#bookmark {
    display: inline;
    list-style: none;
    margin: 5px 0px 0px;
    padding: 0px;
}

Ich muss dazu sagen das dies nun der Code ist wo ich jetzt schon fast denn ganzen daran gebastelt habe und es wurde schlimmer und nicht besser. Und es kommt noch dazu das ich in solchen sachen absoluter Anfänger bin. Und ich nicht mal weiß ob das mit Html zu CSS so überhaupt passt Aber ich hoffe mal das mir jemand vielleicht ein Tipp geben könnte.

Bedanke mich schon mal und vielleicht hat jemand Rat.

18.07.2010 19:46

2 Jörg

Das "display:inline" soll sich ja auf die einzelnen Menüpunkte, also die <li> beziehen - entsprechend würde ich als Selektor "#bookmark li" angeben

Darüberhinaus befinden sich in dem Code zwei verwaiste "</a>"

18.07.2010 20:35

3 Less

Danke für die Antwort. Aber entweder mache ich etwas falsch oder es ist ein Fehler dabei der mir alles blockt. Code sieht nun so aus:
<div class="bookmark">
                                        <ul><li><a href="http://feeds2.feedburner.com/" align="left" title="Full RSS Feed"><img class="small" src="images/RSS.png" alt="Full RSS" /></li>
<li><a><href="http://facebook.com/" title="I'm on Facebook"><img class="small" src="images/Facebook.png" alt="I'm on Facebook" /></li>
<li><a href="http://designbump.com/node/add/drigg/?url=" title="I'm on Facebook"><img class="small" src="images/designbump.png"  alt="I'm on Facebook" /></li></a></ul></div>

Und die CSS:
#bookmark li {
    display: inline;
    list-style: none;
    margin: 5px 0px 0px;
    padding: 0px;

}

Aber es ist wird nicht nebeneinander sondern untereinander angezeigt. Ich habe auch schon Zahlreiche änderungen an der Css gemacht aber der gewünschte effekt war nicht dabei.

18.07.2010 21:43

4 Jörg

Eine Klasse wird in CSS mit einem Punkt gekennzeichnet - wenn du jetzt 'class="bookmark"' statt wie zuvor 'id="bookmark"' verwendest, benötigst du den Selektor ".bookmark li"

18.07.2010 22:21 | geändert: 18.07.2010 22:22

5 Less

Danke für denn Hinweiß. Ich hatte aber beides probiert. Einmal mit . und einmal mit #. Da ich nicht wußte wie dies zusammen hängt. Aber funktioniert hat beides nicht.

19.07.2010 06:41

6 Jörg

Bei mir werden die Listenpunkte nebeneinander angezeigt, wenn ich in deinem Code die Raute gegen den Punkt austausche. Das CSS ist korrekt eingebunden?

Mal abgesehen davon enthält dein Code noch einige Fehler: ein <a> ist nicht geschlossen, "</li></a></ul>" ist nicht korrekt verschachtelt und "<a><href" geht schon gar nicht...

19.07.2010 10:16

7 Less

Danke erstmal für die Antwort. Werde jetzt nochmal versuchen es einzubauen. Die CSS müsste Ordentlich eingebunden sein. Werde dann berichten ob es Funktioniert.

19.07.2010 15:09

8 Less

So ich Bedanke mich Für die Hilfe. Jetzt nach etwas hin und her probieren und mit . anstelle # habe ich es jetzt geschafft. Mal schauen ob der Rest jetzt besser verläuft. Ach und in der CSS war doch ein Fehler. Nun sieht es so aus:
.social {
background: url('images/Wooden-shelf.png') no-repeat;
margin:0 13px 20px 0;
overflow:hidden;
padding:10px 15px;
height:250px;
width:auto;
}

.social li {
    display: inline;
    list-style: none;
    margin: 5px 0px 0px;
    padding: 0px;

}

Hab bookmark mit social getauscht da ich dann doch in der Ganzen codes etwas durch einander gekommen bin.

19.07.2010 15:48 | geändert: 19.07.2010 15:50

Beitrag schreiben (als Gast)





[BBCode-Hilfe]