|
|||
CSS - Navigation mit Icon kombinieren
Hallo zusammen,
ich sitze jetzt schon seit einer ganzen Weile und probiere alles mögliche durch. (margin, padding, float....)Doch leider bekomm ich es nicht hin. Ich habe 2 divs: Code:
<div id="navi"> <ul> <li><a href="main.html">Startseite|</a></li> <li><a href="ToDoProjekte.html">Projekte</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> </div> <div id="SocialMedia"> <ul> <li><a href="http://www.facebook.com"><img alt="FB" src="http://xhtmlforum.de/images/facebook.jpg" /></a></li> </ul> </div> Es sollte eine Navigationsleiste entstehen, welche sich links ausrichtet. Und das Facebookicon sollte ganz rechts stehen aber in der Navileiste integriert sein. Startseite | Projekte | Kontakt______________________________ FB-Icon Wie bekomme ich das hin? Die Navileiste bekomm ich mit display:inline hin. Aber sobald ich das Icon auf in die selbe Höhe bringen (width:90% und width:10%) will gehts nicht. Es bleibt immer ein Abstand. Bekomms einfach nicht hin. Über baldige Hilfe wäre ich sehr dankbar! Gruss mofi Geändert von mofi (28.02.2015 um 16:43 Uhr) |
Sponsored Links |
|
|||
Menu mit fb-button in einer Reihe , bitte, danke
Geändert von Toro (28.02.2015 um 19:45 Uhr) |
Sponsored Links |
|
|||
Hallo,
solche Quellcodeschnipsel sind immer blöd. Ich gehe der Einfachheit halber davon aus, das sich der Quelltext direkt im body-Element befindet. Ansonsten muss die CSS-Anweisung für den body einfach durch den umschließenden Container ersetzt werden. Am Quelltext soll zwar nichts verändert werden, aber ich habe trotzdem den senkrechten Strich entfernt, weil der im HTML-Quellcode nichts verloren hat. Der ist reine Optik - also ein Fall für's CSS. Außerdem bleibt der Quelltext so übersichtlicher. Und der zweite senkrechte Strich wurde ja auch schon vergessen. Dann ist es doch sinnvoller die gleich automatisch einzufügen, dann passen sie immer: Code:
body { display: flex; justify-content: space-between; } #navi ul { display: flex; } #navi ul li { padding: 0 0.5rem; border-right: 1px solid black; } #navi ul li:first-child { padding-left: 0; } #navi ul li:last-child { border-right: none; } MrMurphy |
Stichwörter |
css, div, float |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit CSS Dropline menü | horst77 | CSS | 1 | 12.08.2009 12:49 |
Vertikale CSS Navigation mit Bildern und Text | macmensa | CSS | 2 | 25.07.2009 17:23 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Navigation in CSS datei | Linuxonkel | CSS | 5 | 01.02.2008 10:30 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |