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

W3C HTML, CSS und andere Probleme :)

Status
Für weitere Antworten geschlossen.

stoner

Neues Mitglied
Hallo,

ich denke es gibt bestimmt schon tausende von diesen posts, wie ich ihn hier gerade mal machen möchte, aber ich würde mich freuen, wenn ihr mir die Fragen troptzdem beanwortet ud vlt individuell einmal mit BEgrundung antwortet :)

Alsooo...

Ich habe eine kleine Webseite gemacht, für den "mehr oder weniger" privaten Gebrauch, um einige Themen auf einmal für mich zu intensivieren...

http://kifferstuff.bplaced.net/webseite

Zum einen Versuch ich hier, meine CSS Kenntnisse zu festigen, zum andern möchte ich das mit dem DIV Design in der praxis hinbekommen und das auch noch w3c konform :)

Ich poste hier mal meinen Code:

index.html
-----
HTML:
<html>
<head>
<title>
</title>
<link href="stylesheet.css" type=text/css rel=stylesheet> 


<script language="JavaScript" type="text/javascript" src="popup.js"></script>

</head>

<body text="#FFFFFF" bgcolor="#000000">

<div class="top">
</div>


<div class="menu">
<table align="center" height="200">
<tr><td>
<b><a href="login.html" target="iframe">Login</a></b>
</td>
</tr>
<tr><td>
<b><a href="reg.html" target="iframe">Registrierung</a></b>
</td>
</tr>
<tr><td>
<b>Katalog</b>
</td>
</tr>


<tr><td>
<b><a href="kontakt.html" target="iframe">Kontakt</a></b>
</td>
</tr>
<tr><td>
<b><a href="start.html" target="iframe" onClick="popup()">Impressum</a></b>
</td>
</tr>
</table>

</div>

<div class="body">

<div class="frame">
<iframe align="left" scrolling="auto" src="start.html"  bgcolor=" #e82c2d" marginwidth="0" marginheight="0" frameborder="0" height="300" width="400"  name="iframe">
Dein Brwoser unterstützt keien Iframes!
</iframe>

</div>





</body>
</html>

nun habe ich hier soo einige Probleme...

Zum ersten, würde ich gerne wissen, welche HTML Attribute ich noch in eine externe stylsheet dateien auslagern kann, zum andern, wie ich das alles ncoh w3c konformer machen kann, denn ich habe das problem, dass die seite mal im internet explorer ordentlcih angezeigt wird und mal nicht, im Opera, sieht das alles ordentlich aus und in firefox, habe ich noch kein praxistest gemacht..

mir wäre es wichtig, dass es wirklich in allen 3 browsern ordentlich angezeigt wird, ud ich will auf keine fall auf opera verzichten, da ich als Opera User nur all zu gut weiß, dass viele Webmaster meinen, sie müssten die 2% an Opera User nicht berücksichtigen...

hier einmal mein stylsheet:
-----

Code:
@charset "utf-8";
/* CSS Document */

.main {
   
    border: 1px dashed #b9821a;
    
    }

.top	{

background-image:url(header.jpg);
background-repeat:no-repeat
background-color: #deb887;
font:Arial, Helvetica, sans-serif;
background-repeat:no-repeat;
height:165px;


}

.menu	{

background-image:url(menu.jpg);
background-repeat:no-repeat
background-color: #deb887;
color: white;
font:Arial, Helvetica, sans-serif;
background-repeat:no-repeat;
height:400px;
width:30px;
text-align:center;
width:130px;
float:left;


}

.body	{

background-image:url(body.jpg);
background-repeat:no-repeat
background-color: #deb887;
color: white;
font:Arial, Helvetica, sans-serif;
background-repeat:no-repeat;
height:400px;
text-align:center;
width:900px;

position:absolute;
top:173px;
left:138px;



}

.frame	{

position:absolute;
top: 50px;
left: 50px;
text-align:center

.counter	{

positon:absolute;
bottom:50px;
left:100px;

}

}

.frameContent	{
background-color: #e82c2d;
border: none;
float:left;

}



