CSS, die Kust der Küste

So ganz versteh ich das net, css, am Anfang habe ich gedacht, man könnte so gut wie alles damit machen, desswegen auch die bescheuerte Frage wegen mit dem G, wohl nicht. Also css ist für die Formatierung der Elemente und für die Aufteilung der Bereiche gut, damit man z.B. keine Tabellen mehr dafür benutzen muss, nur das die Seite dann in jedem Browser anders aussieht, die div-teile sind schief, aber es gibt genügend Seiten wo es nicht schief ist, daher versteh ich das alles nicht, mach ich was falsch? oder ist das normal, also das man das Zeug erst nach jahrelanger Übung gerade hin bekommt?, es ist nur gerade wenn ich das ganze Beispiel kopiere, nicht wenn ich was selbst mache.
Der eine Trick den ich mahl gesagt bekomme habe, hört sich zwar gut an, aber ändern tut sich nicht. Ich soll
body{
margin:0px;
padding:0px;
}
noch mit dazu nehmen.

Und was ich auch noch nicht verstanden habe ist wie man so einen Bereich macht den man scrollen kann, wie bei www.the-area.de.


Kommt mir jetzt bitte nicht mit einen Tutorial oder einer Infoseite zu diesem Thema, wo ich dann drei Wochen brauche um es durchzulesen und am Ende weiß ich genau so viel wie am anfang.

Wenn du keine allgemeinen tuts willst, dann musst du schon präziser fragen

Original von Mays

Und was ich auch noch nicht verstanden habe ist wie man so einen Bereich macht den man scrollen kann, wie bei www.the-area.de.

Was du bei area.de siehst, mit dem scrollbaren Bereich, das hat nichts mit css zu tun, sondern ist ein simples Frameset.

linkes Frame für das menu, oberes frame für werbeschrott u.s.w. und das Hauptframe für die daten.

Darky

Ein Tipp: Achte darauf, dass alle Browser nicht in den Quirks-Modus springen. Wie du das erreichst, kannst du ergooglen oder einfach http://www.quirksmode.org/css/quirksmode.html .

Also so einen Scrollbereich bekommt man W3C konform mit CSS hin,
auch ohne Framesets.
kaistapel.de
Hier einfach mal den Browser verkleinern...
Die Navi ist fixiert während der Inhalt scrollt.

ein Schreibfehler kann so leicht mahl passieren ohne das man es will


ich meinte das Spiel www.the-arena.de, was auf der anderes seite ist weiß ich nicht.

Original von Mays
ein Schreibfehler kann so leicht mahl passieren ohne das man es will

jah sdimd

Das mit dem Scroll geht so:
Passt der Inhalt nicht in den div-container, gibts einen scrollbalken.

Ein kleiner Tipp, damit du nicht (wie ich am Anfang) verzweifelst:

Die Reihenfolge ist entscheidend. Das wirst du spätestens merken, wenn du Links einfärben willst und dich wunderst dass der Hover-Effekt nicht erscheint.

Deswegen immer alle Standards am Anfang definieren und dann spezieller werden (so kannst du auch Eigenschaften "vererben").

Original von Mays
die div-teile sind schief, aber es gibt genügend Seiten wo es nicht schief ist, daher versteh ich das alles nicht, mach ich was falsch?

Wie, die divs sind schief?
Mach mal n Screenshot, eigentlich sind die IMMER senkrecht - ich wess garnicht, wie man das verändert

schief nicht in dem Sinne von verdreht sondern, an der falschen Stelle.

So das alle verstehen was ich gemeint habe, auch wenn ich denke das es sowieso alle verstanden haben was ich gemeint habe.
http://mays.ma.ohost.de/opera.JPG
http://mays.ma.ohost.de/ie.JPG

seht nicht den inhalt an oder das sonstige aussehen(ist halt noch nicht alles fertig und hab es nur so zum Spaß gemacht, vielleicht wird ja mahl was draus, ich glaube fest daran), sondern nur die div-teile.

den Quirks-Modus werde ich mir erst in ein paar Tagen mahl genauer anschauen.


