Brauche Hilfe bei Website...

grahan · 27.03.2012

Guten Abend zusammen

ich habe ein Problem bezuüglich meiner Website. Ich versuche gerade eine Fotohomepage aufzubauen doch irgendwo ist der Wurm drin und ich weiß nicht wo .. Ich schaue mir paralell dazu das Video Tutorial von Pascal Bajorat zum Aufbau einer Website in Html 5 und CSS 3 an und bin auch soweit ganz gut durch gekommen nur jetzt hängt es irgendwo.

Meine Navigationsleiste und mein Header, in dem nachher eine Slideshow laufen soll, passen patu nicht korrekt untereinander. Ich hab bei beiden margin:auto angegeben , was ja eigentlich dazu führen müsste dass sie korrekt untereinander liegen. Aber dies tun sie leider nicht. Ich denke, dass der Fehler irgendwo in den rot markierten Bereichen liegen muss, doch ich finde ihn leider nicht

Ich hoffe ihr könnt mir helfen ..

Vielen dank schonmal im Vorraus.

Lg grahan

HTML Code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Photo, Portfolio, Photohomepage">
<meta name="description" content="Fotos"
<title> Fotohomepage </title>
<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="wrapper">
<nav>
<ul>
<li> <a href="#"> Startseite</a></li>
<li> <a href="#"> Portfolio</a></li>
<li> <a href="#"> Technik</a></li>
<li> <a href="#"> Blog</a></li>
<li> <a href="#"> Impressum</a></li>
</ul><br class="clear">
<br>
<h1 id="branding">Fotohomepage</h1>
</div>

<header>

</header>

</body>
</html>

CSS Code

@charset "utf-8";
/* CSS Document */

*{padding:0;margin:0}
html, body{min-width:100%;height:100%;}
html{background:url(../viertes%20layout.jpg) no-repeat;background-size:100% 100%}
body{background:url(../navbar.png) no-repeat;}

.wrapper{width:800px; margin:auto;}
.clear{clear:both;line-height:0.00001em;font-size:0.00001em;}

nav{width:900px; height:50px; margin-bottom:30px; position:relative; float:left; margin:auto;}
nav ul{list-style:none;}
nav ul li{float:left;}
nav ul li a{color:#ffffff; text-decoration:none;background:url(../navbarbg.png) repeat-x;height:35px; padding:15px 40px; margin-right:30px; display:block;-moz-border-radius:5px 5px 5px 5px ;
-webkit-border-radius:5px 5px 5px 5px ;
border-radius:5px 5px 5px 5px ;}

#branding{text-indent:-99999px;}

