Ich würde meine Frage ja gerne stellen, finde aber nirgends einen Hinweis, wie ich hier Code posten kann.
Lieber Gruß!
Topica
vielleicht mit oder mit lücken/ leerzeichen im code?
(immer so: Der eingegebene Text ist zu kurz. Bitte gib im Textfeld mindestens 80 Zeichen ein)
Hallo Christiane,
vielen Dank für das schnelle Re!
Jetzt, wo ich im Antwort-Fenster bin, gibt es unten folgenden Hinweis:
Folgende HTML-Tags sind erlaubt: … usw.
Ganz funktioniert es lt.Vorschau trotzdem nicht, ich versuche noch ein paar Leerzeichen einzubauen.
Zu meiner Frage:
Angezeigt werden sollen - nebeneinander - ein paar Icons (social bookmarks) aber ich bekomme es einfach nicht hin:
#author_socicons ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#author_socicons ul li {
display: inline;
}
#author_socicons ul li a {
text-decoration: none;
width: 25px;
height: 25px;
padding:.5em;
}
#author_socicons ul li a.author_email {background-image:url(#.jpg);}
#author_socicons ul li a.author_homepage {background-image:url(#.jpg);}
#author_socicons ul li a.author_whatever {background-image: url(#.jpg);}
Lieber Gruß!
Topica
/* css */
li {float:left;}
1 Like
Hei!
Angezeigt werden sollen - nebeneinander - ein paar Icons (social bookmarks) aber ich bekomme es einfach nicht hin:
Ähm.
Wenn die Dinger nebeneinander stehen sollen - wieso dann eine Liste?
Warum nicht einfach in einen normalen Absatz? ggf. Abstände über margin einstellen.
lg, mabuse
Vielen Dank, das hat mich auf die Spur gebracht!
Das „float“ hatte ich ursprünglich notiert, es muss mir aber beim Umstellen irgendwann abhanden gekommen sein und ich habe das übersehen (andenKopfschlag).
(Anm.: in meinem Fall wird es bei li a notiert).
Ich bastele noch ein wenig rum und veröffentliche den „richtigen“ Code hier als Gesamtkunstwerk.
Nochmals Danke!
Topica
Danke für die Rückmeldung, das ginge sicher auch, wäre aber (zumindest in meinem Fall) mehr Code.
Der Hintergrund ist der, dass ich durch die Trennung von Style und Daten die Möglichkeit schaffen wollte bzw. geschaffen habe, (Gast-)Autoren individuelle Social Bookmarks zu zuweisen (Autoren-Profilseiten in einem Blog).
Im CSS:
Eine ul/li-Liste mit „leeren“ a-Klassen, die nur mit einem Hintergrund-Icon (Link), wie eMail.gif, Website.gif, Twitter.gif usw. und Style-Angaben bestückt sind.
Über „li“ lassen sich so die Abstände, Größe usw. der Icons in einem Schritt einstellen und es muss nicht jede „a class“ einzeln definiert werden.
Im HTML (auf der individuellen Autoren-Profilseite):
Eine sehr flexible zweckentfremdete horizontale Navigationsleiste (Liste) mit schlichten Links zu den Plattformen des jew. Autors:
Beispiel (relevanter Code-Auschnitt):
#author_socicons ul li a {
text-decoration: none;
background-repeat: no-repeat;
background-size: contain;
float: left;
width: 25px;
height: 25px;
margin: .5em .5em .5em 0;
}
#author_socicons li a.author_twitter {background-image: url(https://xxx/twitter.gif);
Grund: wenn im HTML-Teil noch die SEO-Snippets je Autor dazukommen, bin ich froh, die Formatierung komplett und komprimiert auslagern zu können = übersichtlicher und schneller.
Sorry, ich kann es nicht besser erklären.
Liebe Grüße!
Topica
PS:
Leider lässt sich ein abgesandter Post hier nicht mehr bearbeiten, deshalb als Nachtrag:
bei „width“ und „height“ die „25px“ noch gegen „1.563em“ (Basis 16px=100%) tauschen und die Icons mit 75x75 anlegen.
Topica 
Hallo Tropica,
mir ist aufgefallen, dass Sie im CSS-Abschnitt die IDs zuweisen.
#author_socicons ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#author_socicons ul li {
display: inline;
}
#author_socicons ul li a {
text-decoration: none;
width: 25px;
height: 25px;
padding:.5em;
}
#author_socicons ul li a.author_email {background-image:url(#.jpg);}
#author_socicons ul li a.author_homepage {background-image:url(#.jpg);}
#author_socicons ul li a.author_whatever {background-image: url(#.jpg);}
Die IDs tauchen aber nicht in Ihrem HTML-Dokument auf, sondern stattdessen sind dort Klassennamen aufgetaucht, die aber nichts mit der ID zu tun haben.
Die Klassennamen fangen immer mit einem Punkt an, aber die IDs jedoch mit einer Raute.
#name { // Dies ist eine ID-Zuweisung
color: green;
}
.vorname { // Dies ist eine Class-Zuweisung
color: red;
}
Der müsste dann im HTML-Dokument etwa so aussehen:
Name // ID-Zuweisung
Vorname // Class-Zusweisung
Ich hoffe, dass ich Ihnen damit weiterhelfen konnte.
Für weitere Rückfragen stehe ich Ihnen gerne zur Verfügung.
Sternchen? Gerne doch.
Mit freundlichen Grüßen
t.koelpin
Hallo
Hallo Tropica,
mir ist aufgefallen, dass Sie im CSS-Abschnitt die IDs
zuweisen.#author_socicons ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#author_socicons ul li {
display: inline;
}
#author_socicons ul li a {
text-decoration: none;
width: 25px;
height: 25px;
padding:.5em;
}
#author_socicons ul li a.author_email {background-image:url(#.jpg);}
#author_socicons ul li a.author_homepage {background-image:url(#.jpg);}
#author_socicons ul li a.author_whatever {background-image: url(#.jpg);}Die IDs tauchen aber nicht in Ihrem HTML-Dokument auf, sondern
stattdessen sind dort Klassennamen aufgetaucht, die aber
nichts mit der ID zu tun haben.
???
ist doch alles richtig im css
wie spreche ich was an ?
richtig mit Raute die ID mit Punkt die Classen etc etc
und das wunderbare das kann man mixen etc
also
#meindiv daselement.beiderclasse
spricht wohl alles in ID=„meindiv“ an
was daselement mit beiderclasse hat
und dann gibts noch viel gemeiner sachen wie
#meindiv daselement.beiderclasse > #meindiv andereselement.mitandererclasse daselement.beiderclasse
und so weiter und sofort .
selsbt wenn ich meindiv im html weglasse
weiss jeder was das css sagen soll und wo es ausgeführt wird .
DA LOHNT Es SICH NICHT ZU BELEHREN als wäre der frager ein kleinkind,
sondern mal selber lernen und begreifen um dann vielleicht jemanden der formalierungshalber zu belehren .
Danke