[CSS] CSS Spielt verrückt

[mastermo]

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:

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)

[CeLiFiG]

Kannst du einen Code Abschnitt posten?

[mastermo]

Klar hier ist er:

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

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

[hi im dan3l]

einfache lösung: margin-top: 20px; bei header_logo dazu und fertig.

[LekoArts]

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:

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

[mastermo]

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

[LekoArts]

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?

[mastermo]

Originally Posted by LeKoArts

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?

Gut zu wissen ist halt wie wenn Wasser bergauf fließen würde... ein komisches Phänomen

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