|
|||
![]()
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 { } HTML-Code:
<p> </p> <div id="logo"> <h1><span style="color: rgb(255, 0, 0);"><span style="text-decoration: underline;"><br /> </span></span></h1> <h2> </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);">Ü</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önnt, arbeiten wir an einem neuen Design um Eure Zufriedenheit zu garantieren. Ich hoffe das dieser neue Look für Euch genauso ein Augenschmaus ist wie für uns. Es wird nach und nach noch weitere Veränderungen geben.</span></strong></p> </div> <h1 style="text-align: center;"> </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;"> </p> <p style="text-align: justify;"><strong>In den letzten Wochen wurde das Tattoostudio "Dragon Claw" umgebaut.<br /> Nun stehen mehr Platz und ein separater Eingang für Euch zu Verfügung.<br /> Dieser Eingang befindet sich nun auf der Hinterseite, so dass Ihr nicht mehr durch den Friseursalon "Lé Figaro" laufen müsst um in mein Studio zu kommen.<br /> <br /> Gruß Dominik</strong></p> </div> </div> <div class="post" id="example"> <div class="title"><center><br /> <p> </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="" /> </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="" /> <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> </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;"> </div> </left></div> </div> </div> <div style="clear: both;"> </div> </div> <div id="footer"> <div style="text-align: left;"> Copyright © 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"> </a></p> |
Sponsored Links |
|
||||
![]()
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. |
Sponsored Links |
|
|||
![]()
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 |
|
|||
![]()
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 |
|
|||
![]()
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
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 |
|
||||
![]()
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 ![]() 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 |
Sponsored Links |
|
|||
![]()
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 |
Sponsored Links |
![]() |
Stichwörter |
css, design, hilfe, homepage, html, neu |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
design automatisch verlängern | elias1993 | CSS | 4 | 06.05.2011 19:47 |
Design Scrollbalken in IE FF und O (mit Bildern) | MarkusStar | CSS | 1 | 08.03.2009 14:27 |
Was haltet ihr von Design? | tobik999 | Offtopic | 10 | 28.11.2008 23:03 |
Sitecheck: Barrierearm - Design - Ajax | Schmidt | Site- und Layoutcheck | 16 | 21.08.2008 20:06 |
Design fertig aber welche Herangehensweise | JanW1989 | (X)HTML | 12 | 28.08.2006 18:06 |