zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS - Navigation mit Icon kombinieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.02.2015, 16:41
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Cool 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

Geändert von mofi (28.02.2015 um 16:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.02.2015, 19:41
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Toro (28.02.2015 um 19:45 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.02.2015, 21:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 02.03.2015, 18:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.02.2015
Beiträge: 42
mofi befindet sich auf einem aufstrebenden Ast
Standard

Danke ihr beiden.

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

Gruss,
mofi
Mit Zitat antworten
Antwort

Stichwörter
css, div, float

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:22 Uhr.