Bräuchte kleine Hilfe bei CSS

[phillip]

Hallihallo
Die einen habens vielleicht mitbekommen, ich tüftle gerade ein bisschen mit CSS herum, und bin dabei auf folgendes Problem gestossen:

zwischen der Navigation und dem Inhalt gibt es eine kleine Lücke die ich einfach nicht rausbringe...

LINK

Ich denke an den Quelltext und das CSS file kommt ihr selber ran (hoffe ich zumindest). Wäre wirklich dankbar, wenn mir da jemand helfen könnte!

[S2B]

Ich könnte mir vorstellen, dass der Fehler durch die unterschiedlichen position-Angaben zustande kommt. Ich würde auf einer Seite wenn möglich immer nur eine Positionierungsart verwenden, in deinem Fall relative. Im Internet Explorer gibt es übrigens einen anderen Darstellungsfehler: Das untere Bild ist um ein paar Pixel verschoben, also passen die beiden Bilder nicht mehr zusammen.

Aber mal eine andere Frage: Warum verwendest du überhaupt so ein Hintergrundbild? Dadurch wirst du doch wesentlich unflexibler, weil du bei jeder neuen Seite ein neues Bild erstellen darfst...

[phillip]

ja, das liegt an den positionsangaben, komme leider noch nicht wirklich damit zurecht... wegen dem teplate ist das so eine sache... ich mache die templates eigentlich hauptsächlich immer mit photoshop, und weiss danach nicht wie ich das ins web bringen könnte/muss. darum habe ich jetzt den ganzen fetzen rein gehauen ^^ wie könnte ich das denn anders machen?

[S2B]

z.B. könnte man sowas für den Header einsetzen:

Code: Alles auswählen

<div style="width: 200px; height: 280px float: left">
	<img src="logo.jpg" alt="" />
</div>
<ul style="background-image: url(menu.jpg); height: 80px; text-align: right">
	<li style="display: inline"><a href="index.html"><img src="home.jpg" alt="Home" /></a></li>
	<li style="display: inline"><a href="projects.html"><img src="projects.jpg" alt="Projects" /></a></li>
	<li style="display: inline"><a href="contact.html"><img src="contact.jpg" alt="Contact" /></a></li>
</ul>
<div style="background-color: url(logo_rest.jpg); height: 200px"></div>

(Die Pixel-Angaben sind erfunden)
Das wirkt jetzt zwar zuerst einmal ein bisschen kompliziert, aber nachher lassen sich Änderungen am Inhalt bzw. am Design leichter umsetzen als bei deiner aktuellen Lösung. Wenn du z.B. bei deiner aktuellen Lösung einen neuen Menüpunkt hinzufügen wolltest, müsstest du das komplette Bild bearbeiten, bei meiner Lösung müsstest du nur die Beschriftung auf den roten Farbübergang legen und es abspeichern.

Bei den Boxen machst du dann das entsprechende: Du zerteilst die Bilder und baust dir eine Box zusammen.

Edit: Um nicht zu einseitig zu wirken: Du kannst natürlich auch weiterhin die relative Positionierung einsetzen, so wie du es im Moment machst. Das ist auch definitiv die einfachere Lösung, wenn du nicht vor hast, die Seite irgendwann zu erweitern. Wenn du allerdings irgendwann weitere Boxen hinzufügen willst, würde ich zu meiner Lösung raten.