XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Design Darstellung (http://xhtmlforum.de/showthread.php?t=60939)

dessauer 23.04.2010 22:23

Design Darstellung
 
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.

dessauer - Home

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.

Der Css-Code

Code:

    #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 der HTML-Code

HTML-Code:

    <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

Scheppertreiber 24.04.2010 10:56

Erstmal den Code in Ordnung bringen, die Fehler müssen raus (siehe [Invalid] Markup Validation of http://www.der-dessauer.de.tl/ - W3C Markup Validator).

Dann HTML/CSS lernen und sich nicht auf einen "Homepage-Baukasten" verlassen 8)

Testen kannst Du das in diversen Browsern mit dem ietester, zu Entwicklung
empfehle ichh Firefox mit Firebug. Findest DU alles im Web.

dessauer 24.04.2010 11:25

Hallo Scheppertreiber,

ich habe mir gerade eben mal deinen Link angeschaut und das sind ja wirklich sehr viele Fehler :shock:

Ich habe nur einige Grundkentnisse zu HTML und CSS
Das mit dem Baukasten ist was anderes.
Der Baukasten gibt eigentlich Designs vor nur ich habe CSS-Design ausgewählt was bedeutet das man da wirklich alles selber machen muss also keine Hilfe von HPBK bekommt da dies eigentlich nicht dort vorgesehen war.

Ich werde mir auch gleich die Programme laden und dann schauen.

Meinst du wenn ich die Fehler beseitige das dann, dass Design richtig Positioniert und Dargestellt wird??

Vielen Dank trotzdem

Greetz

Dessauer

Scheppertreiber 24.04.2010 14:25

Ausprobieren. Keine Fehler = der Browser weiß, was gemeint ist.
Bring's mal in Ordnung und teste, wenn weiter Probleme bestehen
halt hier posten.

Viel Spaß ! :D

dessauer 25.04.2010 00:54

Hmm also wenn ich ganz ehrlich bin,

ich bin auf der von dir gegebenen Seite sehe die fehler aber wenn ich den Quellcode durchgehe finde ich die fehlerstellen nicht :roll:

Weiß nich bin ich dafür zu blöd habe eigentlich schon kentnisse dachte ich zumindest aber naja loL

dessauer 26.04.2010 22:25

Auch nach einer Nacht voller Schlaf bin ich noch nicht weiter hmm

Kann mir vielleicht jemand noch nen Tipp oder Hilfe geben.?

Finde viele Teile der Fehler nicht im Quellcode und kann diese daher auch nicht beheben >.<

Hoffe auf Antwort

Greetz

Dessauer

ShenLung 26.04.2010 22:36

Ich frage mal dumm dazwischen: Bist du sicher an der richtigen Datei zu arbeiten? Es ist (auch mir) schon passiert, dass z.B. die lokale Datei nicht mit der hochgeladenen übereinstimmte....

Ansonsten steht bei den Fehlermeldungen doch auch die entsprechende Zeile in der index.html dabei?

dessauer 27.04.2010 14:37

ShenLung

Danke erstmal für dein Interesse.

Ja ich habe die Index.html datei geöffnet den gesamten Quellcode kopiert und den bei HPBK eingefügt und die Inhalte entsprechend meiner Schreiben geändert.

Also kann es ja nicht an dem Quelltext liegen.

Auch wenn er mir die Zeilen zeigt ich finde einige davon einfach nicht auch wenn ich den Quelltext gerade rücken lasse und dergleichen ich weiß nicht was ich falsch mache o.O

ShenLung 27.04.2010 22:09

Ich kenne den HPBK nicht, aber hat der Editor dort keine Zeilennumerierung? Dann musst du die Zeilen nicht suchen, sondern kannst direkt zur angegebenen Zeilennummer gehen (sogar mein Brwoser zeigt beim Quelltext die Zeilennummern an ;) )
Zudem kann es natürlich vorkommen, dass einige Fehler nur Folgefehler sind. Ich hatte auch schon ein Dokument mit >10 Fehlern in dem eigentlich nur 1 Fehler war...

Zum Design selbst: viel breiter würde ich es nicht machen. Denke daran, dass es noch einige Menschen mit kleinen Monitoren gibt (ich mit meinem Laptop z.B. Momentan ;) ). Das führt dazu, dass ich nicht nur hoch-runter scrollen muss sondern auch links-rechts. Sowas ist immer etwas lästig und vom Inhalt deiner Seite her auch nicht unbedingt nötig.
Bei mir wird (in Chromium) übrigens deine Seite auch 'verschoben' dargestellt. Nachdem ich mir das mal in Firebug angeschaut habe muss ich sagen, dass mir in deiner Seite auch die Struktur fehlt. Wirkt alles irgendwie zusammengestückelt und passt nicht wirklich zusammen. Eigentlich schade, da mir das Design ansich ganz gut gefällt.

Mein Vorschlag für dich wäre, erst mal eine vernünftige Struktur in die Seite zu bringen. Schon mal statt HPBK nach YamL geschaut? Damit und mit einem vernünftigen Editor (mit Syntaxhighlightning und Zeilennummerierung) bekommst du sicherlich eine Seite hin, die in (fast?) jedem Browser gut aussieht.

dessauer 28.04.2010 08:04

Danke an ShenLung

Also leider zeigt der HBPK keine Zeilennummerierung an.

Jedoch ich habe ein Programm nennt sich "HTML-Editor" dieser Zeigt mir die Zeilen an.

Habe gestern mal bissl rumgeschaut und auf der Seite von deinem Vorposter noch die Option "Quelltext anzeigen" gefunden.

So war es mir möglich wenigstens einen Teil der Fehler zu sehen.

Nun bin ich aber wegen der Struktur die du erwähnt hast bissl skeptisch.

Ich dachte eigentlich das diese Seite eine Struktur hat :roll:

Wie gesagt bin nicht der Experte in HTML habe nur so Anfängerkentnisse und das Internet zur Verfügung.

Trotzdem wäre es gut wenn mir jemand zum Strukturieren der Seite ein bisschen Hilfestellung Leisten könnte.

Und ja das mit dem Verbreitern hab ich mir auch nocheinmal Überlegt, da wir in der Schule auch die Seite vollständig Breit angezeigt bekommen.

Also die Breite wird wohl so bleiben.

Vielen Dank trotzdem


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:58 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023