04.05.2006, 21:38
|
|||
|
|||
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> 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%;
}
vielen dank für eure mühen. mfg _h4ze 
|
| Sponsored Links |
|
04.05.2006, 21:54
|
|||
|
|||
|
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"); ?>
Für die Menüs solltest du unsortierte Listen verwenden.Für sowas wie Code:
<div id="header"></div> Code:
<div class="navhead">Main One</div> Dadurch kannst du dir einige Divs sparen, und dein Code wird um einiges sinnvoller.  zum CSS: Code:
a:unknown { text-decoration: none; }
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!
|
| Sponsored Links |
|
04.05.2006, 22:26
|
||||
|
||||
|
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> 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; 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.
|
|
04.05.2006, 22:31
|
|||
|
|||
|
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!
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Firefox rendert Seite nicht als XHTML Code | helloworld | (X)HTML | 4 | 03.05.2012 22:27 |
| Was bedeutet folgender Code? | web334 | (X)HTML | 3 | 24.07.2011 16:10 |
| HTML mit PHP Code aus Datenbank auslesen + ausführen | Garlandt | Serveradministration und serverseitige Scripte | 14 | 01.05.2011 13:45 |
| Riesen Abstand aber nur bei dem ersten Eintrag (beim gleichen Code) | StarSt0rm | CSS | 5 | 27.08.2007 16:01 |
| XHTML und CSS Code auszeichnen | Lloyd Larkin | Barrierefreiheit | 11 | 20.07.2006 08:51 |
Linear-Darstellung
