Eure Webseiten #4

**Drakes** · 14.01.2007 18:08

Zitat von drunken monkey

Das Problem hatte ich auch schon. Am besten ist, du verwendest ü, etc., da geht's auf jeden Fall. ^^ Und wenn du php verwendest geht das eh ganz einfach mit
$output = htmlentities ($output);
Aber heißt es nicht ohnehin "Benutzername"? o_O

Würds da irgend ne Liste geben?

Zitat von drunken monkey

Zum Design: Hm, nicht schlecht. ^^ Sogar valide, toll!

Ich würde allerdings vielleicht noch dünne Ränder an die ganzen farbigen Flächen machen.

Irgendwie, kann ich mir das nicht vorstellen. Meinst du irgendwelche spezielle Farben, z.B. überall einfach ein bischen heller oder so?
Wieso sind die Boxen im IE so "falsch" interpretiert? Das CSS wäre:

Code:

p {
  color: black;
  background-color: transparent;
  text-align: left;
  }
p.warnung {
  color: red;
  background-color: white;
}

body { 
  font: 80%/170% Verdana, sans-serif;
}

h1 {
  font: small-caps bold 1.6em Georgia, "Times New Roman", serif;
  font-size: xx-large;
}

code { font-family: "Courier New", Courier, monospace; }

E {
	border-style: none;
	}

div {
		position: absolute;
		padding: 0em;
		border: none;
		color: black;
		margin: 0 0 0 0;
    }
div#box1 { /* header */
		top: 0px;
		left: 150px;
		width: 830px;
		height: 100px;
		}
div#box2 { /* box unter dem header */
		background-color: RGB(90,131,214);
		top: 100px;
		left: 150px;
		width: 830px;
		height: 40px;		
		}
div#box3 { /* box- rahmen von inhalt */
		background-color: RGB(213,237,255);
		top: 140px;
		left: 150px;
		width: 600px;
		min-height: 440px;
		}
div#box4 { /* inhalts-box  */
		background-color: RGB(255,255,255);
		top: 160px;
		left: 170px;
		width: 530px;
		min-height: 370px;
		padding: 15px;
		}
div#box5 { /* box-rahmen für login + login box */
		background-color: RGB(180,200,255);
		top: 140px;
		left: 750px;
		width: 180px;
		height: 420px;
		padding-top: 20px;
		padding-left: 50px;
		}

**drunken monkey** · 14.01.2007 18:23

Zitat von Drakes

Würds da irgend ne Liste geben?

Klar.

Zitat

Irgendwie, kann ich mir das nicht vorstellen. Meinst du irgendwelche spezielle Farben, z.B. überall einfach ein bischen heller oder so?

Nein, ich meine einfach, dass die ganzen Flächen zB mit schwarzen Linien umrandet sind.

Zitat

Wieso sind die Boxen im IE so "falsch" interpretiert? Das CSS wäre:

Weil der IE Mist ist. ^^ Damit bei dem alles so funktioniert, wie du willst, brauchst du wahrscheinlich ein zweites Stylesheet nur für IE, das du dann per Conditional Comment einbindest.

**mitaki** · 14.01.2007 19:06

Zitat

Was mach ich nun falsch?

Wenn du mit der header-Funktion arbeitest, muss dir bewusst sein, was das genau ist. Es handelt sich dabei um HTTP-Header, also Daten, die benötigt werden, damit Browser und Server miteinander Kommunizieren können.

Du hast header() nach einer Ausgabe von Zeichen verwendet, das bedeutet, die Browser-Server-Kommunikation ist bereits zu Ende.
header() kann nur verwendet werden, wenn noch kein Zeichen an den Browser gesendet wurde, d.h <?php muss das erste Zeichen sein, dass bei dir im Quelltext steht.

Zitat

Das Problem hatte ich auch schon. Am besten ist, du verwendest ü, etc., da geht's auf jeden Fall. ^^ Und wenn du php verwendest geht das eh ganz einfach mit
$output = htmlentities ($output);
Aber heißt es nicht ohnehin "Benutzername"? o_O

Möglich, allerdings empfiehlt das W3C, diese Umlaute auch in reinform Anzugeben. Und heutzutage spricht wirklich nichts mehr dagegen.

Zitat

