zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Design Darstellung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.04.2010, 22:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 12
dessauer befindet sich auf einem aufstrebenden Ast
Rotes Gesicht 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.04.2010, 10:56
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

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

Testen kannst Du das in diversen Browsern mit dem ietester, zu Entwicklung
empfehle ichh Firefox mit Firebug. Findest DU alles im Web.
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.04.2010, 11:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 12
dessauer befindet sich auf einem aufstrebenden Ast
Standard

Hallo Scheppertreiber,

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

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
Mit Zitat antworten
  #4 (permalink)  
Alt 24.04.2010, 14:25
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

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ß !
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
  #5 (permalink)  
Alt 25.04.2010, 00:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 12
dessauer befindet sich auf einem aufstrebenden Ast
Standard

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

Weiß nich bin ich dafür zu blöd habe eigentlich schon kentnisse dachte ich zumindest aber naja loL
Mit Zitat antworten
  #6 (permalink)  
Alt 26.04.2010, 22:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 12
dessauer befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 26.04.2010, 22:36
Benutzerbild von ShenLung
Benutzer
neuer user
 
Registriert seit: 19.04.2010
Ort: Friedewald / RLP
Beiträge: 71
ShenLung befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Gruß aus dem Westerwald
Ingo
Mit Zitat antworten
  #8 (permalink)  
Alt 27.04.2010, 14:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 12
dessauer befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 27.04.2010, 22:09
Benutzerbild von ShenLung
Benutzer
neuer user
 
Registriert seit: 19.04.2010
Ort: Friedewald / RLP
Beiträge: 71
ShenLung befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Gruß aus dem Westerwald
Ingo
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.04.2010, 08:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.04.2010
Beiträge: 12
dessauer befindet sich auf einem aufstrebenden Ast
Standard

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

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
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, design, hilfe, homepage, html, neu

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
design automatisch verlängern elias1993 CSS 4 06.05.2011 20:47
Design Scrollbalken in IE FF und O (mit Bildern) MarkusStar CSS 1 08.03.2009 15:27
Was haltet ihr von Design? tobik999 Offtopic 10 29.11.2008 00:03
Sitecheck: Barrierearm - Design - Ajax Schmidt Site- und Layoutcheck 16 21.08.2008 21:06
Design fertig aber welche Herangehensweise JanW1989 (X)HTML 12 28.08.2006 19:06


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