Design darstellung

[dessauer]

Hallo,

ich habe ein Design für meine Homepage gemacht,
das bei mir selbst am Pc korrekt angezeigt wird jedoch bei manch anderen wird es versetzt angezeigt.

Auch würde ich gerne das Design ein bisschen Verbreitern, sodass es nicht links und rechts so viel Platz frei hat.

Hier könnt Ihr das momentane Design sehen.

http://www.der-dessauer.de.tl

Ich gebe den CSS-Code sowie einen HTML Coder der Seite hier her.

Hoffe das Ihr mir Helfen könnt und eventuelle Fehler meiner Codes ausbügeln könnt.

Wäre für eine Hilfe sehr Dankbar.

Css-Code

Code: Alles auswählen

#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#nav{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

* {
   margin: 0;
   padding: 0;
}

body {
position: absolute; left: 20; top: 0px;
   background: #000000 url(http://img.webme.com/pic/d/der-dessauer/img24.jpg) no-repeat center top;
   font: normal 13px Georgia, "Times New Roman", Times, serif;
   color: #4E515B;
}

h1, h2, h3 {
   color: #CDCDE2;
}

h2 {

}

h3 {

}

p, blockquote, ul, ol {
   text-align: justify;
}

p {
}

blockquote {
   margin-left: 3em;
}

ul {
   margin-left: 3em;
}

ul li {
}

.list1 {
   margin: 0;
   padding: 0;
   list-style: none;
}

.list1 li {
   padding: 8px 0;
   background: url(http://img.webme.com/pic/d/der-dessauer/img5.gif) repeat-x center top;
}

.list1 .first li {
   background: none;
}

ol {
   margin-left: 3em;
}

ol li {
}

a {
   text-decoration: none;
   color: #CDCDE2;
}

a:hover {
   text-decoration: underline;
   color: none;
}

img {
   border: none;
}

img.left {
   float: left;
   margin: 5px 15px 0 0;
}

img.right {
   float: right;
   margin: 5px 0 0 15px;
}

/* Boxed Style */

.boxed {
   margin-bottom: 20px;
}

.boxed .title {
   padding: 5px 0;
   background: url(http://img.webme.com/pic/d/der-dessauer/img5.gif) repeat-x left bottom;
}

.boxed .title h2 {
   background: url(http://img.webme.com/pic/d/der-dessauer/img2.gif) no-repeat right center;
   text-transform: uppercase;
   font-size: 100%;
}

.boxed .content {
   padding: 20px 20px 40px 20px;
}

/* Post */

.post {
}

.post .title {
   padding: 5px 0;
   background: url(http://img.webme.com/pic/d/der-dessauer/img5.gif) repeat-x left bottom;
}

.post .title h2 {
   background: url(http://img.webme.com/pic/d/der-dessauer/img2.gif) no-repeat right center;
   text-transform: uppercase;
   font-size: 100%;
}

.post .date {
   float: left;
   width: 100px;
   height: 25px;
   padding-top: 15px;
   background: url(http://img.webme.com/pic/d/der-dessauer/img5.gif) repeat-y right top;
   text-align: center;
   font-size: 9px;
}

.post .date .month {
}

.post .date .day {
}

.post .date .year {
}

.post .meta {
   float: left;
   width: 300px;
   height: 32px;
   padding: 8px 0 0 20px;
   font-size: 9px;
}

.post .meta p {
}

.post .story {
   clear: both;
   padding: 20px;
   background: url(http://img.webme.com/pic/d/der-dessauer/img5.gif) repeat-x;
}

.post .story p, .post .story blockquote, .post .story ul, .post .story ol {
   margin-bottom: 1.5em;
   line-height: 180%;
}

/* Logo */

#logo {
   width: 700px;
   height: 220px;
   margin: 1 auto;
}

#logo h1 {
   margin: 0;
   padding: 59px 0 0 325px;
   text-transform: uppercase;
   letter-spacing: -5px;
   font-size: 72px;
   font-weight: normal;
}

#logo h2 {
   margin: -10px 0 0 0;
   padding: 0 0 0 325px;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 18px;
   font-weight: normal;
}

#logo a {
   text-decoration: none;
   color: #000000;
}

/* Page */

#page {
   width: 700px;
   margin: 5 left;
}

#extra {
}

/* Content */

#content{
   float: right;
   width: 420px;
   padding: 20 0px;
   background: none; no-repeat;
}

/* Sidebar */

