bitte mal code ansehen

Tioz4Ever · 11.07.2005, 21:29

hallo leute,

könnte bitte mal jemand so nett sein und den code ansehen ob er fehler hat ?
vieleicht kann ich da noch was verbessern oder einsparen....

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Titel der HP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
.header{
	background:#D99873;
	padding:5px;
	height: 65px;
	margin: 0px;
}

.headliene{
	background:#CC9900;
	padding:0px 20px 0px 2px;
	margin: 0px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	text-align: right;
}

.headlight{
	background:#E3B59C;
	padding:10px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #006699;
	text-decoration: none;
	height: 30px;
	border-bottom: 1px solid black;
	margin: 0px;
}

.menue{
background:silver;
float:left;padding:5px;
width:170px;
margin:0px 0 0;
}

.conten{
background:#FFFFFF;
padding:5px 20px 10px 10px;
margin:5px 0 0 180px;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>
<body>

<div class="header">Hier kommt der Banner und die Link Banner hin !!! -- #heder div </div>

<div class="headlight">
  <div class="headliene"> #headliene div      Impressum - LinksGesetz - Links</div>
</div>

<div class="menue"><code style="color:#cc0000;">Hier der Menue Bereich #menue div </code></div>

<div class="conten"><code style="color:#cc0000;">Hier der Ihalt Bereich !!!<br>
  <br>
  #conten div
</code></div>

</body>
</html>

vielen dank für die hilfe sag ich da schon mal .... !!! THX

hero-master · 11.07.2005, 21:41

Hi Tioz4ever

Um Fehler zu erkennen, gibts Validatoren

http://validator.w3.org

Einsparen bzw. hinzufügen könntest du bei dem CSS einiges:
Bei CSS-LAyouts hat sich herausgestellt, dass sich dieser Stil zu BEginn als sher nützlich erweist:

Code:

* {margin:; padding:0; border:0}

Er bezweckt, dass er bei allen Blockelementen die vordefinierten Abstände und Rahmen auch 0 setzt, damit es jeder Browser gleich interpretiert, da viele Browser unterschiedliche vordefinierte Abstände haben (z.B. beim Body)

Somit kannst du nun alle margin:0-Definitionen entfernen:

Code:

.header{
	background:#D99873;
	padding:5px;
	height: 65px;
	/*margin: 0px;*/
}

.headliene{
	background:#CC9900;
	padding:0px 20px 0px 2px;
	/*margin: 0px;*/
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	text-align: right;
}

.headlight{
	background:#E3B59C;
	padding:10px 0px; /*Die dritte Null war zuviel*/
	/*font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;*/
        font:10px Verdana, Arial, Helvetica, sans-serif; /*Kurzform*/
	color: #006699;
	text-decoration: none;
	height: 30px;
	border-bottom: 1px solid black;
	/*margin: 0px;*/
}

.menue{
background:silver;
float:left;padding:5px;
width:170px;
margin:0px 0 0;
}

.conten{
background:#FFFFFF;
padding:5px 20px 10px 10px;
margin:5px 0 0 180px;
}

/*body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}*/
/*Kurz dafür wäre dann das hier: margin:0*/
/*Gecko-Browser benötigen anstelle eines margin:0 im body, eigentlich ein padding:0*/

Mehr ist mir im CSS-Code nicht aufgefallen

321 · 11.07.2005, 22:19

Tioz4Ever · 11.07.2005, 22:27

danke euch allen,

mir ging es in dieser sache eigendlich nur um die css sachen.
habe mal den css code geändernt so wie ich denke nach deinen vorgaben @hero-master

HTML-Code:

<style type="text/css">
<!--
body {
	margin:0px;
        padding:0px;
	font-family:Verdana, Arial, sans-serif;
	font-size:95%;
}
.header{
	background:#D99873;
	padding:5px;
	height: 65px;
}

.headliene{
	background:#CC9900;
	padding:0px 20px 0px 2px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	text-align: right;
}

.headlight{
	background:#E3B59C;
	padding:10px 0px; 
        font-family:Verdana, Arial, sans-serif;
	font-size:70%;
	color: #006699;
	text-decoration: none;
	height: 20px;
	border-bottom: 1px solid black;
	}

.menue{
	background:silver;
	float:left;
	padding:5px;
	width:170px;
	margin:0px 0 0;
}

.conten{
	background:#FFFFFF;
	padding:5px 20px 10px 10px;
	margin:5px 0 0 180px;
}

</style>

hoffe ich habe deine hinweise richtig um gesetzt !!!

hero-master · 12.07.2005, 13:56

Sieht schonmal gut aus

(den Stil einfügen, den ich ganz oben gepostet, wäre noch ne Möglichkeit, ist aber nicht zwingend notwendig, hilft aber ungemein, wie ich finde

)

Noch Kleinigkeiten:

"font" wird vererbt. Also musst du font-family nur einmal definieren insgesamt, soweit du nur eine Scrhiftart verwenden willst.

Wenn du einem Attribut den Wert 0 zuweist, dann benötigt es keine "px"-Angabe...Ist aber nur Feinarbeit dann

Boris · 12.07.2005, 14:29

Auch kann man font-size, family, line-height etc zusammenfassen:

font: 12px/1.5 Arial, Helvetica, Verdana

Ist das gleiche wie:

font-family: Arial, Helvatica, Verdana
font-size: 12px;
line-height: 1.5;

Und Farben kann man auch kürzen:

#ffffff -> #fff
#ff0000 -> #f00

Tioz4Ever · 12.07.2005, 20:41

danke euch allen,

möchte mich mal bei euch bedanke für die super super hilfe.
werde versuchen all eure vorschläge und änderungen zu verstehen und um zu setzen.

danke euch noch mal für die nette hilfe !!!!! THX !!!!!

steffenk · 12.07.2005, 22:42

@boris: line-height:1.5;
welche Masseinheit ist das, kann man die bei line-height weglassen ?

Terry · 12.07.2005, 23:02

Zitat:

Zitat von St@eff.en

line-height:1.5;
welche Masseinheit ist das, kann man die bei line-height weglassen ?

Ja - kann man - und sollte man ruhig auch, da es dann keine Vererbungsprobleme gibt. 1.5 bedeutet, dass die Zeilenhöhe immer anderthalb mal so hoch ist wie die Texthöhe.

Edit: ich hoffe, ich durfte antworten, auch wenn ich nicht Boris bin ...

steffenk · 12.07.2005, 23:34

Hi Terry,

vielen Dank für den Hinweis, das kannte ich noch nicht.
Du darfst immer antworten, ich hab nur Boris angesprochen, da er das gepostet hat.

Gibt es soetwas auch für andere Attribute oder beschränkt sich das auf line-height ?

Boris · 13.07.2005, 02:30

Ich kenne das nur von line-height - bei anderen Attributen sind Einheiten nötig.

bitte mal code ansehen

Vielen Dank !!!!