Wieso sind die Boxen im IE so "falsch" interpretiert?

Der Internet Explorer hat einen so genannten Box-Modell-Bug, d.h. er berechnet die größe eines Elements falsch.
Seit v6 jedoch nur noch im Quirksmodus.
Der IE hat ab Version 6 auch einen Standardkonformen Modus, in dem er die Boxgröße richtig berechnet.
Um den standardkonformen Modus nutzen zu können musst du den Doctype mitsamt System-Identifyer angeben (das ist die URI, die zur DTD beim W3C zeigt).

Nachtrag

Ich sehe gerade, dass das nicht dein Problem war. Seltsam, das werde ich genauer anschauen!

Zitat

Würds da irgend ne Liste geben?

Du solltest nur die Zeichen < (<), > (>), " ("), & (&) und ' (&-#39; ohne "-", musste ich hier machen, damit das vB das nicht entfernt) maskieren, wenn du andere Zeichen brauchst, die in iso-8859-1 nicht enthalten sind, empfehle ich direkt utf-8 zu verwenden.

**Drakes** · 14.01.2007 19:42

Nun, ja, das verwirrte mich ein bischen, ich verwendete nämlich zuerst utf-8, dann hat es dort das ü richtig angezeigt, aber bei der Registrier-Seite falsch, und jetzt einfach umgekehrt

Sollte iso-8859-1 eben die Umlaute enthalten?

Wie bring ich den Quirk-modus weg? Ich hab den Identifyer doch angegeben?

**mitaki** · 14.01.2007 19:49

Zitat

Nun, ja, das verwirrte mich ein bischen, ich verwendete nämlich zuerst utf-8, dann hat es dort das ü richtig angezeigt, aber bei der Registrier-Seite falsch, und jetzt einfach umgekehrt Sollte iso-8859-1 eben die Umlaute enthalten?

Wenn du UTF-8 verwendest, musst du darauf achten, dass die Eingabe in deinen Editor auch als UTF-8 erfolgt. Da gibt es bestimmt irgendwo eine Möglichkeit das einzustellen.

Es stimmt zwar, dass Unicode und iso-8859-1 die Umlaute enthalten, aber an verscheidenen Positionen ihrer Zeichentabelle.
D.h. wenn du deinen Editor versehentlich nicht im UTF-8-Modus verwendest gibtst du äöü als ISO_x ein obwohl du utf-8 verwenden willst.
Das ist der einzige UTF-8 Nachteil, dass man alles als UTF-8 kodiert verwenden muss, aber sonst gibt es viele Vorteile.

Zitat

Wie bring ich den Quirk-modus weg?

Wie ich korregiert habe, das ist gar nicht der Fehler, den ich in Verdacht hatte. Du bist schon im standardkonformen Modus. Was genau den border-Fehler nun erzeugt ist mir leider noch unklar

Versuche bitte mal, das alternative Stylesheet nach der Referenz zum Standardstylesheet anzugeben.

**Drakes** · 14.01.2007 20:29

Ich hab jetzt das eine div-Element im anderen eingesetzt:

Code:

<div id="box3">
		<div id="box4">
              </div>
</div>

height hab ich im CSS auf auto gesetzt, und trotzdem wird die Box nicht richtig verlängert, wenn der Text länger ist, um das zu überprüfen hab ich auf der Hauptseite längeren Text eingefügt. Hier nochmal der Link.
Hab jetzt den Rahmen rum gemacht damit mans besser sieht.

**mitaki** · 14.01.2007 20:37

height ist dafür die falsche Eingenschaft. Für den gewünschten Effekt wäre overflow: auto; oder overflow-y: auto; richtig.

Allerdings, es tut mir sehr leid, dass ich das jetzt sagen muss, solltest du deine Seitenstruktur noch einmal überdenken.

Du arbeitest sehr stark mit absoluter Positionierung, ohne dir über die Folgen davon im klaren zu sein (ein klassischer Anfängerfehler).

