zentrieren und positionieren

[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

 

[dkdenz]

Ok, ok, heute morgen nur sanfte Töne...
Irgendwie hat jeder einen Teil vom Recht.
Es ist eben einfach nur nervig, seine Seiten konform und X-Browserfähig zu machen.
Ich habe 5 Browser installiert und bin ständig am Switchen.
Habe ich es für den einen hingekriegt, meckert der andere...
Wenn die beim W3C das wollen,
sollten sie auch Einfluß auf die Hersteller nehmen und auch selber etwas flexibler werden.

Einen wunderschönen Tag wünsche ich noch.

 

[RoyalKnight]

Wenn die beim W3C das wollen,
sollten sie auch Einfluß auf die Hersteller nehmen und auch selber etwas flexibler werden.

Das W3C gibt die Standards vor, nicht die Browserhersteller. Wenn sich die Browserhersteller nicht daran halten können, dann ab in die Tonne damit!

Hier mal die Standards, damit jeder weiß woran er sich halten muss und was alles zur Verfügung steht:
http://www.w3.org/TR/xhtml11/

 

[dkdenz]

Das W3C gibt die Standards vor, nicht die Browserhersteller. Wenn sich die Browserhersteller nicht daran halten können, dann ab in die Tonne damit!]

Habe ich was anderes geschrieben???

 

[RoyalKnight]

Habe ich was anderes geschrieben???

Ja und ich habe es oben gequotet.
So wie du das geschrieben hast wäre das vergleichbar damit, wenn jeder Autohersteller seine Motoren für verschiedene Treibstoffarten auslegen würde, die von den Lieferanten aber gar nicht abgedeckt würden. Was bringt dir ein wahnsinns Motor, wenn es keinen passenden Treibstoff mit der hohen Klopffestigkeit gibt? Dann kannst du den Motor auch in die Tonne kloppen - da haben sich die Hersteller der Motoren und nicht die Raffinerien darum zu kümmern, dass die Standards eingehalten werden. Und genauso wenig muss sich das W3C darum kümmern.

 

[dkdenz]

sollten sie auch Einfluß auf die Hersteller nehmen

Ich finde, sie sollten schon Einfluß nehmen.
Dein Vergleich hinkt etwas.
Wenn eine Institution eine Vorgabe liefert und die wird dann nicht eingehalten,
dann sollte sich diese Institution auch darum bemühen, dass diese Vorgaben eingehalten werden.
Meinetwegen dadurch, dass sie öffentlich propagieren, gewisse Clientsoftware zu meiden.
Oder sich mit den Herstellern an einen Tisch setzen und das verhandeln.

Aber das ist wieder mal ein Thema, an dem man sich totquatschen kann und ich will noch 'ne Weile leben...

 

[RoyalKnight]

Dein Vergleich hinkt etwas.

Nö
Wenn dein Fahrzeug deine Seiten überhaupt nicht richtig anzeigt, also überhaupt nicht konform ist, wird dein Fahrzeug nicht gut fahren, deshalb wird der Benutzer es schnellstmöglich wechseln.
Wenn dein Fahrzeug nur zum Teil Probleme aufweist, beispielsweise bei neuen Standards, die meist noch nicht in die Fahrzeugarchitektur miteingearbeitet wruden, dann wird es dem Benutzer bald zu blöde werden und er auf ein neueres Fahrzeug updaten, oder die Marke wechseln.
Halten sich die Hersteller an die Vorgaben, wird der Benutzer zufrieden sein und lange damit fahren...

Sowas könnte man wohl auch unter natürlicher Auslese laut Darwin zusammenfassen...

 

[bine]

Uiui ich wußte ja das würd ne frickelei geben. Aber auch wenn ich ne neue Seite jetzt eher nicht nur mit divs gestalten würde, ausloten werd ich das Ganze doch weiter.

Übrigens mal so allgemein, mir ist erstmal das Layout und Design im Context zum Inhalt und Funktion wichtig. Mit dem Code soll das gefälligst dann so werden wie ich es mir vorstelle. Naürlich nicht mit dem Kopf durch die Wand aber doch so nach meinen Vorstellungen.
Da lass ich mich absolut ungern einschränken wenn es heißt ich soll nicht versuchen etwas horizontal zu zentrieren. Das erachte ich als mindest Standard.

Auf die Browsercheckung hab ich ebenfalls keine Lust. Leidiges Thema Aber das gehört wohl zum ausloten dann wieder dazu.

So ein paar Fragen:

Warum hast du vor body noch html im style stehen? Heißt das, das sich alles was in diesem Style definiert ist sich auf alles bezieht was innerhalb <html> und </html> steht?
Ist das nicht sowieso so das alles innerhalb body zu finden ist?

OK ich war auf dem Trip auch die Linie per CSS darzustellen und zu positionieren.
Als image mit repeat-x ist auch geschickt und ebenfalls dynamisch.
Dein linien-image ist 80px hoch ich krieg es so nicht hin die Raute vertikal mittig auf die Linie zu setzen. Egal probier ich aus, evtl. ne andere höhe des img.