Muss man eigendlich XHTML in Verbindung mit CSS nehmen oder geht auch HTML?

Zur letzten Frage: Es geht auf jedem Fall ohne XHTML - Es kommt halt drauf an, wie du es umsetzt.

Das der IE und der FF (oder andere Browser) sachen anders interpretiern, ist mir (und glaub ich jedem hier) bekannt. Bei der Breite der DIVs z.B:

IE) Die angegebene Breite zählt für den gesammten Kasten, und der border wird nach innen gestetz. Bei einer Breite von 100 + einem Border von 5 also eine ges. Breite von 100, der Kasten mit dem Inhalt ist 90.

FF) Der Firefox denk, die breite zählt nur für den inneren Kasten, ohne border. Also baut er den Kasten mit 100 und setzt den Border mit 5 dran - insgesammte Breite 110.

Desshalb muss man die angaben oft 2x machen. Mit ie und ff geht das so:

.class{ //Die normale Klasse für den IE

border: 5px red;
width: 100px;
}

html>body{ //Und dem Firefox sagen, dass er die Werte von oben überschreibt.
width: 90px;
}

Ich hoffe, sowas gibt es auch für den Opera, damit Teste ich leider nicht...
Wenn nicht, mit eine Browserunterscheidung mit PHP machen.

CSS geht genauso gut mit XHtml, wie mit HTML 4. Empfehlenswert ist allerdings XHtml, da du dort mehr Struktur erhältst.

@Fornax: Du sprichst den Quirks-Mode an. Im Standard-Compliance-Mode berechnet der IE dieses richtig.

@Fornax
ich versteh nicht ganz was du mit überschreiben des codes meinst?


Ich wollte mir jetzt auch mahl ein paar mehr Browser aneignen, aber die älteren Versionen find ich irgendwie nicht, nur die neusten oder ich bin halt wieder zu blöd dafür

@TheUndeadable:
also der beste bin ich nciht in CSS/Browsern usw. Was ist denn der Quirks-Mode?

@Mays:
wenn man ein Atribut 2mal setzt, wird immer das zuletzt geschriebene genommen. Die Strucktur html>body kennt der IE nicht, also ignoriert er alles, was in dieser Klasse geschrieben wird.

Zum Quirksmode:
http://www.quirksmode.org/css/quirksmode.html

Ihh
Englisch :wink:
Ich habs mal überflogen.....


Aus Wikipedia:
Der Quirks-Modus ist ein Darstellungsmodus bei modernen Webbrowsern, der die Abwärtskompatibilität zu Websites sicherstellen soll, die veralteten oder ungültigen HTML-Code verwenden. Dabei werden u.a. Darstellungsfehler bei alten Browserversionen simuliert, damit das Layout dieser Webseiten nicht zerstört wird. Alle modernen Browser richten den Darstellungsmodus nach der Dokumenttypdefinition (Doctype) im HTML-Quellcode. Fehlt die Doctype-Angabe, wird der Quirks-Modus verwendet.

Da mir das was ich vor hatte zu schwer war, habe ich an was leichteres gesetzt, ich war total froh als der Internet Explorer und der Opera es richtig angezeigt hat, um den Mozilla habe ich mir keine gedanken gemacht, habe gedacht er reagiert wie der Opera, dem war aber nicht so.

Was muss ich bei dem Mozilla beachten?
schaut
http://mays.ma.ohost.de/index2.php



glaubt ihr das Rot tut den Augen weh?

Design Elemente haben in der Webseite nix zu suchen und sind deprecated.

Das gilt fuer:
- font (nimm css)
- b (nimm strong oder css, je nach Inhalt)
- center (css..)
- bgcolor
- text...

Zudem sollten Tabellen fuer tabellarische Auflistungen genutzt werden - nicht fuer das Designen (man kann sie zB in xhtml strict nicht mehr nesten!). HTML = Struktur only, CSS = Design only.


Dein "Verzerr" Problem liegt daran, dass Mozilla die Border nicht zur Groesse des Blocks zaehlt.

