zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigationsbereich falsch ausgerichtet

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.09.2014, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.09.2014
Beiträge: 2
m4ri0 befindet sich auf einem aufstrebenden Ast
Standard Navigationsbereich falsch ausgerichtet

Hey Leute,

ich hoffe mir kann jemand helfen, ich habe ein kleines Problemchen mit meinem Navigationsbereich.

Ich hätte gerne 4 Elemente linksbündig, und 1 Element rechtsbündig.
Aber wenn ich das so mache, ist das Element das rechts sitzt tiefer als die linksbündigen.. Das sieht dann ziemlich hässlich aus:


http://jsfiddle.net/5nyuzjh1/

Der Code sieht so aus:

HTML-Code:
<div id="topmenu" style="left: 0px; right: 0px; top: 0px">
				<div id="navibereich">
					<ul>
						<li id="aktuell">Home</li>
						<li id="info"><a href="info.html">Info</a></li>
						<li id="verleih"><a href="verleih.html">Ausleihen</a></li>
						<li id="hakju"><a href="hakju.html">HAKJU</a></li>	
						<li id="login"><a href="login.html">Login</a></li>
					</ul>
				</div>
			</div>
der CSS code dazu:

Code:
#topmenu {
	background-color:black;
	position: absolute;
	height: 50px;
	left: 0px;
	right: 0px;
	margin-top: 0px;
	position: absolute;
	position: fixed;
	border-bottom: thick maroon solid;
	vertical-align: middle;
	float: left;
}
#navibereich li {
	list-style-type: none;
	padding: 10px;
	margin-right: 20px;
	text-align: center;
	display: inline;
	top: 5px;
	font-weight: bold;
	overflow: hidden;
}
#navibereich li a{
	color: white;
	font-size: 16;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	transition: color 0.2s linear 0s, font-size 0.2s linear 0s, padding 0.2s linear 0s;
}
#navibereich li a:hover{
	color:#996600;
	font-size: 20px;
	padding:10px;
}
#aktuell{
	color: #808080;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16;
	text-decoration: none;
	font-weight: bolder;
	cursor: pointer;
	transition: color 0.2s linear 0s, font-size 0.2s linear 0s, padding 0.2s linear 0s;
}
#aktuell:hover {
	color:#996600;
	font-size: 20px;
	padding:10px;
	font-weight: bolder;
	cursor: pointer;
}
#login {
	top: 0px;
	float: right;
	bottom: 10px;
}
wäre echt dankbar wenn jemand eine lösung für mein Problemchen hätte

Eine Frage noch, wie kann ich den Abstand des Menüs von der Oberseite "top" verringern?

mfg

Geändert von m4ri0 (28.09.2014 um 17:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.09.2014, 17:29
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Cleare das ul mit nem Clearfix (mirco clearfix googlen) und dann floate alle Elemente Links, und das letzte rechts.

Angaben wie top left right bottom wirken nur mit Positionen wie relative, absolute und fixed
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.09.2014, 18:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.09.2014
Beiträge: 2
m4ri0 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank hat super funktioniert
Mit Zitat antworten
Antwort

Stichwörter
anordnung, css, html, navibereich, navigation

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
Bräuchte Hilfestellung weil meine Seite nicht richtig angezeigt wird. Picasso CSS 36 03.01.2011 20:41
IE6:Horizontales Menü wird unterschiedlich angezeigt:erst falsch, nach Reload korrekt Ste CSS 0 25.02.2009 14:46
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig nick CSS 6 19.08.2006 03:02
nicht sichtbarer Text wird falsch ausgerichtet - IE SURE612 CSS 4 15.10.2005 11:35
Site mit Firefox --> Ok ! Mit IE völlig falsch. Warum ? mastermsc CSS 3 05.01.2005 22:46


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:05 Uhr.