Beiträge von merkus

merkus · 13. September 2016

Alles klar, jetzt kenn ich mich aus

Habs dann mit einem padding gelöst und funktioniert jetzt wunderbar

Danke!

lg Markus

merkus · 13. September 2016

Hallo Leute,
bin ziemlich neu hier und hab auch gleich direkt das erste Problem. Ich bin gerade dabei die Navigation richtig auf meiner Homepage zu platzieren, allerdings will das nicht so funktionieren

Ich habe zwei ID Container erstellt die miteinander verschachtelt sind, der eine nennt sich "id=header" und in diesem Container befindet sich noch der "id=navi", der eine UL beinhaltet. Nun habe ich dem #header eine fixe height gegeben sowie auch einen blauen Hintergrund festgelegt. Auf diesem blauen Hintergrund will ich dann die Navigation mittig platzieren, sprich #navi. Nun hab ich das Problem dass wenn ich den Abstand von #navi nach oben hin mit margin-top ändern will, dass sich der Komplette #header nach unten hin verschiebt. Sobald ich aber auf den #header einen border lege, springt der wieder nach oben und alles würde passen so wie ichs gern hätte(bis auf den border eben). Jetzt quäle ich mich schon stundenlang durch den Code und versuche 1000e Varianten, aber ich bekomms einfach nicht hin. Habs dann mal mit float versucht, dann lässt sich zwar die #navi von oben her schön positionieren, allerdings die Abstände von links nach rechts nicht.

Mal mein Code:

HTML

<html>
	<head>
		<title>Home</title>
		<link rel="stylesheet" type= "text/css" href = "style.css">
	</head>







	<body>

		<div id = "header">
			<div id = "navi">
				<ul>
					<li>Home</li>
					<li>Über mich</li>
					<li>Kontakt</li>
					<li>Gallerie</li>
				</ul>
			</div>
		</div>

		<div id = "container">
			<div id = "content1">
				<h1>Lorem ipsum dolor</h1>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo </p>
			</div>

			<div id = "content2">
				<h1>Liste</h1>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>


			</div>
		</div>


	</body>




</html>

Alles anzeigen

Code

body {
	font-family: Cambria;
	font-size: 18pt;
	margin: 0 0 0 0;
}







#header {
	background-color: #28bcf2;
	height: 400px;

}




#header #navi {
	background-color: #2c3e50;
	height: 45px;
	width: 700px;
	margin-top: 170px;
	margin-left: auto;
	margin-right: auto;
}




#navi ul {
	margin: 0px;
	padding: 7px;
	text-align: center;
}




#navi li {
	margin-left: 35;
	margin-right: 35;
	display: inline-block;
	list-style: none;
}

Alles anzeigen

Ich hoffe ihr versteht so halbwegs mein Problem und könnte mich behilflich sein

lg Markus

Beiträge von merkus

2 IDs lassen sich nicht sepparat anordnen

2 IDs lassen sich nicht sepparat anordnen