Sponsor-Board.de
Code gut?

+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Feedback (/forumdisplay.php?fid=58)
+--- Thema: Code gut? (/showthread.php?tid=13829)

Code gut? - skaterfabi11 - 20.06.2011 21:35

Hey zusammen!

Ich bin gerade dabei mit css und xhtml zu lernen! Nun habe ich mir ein free Design genommen und habe probiert es anzupassen! Hat bisher aus alles super funktioniert! Nun ist die frage hab ich alles richtig gemacht? Gibt es bei der späteren CMS anpassung probleme?

Hier ist die Webseite: [Link: Registrierung erforderlich]

Html Code:

Zitat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Silent-Gaming</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="323232">
<div id="wrapper">
<div id="header">
<div id="overline"></div>
<div id="header_1"></div>
</div><!-- Header-End -->
<div id="navigation">
<a href="#" class="navi" id="nav_main"></a>
<a href="#" class="navi" id="nav_clan"></a>
<a href="#" class="navi" id="nav_com"></a>
<a href="#" class="navi" id="nav_misc"></a>
<div class="navi" id="loginarea"></div>
<div class="clear"></div>
<div id="subnavi"></div>
</div><!-- Navigation-End -->
<div id="content">
<div id="content_left">
<div id="slider">
<div id="slider_1"></div>
<div id="slider_2"></div>
<div id="slider_3"></div>
<div class="clear"></div>
</div><!--Slider-End -->
<div id="content_left_main">
<div id="headline"></div>
<div id="clm_1"></div>
<div id="content_bg">
<div id="content_pic"></div>
<div id="text_1"></div>
</div><!-- Content_bg-End -->
</div><!-- Content_left_main-End -->
</div><!-- Content_left-End -->
<div id="content_right">
<div id="top_d">
<div id="top_d_1"></div>
<div id="top_d_2"></div>
</div><!-- Top_d-End -->
<div id="rmd_p">
<div id="rmd_p_1"></div>
<div id="rmd_p_2"></div>
</div><!-- Rmd_p-End -->
<div id="top_u">
<div id="top_u_1"></div>
<div id="top_u_2"></div>
</div><!-- Top_u-End -->
<div id="partner">
<div id="partner_1"></div>
<div id="partner_2"></div>
</div><!-- Parter-End -->
</div><!-- Conetnt_right-End -->
</div><!-- Content-End -->
<div class="clear"></div>
<div id="footer">
<div id="copyright"></div>
</div><!-- Footer-End -->
</div><!-- Wrapper-End -->
</body>
</html>


Css Code

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

body {
background-color:323232;
margin:0px;
}

p {color:#ffffff;}

#wrapper {
width:1007px;
height:auto;
margin:auto;
}
#header {
width:1007px;
height:228px;
}

#overline {
width:1007px;
height:43px;;
background-image:url(images/overline.png);
}

#header_1 {
width:1007px;
height:185px;
background-image:url(images/header.png);
}

#navigation {
width:1007px;
height:59px;
}

.navi {
width:1007px;
height:59px;
float:left;
display:inline;
}

#nav_main {
width:103px;
height:39px;
background-image:url(images/bt_main.png);
}

#nav_main:hover {
background-image:url(images/bth_main.png);
}

#nav_clan {
width:105px;
height:39px;
background-image:url(images/bt_clan.png);
}

#nav_clan:hover {
background-image:url(images/bth_clan.png);
}

#nav_com {
width:105px;
height:39px;
background-image:url(images/bt_com.png);
}

#nav_com:hover {
background-image:url(images/bth_com.png);
}

#nav_misc {
width:105px;
height:39px;
background-image:url(images/bt_misc.png);
}

#nav_misc:hover {
background-image:url(images/bth_misc.png);
}

#loginarea {
width:589px;
height:39px;
background-image:url(images/loginarea.png);
}

#subnavi {
width:1007px;
height:20px;
background-image:url(images/subnavi.png);
}

#content {
width:1007px;
height:auto;
}

#content_left {
width:835px;
height:auto;
float:left;
}

#content_right {
width:172px;
height:auto;
float:left;
}
#slider {
width:auto;
height:;
}

#slider_1 {
width:83px;
height:126px;
background-image:url(images/bt_slider_l.png);
float:left;
}

#slider_1:hover {
background-image:url(images/bth_slider_l.png);
}

#slider_2 {
width:669px;
height:126px;
background-image:url(images/sliderline.png);
float:left;
}

#slider_3 {
width:83px;
height:126px;
background-image:url(images/bt_slider_r.png);
float:left;
}

#slider_3:hover {
background-image:url(images/bth_slider_r.png);
}

#top_d {
width:172px;
height:181px;
}

#top_d_1 {
width:172px;
height:25px;
background-image:url(images/top_d.png);
}

#top_d_2 {
width:172px;
height:156px;
background-image:url(images/td_box.png);
}

#rmd_p {
width:172px;
height:142px;
}

#rmd_p_1 {
width:172px;
height:25px;
background-image:url(images/rmd_p.png);
}

#rmd_p_2 {
width:172px;
height:117px;
background-image:url(images/rp_box.png);
}

#top_u {
width:172px;
height:119px;
}

#top_u_1 {
width:172px;
height:25px;
background-image:url(images/top_u.png);
}

#top_u_2 {
width:172px;
height:94px;
background-image:url(images/tu_box.png);
}

#partner {
width:172px;
height:348px;
}

#partner_1 {
width:172px;
height:25px;
background-image:url(images/partner.png);
}

#partner_2 {
width:172px;
height:323px;
background-image:url(images/partner_box.png);
}

#content_left_main {
width:857px;
height:auto;
}

#clm_1 {
width:835px;
height:auto;
background-image:url(images/content_bg.png);
}

#headline {
width:857px;
height:35px;
background-image:url(images/headline.png);
}

#content_bg {
width:835px;
height:auto;
background-image:url(images/content_bg.png);
}

#content_pic {
width:366px;
height:184px;
background-image:url(images/content_pic.png);
float:left;
}

#text_1 {

width:auto;
height:628px;
}

#footer {
width:1007px;
height:95px;
background-image:url(images/footerline.png);
}

#copyright {
margin-left:40%;
width:164px;
height:95px;
background-image:url(images/copyright.png);
}

.clear {
clear:both;
}



RE: Code gut? - Storage-Base.de - 20.06.2011 21:51

Zitat:
line 9 column 1 - Warnung: <body> attribute "bgcolor" had invalid value "323232" and has been replaced


Ich kann dir HTML Validator als Plugin für den Firefox empfehlen, da siehst du direkt obs Valid ist etc.

Da ich bisher ziemlich wenig mit Div's am Hut habe, abgesehen von Rückgabewerten meiner AJAX Funktionen, kann ich den Code nicht beurteilen.

RE: Code gut? - keving - 20.06.2011 23:34

Bitte fülle die Seite ein wenig, damit man sieht ob die DIVs leer sind bzw. wie du den Text darstellst.

Posititv:
- DIV/CSS
- strukturiert durch Kommentare

Negativ:
- "bgcolor=..." => CSS verwenden
- Navi macht man mit UL
- Sprites bei Hover Bildern verwenden
- Texte nur als Bild
- Namen der IDs find ich nicht wirklich passend

Zu Semantik kann man bisher nicht wirklich was sagen, außer dass die Navi in ein UL sollte.

RE: Code gut? - skaterfabi11 - 21.06.2011 11:19

Wie gesagt ich kenn mich noch nicht so gut da aus! Könnten sie mir ein bsp. für die UL geben?

RE: Code gut? - JeyP - 21.06.2011 13:07

[Link: Registrierung erforderlich]