zentrieren und positionieren

[dkdenz]

( Browserkompatibilitätsabchecken das hab ich ja so was von satt ...)

Da sagst Du was...

[bine]

also hier mal ein Link zu meiner Testseite.
Die problematischen Stellen sind im content beschrieben.
Ich muß jetzt erst nochmal weg, komm aber später zum weiteren ausprobieren zurück.
http://www.people.freenet.de/binenkorb/test/index3.html

[planet4]

3. Wie man sieht arbeitet bei mir auch text-align:center nicht mit position:absolute zusammen. Der Salino sollte in der Mitte sein. Bei der Überschrift hats noch geklappt mit text-align:center weil es sich da halt auch um Text handelt.

neeneenee... das liegt nicht daran, das es ein Text ist. wenn du das <div>, in dem dein Salino ( ) liegt auf width:100% setzt, dann geht's.
umgekehrt: wenn du das <div> von deiner Überschrift auf z.Bsp. 400px setzt, steht's links...

planet4.

[ZeitGeist]

mmm die hintergrundfarbe kommt mir bekannt vor

die Höhe des Divs ist schon so groß wie der Anzeigebereich, allerdings wurde das div nach unten verschoben. Hatte ich auch schon mit zu kämpfen. weiß jetzt nicht ob das nen Browser-bug ist oder ob das so gewollt ist. tippe auf die falsche Auswertreihenfolge

[planet4]

... und mit der linie is mir gerad was aufgefallen: du hast in "position" einen Schreibfehler, da
fehlt ein "i", deshalb geht's nicht

planet4.

[RoyalKnight]

@bine:
@1: Wie wärs mit:

.ueber	{
  position:absolute;
  top:20px;
  width:100%;
  height:50px;
  text-align:center;
  font-family:'Arial';
  font-size:24px;
  font-weight:normal;
  background-color:#ffffff;
  border-top:1px solid #83192D;
  border-bottom:1px solid #83192D;
  z-index:30;
[EDIT]  vertical-align:middle;
  line-height:50px;[/EDIT]
}

@2: Weiß nicht was du meinst...
@3: Du musst die div auch width:100%; und text-align: center; setzten
@4: Nix zu sagen
@5: Weil die höhe des Browserfensters hergenommen wird! und wenn das 500px hoch ist, dann wird die Tabelle auch 500px hoch, am besten ist du gibst da nichts an, denn wenn Text drinnensteht, wird das Layer automatisch verlängert
@6: Ich weiß nicht was du meinst (Was ist ein IE )

[EDIT]Hab nun [EDIT][/EDIT] anstelle von color genommen im html-Code, weil Farbe geht nicht.[/EDIT]

[dipser]

Was für ein Gewurschtel mit div's und absoluten Positionierungen. Irgendwie zum Abgewöhnen.

bine, wenn man eine Seite gestaltet sollte man etwas Grundlegendes nicht vergessen, der HTML Quelltext ist wichtiger als das Layout. Auch wenn diese Seiet nur ein Test darstellt, du brauchst kein div für das Bild oder für eine Linie, dafür gibt es HTML, welches du dann später ändern kannst. Die Regel lautet also, erst den HTML Quelltext und dann das Muster hinzufügen. Dann biste schön dynamisch und kannst deine Seite anhand deiner CSS-Datei immer wieder anders gestalten.

bine, in der horizontalen etwas mit CSS auszurichten würde ich erst garnicht anfangen. Zumindest ist die Zeit dafür noch nicht gekommen, wer weiss ob sie jemals kommt, weil HTML schliesslich etwas dynmiasches und nichts statisches ist. Überlege dir lieber, wie du eine Seite gestalten kannst, die dynamisch nach unten erweiterbar ist. Und warum willst du dich überhaupt unbedingt so mit der Höhe festlegen? Was macht derjenige, der einen Minibildschirm hat und nur noch 5px horizontal zu sehen bekommt?

Überdenke das mal. Vielleicht hilfts dir auf andere Ideen zu kommen, das haben schon ganz andere geschafft. Sieh dir einfach noch ein paar Beispiele an. Du musst halt umdenken, aber das war dir ja von vornherein klar.

Tschau

[bine]

Oh je, danke @Planet, ist ja auch logisch, wenn man kein width angibt, gibts auch nix woran die Zentrierung sich orientieren kann.
und nochmal oh je wegen dem Schreibfehler bei position.

