Willkommen in der Webstatt Zum Webstatt Blog und Stories
dkilla dkilla am 18.03.06 12:30

Und zwar wenn ich meine page durchtesten lasse bekomme ich immer 2 Fehlermeldungen
Link
Wie kann ich diese Fehler ausmerzen?

netcup.de Warum gibt es hier Werbung?
leo am 18.03.06 12:43

du darfst dein <link> nicht mit /> abschließen. das ist xhtml-syntax.
dein doctype ist allerdings html4, also den slash und das leerzeichen am ende der zeile entfernen.

zusätzlich solltest du ein character encoding angeben.

gruß, leo

dkilla dkilla am 18.03.06 12:50

Wow, danke für die schnelle Antwort, jetzt muss ich nur noch wissen was character encoding ist?? :D

Aja ich habe das ganze auch noch so link allerdings habe ich hier mehr fehler und der header wird nicht angezeigt, ist es viel Arbeit hier die Fehler auszubessern und würde sich es überhaupt lohnen?

Christian am 18.03.06 13:12

mach doch einfach gleich xhtml-syntax

das wichtigste was de da ändern musst ist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

vor <html>

<br> wird zu <br />
<img ...> wird zu <img ... />
<meta ..> wird zu <meta .. />

etc, es muss einfach jeder tag geschlossen werden

zudem darf man imo <font> nicht mehr verwenden

weiß das jemand genauer? gibts da ne liste oder so?

dkilla dkilla am 18.03.06 13:17

Hab ich ja schon link allerdings wird hier nicht der header angezeigt

milahu milahu am 18.03.06 13:42

<title>
</title>

WTF?

An der Semantik des Codes musst du noch gehörig feilen.
Beispiel:<div id="header"></div>
<!-- -->
<h1 id="header">dkilla studios</h1>


#header wird IMHO nicht angezeigt, weil es ein leeres (Block-)Element ist. Und warum sollte der Browser sowas darstellen?

dkilla dkilla am 18.03.06 13:53

Quote
Original von milahu
<title>
</title>

WTF?

An der Semantik des Codes musst du noch gehörig feilen.
Beispiel:<div id="header"></div>
<!-- -->
<h1 id="header">dkilla studios</h1>


#header wird IMHO nicht angezeigt, weil es ein leeres (Block-)Element ist. Und warum sollte der Browser sowas darstellen?


Habs jetzt so gemacht
<h1 id="header">dkilla studios</h1>
allerdings bekomme ich so eine Überschrift und nicht das Bild
Wo bekomme ich Beispiele für den richtigen Aufbau?


Quote
#header wird IMHO nicht angezeigt, weil es ein leeres (Block-)Element ist. Und warum sollte der Browser sowas darstellen?


Dann verstehe ich dein Beispiel nicht, ich will ja das der header angezeigt wird

milahu milahu am 18.03.06 14:50

Mit semantisch korrekt meine ich sowas:
<h1>dkilla studios</h1>
<h2>Navigation</h2>
<ul>
<li>Startseite</li>
<li>Leistungen</li>
<li>Referenzen</li>
<li>Impressum</li>
<li>Kontakt</li>
</ul>
<h2>Resonanzen</h2>
<p>Hier können Sie lesen, ob unsere bisherigen Kunden zufrieden mit uns waren.</p>
<h2>Aktuelle Projekte</h2>
<dl>
<dt>Gasthof Zockler</dt>
<dd>Layout, Programmierung PHP+CSS, Fotografie, Flyer</dd>
<dt>Daniel Electronics</dt>
<dd>Layout, Programmierung HTML+CSS, Inhalt</dd>
<dt>Dicht Pacher</dt>
<dd>Layout, Programmierung HTML+CSS</dd>
<dt>Berlingua</dt>
<dd>Layout, Programmierung PHP+CSS</dd>
</dl>
<h2>Anmeldung</h2>
<form>
<p>
<label for="login-name">Benutzername</label>
<input id="login-name" name="name" />
</p>
<p>
<label for="login-pwd">Passwort</label>
<input id="login-pwd" name="pwd" type="password" />
</p>
<p>
<input type="submit" value="Anmelden" />
<input type="reset" value="Reset" />
</p>
</form>

Man erkennt auch ohne CSS-Styling eine Stuktur - ganz im Gegensatz zu deinem Code.

Wenn du nun statt der Seitenüberschrift "dkilla studios" deinen Header einbinden möchtest, geht das z.B. so:
h1{
height:200px;
text-indent:-999em; /* text ausblenden */
background:url(dein-hintergrunz-bild) no-repeat;
}

dkilla dkilla am 18.03.06 22:39

Erstmal danke für den code, hab alles so gemacht,
link habe jetzt nur noch ein Problem, im Firefox wird alles so dargestellt wie ich es will, nur im IE passt der linke abstand der divs nicht woran liegt das?

milahu milahu am 18.03.06 23:36

Im Opera ist es auch total vergrunzt :\