Man sollte aber "feste" Groessendefinitionen moeglichst immer vermeiden, da du so Nutzer verschiedener Devices wie z.B. Handys oder PDAs, aber auch User anderer Aufloesungen benachteiligst ... bau die Seite so, dass sie vernuenftig skaliert!

Designmaessig laesst sich natuerlich darueber streiten... ich halte so ziemlich nichts von schwarzen Hintergruenden.

Ich weiß dass das Spiel nicht gerade gut ist und dass die Seite voller Rechtschreibfehler ist, aber es ist mir egal.

Meinst du nicht, dass den Spielern dein spiel auch sehr egal sein wird, wenn du mit so einer pessimistischen Egal-Einstellung daherkommst?

Wenn mich eine Sache stört,
sind es Rechtschreibfehler schon auf der index...

Das ist so nicht ganz richtig...
Nicht nur Mozilla zählt die border und das padding nicht zur breite und höhe des blocks, sondern alle browser die sich an die definition des boxmodels halten.
Ein workaround ist denkbar einfach:
zuerst definiert man den standart für alle browser mit richtigem boxmodel:

div.grid  {width: 565px;}

danach setzt man für den IE die ausnahme (Star-HTML-Hack):

* html div.grid { width: 578px;}

Das man keine festen pixelangaben benutzen soll kann ich wirklich nicht bestätigen. Es ist richtig das Handys und PDA's normalerweise keine hohen auflösungen haben, aber genau deshalb definiert man auch das ausgabemedium auf das sich ein stylesheet bezieht in diesem fall media="screen" (wenn das ganze für handhelds untauglich ist).
Mehr dazu hier: http://de.selfhtml.org/css/formate/einbinden.htm#link_media

reg4rds
chojin

@chojin: Du redest vom IE 5.

Der IE 6 versteht das korrekte Box-Model, nur muss man darauf achten, dass man den richtigen Doctype nutzt. Das falsche Box-Model nennt man auch Quirks.

Infos von MS:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Ich persönlich sehe es nicht so hart wie Kallisti und würde Tabellen auch noch für das Design nutzen. Tabellen sind einfach netter handzuhaben. Nur Dinge wie font haben nichts mehr in einem ordentlichen Quelltext zu suchen.

Original von Kallisti

Man sollte aber "feste" Groessendefinitionen moeglichst immer vermeiden, da du so Nutzer verschiedener Devices wie z.B. Handys oder PDAs, aber auch User anderer Aufloesungen benachteiligst ... bau die Seite so, dass sie vernuenftig skaliert!

Ohje... so pauschal sagen wäre ich vorsichtig mit. Bei einer frei skalierbaren Seite muss man starke kompromisse bezüglich des Designs machen. Vorallem für ein Browsergame wird es immer wichtiger, ein vernüftiges Design zu haben und da kommt man dann um ein festes Design nicht drum herum. Ich schließe lieber 1-2% der "kunden" aus, die mein Spiel auch über ihr Handy spielen wollen, als das ich 98% ein nicht ganz so cooles Design zumute...

Was die Tabellen angeht. Sie sind heutzutage halt immer noch ein leichtes mittel um sich ein designtechnisch schöne Website zu basteln. Ob man wirklich XHTML Strict arbeiten sollte... naja... es ist schhon etwas gefrimel und mich stören einfach ein paar Sachen dabei... schon alleine das fummeln, das es auf jedem Browser unterschiedlich aussieht... Aber das bekommt man mit viel fummeln ja auch hin... nur viele "Anfänger" haben nicht die Zeit und die Lust, sich am anfang schon so reinzuknien...

Greetz

Achso stimmt, gibt ja schon eine V6 von IE :wink:
Ok sorry dann funktioniert der Star-hack nur bedingt wenn man annimmt, dass der browser nicht in den Quirks modus springt.

Um den IE5 und IE4 auszuschließen würde ich dann einen kommentarhack benutzen... denke ich.

div.grid/* Das hier kappieren alle Browser außer IE4 und IE5 */ {
width: 565px;
}


reg4rds
chojin

Mir ist gerade aufgefallen das wenn ich in einem div-feld(wo ich vorher die Größe angegeben habe) benutze wird das div-feld aus irgendeinem Grund vergrößert, weiß jemand was man dagegen machen kann oder warum das passiert, nur der Mozilla Firefox verändert es nicht.

