XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   ::: kleine starthilfe ::: (http://xhtmlforum.de/showthread.php?t=43454)

fricca 15.12.2006 20:20

Zitat:

Zitat von benzrecordings (Beitrag 318020)
was würdest du machen.?

Die Inhalte mit einem div-Element zusammenfassen und dort das Hintergrundbild reinlegen.
Wie du es auf 100%-Höhe bringst, steht in den FAQ.


Zitat:

zudem bekomm ich immer noch nicht die schrift in der navi richtig hin !
Was soll mit der Schrift sein?

benzrecordings 15.12.2006 21:00

danke erstmal, dass du mir so hilfst! der trick mit dem div war sehr gut, allerdings ist der hintergrund ganz oben ein bisschen verschoben, und mit der schrift meine ich, dass die in der navi viel kleiner und unleserlicher ist als z.b.: rechts in der sidenavi obwohl die die gleiche eigenschaft haben....

hier mein aktueller stand: Unbenanntes Dokument

fricca 15.12.2006 21:10

Zitat:

Zitat von benzrecordings (Beitrag 318036)
ist der hintergrund ganz oben ein bisschen verschoben,

Gib nur dem body den Hintergrund, nicht nochmal dem html.
Und lies bitte, was in den FAQ zum CSS-Prolog steht.
Auch body und html können Default-Ränder haben.

Zitat:

und mit der schrift meine ich, dass die in der navi viel kleiner und unleserlicher ist als z.b.: rechts in der sidenavi obwohl die die gleiche eigenschaft haben....
Du verwendest small-caps. Kleinbuchstaben sind somit kleiner als Großbuchstaben.
Vermutlich suchst du text-transform:uppercase.

benzrecordings 15.12.2006 22:31

oh man, perfekt! jetzt funktionierts einwandfrei. werde mich jetzt nochmal intensiver in das thema einarbeiten und versuchen möglichst sauber zu formatieren und so viel wie möglich aus zu lagern. aber so hab ich schonmal ein guten startpunkt...

jupiii!:D

benzrecordings 16.12.2006 16:16

ich bins schon wieder :roll:

und zwar steh ich nun vor dem problem, das der abstand zwischen den einzelnen navigationspunkten in den browsern variiert.

zur erklärung, ich hab die navigation in einer liste. diese liegt in einem div "navi" im hintergrund ist eine grafik mit trennstrichen. ich hab dann den abstand zwischen den einzelnen listenpunkten mit margin-right definiert.

Code:

#navigation li {
        list-style: none;
        display: inline;
        margin-right: 2.1em;
}

dann hab ich alles schön ausgerichtet und auf meinem powerbook, mit OS X passen die menupunkte in jedem browser optimal zwischen die optischen trenner. auf einem anderen Rechner mit windows XP sind die in jedem browser verschoben, also der abstand zwischen den links ist größer! allerdings auch in jedem browser identisch! Wie kann es sein, dass auf dem mac im firefox alles passt und auf dem windows rechner nicht. hab auch verschiedene auflösungen ausprobiert, aber daran liegts nicht. ich denke, dass der befehl margin-right verschieden interpretiert wird.

was kann ich machen, dass der abstand identisch ist auf jedem system und in jedem browser? gibts ne alternative zu margin right? hab ach schon versucht anstatt ems pixel zu nehmen, hilft aber auch nicht...

vielleicht weiß jemand von euch rat...

hier der link: Unbenanntes Dokument


gruß chris

fricca 16.12.2006 16:25

Texte lassen sich nicht in Pixelmaße pressen. Die tatsächliche Textgröße ist von vielen Faktoren abhängig, die du nicht beeinflussen kannst (z.B. Schriftvergrößerung im Browser, OS etc. [1]).
Wenn du Kontrolle über die Breite der horizontalen Menüpunkte haben willst, dann brauchst du float in Verbindung mit Breitenangaben. Das wird aber immer zum Überfließen bei Schriftvergrößerung führen.

[1] Gerade kleine Schriften laufen aufgrund der unterschiedlichen Kantenglättung unter Mac und Win oft unterschiedlich breit.

heiko_rs 16.12.2006 16:31

Deine Konstruktion ist absolut nicht skalierbar.

Lasse li floaten (individuelle Breite in em per ID) und gib ihnen die Grafik (nicht die ganze, sondern nur einen Ausschnitt mit 3 Strichen) als Hintergrund. Lasse auch ul floaten, damit es li einschließt und seine Höhe anpaßt, wenn die Links bei Textvergrößerung umbrechen.

EDIT: zu langsam ;)

benzrecordings 16.12.2006 16:41

hi, danke für die antworten, hab schonmal versucht die schrift 1px größer zu machen und schon siehts besser aus.

@heiko, kannst du das für einen anfänger verständlich erklären?

also lasse ich sowohl #navigation li als auchg #navigation ul mit float: left; floaten?

wie kann ich mit id arbeiten? kann ich dann jedem menupunkt eine einzelne breite geben?

mit der grafik hakts bei mir auch, wenn ich jetzt nur die drei striche nehme und in den hintergrund jeweils lege, dann sind die ja genau mittig dahinter, oder kann ich die auch verschieben?

oh man so kompliziert :?

fricca 16.12.2006 16:45

Das beste für einen Anfänger ist, sich Grundlagen anzueignen.
Das geht am besten mit einem Buch (Suchfunktion!).

In diesem Forum können spezielle Probleme zu Einzelfällen geklärt werden. Eine Schritt-für-Schritt-Anleitung ist etwas viel verlangt.
Ein Online-Einstieg findet sich bei css4you. Dort kannst du auch die CSS-Eigenschaften nachschlagen (z.B. was mit Hintergrundbildern möglich ist!)
Tutorials zum Umgang mit Listenmenüs gibt's bei maxdesign.

heiko_rs 16.12.2006 16:54

Zitat:

Zitat von benzrecordings (Beitrag 318137)
also lasse ich sowohl #navigation li als auch #navigation ul mit float: left; floaten?

Genau. Alle brauchen dabei eine width-Angabe. Da Du mit fester px-Breite arbeitest, bekommt ul width in px, li dagegen in em, da der Platz für eine px-Breite zu knapp ist (denn mindestens 2 FX-Textvergrößerungen sollten immer möglich sein). Unterm Strich ist der Effekt dabei derselbe wie per Deiner derzeitigen Lösung per display: inline;, aber Du hast mehr Kontrolle über die einheitliche Darstellung in den verschiedenen Browsern.

Zitat:

Zitat von benzrecordings (Beitrag 318137)
wie kann ich mit id arbeiten?

Genau wie Du es bereits bei den divs tust, z.B. <li id="news">
Übrigens: Wirf das div #navigation raus und gib ul diese ID.

Zitat:

Zitat von benzrecordings (Beitrag 318137)
kann ich dann jedem menupunkt eine einzelne breite geben?

Code:

#news {
width: 4em;
}

Zitat:

Zitat von benzrecordings (Beitrag 318137)
in den hintergrund jeweils lege, dann sind die ja genau mittig dahinter, oder kann ich die auch verschieben?

Klar, per background-position.

Zitat:

Zitat von benzrecordings (Beitrag 318137)
oh man so kompliziert :?

Ne, ist gar nicht sooo kompliziert ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:16 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023