CSS Spielt verrückt

11/06/2015 14:52 mastermo#1
Heyho Leute,

ich stehe vor einer merkwürdigen Sache und bräuchte mal kurz Hilfe dazu.
Grundsätzlich kenne ich mich mit CSS recht gut aus aber es hat sich ein für mich unerklärlicher Fehler eingeschlichen.

Die betroffene Seite ist folgende: [Only registered and activated users can see links. Click Here To Register...]

Die Div Class header_navi ist 100% hoch und die header_logo Class nicht, obwohl es nirgends definiert wurde. Beide sind in der header_body class wo die Parameter definiert sind.

Hat jemand von euch ne Idee was ich da angestellt hab?

Ohne Float sind beide auf gleicher Höhe aber mit Float kommt das dabei raus (hab clear both drin)
11/06/2015 15:14 CeLiFiG#2
Kannst du einen Code Abschnitt posten?
11/06/2015 15:17 mastermo#3
Klar hier ist er:

HTML Code:
<header>
	<div class="header_body">
		<div class="header_logo">MyMoojo ACP</div>
		<div class="header_navi">
			<nav>
				<ul>
					<li><a href="#" class="active">Home</a></li>
					<li><a href="./Events">x</a></li>
					<li><a href="./Galerie">x</a></li>
					<li><a href="./Service">x</a></li>
					<li><a href="./Gallery">x</a></li>
				</ul>
			</nav>
		</div>
		<div class="clear"/>
	</div>
	
</header>
Code:
header {
	display: block;
	width: 100%;
	height: auto;
	background: #222;
	}
	
.header_body {
	display: block;
	width: 100%;
	max-width: 1200px;
	height: auto;
	margin: auto;
	font-size: 1.5em;
	font-weight: 100;
	font-family: Helvetica;
	
	}	

.header_logo {
	display: inline-block;
	color: #0B75AF;
	float: left;

	}	
	
.header_navi {
	display: inline-block;
	float: right;

	}	
	
nav {
	display: block;
	}

nav ul {
	display: block; /* block fail! */
	
	}
	
nav ul li {
	display: inline;
	font-family: Helvetica;	
	}
	

	
nav ul li a {
	color: #fff;
	text-decoration: none; 
	/*padding: 0.5em 0.938em 0.5em 0.983em;*/
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
	}
11/06/2015 19:23 hi im dan3l#4
einfache lösung: margin-top: 20px; bei header_logo dazu und fertig.
11/07/2015 00:03 LekoArts#5
Oder du setzt die Höhe deines Header-Divs auf eine feste Größe (oder irgendeine Einheit anstatt "auto") und setzt dann die line-height auf diesen Wert:

Code:
header {
	display: block;
	width: 100%;
	height: 80px;
	background: #222;
	}

.header_logo {
	display: inline-block;
	color: #0B75AF;
	float: left;
        line-height: 80px;
}
Die Höhe kann man schon abhängig von der Größe des Textes machen. Dafür brauchst du aber dann Mixins für SASS/LESS
11/07/2015 13:46 mastermo#6
Hmm wenn mit em, pixel kommen wegen dem responsive nicht in Frage. Lösungen gibts denke ich zu genüge aber die Ursache zu kennen wäre schon interessant :)
11/07/2015 14:52 LekoArts#7
Ursache:
Es ist einfach ein Krampf etwas in CSS vertikal zu zentrieren.

Lösung:
Die bereits von mir genannten Mixins in SASS/LESS. Oder du benutzt Flexbox.

Und Mixins sind responsive!

Wie sieht denn dein Clearfix aus? Hast du nur "clear:both" drin?

[Only registered and activated users can see links. Click Here To Register...]
11/08/2015 18:53 mastermo#8
Quote:
Originally Posted by LeKoArts View Post
Ursache:
Es ist einfach ein Krampf etwas in CSS vertikal zu zentrieren.

Lösung:
Die bereits von mir genannten Mixins in SASS/LESS. Oder du benutzt Flexbox.

Und Mixins sind responsive!

Wie sieht denn dein Clearfix aus? Hast du nur "clear:both" drin?

[Only registered and activated users can see links. Click Here To Register...]
Gut zu wissen :) ist halt wie wenn Wasser bergauf fließen würde... ein komisches Phänomen :D

Clearfix war gesetzt, ja. Ich hab mich zwischenzeitig aber für eine andere Lösung ohne Top Bar entschieden, aber so weiß ich für die Zukunft bescheid :)