Die Überschrift hab ich mittlerweile genauso mit text-align:center und line-height gemacht. Nehm das einfach mal so hin, das es hier nicht zur Orientierung fürs zentrieren reicht wenn man height:50px schreibt.

Die Art und Weise über eine kleine Grafik den Hintergrund darzustellen OK aber ist wohl egal ob man das so oder mit background-color macht oder?

Da bin ich noch nicht so recht durchgestiegen. Warum hast du erst ein div.text gemacht mit margin:0px auto; und dann dies extra div.text * { margin:10px; } Was bedeutet denn der * ?
Was ist der Unterschied dazu wenn ich einfach im div.text margin:10px; verwende? OK in deinem Beispiel verrutscht dann alles. Dafür hast du den Content immer bis unten zum Fensterrand.

Das die Listenpunkte negativ vor dem margin:10px stehen ist ja unschön.

Also einiges muß ich noch näher durchleuchten. Komisch nicht, wie schwierig das doch im einzelnen erscheint, dabei ist es eigentlich ein ganz einfacher Seitenaufbau.

 

[dipser]

Uiui ich wußte ja das würd ne frickelei geben. Aber auch wenn ich ne neue Seite jetzt eher nicht nur mit divs gestalten würde, ausloten werd ich das Ganze doch weiter.

Bei so einem Design schon etwas.

Übrigens mal so allgemein, mir ist erstmal das Layout und Design im Context zum Inhalt und Funktion wichtig. Mit dem Code soll das gefälligst dann so werden wie ich es mir vorstelle. Naürlich nicht mit dem Kopf durch die Wand aber doch so nach meinen Vorstellungen.

Was habe ich falsch gemacht (devone.de/trash/bine/)?

Da lass ich mich absolut ungern einschränken wenn es heißt ich soll nicht versuchen etwas horizontal zu zentrieren. Das erachte ich als mindest Standard.

Ich hatte mich verschrieben, aber wenn ich das so überdenke ist es für dich möglicherweise eine Einschränkung, aber nicht für denjenigen, der die Seite betrachtet. Aber ok, horizontal akzeptiert man im Allgemeinen noch, es sei denn jemand nimmt die Breite wie 1024 oder noch größer, dass sieht man dann nicht mehr so gerne. Würde dich sicher auch stören.

----

Warum hast du vor body noch html im style stehen? Heißt das, das sich alles was in diesem Style definiert ist sich auf alles bezieht was innerhalb <html> und </html> steht?
Ist das nicht sowieso so das alles innerhalb body zu finden ist?

Damit das height:100%; in allen Brausern funktioniert.

OK ich war auf dem Trip auch die Linie per CSS darzustellen und zu positionieren.
Als image mit repeat-x ist auch geschickt und ebenfalls dynamisch.
Dein linien-image ist 80px hoch ich krieg es so nicht hin die Raute vertikal mittig auf die Linie zu setzen. Egal probier ich aus, evtl. ne andere höhe des img.

Lösung:

div.elem2 img {
	position:relative;
	top:15px;
}

Die Art und Weise über eine kleine Grafik den Hintergrund darzustellen OK aber ist wohl egal ob man das so oder mit background-color macht oder?

Da hast du recht.

Da bin ich noch nicht so recht durchgestiegen. Warum hast du erst ein div.text gemacht mit margin:0px auto; und dann dies extra div.text * { margin:10px; } Was bedeutet denn der * ?
Was ist der Unterschied dazu wenn ich einfach im div.text margin:10px; verwende? OK in deinem Beispiel verrutscht dann alles. Dafür hast du den Content immer bis unten zum Fensterrand.

- Mit dem "auto" werden automatisch die Abstände berechnet und ist deswegen mittig.
- Du wolltest es doch bis unten, hattest du das nicht gesagt?!

Das die Listenpunkte negativ vor dem margin:10px stehen ist ja unschön.

Lege in "div.text *" noch padding:0px 20px; fest, dann sollte es gehen.


Ich hoffe dir ist jetzt einiges klarer geworden.
Tschau

 

[bine]

Ja, danke das du dir die Zeit genommen hast, mir ist schon einiges klarer geworden. Muß halt noch bisschen rumfummeln. Auf manche Sachen kommt man halt nicht einfach so.

Nix hast du falsch gemacht bei devone/trash/bine
Hab mich nur lustig gemacht heißt trash nicht Müll. Du schiebst den Ordner bine einfach in den Müllbereich

 

[RoyalKnight]

Nix hast du falsch gemacht bei devone/trash/bine
Hab mich nur lustig gemacht heißt trash nicht Müll. Du schiebst den Ordner bine einfach in den Müllbereich

Wenn du wüsstest was der noch alles so rumliegen hat dort
trash = Müll, Plunder,... - ist doch mehr oder weniger Plunder, Spider fängt ja nix mehr an damit...