• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Website Darstellung

T

the_zoker_09

Mitglied
Hallo zusammen,

Ich habe ein Problem mit meiner Website.
Ich sie hier durchchecken lassen:
[Invalid] Markup Validation of http://www.crystalblood.de/ - W3C Markup Validator

Wie ihr sehen könnt, gibt es mehrere Probleme.

  1. Verlangt er eine Doctype:
    Das Problem ist nur, wenn ich ein Doctyp einsetzte, sieht die Seite nicht mehr so aus, wie sie sollte.
    Seite mit Doctype: CrystalBlood
    Seite ohne Doctype: CrystalBlood
    Die Seite soll natürlich aussehen, wie die Seite ohne Doctype, nur eben mit Doctype :shock:
    Habe ich das falsche Doctype verwendet? Wenn ja, welches muss ich verwenden?
  2. Er bemängelt, dass es kein Attribut "oncontextmenu" gibt.
    Das habe ich gemacht, damit man nicht rechts klicken kann.
  3. Ausserdem bemängelt er mir die Höhe der Tabelle:
    "there is no attribute height"
  4. Die letzten Fehler braucht ihr nicht zu betrachen.
    Da ist ihm einfach nur der Link zu unserem Teamspeak Server nicht recht. Warum auch immer :D

Mir wäre wichtig, dass die Fehler 1-3 behoben werden.
Könnt ihr mir sagen, was ich dafür ändern muss?

Und ich habe noch ein Anzeige Problem.
Im Firefox sieht die Seite aus, wie sie soll: Firefox 7.0 / Windows XP
In Google Chrome hingegen ganz anders (bzw. falsch): Chrome 11.0.696.65 / Windows Vista (was man auf dem Screenshot nicht sieht: Die Symbole sind alle untereinander angeordnet. Also unter dem das man sieht, kommen die anderen)

Was ist da falsch?

Vielen Dank schon mal
the_zoker_09
 
Zuletzt bearbeitet:
zu 1.:
Erklärend vorweg: Ohne Doctype macht jeder Browser, was er will. Es ist also praktisch nicht voraussagbar, wie es in Browser B aussieht, wenn Browser A es richtig anzeigt. Ein Doctype sagt jedem Browser gleichermaßen, welchen Standart er darstellen soll. Hier gibt es zwar auch gewisse Interpretationsabweichungen der einzelnen Browser, aber die sind wenigstens berechenbar.
Zum eigentlichen Problem: Ohne Doctype ist beinahe jeder Browser in der Lage, die aktuelle OS-seitige Information zur Größe des Viewports als Orientierungspunkt für eine prozentuale Höhe zu nutzen. Der W3C-Standart geht aber nicht davon aus, dass eine solche Information zwangsläufig zur Verfügung steht.
darum ist es wichtig, die Äußeren Grenzen zu definieren, damit eine prozentuale Höhenangabe umgesetzt werden kann.
Hierzu gibst du per CSS den Elterelementen html und body die Eigenschaften width und height 100%, damit die nachfolgenden Childs auch wissen, woran sich die 100% orientieren müssen.

zu 2.:
Rechtsklicksperren sind ein sinnloses Unterfangen! Entferne diesen unnützen Ballast und damit das Problem.

zu 3.:
siehe 1.

EDIT/Zusatzbemerkung:
Es ist fast schon als müßig zu bezeichnen, welche Gedanken du dir über Validität machst. Dein gesamter Aufbau als Tabellenlayout entspricht nicht den Standarts. Tabellen sind für tabellarische Daten. Für sonst nichts!
 
Zuletzt bearbeitet:
Also ich habe jetzt per CSS den head und den body Bereich auf 100% gesetzt.
Nur irgendwie funktioniert es bei mir nicht.

Code: 
head {
    width:95%;
    height:95%;
}

body { 
    background-color:#000;
    font-weight:bold;
    font-family:Arial;
    font-size:120%; 
    width:95%;
    height:95%;
}

Ich hab die Werte nicht auf 100% gesetzt, da sonst eine vertikale und horizontale Scrollleiste erscheinen.