#sidebar {
   float: left;
   width: 200px;
   padding: 0 20px;
   background: url(http://img.webme.com/pic/d/der-dessauer/img3.gif) no-repeat right top;
}

/* Content > Sidebar > Login */

#login {
}

#login form {
}

#login fieldset {
   border: none;
}

#login legend {
   display: none;
}

#login label {
   font-size: x-small;
   font-weight: bold;
}

#login input {
   margin-bottom: 5px;
   padding: 2px 5px;
   border: none;
   font-family: Georgia, "Times New Roman", Times, serif;
}

#inputtext1, #inputtext2 {
   width: 150px;
}

#inputsubmit1 {
   width: 100px;
   background: transparent url(http://img.webme.com/pic/d/der-dessauer/img2.gif) no-repeat left top;
   color: #CDCDE2;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 10px;
   font-weight: bold;
}

/* Content > Sidebar > Menu */

#menu {
   width: 700px;
   height: 90px;
   margin: 0 auto;
}

#menu ul {
   margin: 0;
   padding-left: 20px;
   list-style: none;
}

#menu li {
   display: inline;
}

#menu a {
   display: block;
   float: left;
   height: 34px;
   padding: 12px 30px 0 40px;
   text-decoration: none;
   text-transform: uppercase;
   font-size: 16px;
   color: #4E515B;
}

#menu a:hover {
   background: url(http://img.webme.com/pic/d/der-dessauer/img2.gif) no-repeat 15px 50%;
   color: #CDCDE2;
}

#menu .first a {
   border: none;
}

#menu .active a {
   color: #FFFFFF;
}

/* Footer */

#footer {
position: absolute; left: 0;
   clear: both;
   width: 760px;
   margin: 0 200px;
   padding: 150px;
   background: url(http://img.webme.com/pic/d/der-dessauer/footer.jpg) no-repeat;
}

#footer p {
   margin: 0;
   text-align: right;
   font-size: x-small;
}

/* Footer > Legal */

#legal {
}

/* Footer > Links */

#links {
}


und hier noch ein HTML Code

Code: Alles auswählen

<p>&nbsp;</p>
<div id="logo">
<h1><span style="color: rgb(255, 0, 0);"><span style="text-decoration: underline;"><br />
</span></span></h1>
<h2>&nbsp;</h2>
</div>
<br />
<div id="menu">
<ul>
    <li><a href="http://www.der-dessauer.de.tl/home.htm"><strong><span style="color: rgb(255, 0, 0);">H</span>ome</strong></a></li>
    <li><a href="http://www.der-dessauer.de.tl/about.htm"><strong><span style="color: rgb(255, 0, 0);">&Uuml;</span>ber <span style="color: rgb(255, 0, 0);">U</span>ns<br />
    </strong></a></li>
    <li><a href="http://www.der-dessauer.de.tl/gallerie.htm"><strong><span style="color: rgb(255, 0, 0);">G</span>alerie</strong></a></li>
    <li><a href="http://www.der-dessauer.de.tl/g.ae.stebuch.htm"><strong><span style="color: rgb(255, 0, 0);">G</span>b</strong></a></li>
    <li><a href="http://www.der-dessauer.de.tl/kontakt.htm"><strong><span style="color: rgb(255, 0, 0);">K</span>ontakt</strong></a></li>
