| 

.NET C# Java Javascript Exception

1
Hallo zusammen,

Ich habe eine einfache Navigation mit z.b diesen Elementen:

Link1 | Link2 | Link3

Ich möchte es gerne so haben:

Link1(abstand)|(abstand)Link2(abstand)|(abstand)Link3(abstand)|

Wie kann ich das so einrücken?

Liebe Grüße
News:
16.09.2016
hartu 3 2
mit css ... aber vielleicht bringst Du uns noch ein bischen (HTML)-Code, dann kann Dir besser geholfen werden.
Roland Bär 16.09.2016
4 Antworten
0
Eine Möglichkeit wäre:

HTML:
<div class="footer-menu" style="padding-top: 0px;">
<ul>
<li>Copyright 2016, Name</li>
<li><a href="http://yourwebsite.com/shop">Startseite</a></li>
<li><a href="http://yourwebsite.com/contact">Linkbereich</a></li>
<li><a href="http://yourwebsite.com/map">Link</a></li>
<li><a href="http://yourwebsite.com/map">News</a></li>
<li><a href="http://yourwebsite.com/map">Produkte</a></li>
<li><a href="http://yourwebsite.com/map">Kontakt</a></li>
<li><a href="http://yourwebsite.com/map">Impressum</a></li>
</ul>
</div>


CSS:
.footer-menu ul {
padding: 0;
margin: 0;
}
.footer-menu li {
display: inline;
list-style: none;
}

.footer-menu li:after {
content: "|";
padding-left: 20px;
padding-right: 15px;
}

.footer-menu li:last-child:after {
content: "";
}


https://jsfiddle.net/v28woqb1/

Uralt-Browser unterstützen :after und :last-child nicht. Andererseits sollten die Zeiten vorbei sein in denen man noch RÜcksicht auf IE9-User nehmen muss.
19.09.2016
phg 1,6k 3
0
Hallo Roland,

aktuell sieht es so aus:
<div class="footer-menu" style="padding-top: 0px;">Copyright 2016, Name | 
<a href="http://yourwebsite.com/shop">Startseite</a> |
<a href="http://yourwebsite.com/contact">Linkbereich</a> |
<a href="http://yourwebsite.com/map">Link</a> |
<a href="http://yourwebsite.com/map">News</a> |
<a href="http://yourwebsite.com/map">Produkte</a> |
<a href="http://yourwebsite.com/map">Kontakt</a> |
<a href="http://yourwebsite.com/map">Impressum</a></div>

Bin leider nicht so CSS bewandet, wie würde es weitergehen?

Liebe Grüße
19.09.2016
hartu 3 2
Ich hab deinen Beispiel-Code mal in [code][/code] gesteckt damit er etwas lesbarer wird. Du kannst deine Fragen übrigens auch editieren und dort entsprechende Ergänzungen vornehmen, dann bleibt das ganze etwas übersichtlicher.
phg 19.09.2016
0
Super funktioniert! Danke dir :-)
22.09.2016
hartu 3 2
Gern. Du könntest noch meine Antwort akzeptieren, da müsste ein entsprechender Button sein. ;-)
phg 22.09.2016
0
I'm getting excited about this kind of beneficial information of your stuff in the future
C Homework Help Online
26.09.2016

Stelle deine --Frage jetzt!