Was ist noch falsch?

Und wie soll ich es den sonst machen?
Ich möchte eine dynamische Seite, die genau so aussieht.

Vielen Dank
the_zoker_09
 
Schau dir dieses Beispiel an, dass ich gerade für dich gemacht habe. Sieh in den Quelltext.
100% Hhe
Die Scrollbalken erscheinen, weil html und body noch nicht margin und padding auf 0 gesetzt wurden.
In deinem Code oben hast du übrigens den <head> bearbeitet, statt <html>
das kann nicht funktionieren
 
Also ich habe die CSS jetzt nochmal überarbeitet:

Code: 
html{
    height:100%;
    padding:0;
    margin:0;
}

body { 
    background-color:#000;
    font-weight:bold;
    font-family:Arial;
    font-size:120%; 
    height:100%;
    padding:0;
    margin:0;
}

-> www.crystalblood.de

edit: Problem hat sich gelöst. Hatte noch ein <center></center> drin.

Und nun zu der alternativen Gestaltung für die Homepage.
Was würdet ihr mir empfehlen wie ich es machen soll?
Bitte konkrete Vorschläge :D

Vielen Dank
the_zoker_09
 
Zuletzt bearbeitet:
Das sieht schon besser aus.
Als nächstes würde ich erst mal auf den Javascript-Teil komplett verzichten und das HTML-Grundgerüst auf das Notwendigste beschränken.
Dazu fliegt im Header alles raus was nicht benötigt wird:

Ergebnis:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="iso-8859-1">
    <title>CrystalBlood</title>
    <meta name="description" content="CrystalBlood - Der MultiGaming Clan.">

<style type="text/css">
Den Doctype kannst auf HTML beschränken
Von den Metaangaben brauchen wir nur den Zeichensatz, damit der Browser weiss, dass wir nicht chinesisch schreiben.
Den Titel, der ist unverzichtbar.
Den Description-Tag für die Beschreibung in Suchmaschinen.
Danach kommen die Styleangaben in CSS, die wir später in eine Datei auslagern können.

Anschliessend wird der Rest ab dem Body-Tag bearbeitet. Dazu ersetzt du alle Tabellen durch Div mit einer ID.
Du hast dann also 3 Div-Container mit den Links darin.
Der Erste Div sieht beispielsweise so aus:
HTML: 
<body> 
    <div id=left>
        <a class="link5" href="ts3server://84.23.77.113?port=9992&amp;password=Drölf" title="Teamspeak"> </a>
    </div>

Das heisst, du hast anschliessend 3 Divs die wir nebeneinander anordnen und dazu wird dann wieder CSS verwendet.
Das Erste Div wird mit float:left nach links geschoben und erhält die Breite von 33 %.
Das Zweite Div wird mit float:right nach rechts geschoben und erhält auch die Breite 33 %.
Das Dritte Div erhält nichts und schiebt sich in den verbliebenen Rest der Mitte.

Wir haben also jetzt schon mal eine dynamische Seite die sich der Breite des Browsers anpasst.

Weisst du wie es weiter geht?
 
Zuletzt bearbeitet von einem Moderator:
Der Javascript-Teil ist dazu da, um die Bilder "vorzuladen".
Ich hatte nämlich das Problem, dass wenn ich das erste mal auf ein Bild geklickt habe, anstatt dem mousover Bild, gar nichts angezeigt wurde.
Erst beim zweiten mal mouseover, wurde das Bild angezeigt.

Ok ich ändere mal alle so wie du es gesagt hast und stelle es hier rein:
www.crystalblood.de/index2.php

edit:
Also ich habe jetzt alle geändert.
Nur leider schaut das ganze noch nicht so aus, wie es sollte.
Schaus dir mal an www.crystalblood.de/index2.php
 
Zuletzt bearbeitet:
Nein. Es ist das Zeichen # das man im CSS dem Element hinzufügt um es anzusprechen. Bei class nimmt man den Punkt im CSS.
Es ist wie im anderen Post von dir. Dir fehlen die Grundlagen, ohne die wirst du immer raten warum dies oder das nicht geht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben