Willkommen in der Webstatt
User-1 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?
User-2 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ß, xyz-118

User-1 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?

User-3 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?

User-1 am 18.03.06 13:17

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

User-4 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">xyz-55 studios</h1>


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

User-1 am 18.03.06 13:53

Quote
Original von xyz-145
<title>
</title>

WTF?

An der Semantik des Codes musst du noch gehörig feilen.
Beispiel:<div id="header"></div>
<!-- -->
<h1 id="header">xyz-55 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">xyz-55 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?


xyz-48n verstehe ich dein Beispiel nicht, ich will ja das der header angezeigt wird

User-4 am 18.03.06 14:50

Mit semantisch korrekt meine ich sowas:
<h1>xyz-55 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>xyz-48iel 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">xyz-19utzername</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 "xyz-55 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;
}

User-1 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?

User-4 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>xyz-55 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>xyz-48iel 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">xyz-19utzername</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.xyz-55.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.xyz-55.com/test/Bilder/pic_08.gif) no-repeat right;
}

ul.nav li{
width:127px;
height:51px;
float:left;
background:url(http://www.xyz-55.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. ;)

User-1 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?

User-4 am 19.03.06 09:44

Screenshot?

User-1 am 19.03.06 10:49

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

User-1 am 19.03.06 15:11

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

User-4 am 19.03.06 15:48

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

User-1 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 */

User-4 am 19.03.06 16:41

Quote
Original von xyz-55
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.xyz-55.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]-->

User-1 am 19.03.06 16:48

Jetzt zeigt der IE überhaupt nichts mehr an
Link

User-4 am 19.03.06 17:23

Screenshot, bitte. Ich hab keinen IE.

User-1 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 xyz-48keschön an xyz-145, 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