Ich hoffe ihr versteh was ich meine.
hier noch der Code:

Formular Feld









Nickname:
Passwort:







lässt man nun das und weg, wird die richtige Größe angezeigt

ich glaube du löst das mit nem

display:inline

oder so ähnlich.

es klappt danke,
display: inline, löscht die Funktion einen Absatz zu machen oder so ähnlich.

Die Eigenschaft display ist in gewisserweiße der Absatz (wenn auch das HTML-mäßig eher auf

zutreffen würde).

block ist zum Beispiel der Standard bei den meisten Elemente, wie auch form.

Setzt man h1 { display: inline; }, dann wird die Überschrift nicht automatisch hinten abgebrochen, sondern geht nahtlos weiter; z.b. könnte man so 2 Überschriften in einer Zeile lösen, ggf ein sinnvolles Stylewerkzeug.

Natürlich ist auch Zeilenumbruch für alle Img-Tags möglich.. usw...

Wieder eine Frage,
also ich gebe einem Feld eine bestimmte Höhe, sollte der Inahlt des Feldes größerer werden als eigendlich am anfang bestimmt, soll er das Fester ziehen, der IE und der Opera machen das auch, nur der Mozilla Firefox nicht.
Eigendlich hätte ich gedacht das man das mit dem Befehl "overflow" regelt, geht aber nicht, habe alles ausprobiert, es auf visible, hidden, scroll und auto gesetzt, von denen hätte es eigendlich auto seinen müssen oder?

siehe: min-height
und dazu noch das hier:
http://standards.webmasterpro.de/index-article-min_height.html

@Mays: Hmm.. das dürfte eigentlich nur passieren, wenn du table-layout: fixed hast. Mir ist das noch nicht passiert, vielleicht hast du einen Spezialfall.

Was heißt genau "Fenster ziehen"?

@knalli
mit Fester ziehen war gemeint er soll das Feld was ich vorher bestimmt habe vergrößern, ich hätte da auch Feld ziehen schreiben können, wollte aber mahl ein anderes Wort nehmen.

@krisch
also ich kenne mich mit dem ganzen Zeug noch nicht richtig aus.
Mit table-layout: fixed, legt man soweit ich weiß fest ob sich die Tabelle vergrößern kann oder nicht, würde mir jetzt der Namen sagen, nur ich habe keine Tabelle, daher denke ich du meinst was anderes und ich versteh es nicht.




zu der Seite die Conrock gepostet hat, wird das beschrieben was ich meinte.
Da wird auch noch von "!important" geschrieben und das der IE es nicht kennt, das heißt doch man kann überall dieses !important verwendet, wenn der IE eine andere Breite oder Höhe braucht als die anderen(Opera...) für ein Div-Feld oder geht das nicht?

Wird normalerweise nicht alles automatisch vergrößert, wenn es nicht passt? Es zu verhindern, wäre ein aktivierter Overflow (meine ich zu denken/wissen *gg*).

"!important" ist dem IE nicht bekannt? Echt nicht - also ich hab da bisher aber keine Probleme mit gehabt.

Also in SelfHTML steht, dass der Browser entscheidet was mit zu großen Inhalten passiert. Von einem Standard steht nichts drin..

@Mays: Hab mir schon fast gedacht, dass du gar keine Tabelle hast. Wenn es ein größeres Problem ist, solltest du am besten mal den HTML-Code reinschreiben.

Ein Browser haben für jedes Objekt einen "Standard" definiert, beim Firefox kann den fast jeder einsehen, wenn er sich mal ein bisschen in den Dateien einliest

Diese Standards sind eben nicht bei jedem Browser 100% genau, sonst gäbe es ja nicht die Darstellungsprobleme - ausgenommen derer, das es nicht unterstützt wird.

Ein Beispiel wäre die Standarddarstellung einer Tabelle - ein optischer (Rahmen)Unterschied zwischen dem IE und dem FF.

Ich meinte eher einen Standard der für alle gilt