Einteilung des Header in Boxen

von **Horadimo** » 26.09.2008, 13:11

Erst mal ein herzliches Hallo an euch alle,

ich habe jetzt schon eine ganze Zeit rum gesucht, da ich mich wie so viele vom tabellengestützten Webdesign entfernen möchte. Dabei bin ich aber rauf das Problem gestoßen, dass ich nicht weiß wie ich folgenden header in Boxen einteilen soll, da das mittlere Element so groß ist und auch in die Menüleiste reinragt:

Bild

oder bin ich da komplett auf dem falschen Weg ?

Für eure Hilfe wäre ich sehr dankbar.

Liebe Grüße

Hora

von **Laus** » 26.09.2008, 14:03

Hallo

Mannometer das ist ja eine Steinalte Grafik, respekt, gefällt mir sehr gut.

Gabs denn im Jahr 1008 überhaupt schon Computer, oder bist du ein Zeitreisender?
Nun aber Spaß beiseite, willst du die Navi mit Grafiken die sich ändern beim hover machen oder soll sich nur die schrift darin ändern?
Ich frage deshalb weil davon eigentlich die weitere Vorgehensweise abhängt.
Wenn du die Buttons grafisch machen willst dann würde ich die Ganze Grafik oberhalb der Buttons zerschneiden, den oberen Teil als header und den unteren als navi. Dann das ganze mit margin aufeinander ausrichten.

Gruß Xaver

von **Horadimo** » 26.09.2008, 14:22

Ja

, ist schon etwas länger her seit dem ich mich mit der Grafik befasst habe. Schon mal danke für das Kompliment und für die schnelle Antwort!

Die Buttons sind sich ändernde Grafiken, genau. Okay, an das auseinanderscheiden habe ich gar nicht gedacht! Aber was mache ich dann mit den beiden Fahnen, die sollen nämlich auch aus sich ändernden Grafiken bestehen. Ist der folgende Vorschlag realisierbar oder gibt es eine Alternative? :

Bild

Besten Dank

Hora

von **Laus** » 26.09.2008, 15:08

Ja so in etwa hatte ich mir das gedacht. Ich denke mal du hast von der Grafik ja eine Datei mit Ebenen. Blende die Buttons aus, Zerschneide die Grafik so Bild

Das obere Teil kommt in den Header als Hintergrund das untere als Hintergrund in die Navi.
Für die Navigation selbst nimmst du eine Liste also <ul> oder <ol>und weist den <li>s deine Bilder der Buttons als Hintergrund zu. Mit den Flaggen machst du es genau so. alles über CSS positioniert, Fertig.

von **Horadimo** » 01.10.2008, 11:58

Hallo nochmal,

vielen Dank für den Hinweis, habe den Header jetzt soweit auch hinbekommen! Leider habe ich jetzt ein weiteres Problem mit Listen. Ich pack' das jetzt einfach mal in den Thread mit rein.

Also es geht um die Abstände:

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css">  </style> </head> <body style="font-family:arial;"> <ul style="margin-left: 30px;margin-top:10px;padding:0px;display:block;font-size:10pt;"> <li>Maschinen ab Lager</li> <li>Überholt</li> <li>Installation und Garantie</li> <li>Ersatzteilversorgung</li> <li>Service für alle glieferten Maschinen</li> </ul> </body> </html>

Der Firefox/IE-Vergleich sieht folgendermaßen aus:

Bild

Dazu ist noch zu sagen, dass dieser unterschiedliche Abstand verschwindet, wenn ich im body-tag die font-family weg lasse. Ist es möglich diese Abstände anzugleichen ?

Schon mal vielen Dank !

Beste Grüße Hora

Einteilung des Header in Boxen

Einteilung des Header in Boxen

Ähnliche Beiträge zu "Einteilung des Header in Boxen"

Wer ist online?