a:link { text-decoration:none; font-weight:bold; color:#ffffff; }
a:visited { text-decoration:none; font-weight:bold; color:#ffffff; }
a:hover { text-decoration:none; font-weight:bold; color:#ffffff; }
a:active { text-decoration:none; font-weight:bold; color:#ffffff; }
a:focus { text-decoration:none; font-weight:bold; color:#ffff; }

.formular	{

background-color:#e82c3d;
border:1px solid #222222;
padding:3px;

}


dann würde ich gerne auch noch wissen, wi ich vlt etwas besseres als den iframe nutzen kann, da das wohl überhaupt nciht mehr in w3c passen sol und in "quirksmode" ändern soll?

ich würde es toll finden, wenn ihr mal ein auge über den code werfen könntet ud einfach mal postet, was ich verbessern könnte, konformer machen könnte und vlt ganz anderes machen sollte :)

Grüße an die HTML Gemeinde

Stoner
 
Erste Grundvoraussetzung für Standardkonformität ist, dass deine Seite noch einen qualifizierten Doctype braucht. Ohne den kann der IE das CSS-Boxmodell nicht richtig anzeigen und somit sind unterschiedliche Darstellungen schon vorprogrammiert.
Wenn der Doctype drin ist, kannst du deine Seite validieren lassen und bekommst die entsprechenden Fehler angezeigt.

Alles, was mit Formatierung zu tun hat, kannst und solltest du in die CSS-Datei schreiben, so auch die body-Formatierung.

Auf Frames solltest du verzichten.
Für die Navi wäre eine Liste besserund übersichtlicher als eine Tabelle.
 
Hallo stoner!

Zu deinem HTML-Code: Normalerweise würde ich dir empfehlen HTML 5 zu verwenden, allerdings ist es für Leute, die sich noch nicht soo gut mit HTML auskennen besser, zuerst XHTML zu lernen. Ganz oben in deinem HTML-Code sollte das hier stehen:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Als nächstes solltest du dir angewöhnen, deinem Code entsprechend den Elementen einzurücken. Das hilft dir enorm dabei, dich in deinem Code zurecht zu finden, z. B. so:
Code:
<html>
    <head>
        <title></title>
        <link ...>
        <script ...></script>
    </head>
    <body>
Immer einen (aussagekräftigen) Titel angeben!
Sehr Schlecht:
Code:
<title></title>
Auch schlecht:
Code:
<title>Herzlich Willkommen</title>
Besser:
Code:
<title>Private Affiliates</title>
Was du dir unbedingt abgewöhnen solltest ist das hier:
Code:
<body text="#FFFFFF" bgcolor="#000000">
Angaben die mit dem Design deiner Website zu tun haben IMMER in die entsprechende CSS-Datei auslagern. D. h. im HTML-Code nur <body> schreiben und in deiner CSS-Datei folgendes schreiben:
Code:
body {
    background: #000;
    color: #fff;
}
Soweit für den Anfang. Wenn du das alles beherzigst hast du schon sehr viel gelernt! :-)
 
Zuletzt bearbeitet von einem Moderator:
Danke, für die tollen Antworten...

Ich habe HTML mit 15 gelernt, und komm eigentlich ganz gut zurecht damit, hab aber leider den wechsel von framesets zu css verpasst und xhtml und html 5 ist mri bisslang noch gänzlich unbekannt..

wo kann ich beginnen, wenn ich vor etwa 4 Jahren mit html gut war?? :)

Ich werde mich erst einmal an euren Vorschlägen orientieren :)

DAnkeschön :)
 
zum andern möchte ich das mit dem DIV Design in der praxis hinbekommen
Es gibt kein "DIV-Design", denn Design macht man mit CSS und nicht mit HTML (egal mit welchem Tag, ob <table>, <div> oder <p>).
Mit HTML wird der Inhalt logisch ausgezeichnet. Wenn Du das beerrschst, wirst Du feststellen, dass man da verhältnismäßig wenige <div> braucht, man auch bei einem ansprechenden Design ganz ohne <div> auskommen kann. Die semantische Bedeutung des Tags <div> ist übrigens: Gruppiere mehrere Elemente (idR zwecks gemeinsamer Formatierung).

hab aber leider den wechsel von framesets zu css verpasst
Das ist auch kein Wunder, denn man kann nicht von Framesets zu CSS wechseln. Das eine mit dem anderen zu vergleichen klappt eigentlich gar nicht. Man kann auch Sites, die auf Framesets aufbauen, mit CSS designen. Framesets sind weder ein Mittel zum Festlegen der Semantik des Inhalts (wie HTML), noch ein Mittel für Design (wie CSS), höchstens unter anderem ein Hilfsmittel für das Layout. Aber das auch nur begrenzt. Das, weswegen die meisten eigentlich Frames benutzt haben, sind die wiederkehrenden Elemente einer Seite, dass man die nicht in jede Seite neu reinschreiben muss. Und das ist weder Semantik noch Layout oder Design und wird besser mit einer serverseitigen Programmiersprache umgesetzt.

wo kann ich beginnen, wenn ich vor etwa 4 Jahren mit html gut war?? :)
Wer vor 4 Jahren gut war, der wusste schon, wozu man HTML eigentlich wirklich benutzt und war gut im Umgang mit CSS. CSS ist nunmehr bald 10 Jahre alt und aus Erfahrung kann ich sagen, dass man auch schon vor 7 Jahren das mit CSS machen konnte, was man heute kann. Ich vermute eher, Du gehörst zu denen, die sich auf CSS stürzen wollen, ohne die Bedeutung von HTML begriffen zu haben. Aber ohne HTML wirklich verstanden zu haben, wird das nichts mit CSS.

Ich werde mich erst einmal an euren Vorschlägen orientieren :)
Lerne HTML und begreife, was man unter "Semantik" versteht. Denke dran und begreife, dass alles, was Du in HTML machst, nichts mit der Optik zu tun hat.

Dann bist Du bereit für CSS :-)

Viel Erfolg,
-Efchen
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben