selfhtml.de - Alles für den Webmaster!

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Header aus gefloateten divs

Autor: gaby [Beiträge: 5704]
Datum: 13.06.2008 18:57:37

> Ich habe auch nochmal einen Artikel dazu
> gefunden,
> Habe es jetzt so gelöst, wie dort vorgeschlagen.
[alistapart]


body { font-size: 100% }

hatte ich ja auch schon in meiner ersten verlinkten Beispiel-Datei drin, allerdings ohne zu erklären, warum, und auch ohne dein 'pt' zu monieren.
Ich hatte halt damit gerechnet, daß Du meine Version übernimmst, und dann für deine Zwecke entsprechend erweiterst.

Bei Deiner neuen Version ist mir noch noch Einiges im CSS aufgefallen:

Gib der Liste mal testweise einen Rahmen, dann kannst Du Folgendes besser nachvollziehen.
1. Du siehst momentan einen linken Abstand der LI-Elemente zum Rahmen.
(Bild-1, s.o.)

Grund:
Dein Selektor #kopf_mi_o_nav ul {... } greift nicht, da er nicht zu der Syntax paßt, die Du im html-Code vergeben hast.
<UL id='kopf_mi_o_nav'>

demnach müßte der Selektor
ul#kopf_mi_o_nav { } heißen.

Unabhängig davon ist es aber vorteilhafter, mit dem Element-Selektor
ul { } die Innen-und Außenabstände _aller_ Listen, die in Deinem Dokument vorkommen, auf 0 zu setzen.

Nun ist der Abstand der LI-Elemente zum Rahmen verschwunden, und somit wird auch die Eigenschaft

#kopf_mi_o_nav {
      margin: 0px 0px 0em 2em;}

überflüssig, da

ul {
      margin: 0;
      padding: 0; }

schon dafür sorgt, daß die Navi-Liste ganz nah an den Rand gerückt wird.
(Bild-2, s.o.)


2. Du hast der Liste 'text-align: center;' gegeben, aber noch nicht bemerkt, daß überhaupt nichts zentriert wird.

Grund ist das 'float: left' im a-Element.
Damit wird der Link zu einem _Block-Element_, aber 'text-align: center' im übergeordneten Element zentriert nur _Inline-Elemente_.

'width: auto;' ist hier natürlich überflüssig, aber das sagte netinja schonmal.


http://gaby77.ga.funpic.de/forum/screens/shrazaam/css-2.jpg

Ich habe mal die zu löschenden Eigenschaften eingerückt, und die neu hinzugekommenen ausgerückt. Mit diesem CSS kannst Du das Umbrechen der Navi maximal hinauszögern.
Erst ab < 800px Breite wird es zweizeilig. (Bild-3, s.o.)


Grüße
gaby

Antwort schreiben

Username:	Usernamen registrieren
Passwort:	Passwort vergessen?
Thema:
	Bitte benutze für deinen Beitrag die Groß-/Kleinschreibung!
Beitrag:	> > > Ich habe auch nochmal einen Artikel dazu > > gefunden, > > Habe es jetzt so gelöst, wie dort > vorgeschlagen. > [alistapart] > > > body { font-size: 100% } > > hatte ich ja auch schon in meiner ersten > verlinkten Beispiel-Datei drin, allerdings ohne > zu erklären, warum, und auch ohne dein 'pt' zu > monieren. > Ich hatte halt damit gerechnet, daß Du meine > Version übernimmst, und dann für deine Zwecke > entsprechend erweiterst. > > Bei Deiner neuen Version ist mir noch noch > Einiges im CSS aufgefallen: > > Gib der Liste mal testweise einen Rahmen, dann > kannst Du Folgendes besser nachvollziehen. > 1. Du siehst momentan einen linken Abstand der > LI-Elemente zum Rahmen. > (Bild-1, s.o.) > > Grund: > Dein Selektor #kopf_mi_o_nav ul {... } greift > nicht, da er nicht zu der Syntax paßt, die Du im > html-Code vergeben hast. > <UL id='kopf_mi_o_nav'> > > demnach müßte der Selektor > ul#kopf_mi_o_nav { } heißen. > > Unabhängig davon ist es aber vorteilhafter, mit > dem Element-Selektor > ul { } die Innen-und Außenabstände _aller_ > Listen, die in Deinem Dokument vorkommen, auf 0 > zu setzen. > > Nun ist der Abstand der LI-Elemente zum Rahmen > verschwunden, und somit wird auch die Eigenschaft > > > #kopf_mi_o_nav { >       margin: 0px 0px 0em > 2em;} > > überflüssig, da > > ul { >       margin: 0; >       padding: 0; } > > schon dafür sorgt, daß die Navi-Liste ganz nah an > den Rand gerückt wird. > (Bild-2, s.o.) > > > 2. Du hast der Liste 'text-align: center;' > gegeben, aber noch nicht bemerkt, daß überhaupt > nichts zentriert wird. > > Grund ist das 'float: left' im a-Element. > Damit wird der Link zu einem _Block-Element_, > aber 'text-align: center' im übergeordneten > Element zentriert nur _Inline-Elemente_. > > 'width: auto;' ist hier natürlich überflüssig, > aber das sagte netinja schonmal. > > > > http://gaby77.ga.funpic.de/forum/screens/shrazaam/css-2.jpg > > Ich habe mal die zu löschenden Eigenschaften > eingerückt, und die neu hinzugekommenen > ausgerückt. Mit diesem CSS kannst Du das > Umbrechen der Navi maximal hinauszögern. > Erst ab < 800px Breite wird es zweizeilig. > (Bild-3, s.o.) > > > Grüße > gaby >
Link (URL):
Titel für Link:
Grafik (URL):
	Die Breite der Grafik darf 468 Pixel nicht überschreiten.

E-Mail-Benachrichtigung:

wenn auf einen Beitrag zu diesem Thema geantwortet wird
nur wenn auf meinen eigenen Beitrag geantwortet wird
nie

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

Wie 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...