Wenn du etwas absolut positionierst nimmst du das Element aus dem Elementenfluss, das bedeutet, dass das Positionierte Element keinen Einfluss mehr auf das Elternelement hat.
Das Problem ensteht meiner Meinung nach dadurch, dass du zwar mit gutem HTML und CSS arbeiten möchtest, aber leider noch in der Zeilen und Spaltenwelt der Tabellendesigns festhängst.
Mit CSS baut man keine Tabellen nach, man gestaltet den Inhalt.
CSS kann (noch) nicht alles was mit Tabellen möglich ist, aber andersrum ist das genauso! Gerade deshalb ist es wichtig, sich mit den vielen Möglichkeiten von CSS zu beschäftigen und die Vor- und Nachteile der Eigenschaften nicht zu übersehen.
Absolute Positionierung ist toll, aber auch gefährlich, weil sich das Prinzip in verschiedenen Situationen verschieden auswirkt.

Im SELFHTML Forum sagt man immer, man sollte zuerst an den Inhalt denken, dann an das Design. Mit CSS ist das sehr gut möglich.
Ich bin dir nicht böse oder will dich niedermachen, ich habe auch mal mit Tabellen gearbeitet. Seit dem habe ich allerdings viel gelernt. ich hoffe dir wird es auch so ergehen

**Drakes** · 14.01.2007 21:04

Zitat von mitaki

Ich bin dir nicht böse oder will dich niedermachen, ich habe auch mal mit Tabellen gearbeitet.

Ich bin der Dumme, der dieses Attribut im Toturial übersprungen hat.O

Du hilfst mir ja nur die ganze Zeit, dafür muss ich dir Dankbar sein.(auch drunken monkey)

Zitat von mitaki

Seit dem habe ich allerdings viel gelernt. ich hoffe dir wird es auch so ergehen

Ja, das hoff ich auch

Aber, was heisst das genau? Dass man mit CSS kein so positioniertes Design hinbekommt wie mit Tabellen? oder sollte man einfach nicht?

Edit: Auf was muss ich achten damit das Vaterelement dynamisch vergrössert wird? Darf es min-height bzw. min-width auch nicht enthalten?

**underdark** · 14.01.2007 21:16

Zitat von Drakes

Aber, was heisst das genau? Dass man mit CSS kein so positioniertes Design hinbekommt wie mit Tabellen? oder sollte man einfach nicht?

Zum Thema "Was ist mit CSS möglich": http://www.csszengarden.com/tr/deutsch/

**mitaki** · 14.01.2007 21:30

Zitat

Aber, was heisst das genau? Dass man mit CSS kein so positioniertes Design hinbekommt wie mit Tabellen? oder sollte man einfach nicht?

Mit CSS ist es nicht möglich, mehrspaltige Designs zu erstellen, bei denen z.B. alle "Spalten" gleich lang sind.
Es ist aber durchaus möglich mehrspaltige Designs zu erstellen, bei denen man Inhalt und Navigation und eventuelle Zweitnavigation als 3 Spalten darstellen kann. Bei deinem Design würden zwei absolut Positionierte Elemente genügen (eines für den Loginbereich, das andere für die W3C Icons, die du aber auch weglassen könntest, weil sie die Besucher meist nur verwirren :/).

Ein kurzer Überblick, wie ich die Seite strukturieren würde.

Titelbild in ein <h1>, mit passendem Alternativtext.
Navigationsleiste als <ul> Liste.
Ein <div> für den Inhalt mit position: relative; und rechts einem margin, border oder padding so breit wie die Loginleiste sein soll.
Ein Element, dass den Loginbereich enthält, innerhalb des genannten <div>s, absolut neben dem Inhalt positioniert.
Die Validierungsicons als Fußzeile, wenn du sie wirklich behalten möchtest.

Zitat

Zum Thema "Was ist mit CSS möglich": http://www.csszengarden.com/tr/deutsch/

Wobei ich Zen aber eher als Seite empfinde, auf der sich Designer austoben können. Welches dieser Designs könnte schon als echte Webseite durchgehen?

**Drakes** · 15.01.2007 18:50

Kann ich die <ul> Liste irgendwie auf einen Absatz setzen, ich hab jetzt schon ein paar Sachen verändert, aber die <ul> Liste hät ich lieber quer, wenn das geht.

Edit:
1. Juhuu 400 posts.
2. Muss geclosed werden.

Thema: Eure Webseiten #4

Themen-Optionen

Anzeige

Hybrid-Darstellung

Berechtigungen