zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fehlerfreier Code?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.05.2006, 20:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2006
Beiträge: 8
_h4ze befindet sich auf einem aufstrebenden Ast
Standard Fehlerfreier Code?

Hallo,

ich habe ein bisschen weiter gemacht, nun würde ich gerne wissen, ob ihr noch Fehler im Code entdecken könnt oder etwas anders / besser machen würdet...

HTML-Code: (später PHP)
Code:
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<title>Title one</title>
<link href="divstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="headone"></div>
<div id="headtwo" class="headtwo">
	[ Link 1 ]
	[ Link 2 ]
	[ Link 3 ]
	[ Link 4 ]
</div>
<div id="header"></div>
<div id="navione">
	<div class="navhead">Main One</div>
	Link 01
	Link 02
	Link 03
	Link 04
	<div class="navhead">Main Two</div>
	Link 05
	Link 06
	Link 07
	Link 08
	Link 09
	<div class="navhead">Main Three</div>
	Link 10
	Link 11
	Link 12
	Link 13
</div>
<div id="content">
	<?php include 'show'>
</div>
<div id="navitwo">
	<?php include 'login'>
</div>
<div id="footer">Copyright by ClansVision.com</div>
</div>
</body>
</html>
CSS-Datei:
Code:
/* GENERAL */
a:active  { text-decoration: none; }
a:unknown { text-decoration: none; }
a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a         { color: #000000; text-decoration: none; }
a:hover   { color: #990000; text-decoration: none; }
* 	  { padding: 0px; margin: 0px; }
img 	  { border: 0px; }

/* LAYOUT */

body {
	vertical-align: center;
	background-color: #252525;
	font-size: 11px;
	font-family: Verdana;
	font-weight: none;
	color: #000000;
	text-decoration: none;
}

#page {
	width: 880px;
	height: 100%;
	min-height: 100%;
	text-align: left;
}

#headone {
	height: 50px;
	width: 200px;
	background-image:url('img/logo.png');
	float: left;
}

#headtwo {
	width: 670px;
	height: 50px;
	float: left;
}

.headtwo {
	background-color: #FFFFFF;
	text-align: right;
	padding-right: 10px;
	line-height: 20px;
}

#header {
	height: 100px;
	width: 880px;
	background-image:url('img/header.jpg');
	float: left;
}

#navione {
	width: 140px;
	background-color: #FFFFFF;
	float: left;
	height: 100%;
}

a.navi {
	line-height: 18px;
	padding-left: 15px;
	display:block;
	width:125px;
	height:18px;
	background-image:url('img/nav_sub.png');
}

a.navi:hover {
	background-image:url('img/nav_sub2.png');
}

.navhead {
	color: #FFFFFF;
	background-image:url('img/nav_main.png');
	height: 22px;
	line-height: 22px;
	font-weight: bold;
	padding-left: 10px;
}

#navitwo {
	width: 160px;
	background-color: #FFFFFF;
	float: right;
	height: 100%;
}

#content {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 15px;
	float: left;
	width: 570px;
}

#footer {
	font-size: 11px;
	background-image:url('img/headline.png');
	height: 20px;
	text-align: center;
	color: #FFFFFF;
	line-height: 18px;
	float: left;
	width: 100%;
}
ps: meine erste seite mit divs statt tables, aber ich hab mich jetzt schon drin verliebt.

vielen dank für eure mühen.

mfg _h4ze
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.05.2006, 20:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Dafür gibts einen Validator.
Der wird dir erst mal sagen, dass du keinen Doctype hast. Info zu Doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.html
PHP bindet man übrigens anders ein:
Code:
<?php include("blabla.php"); ?>
Ansonsten sollte das Ganze valide sein, aber noch nicht so besonders schön. Für die Menüs solltest du unsortierte Listen verwenden.
Für sowas wie
Code:
<div id="header"></div>
oder
Code:
<div class="navhead">Main One</div>
solltest du Überschriften definieren.
Dadurch kannst du dir einige Divs sparen, und dein Code wird um einiges sinnvoller.
zum CSS:
Code:
a:unknown { text-decoration: none; }
diese Pseudoklasse wäre mir neu...
Das "text-decoration: none;" musst du nur für a definieren, d.h., die ersten vier Zeilen kannst du schon mal löschen.

