selfhtml.de - Alles für den Webmaster!

 

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

united domains - jetzt Wunsch-Domain sichern!

Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.

Jetzt Domain-Check bei united-domains!

Re: Header aus gefloateten divs

Autor: Shrazaam [Beiträge: 7]
Datum: 10.06.2008 01:23:30

Hallo,

> Bei größerer Schrift läuft der Text im Firefox
> aus seiner Box heraus. (Bild, s.o.)
> Also sollte man dem #login-DIV entweder eine Höhe
> in 'em' geben, oder gar keine.
> Eine Breite in 'em' wäre auch zu überlegen.
>

Beides erfolgt.

>
> Zunächst würde ich sämtlich Rahmen um die
> Hintergrundgrafiken weglassen. Das macht das
> Design bei Schriftgrößenänderungen variabler.
> Für Rahmen die Eigenschaft 'border' benutzen.
>

Erfolgt. Ich habe jetzt auf die Lücke zwischen Nav-Div und Login-Div einfach verzichtet und das restliche Design etwas angepasst.

> Normalerweise bindet man das Logo als
> Hintergrundbild ein und gibt dem nachfolgenden
> Div dann ein entsprechend großes 'margin-left',
> damit es das Logo nicht überdeckt.

Ich habe das Logo nun wie Du in Deinem Beispiel einfach in den body gepackt und mittels position: absolute positioniert.

> Die weiße Lücke zwischen Login und Navi bekommst
> du, indem du das rote Hintergrundbild so _breit_
> machst, wie erforderlich, und links einen kleinen
> Streifen weiß einbaust.

Aus Ladezeitgründen ist das Hintergrundbild des Login-Div ja nur 1px breit und wird wiederholt. Somit würde die Lücke ja auch wiederholt werden. Aber das hat sich ja jetzt sowieso erledigt.

> Hier ist mal ein Grobgerüst:
> Bei Schriftvergrößerung dehnt sich das #login-DIV
> in Höhe und Breite aus.
>

Danke, ich habe drübergeschaut und ein paar Anregungen aufgefasst.

>
> Der Navi würde ich keine feste Breite geben.
> Bei schmalem Browserfenster bzw Anzeigebereich:
>
>
> http://gaby77.ga.funpic.de/forum/screens/shrazaam/zweizeilig.jpg
>

Ja, so wird es laufen. Allerdings sollte das wirklich erst bei sehr niedrigen Auflösungen oder sehr großem Schriftgrad auftreten.

>
>
> PS
> Fairerweise solltest du im XHTML-Forum Bescheid
> sagen, daß dein Problem schon woanders versucht
> wird, zu lösen.
> Dann braucht sich dort keiner mehr überflüssig
> die gleichen Gedanken zu machen und zu posten.
>

Gemacht.


So. Nun bekomme ich in Opera 9.2, FF2, FF3 Beta 5 und IE7 das Gewünschte angezeigt.
Der IE6 stellt sich allerdings immernoch quer. Er zeigt erstens das Logo überhaupt nicht an (wtf?!) Sorry, aber langsam verzweifle ich damit.
Zweitens zeigt er den Navi-Div viel zu weit rechts an und deswegen selbst bei einer Auflösung von 1024x768 Pixeln und normalen Schriftgrad auf einem 17"-Monitor einen zweizeiligen Header.
Der IE7 liefert unter selbiger sonstiger Konstellation, wie gesagt, ein vernünftiges Resultat.

Falls ihr nochmal drüber guckt und euch ein paar Gedanken macht, wäre ich euch wirklich sehr dankbar.

Also besten Dank schonmal und liebe Grüße
Niklas

Beiträge

Antwort schreiben

Username: Usernamen registrieren
Passwort: Passwort vergessen?
Thema:
  Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:
Link (URL):
Titel für Link:
Grafik (URL):
  Die Breite der Grafik darf 468 Pixel nicht überschreiten.
 
E-Mail-Benachrichtigung:



Zum Abschicken deines Beitrags bitte die Schaltfläche "Abschicken" nur einmal anklicken und warten. Der Server braucht manchmal einige Zeit, bis er den Beitrag in die Datenbank übernommen hat. Wenn du die Schaltfläche mehrmals drückst, erscheint dein Beitrag auch mehrmals im Forum.

Bewerten Sie Ihren Webhosting-Provider

Webhosting Provider bewerten und Apple iPad gewinnenWie zufrieden sind Sie mit Ihrem Webhosting-Provider? Gibt es Probleme beim Service, mit der Performance oder der Abrechnung?

Teilen Sie jetzt Ihre Erfahrungen mit anderen Webmastern und schreiben Sie eine Provider-Bewertung. Mit etwas Glück können Sie ein Apple iPad gewinnen!

Weitere Informationen und Teilnahme...