header{ width:780px;height:480px; background-color:#c92be0; margin:auto; margin-top:150px; border:4px solid #c92be0;}

Falls ihr noch ein Bild braucht, um es zu verdeutlichen schreibt es hier bitte rein

alexanderhey · 28.03.2012

AW: Brauche Hilfe bei Website...

Hallo.

Ein Screenshot wäre da hilfreich. Welchen Browser benutzt du ? Hast du den gleichen Effekt bei bspw. Chrome, FF, IE, Iron etc ?

Gruß Alex

grahan · 28.03.2012

AW: Brauche Hilfe bei Website...

Ist bei allen Browsern das gleiche Problem . Screenshot kann ich erst gegen Mittag nachliefern .
Aber er wird kommen.

Davi2000 · 28.03.2012

AW: Brauche Hilfe bei Website...

Du hast vergessen den Nav Tag zu schließen, außerdem gibst du deinem Header, was ja im HTML unter der Navigation ist ein margin-top: Warum floatest du Nav?

grahan · 28.03.2012

AW: Brauche Hilfe bei Website...

Oh stimmt das nav Tag ist nicht geschlossen..
Ich floate, weil ich meine Liste nicht untereinander haben wollte sondern alle nach links nebeneinander.

Davi2000 · 28.03.2012

AW: Brauche Hilfe bei Website...

grahan schrieb:
Oh stimmt das nav Tag ist nicht geschlossen..
Ich floate, weil ich meine Liste nicht untereinander haben wollte sondern alle nach links nebeneinander.

dann brauchst nicht nav floaten sondern es reicht wenn du li floatest.

Also dein Code gehört komplett bearbeitet.

Damit ich das richtig verstehe:

Du willst einen Header und eine Navigation und die Navigation soll horizontal direkt unter dem Header sein?

grahan · 28.03.2012

AW: Brauche Hilfe bei Website...

Also den Code habe ich so aufgebaut wie in dem Tutorial beschrieben.. Warum gehört er komplett überarbeitet?

Edit

ie Navigation soll Horizontal über dem Header sein.

Davi2000 · 28.03.2012

AW: Brauche Hilfe bei Website...

grahan schrieb:
Also den Code habe ich so aufgebaut wie in dem Tutorial beschrieben.. Warum gehört er komplett überarbeitet?

Weil ich der Meinung bin das vieles überflüssiges in der CSS ist.

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
	*{padding:0;margin:0}
	#wrapper nav{width:900px; height:50px; margin-bottom:30px; margin:auto; background: grey;}
	#wrapper nav ul li{float: left; list-style: none; margin-right: 20px;}
	#wrapper header{width: 900px; height: 200px; background: blue;}
</style>
</head>

<body>
	<div id="wrapper">
	<nav>
		<ul>
			<li> <a href="#"> Startseite</a></li>
			<li> <a href="#"> Portfolio</a></li>
			<li> <a href="#"> Technik</a></li>
			<li> <a href="#"> Blog</a></li>
			<li> <a href="#"> Impressum</a></li>
		</ul>
	</nav>
    <header>
    	<h1>Fotohomepage</h1>
    </header>

</div>
</body>
</html>

Nimm mal diesen Code und speicher das mal als Html und sag dann ob die Struktur so ok ist. Ich habe bewusst die CSS im Html geschrieben.

Ich habe nicht alles auf deiner CSS genommen, ist nur um die grobe Struktur zu verstehen.

Myhar · 28.03.2012

AW: Brauche Hilfe bei Website...

Davi2000 schrieb:
Weil ich der Meinung bin das vieles überflüssiges in der CSS ist.

Bei deinem HTML ist aber auch etwas überflüssig. Oder wozu benötigst du den div mit der Klasse wrapper?

LaFaSiLuc · 28.03.2012

AW: Brauche Hilfe bei Website...

Der war schon im Original drin^^

Davi2000 · 28.03.2012

AW: Brauche Hilfe bei Website...

LaFaSiLuc schrieb:
Der war schon im Original drin^^

Danke!

@Myhar
Außerdem wollte ich beim ändern ID draus machen. Ein Wrapper auf einer Seite ist niemals überflüssig. Schau dir mal die Yaml Layouts an.

Myhar · 28.03.2012

AW: Brauche Hilfe bei Website...

Das ganze ist jetzt schon etwas OT. Deshalb von mir nur noch die eine Antwort dazu, dann würde es mich viel mehr interessieren ob der TS sein Problem schon gelöst hat oder ob er noch Hilfe benötigt. Oder wo er noch Hilfe benötigt.

@Davi2000: Du hast die restlichen überflüssigen Elemente auch gelöscht, also warum nicht das wrapper-div.
Du benötigst es in deinem konkreten Bsp nirgends, du kannst deine CSS Anweisungen auch abkürzen.
Ein Wrapper kann nämlich sehr wohl überflüssig sein. Nur weil er wo anders verwendet wird heißt das nicht, dass es überall so sein muss

Davi2000 · 28.03.2012

AW: Brauche Hilfe bei Website...

Myhar schrieb:
@Davi2000: Du hast die restlichen überflüssigen Elemente auch gelöscht, also warum nicht das wrapper-div.
Du benötigst es in deinem konkreten Bsp nirgends, du kannst deine CSS Anweisungen auch abkürzen.
Ein Wrapper kann nämlich sehr wohl überflüssig sein. Nur weil er wo anders verwendet wird heißt das nicht, dass es überall so sein muss

Wenn ich in einem Wrapper meine Website habe, wie Header, Navi usw, dann ist ein Wrapper niemals überflüssig, sondern macht alles viel flexibler.

Will ich nämlich z.b meinen kompletten Inhalt zentrieren, dann zentriere ich halt einfach nur den Wrapper.

grahan · 29.03.2012

AW: Brauche Hilfe bei Website...

Also Problem ist immer noch da, ich bekomms nicht gescheit hin, die Naviagtion ist immer um ein paar Pixel nach links verschoben oder anders herum, der Wrapper um ein paar pixel nach rechts. Ich hab jetzt schon einiges ausprobiert aber es funktioniert immer noch nicht richtig ... Ich liefer morgen mal den Screenshot nach, hoffe das hilft euch dann mehr.

Myhar · 29.03.2012

AW: Brauche Hilfe bei Website...

Screenshot kann unter Umständen helfen, aber ich denke mal, dass dieser nicht ausreichen wird.
Wieso stellst du deine Seite nicht einmal temporär irgendwo zur Verfügung, dann kann man dein Problem besser nachvollziehen?

Davi2000 · 29.03.2012

AW: Brauche Hilfe bei Website...

grahan schrieb:
Also Problem ist immer noch da, ich bekomms nicht gescheit hin, die Naviagtion ist immer um ein paar Pixel nach links verschoben oder anders herum, der Wrapper um ein paar pixel nach rechts. Ich hab jetzt schon einiges ausprobiert aber es funktioniert immer noch nicht richtig ... Ich liefer morgen mal den Screenshot nach, hoffe das hilft euch dann mehr.

Wenn du mein Code verwendest, wirst du sehen das er funktioniert!

grahan · 02.04.2012

AW: Brauche Hilfe bei Website...

Edit: Sry davi hab erst eben deine Antwort gesehen ... Es funktioniert jetzt einwandfrei hab es ausprobiert. Danke dir vielmals

und nochmals Entschuldigung dass ich deine Antwort erst so spät gesehen habe.

Thread kann geschlossen werden, wenn ihr mögt, Problem wurde gelöst