</ul>
</div>
<!-- end #menu -->
<div id="page">
<div id="content">
<div class="post" id="welcome">
<div class="title">
<h2 style="text-align: center;"><span style="color: rgb(255, 0, 0);">W</span>illkommen  <span style="color: rgb(255, 0, 0);">i</span>m <span style="color: rgb(255, 0, 0);">S</span>tudio</h2>
<h3 class="date"><span class="month">17.April 2010</span></h3>
<div class="meta">
<p><span style="text-decoration: underline;">Written by Michael  Hofmeister</span></p>
</div>
<div class="story"><img height="112" width="112" class="left" alt="" src="http://dkpresents.files.wordpress.com/2009/02/neu75_albumcover1.jpg" />
<p><strong><span style="font-style: italic;">Wie Ihr sehen k&ouml;nnt,  arbeiten wir an einem neuen Design um Eure Zufriedenheit zu garantieren.  Ich hoffe das dieser neue Look f&uuml;r Euch genauso ein Augenschmaus ist  wie f&uuml;r uns. Es wird nach und nach noch weitere Ver&auml;nderungen geben.</span></strong></p>
</div>
<h1 style="text-align: center;">&nbsp;</h1>
</div>
<div class="story">
<div class="title">
<h2 style="text-align: center;"><span style="color: rgb(255, 0, 0);">U</span>mbau</h2>
</div>
<h3 class="date"><span class="month">18.April 2010</span></h3>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;"><strong>In den letzten Wochen wurde das  Tattoostudio &quot;Dragon Claw&quot; umgebaut.<br />
Nun stehen mehr Platz und ein separater Eingang f&uuml;r Euch zu Verf&uuml;gung.<br />
Dieser Eingang befindet sich nun auf der Hinterseite, so dass Ihr nicht  mehr durch den Friseursalon &quot;L&eacute; Figaro&quot; laufen m&uuml;sst um in mein Studio  zu kommen.<br />
<br />
Gru&szlig; Dominik</strong></p>
</div>
</div>
<div class="post" id="example">
<div class="title"><center><br />
<p>&nbsp;</p>
</center></div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="login" class="boxed">
<div class="title">
<h2><span style="color: rgb(255, 0, 0);">F</span>avoriten</h2>
</div>
<div class="content">
<div class="ad_125x125_box"><left><img height="100" width="75" src="http://img.webme.com/pic/t/tattoostudio-dragon-claw/dsc00203_300_400.jpg" alt="" /> &nbsp; </left><img height="100" width="75" src="http://img.webme.com/pic/t/tattoostudio-dragon-claw/dsc00217_300_400.jpg" alt="" /></div>
<div class="ad_125x125_box"><br />
<img height="100" width="75" src="http://img.webme.com/pic/t/tattoostudio-dragon-claw/dsc00205_300_400.jpg" alt="" />&nbsp;&nbsp; <img height="100" width="75" src="http://img.webme.com/pic/t/tattoostudio-dragon-claw/dsc00222_300_400.jpg" alt="" /></div>
<left><br />
<div class="ad_125x125_box"><a href="http://tattoostudio-dcity.de/galerie.htm"> <br />
</a> <br />
<iframe scrolling="no" height="318" frameborder="0" width="150" align="aus" src="http://www.homepage-baukasten-dateien.de/success4you/fluegel.htm" style="border: 0px none rgb(0, 0, 0);" name="myiframe1" marginheight="0" marginwidth="0"></iframe>
<p>&nbsp;</p>
</div>
<div class="ad_125x125_box"><a href="http://tattoostudio-dcity.de/galerie.htm"> <br />
</a></div>
<div class="cleaner" style="text-align: left;">&nbsp;</div>
&nbsp;</left></div>
</div>
</div>
<div style="clear: both;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div>
</div>
<div id="footer">
<div style="text-align: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Copyright &copy; 2010. All Rights Reserved.       Designed by Michael  Hofmeister.</div>
<div style="text-align: left; margin-left: 280px;"><a href="http://www.der-dessauer.de.tl/impressum.htm"><span style="font-size: small;"><span style="color: rgb(255, 255, 0);">Impressum</span></span></a></div>
</div>
<p><a href="http://www.der-dessauer.de.tl/Impressum">&nbsp;</a></p>

Danke für Eure hilfe im Vorraus

[dessauer]

Hmm hat wirklich keiner eine Lösung die mich weiter bringen würde??

Ich finde einfach nicht den fehler der das Design zum Verschieben bringt >.<

[sejuma]

Ist ziemlich mühsam, sich da durchzuwursteln.
In jedem Fall solltest du zunächst diese Validierungsfehler beheben, um sie als Fehlerquelle auszuschließen:
http://validator.de.selfhtml.org/validate/?uri=http://www.der-dessauer.de.tl/

[dessauer]

Sejuma danke für deinen Tipp

Nun habe ich mir die Fehler angeschaut und ich finde kaum die Zeilen die er mir als Fehler zeigt.

Habe den QUelltext nun mehrere male durchforstet und nichts gefunden

Kannst du mir vllt noch irgendwie helfen??

Ich habe schon kentnisse in HTML und CSS nur nicht wirklich profi reif

Danke für deine Bemühung

[sejuma]

[url]http://validator.de.selfhtml.org/validate/?uri=http://www.der-dessauer.de.tl/&extended=1&vi
ewSource=1&userAgent=Mozilla/4.0%20%28compatible%3b%20MSIE%206.0%3b%20Windows%20NT%205.1%29[/url]