Ansonsten siehts für die erste Seite ohne Tables schon recht gut aus!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.05.2006, 21:26
Benutzerbild von SilentWarrior
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.07.2005
Beiträge: 429
SilentWarrior befindet sich auf einem aufstrebenden Ast
Standard

Noch ein paar Tipps zum CSS: Farben, bei denen die zwei »Ziffern« je einer Farbe gleich sind, kann man auf drei Ziffern reduzieren. Beispiel: #ffffff wird zu #fff. (Aber #252525 kann man nicht reduzieren!)

Code:
<div id="navione">
   <div class="navhead">Main One</div>
   Link 01
   Link 02
   Link 03
   Link 04
   <div class="navhead">Main Two</div>
   Link 05
   Link 06
   Link 07
   Link 08
   Link 09
   <div class="navhead">Main Three</div>
   Link 10
   Link 11
   Link 12
   Link 13
</div>
Sowas könnte man schlauer (bspw.) mit einer Definitionsliste lösen. Ausserdem brauchst du die ganzen navi-Klassendefinitionen für die Links nicht, die kannst du im CSS direkt mit #navione a ansprechen.

Wieder zurück zum CSS: Verschiedene Schrifteigenschaften lassen sich bequem mit font zusammenfassen. Dadurch spart man nochmal ein paar Zeilen.

Keine Einheitenangabe bei 0! 0px = 0em = 0cm = …

Die Anführungszeichen um die URL des Hintergrundbildes solltest du weglassen, soviel ich weiss haben gewisse Browser (IE natürlich, glaube der Mac …) damit Probleme.

Code:
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 5px;
   padding-bottom: 15px;
Sowas lässt sich herrlich in padding zusammenfassen.

Aber das Wichtigste ist meiner Meinung nach, die ganzen überflüssigen Divs zu entfernen und – wie Tigereye schon vorgeschlagen hat – durch ein paar sinnvoll strukturierte Überschriften zu ersetzen.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.05.2006, 21:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2006
Beiträge: 8
_h4ze befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke für die schnelle Antwort. Ich habe das FF addon 'Html Validator' Version 0.7.9. Ist der gut?

Das mit dem Doctype werde ich gleich machen. Ist der oberste der geeignetse?

Mit dem PHP-Include: Danke, ich war zu faul das in anderen Seiten nachzuschlagen.

Wie meinst du das mit den unsortierten Listen?
Muss ich ul und li irgendwie definieren, oder wie werden die eigenschaften eingegeben? Ich werde aus dem Link nicht ganz schlau.
Bei den Überschriften hab ich das selbe Problem.

Das mit der Pseudoklasse wusste ich nicht, danke. Ich werd das gleich mal weglöschen.

Was meinst du mit schön? Ist das nicht geordnet genug oder wie könnte mans noch schöner machen?

Danke für die Hilfe!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML mit PHP Code aus Datenbank auslesen + ausführen Garlandt Serveradministration und serverseitige Scripte 14 01.05.2011 12:45
Wie Code effektiv in XHTML ausgeben? Schelm.isch (X)HTML 8 30.11.2008 15:17
Wort in Javascript Code einfügen; dann Javascript Code ausgeben Sp33dy G0nz4l3s Javascript & Ajax 1 23.05.2008 09:37
DOM und (XML mit HTML CODE) verarbeiten WIE? silence_le Serveradministration und serverseitige Scripte 4 18.06.2007 17:33
XHTML und CSS Code auszeichnen Lloyd Larkin Barrierefreiheit 11 20.07.2006 07:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:50 Uhr.