XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS - Navigation mit Icon kombinieren (http://xhtmlforum.de/showthread.php?t=71783)

mofi 28.02.2015 16:41

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>

und diese div's wollte ich nun anhand von css passend machen.

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

Toro 28.02.2015 19:41

Menu mit fb-button in einer Reihe , bitte, danke :)

MrMurphy 28.02.2015 21:04

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

Gruss

MrMurphy

mofi 02.03.2015 18:23

Danke ihr beiden.

Toro, mit deiner Version musste ich mich ein wenig spielen aber irgendwann hats dann doch noch geklappt. :D

Gruss,
mofi


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:16 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020