Html/CSS Probleme der Template darstellung

**Xantro** · 20.10.2011 03:52

Hallo,

Ich habe mich erst vor kurzem mit HTML und CSS befasst daher versuch ich die Frage so gut wie möglich zustellen.

Nachdem ich ein Design in Photoshop erstellt habe und aufgeteilt habe, habe ich mich an die Arbeit gemacht die Html und Css Daten zuschreiben.
Jetzt habe ich das Problem, habe so gut wie möglich versucht durch DIV die einzelnen teile einzubinden aber wenn ich mir die Seite in der vorschau anschaue wird nicht eins angezeigt auser text.

Jetzt zu meiner Frage. Habe ich alles total falsch gemacht oder was daran is genau falsch?

Hier noch die zwei Dokumente.

HTML-Code:

<link rel="stylesheet" type="text/css" xhref="formate.css"        />
  
  </head><body>
  <div id=”wrapper”>
  <div id="banner"></div><div id="middle">Inhalt
  <br />
  <ul id="navi">
  <li class="b1"><a xhref="http://muse-design.de/#"     target="_self" title="link">Button 1</a></li>
  <li class="b2"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   2</a></li>  
  <li class="b3"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   3</a></li>  
  <li class="b4"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   4</a></li>  
  <li class="b5"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   5</a></li>  
  </ul>
  <div    id="content">
  Inhalt
  </div>
  <div class="clr"></div>
  </div>  
  <div id="footer">
  </div>
  </div>
     </body></html><strong></strong>
</html>

Code:

*{           margin:0px;             padding:0px;}
html  
{  
background-color:#242424;  
text-align:center;  
}

#wrapper  
{  
Width:600px;  
margin-left:auto;  
margin-right:auto;  
} 

#banner  
{  
background-image:url(img/header.jpg);  
width:600px;  
height:150px;  
margin-left:auto;  
margin-right:auto;   
  
}

#navi
{
float:left;
}

#content
{
width:395px;
margin-left:155px;
text-algin:left;
}

.clr
{
clear:left;
}



#navi ul, li
{
padding:0px;
margin-top:3px;
}#navi{
margin-left:8px;
width:140px;
text-algin:left;
marigin:0px;
paddig:0px;
overflow:hidden;
}#navi   a
{
display:block;
width:133px;
height:20px;
padding-left:5px;
}.b1    a
{
background-image:url(image/nav1no.jpg);
}.b1    a:hover
{
background-image:url(img/navi1.jpg);
}

.b1     a
{
backgorund-image:url(img(navi2no.jpg);
}

.b2     a:hover
{
background-image:url(img/navi2.jpg);
}

.b3     a
{
background-image:url(img/navi3no.jpg);
}

.b3     a:hover
{
background-image:url(image/navi3.jpg);
}

.b4     a
{
background-image:url(img/navi4no.jpg);
}

.b4     a:hover
{
background-image:url(img/navi4.jpg);
}

#middle  
{  
background-image:url(img/background2.gif);  
} 

#footer  
{  
background-image:url(img/footer.jpg);  
height:50px;
font-size:9px;
padding-top:15px;
text-algin:left;
padding-left:45px;  
}

#footer a
{
font-size:9px;
color:#000000;
}

#footer a:hover
{
font-size:9px;
color:#ff0000;
}

Ich hoffe das waren genug Informationen

p.s. die Ordner Struktur ist so aufgebaut
hp/img
/slice
/index.html
/format.css

**wildmieze** · 20.10.2011 07:17

2 mögliche Fehlerquellen:

- <link rel="stylesheet" type="text/css" xhref="formate.css" />
.. das müsste wohl href statt xhref heißen ..

- heißt die Datei formate.css oder format.css ..?

**max.m** · 20.10.2011 07:41

An den Anfang der Datei sollte auch noch

HTML-Code:

<html>
<head>

und am Ende der Datei sollte das:

HTML-Code:

<strong></strong>
</html>

gelöscht werden.

**Xantro** · 20.10.2011 16:29

Zitat von wildmieze

2 mögliche Fehlerquellen:

- <link rel="stylesheet" type="text/css" xhref="formate.css" />
.. das müsste wohl href statt xhref heißen ..

+ Habe es geändert bis jetzt aber keine wirkliche Wirkung gezeigt

Zitat von wildmieze

- heißt die Datei formate.css oder format.css ..?

+ Die Datei heisst formate.css

Zitat von max.m

An den Anfang der Datei sollte auch noch

HTML-Code:

<html>
<head>

und am Ende der Datei sollte das:

HTML-Code:

<strong></strong>
</html>

gelöscht werden.

Habe hoffentlich soweit alles richtig gelöscht und hinzugefügt hier nochmal der Html-Code

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmnls="http://www.w3.org/1999/xhtml"> 
  <head>
  <title>Obligation of Honor | Blackhand Eu</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <meta name="Author" content="WME" />  
  <meta name="Publisher" content="WME" />  
  <meta name="Copyright" content=" WME " />  
  <meta http-equiv="content-language" content="de" />  
  <meta name="keywords" content="Template" />  
  <meta name="description" content="Beischreibungstext der Seite " />  
  <meta name="Audience" content="Alle" />  
  <meta name="allow-search" content="yes" />  
  <meta name="robots" content="index, follow" />  
  <meta name="revisit-after" content="1 days" />  
  <link rel="stylesheet" type="text/css" href="formate.css" />
  </head>
  <body>
  <div id=”wrapper”>
  <div id="banner"></div><div id="middle">Inhalt
  <br />
  <ul id="navi">
  <li class="b1"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   1</a></li>
  <li class="b2"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   2</a></li>  
  <li class="b3"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   3</a></li>  
  <li class="b4"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   4</a></li>  
  <li class="b5"><a xhref="http://muse-design.de/#"      target="_self" title="link">Button   5</a></li>  
  </ul>
  <div    id="content">
  Inhalt
  </div>
  <div class="clr"></div>
  </div>  
  <div id="footer">
  </div>
  </div>
     </body></html>

**max.m** · 20.10.2011 17:34

Deine Links heißen immer noch xhref und nicht href und ersetz mal bei <div id=”wrapper”> die ” durch "richtige" Anführungszeichen (").

**Xantro** · 20.10.2011 17:43

Ok ich hab es geändert. Jetzt sind zwar die Buttons anklickbar aber bilder werden immer noch angezeigt

**Xantro** · 20.10.2011 22:48

So habe mein Fehler gefunden und zwar war in der Css Datei zum Beispiel: "background-image:url(img/header.jpg);" das fehlende leerzeichen zwischen "url" und "("

ich danke euch trotzdem für die Hilfe =)

zur Startseite vom TP

Thema: Html/CSS Probleme der Template darstellung

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Html/CSS Probleme der Template darstellung

Ähnliche Themen

Html Template einbinden

php oder html Template?

WYSIWYNotG... Probleme bei der Darstellung trotz richtigem HTML?

Abfrage für Darstellung in Template System

Darstellung von Ordnerinhaltem in HTML ?

Aktive Benutzer

Aktive Benutzer