@ZeitGeist. Jups, diese Testseite ist nach der Fummelei an deiner Seite entstanden, schöne Farbkombi, deshalb die couleur. (hab mal die Farben geändert

@dipser: jo das wars mit dem vertikal zentrieren.

@Royal: vertical-align:middle siehe Überschrift geht leider nicht so wie ich das geschrieben hab.

dipser

HTML Quelltext

damit meinst du Tabellen?

dipser

in der horizontalen etwas mit CSS auszurichten würde ich erst garnicht anfangen.

Wenn ich etwas horizontal im Verhältnis zum Browserfenster zentriere, dann ist das doch dynamisch. Egal wie groß das Fenster ist, es ist immer in der Mitte.

dipser

Und warum willst du dich überhaupt unbedingt so mit der Höhe festlegen?

Ich will mich gar nicht mit der Höhe festlegen, sondern auf jeder Seite den Contentbereich erstmal bis unten haben, egal wie kurz der Inhalt ist. Also wenn ich den content Bereich immer mindestens bis unten zum Fensterende reichen lasse, dann ists auch dynamisch und verlängert sich wenn der Inhalt länger wird.

dipser

Du musst halt umdenken, aber das war dir ja von vornherein klar.

Na ja, genau deshalb probier ich den ganzen Krümelkram ja hier aus. hm, wie mach ich den sonst ein tabellenloses Layout wenn nicht mit divs?

dipser

Sieh dir einfach noch ein paar Beispiele an.

Du meinst ich soll hier nicht so blöd fragen und falschen Quelltext veröffentlichen sondern lieber alleine weiterprobieren?

Also es haut nach wie vor nicht so recht hin, weder browserübergreifend noch überhaupt. Nu wird der *confused* Salino alias Raute gar nicht mehr angezeigt. Im IE gings wenigstens in der offline-Vorschau.
http://www.people.freenet.de/binenkorb/test/index4.html

OK OK OK ich schau ja auch alleine weiter

[RoyalKnight]

@Royal: vertical-align:middle siehe Überschrift geht leider nicht so wie ich das geschrieben hab.

Ja weiß ich - ich hab ja nicht nur vertical-align:middle; geschrieben oder?
Lies mal genau - da ist noch eine Zeile:

vertical-align:middle;
line-height:50px;

[dkdenz]

bine, wenn man eine Seite gestaltet sollte man etwas Grundlegendes nicht vergessen, der HTML Quelltext ist wichtiger als das Layout. Auch wenn diese Seiet nur ein Test darstellt, du brauchst kein div für das Bild oder für eine Linie, dafür gibt es HTML, welches du dann später ändern kannst. Die Regel lautet also, erst den HTML Quelltext und dann das Muster hinzufügen. Dann biste schön dynamisch und kannst deine Seite anhand deiner CSS-Datei immer wieder anders gestalten.

Aaaalso, dipser, seit wann ist HTML dynamisch?
Inhalt und Optik wird zukünftig getrennt, jedenfalls wenn es nach dem W3C geht.
Aber vielleicht haben die ja vergessen, Dich zu fragen.
Auch wird es zukünftig nicht mehr HTML sein, welches relevant ist, sondern XHTML.

bine, in der horizontalen etwas mit CSS auszurichten würde ich erst garnicht anfangen. Zumindest ist die Zeit dafür noch nicht gekommen, wer weiss ob sie jemals kommt, weil HTML schliesslich etwas dynmiasches und nichts statisches ist..

Mit CSS kann man durchaus Objekte horizontal ausrichten und die meißten Browser interpretieren das auch, wenn man regelkonform handelt.
Wenn Du das nicht willst, ist das Dein Ding.
Wenn aber hier jemand nach einem Lösungsvorschlag sucht,
ist es sicher nicht der richtige Weg, diesem Jemand das ausreden zu wollen.
Und nochmal: HTML ist absolut nix dynamisches.
Es ist "nur" eine Auszeichnungssprache...
Mach Dich mal schlau...
Ebenfalls sind diese Mozilla-Spezifischen CSS Blödsinn...
Genauso wie die vom IE.
Entweder man will einen Standart einführen, oder jeder kocht sein eigenes Süppchen...
Ich habe fertig.............................................................................................. ..................

[Comet]

naja dkdenz das ist Ansichtssache,

Die Sache mit dynamik, naja, in gewisser Weise hat dipser schon recht, wenn man css und js mit ins Spiel bringt dann wird die Seite selbst dynamisch, man kann da Sachen rumbewegen, styles wechseln, und, und, viel mehr dynamik wirds da wohl vorerst nicht geben, genausowenig mit XHTML.

[bine]

OK stimmt @R.K. line-height hatt ich glatt ignoriert das funzt dann schonmal.

[dipser]

Tut mir Leid bine ich habe "horizontal" mit "vertikal" vertauscht. Denn du hattest für das Inhaltsfenster die Höhe von 100% angegeben. Und vorhin habe ich mich dann verschreibselt.

* Wieso soll ich mit HTML Tabellen meinen? HTML ist der Überbegriff. Was ich viel mehr meinte ist das sinnlose herumgeschmeisse mit div's. Du verwendest zum Beispiel für ein zentriertes Bild <div><img src="" alt="" class="salmi"/></div> und ich meine man kann auf das div verzichten, durch Ausrichtung vom Element body -> text-align:center; und den Rest könnte man dann wie folgt definieren:

img.salmi {
	position:absolute;
	top:125px;
	height:50px;
	width:33px;
}

Muss man aber nicht unbeedingt. Ok ich habe das mal so geschrieben wie ich es für relativ schnell hinkritzeln konnte. Da sind zwar sinnfreie divs drin, aber was soll man machen bei so einem Layout.
[edit]Ups Link vergessen: http://devone.de/trash/bine [/edit]


> Na ja, genau deshalb probier ich den ganzen Krümelkram ja hier aus. hm, wie mach ich den sonst ein tabellenloses Layout wenn nicht mit divs?
Schon mit div, aber halt nur da wo man auf die Semantik keine Rücksicht nehmen muss.

> Du meinst ich soll hier nicht so blöd fragen und falschen Quelltext veröffentlichen sondern lieber alleine weiterprobieren?
Keine Fall, nur damit du dir anregungen holst, wie andere HTML-CSS Seiten erstellen. Denn ein Unterschied besteht ja darin, haste ja gemerkt.

Tschau, mit der Hoffnung nicht wieder was falsch Vertextet zu haben.

[bine]

Ach wo dipser macht ja nix horizontal mit vertikal vertauschen passiert halt.
und mit meinen kommste ja klar.
Ich weiß doch wie du es meinst.
Also heute bin ich doch etwas müdegelabert, aber morgen schau ich alles in Ruhe an und kümmer mich auch um die Semantik.
Heut bin ich nur noch müde und unernst *g
Danke für deine Hilfe. Auch an die Anderen.

n8

tolle url trash/bine das werd ich mir merken *gg*

[dipser]

Aaaalso, dipser, seit wann ist HTML dynamisch?
Inhalt und Optik wird zukünftig getrennt, jedenfalls wenn es nach dem W3C geht.
Auch wird es zukünftig nicht mehr HTML sein, welches relevant ist, sondern XHTML.

Sicher du hast recht, HTML nur in Verbindung mit CSS ist dynamisch. HTML alleine nicht. Aber etwas hast du leider vergessen, nicht nur "zukünftig" sollte diese Trennung stattfinden, sie hätte es auch schon in der Vergangenheit (seit 96) sollen, was jedoch aus diversen Gründen nicht eingehalten wurde.

Ebenfalls sind diese Mozilla-Spezifischen CSS Blödsinn...
Genauso wie die vom IE.
Entweder man will einen Standart einführen, oder jeder kocht sein eigenes Süppchen...
Ich habe fertig.............................................................................................. ..................

Darüber denke ich anders, denn eine Seite muss nicht unbedingt in jedem Brauser gleich aussehen. Das wird wahrscheinlich der Grund sein, warum wir verschiedene Meinungen haben. Nach meiner Meinung dürfen andere Brauser vom Inhalt nur _nicht_ ausgeschlossen werden. Und dies werden sie durch beispielsweise abgerundete Ecken nicht. Des Weiteren, warum sollten die Brauserherrsteller alles in die Hand der Standardisierer legen, wenn sie auch gute Ideen haben, können sie diese einbringen, dies tut der IE, Mozilla oder auch Opera. Einige Elemente sind dadurch schon zum Standard geworden. Ich finde sie Ok, solange sie keine bestehenden Standards zerstören. Wenn du sie nicht benutzen möchtest, kann ich es dir nicht verübeln.

Tschüssi