Hab mir mal die Mühe gemacht, das Ganze so barrierefrei wie möglich zu gestalten:
<!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=iso-8859-1" />
<meta http-equiv="Content-Language" content="DE" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>dkilla studios</h1>
<h2 class="nav">Navigation</h2>
<ul class="nav">
<li><a href="#">Startseite</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Referenzen</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<div id="links">
<h2>Resonanzen</h2>
<p>Hier können Sie lesen, ob unsere bisherigen Kunden zufrieden mit uns waren.</p>
<h2>Aktuelle Projekte</h2>
<dl>
<dt>Gasthof Zockler</dt>
<dd>Layout, Programmierung PHP+CSS, Fotografie, Flyer</dd>
<dt>Daniel Electronics</dt>
<dd>Layout, Programmierung HTML+CSS, Inhalt</dd>
<dt>Dicht Pacher</dt>
<dd>Layout, Programmierung HTML+CSS</dd>
<dt>Berlingua</dt>
<dd>Layout, Programmierung PHP+CSS</dd>
</dl>
</div>
<div id="mitte">
<p>
Bla. Blubb.
</p>
<p>
Bla. Blubb.
</p>
<p>
Bla. Blubb.
</p>
<p>
Bla. Blubb.
</p>
</div>
<div id="rechts">
<h2>Anmeldung</h2>
<form>
<p>
<label for="login-name">Benutzername</label>
<input id="login-name" name="name" />
</p>
<p>
<label for="login-pwd">Passwort</label>
<input id="login-pwd" name="pwd" type="password" />
</p>
<p>
<input type="submit" value="Anmelden" />
<input type="reset" value="Reset" />
</p>
</form>
</div>
</body>
</html>


style.css:*{
margin:0;
padding:0;
font:10pt Arial,Sans,Verdana,Helvetica;
}

body{
width:900px;
position:absolute;
left:50%;
margin:25px 0 25px -496px; /* 900/2+46 */
}

h1{
height:156px;
text-indent:-99em;
background:url(http://www.dkilla.com/test/Bilder/pic_01.jpg) no-repeat;
}

h2.nav{
display:none
}

ul.nav{
width:807px;
margin:0 0 0 93px;
list-style:none;
background:url(http://www.dkilla.com/test/Bilder/pic_08.gif) no-repeat right;
}

ul.nav li{
width:127px;
height:51px;
float:left;
background:url(http://www.dkilla.com/test/Bilder/pic_07.gif) no-repeat;
}

ul.nav li:last-child{
float:none;
}

ul.nav a{
display:block;
height:100%;
padding:22px 0 0 0;
text-align:center;
text-decoration:none;
color:white;
}

ul.nav a:hover{
border-top:solid 2px #f59704;
padding:20px 0 0 0;
}

#links{
width:204px; /* 224px - 2*padding */
padding:10px;
float:left;
margin:3px 0 0 93px;
background:#c8c8c8;
}

#mitte{
width:337px; /* 224px - 2*padding */
padding:10px;
float:left;
margin:3px 0 0 3px;
background:#c8c8c8;
}

#rechts{
width:200px;
padding:10px;
float:right;
margin:3px 0 0 3px;
background:#4a7283;
-moz-border-radius-bottomright:8px;
}

h2{
margin:0 0 5px 0;
padding:1px 10px;
background:#383838;
-moz-border-radius:5px;
color:white;
}

h2:before{
content:"| ";
}

p{
margin:0 0 10px 0;
}


Den Feinschliff solltest du dann selbst hinbekommen. ;)

dkilla dkilla am 19.03.06 00:07

Wow, danke das du dir solche mühe gemacht hast 8o!! Allerdings wird es im IE immernoch alles ziemlich verschoben :( scheiß microschrott.... oder ist es überhaupt nicht möglich dieses design im ie fehlerfrei darzustellen?

milahu milahu am 19.03.06 09:44

Screenshot?

dkilla dkilla am 19.03.06 10:49

Im Firefox und im Opera ist alles OK! Link
[IMG]http://www.dkilla.com/screenshot.jpg[/IMG]

dkilla dkilla am 19.03.06 15:11

Naja, wird nix bringen werds wohl doch mit tabellen machen müssen ?(

milahu milahu am 19.03.06 15:48

<style> gehört aber auch in den <head> ;)
Hab's oben angepasst.

dkilla dkilla am 19.03.06 16:12

Hat sich leider nichts geändert schaut im IE immer noch so aus wie oben auf dem screenshot, Link
kann es sein deas der IE das nicht darstellen kann??
/* 224px - 2*padding */

milahu milahu am 19.03.06 16:41

Quote
Original von dkilla
kann es sein deas der IE das nicht darstellen kann??

Das ist nur ein Kommentar ;)

Pass mal folgendes an:
2. CSS:ul.nav{
width:807px;
height:51px;
margin:0 0 0 93px;
list-style:none;
background:url(http://www.dkilla.com/test/Bilder/pic_08.gif) no-repeat right top;
}

1. HTML/head:
<!--[if IE]>
<style type="text/css">
#links{margin:3px 0 0 0}
<![endif]-->

dkilla dkilla am 19.03.06 16:48

Jetzt zeigt der IE überhaupt nichts mehr an
Link

milahu milahu am 19.03.06 17:23

Screenshot, bitte. Ich hab keinen IE.

dkilla dkilla am 19.03.06 17:27

So ich habs jetzt hinbekommen

hab einen wrapper zwischen den boxen links mitte und rechts gemacht und in den header das:

<!--[if IE]><style type="text/css"><!--
#wrapper{
margin:-22px 0 0 -93px

}
-->


Großes Dankeschön an milahu, ohne deine Hilfe hätt ich das nie so hinbekommen!

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt