Hmm, ich will ja nicht mosern forummx aber es wäre schon nett gewesen wenn die Community ein feedback bekommen hätte ob die Lösung erfolgreich war oder nicht. So schaut man schon mal selber nach. Offensichtlich hast du ja das Ergebnis, das Du haben wolltest. Ein kleiner Dank ist doch hier die Motivation zu helfen.
Beiträge von yeti66
-
-
Du hast 2 Möglichkeiten 1. Farbe zu Transparenz um eine Farbe transparent zu setzen oder das ganze Bild unter dem Fenster Ebenen,Kanäle,Pfade die Deckkraft des Bildes zu verändern.
-
Also 2 Deklarationen addieren sich.
HTML
Alles anzeigen.categories { font-size: 10px; overflow: hidden; text-align: left; height: 100%; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 1px; border-width: 0px; border-style: solid; border-color: #ffffff; background-image: url(); background-color: #e7e7e7; padding-left: 3px; padding-right: 3px; padding-top: 1px; padding-bottom: 0px; }
...margin bottom:1px; und
HTML
Alles anzeigen#menubox_categories .cat_link { font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #000000; font-size: 11px; font-style: normal; font-weight: bold; text-align: left; text-decoration: none; text-transform: none; margin-bottom: 1px; }
margin-bottom: 1px;
Unter .categories würde ich alles verkürzen und auf margin:0; setzen. Das sollte Dein Problem beheben. -
So jetzt habe ich etwas nachgebessert. Zum scrollen ( overflow:scroll;) braucht er leider eine feste Höhenangabe. Wie Du das am besten anlegst musst Du selber sehen.
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Welcome at JBJHJM.com!</title> <meta name="author" content="JBJHJM" /> <style type="text/css"> <!--/* CSS Document */ /*reset styles*** thanks to Eric A. and Kathryn S. Meyer *** http://meyerweb.com/eric/thoughts/2007/05/01/*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;} /*reset styles end*/ body {background: url(http://homepage.alice.de/jbjhjm/Data/background_tiled.png) repeat 0 0 fixed;min-width: 40em; position:fixed;} div {text-align: left;} div#wrapper {width:100%;} div#header {height: 114px;background: url(http://homepage.alice.de/jbjhjm/Data/Header01.jpg) repeat-x 0 0; position:fixed; top:0; width:100%;} #logo {height: 114px;width: 413px;background:url(http://homepage.alice.de/jbjhjm/Data/Header00.jpg) no-repeat 0 0 ;position:fixed;} div#navbar {background:url(http://homepage.alice.de/jbjhjm/Data/Navbar.jpg) no-repeat;width: 214px;height: 913px;position:fixed; left:0; top:114px;} ul#Navigation {width: 214px;border: none;margin: 0 0 0 0;padding: 16px 0px 0px 0px;float: left;} ul#Navigation li {list-style: none;margin: 5px 0 0 20px;padding: 0;} ul#Navigation a, ul#Navigation span, ul#Navigation h2 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;display:block;padding: 8px;text-decoration: none;font-weight: bold; text-indent: 55px;border: none;color: maroon;background-image:url(http://homepage.alice.de/jbjhjm/Data/button_blue.png);background-color: #000;height: 18px;} ul#Navigation a:hover, ul#Navigation span {border: none;color: white;background-image:url(http://homepage.alice.de/jbjhjm/Data/button_red.png);background-color: #000;} ul#Navigation h2 {font-size: 1em;margin: 0 0 0;color: black;background-color: #000;background-image:url(http://homepage.alice.de/jbjhjm/Data/button_gold.png);} #langbox {margin:10px;text-align:center;} div#main {color:#fff;min-width: 40em;height:600px;margin: 144px 30px 30px 240px;background:url(http://homepage.alice.de/jbjhjm/Data/background_text.png) repeat fixed; overflow:scroll;} div#main p {text-align:justify; margin:30px;} --> </style> </head> <body> <div id="wrapper"> <div id="header"> <p id="logo"> </p> </div> <div id="navbar"> <ul id="Navigation"> <li><a href="index_en.html">Home</a></li> <li><a href="news_en.html">News</a></li> <li> <h2> Graphic Design</h2> </li> <li><a href="wip_en.html">WIPs</a></li> <li><a href="gallery_en.html">Gallery</a></li> <li><a href="tutorials_en.html">Tutorials</a></li> <li> <h2> Music</h2> </li> <li><a href="guitar_tabs_en.html">Guitar tabs</a></li> <li><a href="reviews_en.html">Reviews</a></li> <li><a href="recordings_en.html">Recordings</a></li> <li> <h2>Other</h2> </li> <li><a href="about_en.html">About</a></li> <li><a href="contact_en.html">Contact</a></li> <li><a href="links_en.html">Links</a></li> </ul> <p id="langbox"> <a href="index_de.html" class="langbtn_de"><img src="http://homepage.alice.de/jbjhjm/Data/de.png" alt="Deutsch"/> </a> <a href="index_en.html" class="langbtn_en-us"><img src="http://homepage.alice.de/jbjhjm/Data/en-us.png" alt="English"/> </a> </p> </div> <div id="main"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </div> </div> </body> </html>
Ein Tip von mir: reduziere Dein Hintergrundmuster in der Größe (siehe Anhang von2-3MB!!! auf rund 190kB) oder besser erzeuge eine richtige Kachel!
PS.: .......keine Anzeige der deutschen Flagge. Wo hast Du die denn abgelegt? Kontrolliere doch mel Deinen Link!
-
Sorry aber zum Jubeln ist noch kein Grund. Das sind alles noch Schnellschüsse und nichts ausgereiftes, was man abliefern könnte. Darum schreibe ich auch gerne: "..es sind Ansätze (um weiterzumachen)". Nicht mehr.
Mal sehen in Opera hatte ich noch, aber jetzt sehe ich es auch und IE7 abwärts bis IE5 sollte es auch noch bringen. -
Ok, ich habe etwas nachgebessert:
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Welcome at JBJHJM.com!</title> <meta name="author" content="JBJHJM" /> <style type="text/css"> <!--/* CSS Document */ /*reset styles*** thanks to Eric A. and Kathryn S. Meyer *** http://meyerweb.com/eric/thoughts/2007/05/01/*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;} /*reset styles end*/ body {background: url(http://homepage.alice.de/jbjhjm/Data/background_tiled.png) repeat 0 0;min-width: 40em;} div {text-align: left;} div#wrapper {position: fixed;width:100%;} div#header {height: 114px;background: url(http://homepage.alice.de/jbjhjm/Data/Header01.jpg) repeat-x 0 0;} #logo {height: 114px;width: 413px;background:url(http://homepage.alice.de/jbjhjm/Data/Header00.jpg) no-repeat 0 0;} div#navbar {float: left;background:url(http://homepage.alice.de/jbjhjm/Data/Navbar.jpg) no-repeat 0 0;width: 214px;height: 913px;} ul#Navigation {width: 214px;border: none;margin: 0 0 0 0;padding: 16px 0px 0px 0px;float: left;} ul#Navigation li {list-style: none;margin: 5px 0 0 20px;padding: 0;} ul#Navigation a, ul#Navigation span, ul#Navigation h2 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;display:block;padding: 8px;text-decoration: none;font-weight: bold; text-indent: 55px;border: none;color: maroon;background-image:url(http://homepage.alice.de/jbjhjm/Data/button_blue.png);background-color: #000;height: 18px;} ul#Navigation a:hover, ul#Navigation span {border: none;color: white;background-image:url(http://homepage.alice.de/jbjhjm/Data/button_red.png);background-color: #000;} ul#Navigation h2 {font-size: 1em;margin: 0 0 0;color: black;background-color: #000;background-image:url(http://homepage.alice.de/jbjhjm/Data/button_gold.png);} #langbox {margin:10px;text-align:center;} div#main {color:#fff;min-width: 40em;min-height:40em;overflow:scroll;margin: 30px 30px 30px 240px;background:url(http://homepage.alice.de/jbjhjm/Data/background_text.png) repeat;} div#main p {text-align:justify; margin:30px;} --> </style> </head> <body> <div id="wrapper"> <div id="header"> <p id="logo"> </p> </div> <div id="navbar"> <ul id="Navigation"> <li><a href="index_en.html">Home</a></li> <li><a href="news_en.html">News</a></li> <li> <h2> Graphic Design</h2> </li> <li><a href="wip_en.html">WIPs</a></li> <li><a href="gallery_en.html">Gallery</a></li> <li><a href="tutorials_en.html">Tutorials</a></li> <li> <h2> Music</h2> </li> <li><a href="guitar_tabs_en.html">Guitar tabs</a></li> <li><a href="reviews_en.html">Reviews</a></li> <li><a href="recordings_en.html">Recordings</a></li> <li> <h2>Other</h2> </li> <li><a href="about_en.html">About</a></li> <li><a href="contact_en.html">Contact</a></li> <li><a href="links_en.html">Links</a></li> </ul> <p id="langbox"> <a href="index_de.html" class="langbtn_de"><img src="http://homepage.alice.de/jbjhjm/Data/de.png" alt="Deutsch"/> </a> <a href="index_en.html" class="langbtn_en-us"><img src="http://homepage.alice.de/jbjhjm/Data/en-us.png" alt="English"/> </a> </p> </div> <div id="main"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p> </div> </div> </body> </html>
Warum er nur die Scrolleiste anzeigt und nicht scrollt muss noch einmal nachgesehen werde. Getestet ist es jetzt auch nur im FF/IE8 sorry aber ich muß jetzt erst einmal Geld verdienen.
-
Ok hier mal ein Ansatz mit aufgeräumten Code. Die exakte Darstellung des main-Containers ist tricky und will mir noch nicht gelingen. Aber vielleicht sehen andere mehr. Hier der Code:
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Welcome at JBJHJM.com!</title> <meta name="author" content="JBJHJM" /> <style type="text/css"> <!--/* CSS Document */ /*reset styles*** thanks to Eric A. and Kathryn S. Meyer *** http://meyerweb.com/eric/thoughts/2007/05/01/*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /*reset styles end*/ body { text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */ background: url(http://homepage.alice.de/jbjhjm/Data/background_tiled.png) repeat 0 0; } div { text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */ } html, body, #main { height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */ } /* DIV-Boxen */ div#wrapper { position: relative; margin: 0 auto; width: 100%; min-height: 100%; /* Mindesthöhe in modernen Browsern */ height: auto !important; /* !important-Regel für moderne Browser */ height: 100%; /* Mindesthöhe in IE (<7) */ } div#header { height: 114px; background: url(http://homepage.alice.de/jbjhjm/Data/Header01.jpg) repeat-x 0 0; } #logo { height: 114px; width: 413px; background:url(http://homepage.alice.de/jbjhjm/Data/Header00.jpg) no-repeat 0 0; } div#navbar { float: left; background:url(http://homepage.alice.de/jbjhjm/Data/Navbar.jpg) no-repeat 0 0; width: 214px; height: 913px; } ul#Navigation { width: 214px; border: none; margin: 0 0 0 0; padding: 16px 0px 0px 0px; float: left; } ul#Navigation li { list-style: none; margin: 5px 0 0 20px; padding: 0; } ul#Navigation a, ul#Navigation span, ul#Navigation h2 { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; display:block; padding: 8px; text-decoration: none; font-weight: bold; text-indent: 55px; border: none; color: maroon; background-image:url(http://homepage.alice.de/jbjhjm/Data/button_blue.png); background-color: #000; height: 18px; } ul#Navigation a:hover, ul#Navigation span { border: none; color: white; background-image:url(http://homepage.alice.de/jbjhjm/Data/button_red.png); background-color: #000; } ul#Navigation h2 { font-size: 1em; margin: 0 0 0; color: black; background-color: #000; background-image:url(http://homepage.alice.de/jbjhjm/Data/button_gold.png); } #langbox { margin:10px; text-align:center; } /*#wrap{float: left;}*/ div#main { position: absolute; width:80%; margin: 30px 0px 30px 240px; background:url(http://homepage.alice.de/jbjhjm/Data/background_text.png) repeat; } /* clearfix zum Aufheben der Floatumgebung */ .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ --> </style> </head> <body> <div id="wrapper" class="clearfix"> <div id="header"> <p id="logo"> </p> </div> <div id="navbar"> <ul id="Navigation"> <li><a href="index_en.html">Home</a></li> <li><a href="news_en.html">News</a></li> <li> <h2>Graphic Design</h2> </li> <li><a href="wip_en.html">WIPs</a></li> <li><a href="gallery_en.html">Gallery</a></li> <li><a href="tutorials_en.html">Tutorials</a></li> <li> <h2>Music</h2> </li> <li><a href="guitar_tabs_en.html">Guitar tabs</a></li> <li><a href="reviews_en.html">Reviews</a></li> <li><a href="recordings_en.html">Recordings</a></li> <li> <h2>Other</h2> </li> <li><a href="about_en.html">About</a></li> <li><a href="contact_en.html">Contact</a></li> <li><a href="links_en.html">Links</a></li> </ul> <p id="langbox"> <a href="index_de.html" class="langbtn_de"><img src="http://homepage.alice.de/jbjhjm/Data/de.png" alt="Deutsch"/> </a> <a href="index_en.html" class="langbtn_en-us"><img src="http://homepage.alice.de/jbjhjm/Data/en-us.png" alt="English"/> </a> </p> </div> <div id="wrap"> <div id="main">main</div> </div> </div> </body> </html>
PS.: Die Deklaration <H2> und der Navi solltest Du durch eine id ersetzen
-
-
Ähhhm,......WIP`s ?? oder meinst Du VIP (Very Important Person)....
-
HTML
<div id="footer-text"> <h6>Copyright © Promi News – Promis, Bilder, Musikvideos, Interviews und News auf bicharehswelt.de 2008, All Rights Reserved | Valid <a style="text-decoration: none;" href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a> - <a style="text-decoration: none;" href="http://validator.w3.org/check/referer" rel="nofollow">XHTML</a> <br/>Theme Offered by <a style="text-decoration: none;" href="http://www.blogcrash.com/" title="Bloggers Forum Community" rel="nofollow">BlogCrash.com</a>, Proudly Powered by <a style="text-decoration: none;" href="http://www.wordpress.com/" rel="nofollow">WordPress</a></h6>
Ein Container im Container und dann noch H6 Auszeichnung ist doppelt gemoppelt.
HTML<p id="footer-text"> Copyright © Promi News – Promis, Bilder, Musikvideos, Interviews und News auf bicharehswelt.de 2008, All Rights Reserved | Valid <a style="text-decoration: none;" href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow">CSS</a> - <a style="text-decoration: none;" href="http://validator.w3.org/check/referer" rel="nofollow">XHTML</a> <br/>Theme Offered by <a style="text-decoration: none;" href="http://www.blogcrash.com/" title="Bloggers Forum Community" rel="nofollow">BlogCrash.com</a>, Proudly Powered by <a style="text-decoration: none;" href="http://www.wordpress.com/" rel="nofollow">WordPress</a></p>
Und jetzt die
#footer-text {anpassen} -
Ich habe mich erst einmal in mühevoller Kleinarbeit durch Deine Seiten geklickt. Diese zu pflegen ist ja schon ein Fulltime-Jop. Wenn die jetzige Seite mit dem Umfang weiter expandieren soll und quasi alle anderen Seiten Inhaltlich integriert werden sollen würde ich eher auf ein CMS setzen. Das ist für Deine Seite zukunftssicherer und der Pflegeaufwand hält sich in Grenzen.
Mit der Idee zur Navigation ist das immer so eine Sache, sie sollte halt zur Grundidee des Disigns passen. Momentan sehe ich aber kein Seitendesign auf obiger Seite. Deine ganzen Links zu eigenen Seiten würde ich z.B. als Galerie Themenbezogen sortiert mit einem Screenshot oder aussagekräftigen Symbol und kurzem Anrißtext versehen und damit es nicht langweilig wird alles in einer Leiste unterbringen Themenbezogen auf den Unterseiten verteilt. Die obere Linkleiste ist da kein Problem. Allerdings als Künstler würde ich von Dir ein einmaliges Screenkonzept erwarten. Etwas Spektakuläres halt, was aus der Masse heraussticht. Die Umsetzung ist dann nur noch technischer Natur.
Ach ja, was fehlt ist ein aussagekräftiger Titel ein Header in Form des Emblems im Impressum würde ja reichen. Beispielnavigationen findest Du bei Stu Nicholls auf der Seite http://www.cssplay.co.uk/menus/. Die grafische Umsetzung und Anpassung an die Seite ist dann noch eine andere Sache. -
Also ein wahnsinns Quellcode, das muss man man sagen. Bei dem aufgeblähten Code musste man ja irgendwann die Kontrolle verlieren. An Deiner Stelle würde ich auf die Navigation aus wilder Mischung von CSS und Tabelle verzichten. Unter http://www.cssplay.co.uk/menus/elegant1.html
findest du elegantere und sauberere Navigationen für eine Kunstseite. Allerdings würde ich eher zu einer weißen Seite tendieren um nicht von den wirklich sehr guten u.a. Zeichnungen abzulenken. Keine scrollbaren Textkästen - das tut sich keiner an und liest sich das durch. Statt der Lupenfunktion würde ich eher zu einem PopUp tendieren um das gesamte Bild größer darzustellen. Das hat dann auch den Vorteil von schnelleren Ladezeiten. -
Ja ich würde sagen es fehlen massiv die Inhalte. Ein Blog lebt von aktuellen News. Was mir aber als erstes auffällt ist die wilde Mischung aus englisch im Button und deutsch im Text. Ja was denn nun, wer ist Eure Zielgruppe?? Die Seite ist unkoordiniert, wenn ich mir die Sitemap ansehe frage ich mich wie ich von der index Seite zu Adam Sandler komme. Statt Partnerlinks fehlt hier ein Abriss News mit kurz angeschnittenem Text mit Bild und einem Link <<mehr>>. Allerdings steht hier alles, was Du brauchst in Kurzform http://www.google.com/support/webmas…de&answer=35291.
Habt Ihr Eure LogFile Analyse, Referrer Statistik Auswertung usw. gemacht?? Also wenn ich auf Eure Seite kommen bin ich in 10sek. weg. Warum? Es fehlen die Häppchen die mich neugierig machen weiterzulesen. Ein Blog ist eben nichts Statisches in der Pflege an Inhalten und im SEO-Bereich. -
Tja für mich ist es wichtig, welche Inhalte ich hier auf der Seite anbieten möchte. Dementsprechend passe ich den look der Seite/Titel an. Wenn ich mir die Seiten so betrachte könnte es in Richtung Fotoblog und Webseitenprogrammierung incl. nützlicher Tools/ Snippes und Problemlösern im HTML/PHP - Bereich gehen. Der Umfang und die Struktur der Inhalte bestimmen die Form der Navigation (vertigonal/horizontal, geschachtelt und als drop/down usw.) ebenso den aussagekräftigen Titel. Dein Titel suggeriert mir : >>Ich will Webseiten programmieren und brauche einen markigen "Firmennamen"<<!! (etwa made by TigerSoft). Schaue ich mir dann die Seite und den Code an frage ich mich: Wer soll mit der Seite geködert werden?
Wenn ich obige Vorstellung umsetzen wollte, dann gehe ich das als Projekt an:
1. Was will ich (vermarkten/anbieten und an welche Zielgruppe)?
2. Wie hebe ich mich von der Masse ab, damit man auf mich aufmerksam wird? (Marktanalyse: Was machen andere in der Branche, wie sehen deren Seiten aus?? )
3. Themenbezogene Site/Titel erstellen (auf Sachlichkeit und Seriösität achten)
4. Skizze/Screen erstellen
5. Coden der Seite
6. Content erstellen
7. Feinschliff und anschließender Test im Forum nebst sammeln von Kritiken.Konkret würde ich die jetzige Form vergessen und alles neu überdenken. Ein klassischer Blog der zu dem Thema einen enormen Content anbietet ist http://www.herz-apfel.de/. Er hat zwar schon einen besseren Look gehabt, aber er hat das was Du nicht hast : Inhalte. Der Titel ist auf den erst Blick nicht gerade intuitiv ergibt sich aber beim lesen der Seite. Äpfel (Tools/Tutorial usw. halt nützliche Dinge für Grafik und Co. allg.) als Beilage/Bereicherung für die Webseite / Photoshop / Foto´s usw.
Und so kann dann eine Seite aussehen: http://naldzgraphics.net/tutorials/30-most-wanted-photo-manipulation-tutorials-in-photoshop-part-i/:) -
Ja tut mir leid, aber Du arbeitest immer noch am Design ohne knackige Ideen und ohne Inhalte. Welchen Zweck dient die Seite eigentlich? Ich habe mal hin und her gezappt zwischen "alter Site" + "neuer Site" und dem neuem Design. Leider konnte ich nichts brauchbares finden. Sry
-
Ist ja OK, den Ansatz dahinter habe ich schon verstanden. Aber ich denke gerade der Anfänger braucht eher konkrete Hilfe. Die Rückfragen der hiesigen Forenuser zeigen denke ich ein klares Bild wie unklar die Aussagen des Tests sind. Die "Hinweistexte" nach denm Test sind so allgemein, das ich "gemeiner Weise" auch sagen könnte der Test ist gefakt und der Text dazu ist willkürlich, weil ...trifft immer.
-
Tja tut mir leid .......kein Content und ein modifiziertes Template, was soll man dazu sagen. Du hast eine Webseite zum Selbstzweck ins Netz gestellt nur das sie da ist und weiter nichts. Hier wird nichts vermittelt,nichts vorgestellt .. das ist einfach zu wenig. sorry:(
-
Naja , Hin oder Her. Der Test hat für mich keine Relevanz.
1. sind die Kriterieren des Tests nicht ersichtlich und nicht nachvollziehbar transparent.
2. sind die Erklärungen zu der erziehlten Prozentzahl so dünn, dass sie nur für allgemeine Tipps herhalten.
Was ich auch nicht verstehen kann: Was nützt mir eine Prozentangabe in Relation zu was (in 100% ausgedrückt)??? Soll der Test suggerieren: wenn ich ich die "Tipps" befolge kann ich 100% erreichen, im sinne einer perfekten Seite?? Und der Rang von ... zu 5124 getesteten Seiten? Spielerei....sorry:( -
Ja das Männchen sollte dann so groß wie das T sein und nach dem treten gegen den Schriftzug bzw. das T >>Schriftzug erzittert und das e dreht sich..
klingt einfach die Umsetzung ist natürlich haariger, aber die Idee gefiel mir irgendwie -
..unter eigenem Namen leider nicht. Da ich seit ein paar Jahren einem Bekannten unter die Arme Greife (wenn ich Zeit habe), damit er seine Abgabetermine schafft. Auf dem Rechner habe ich ein Projekt liegen bei dem ich mich bis jetzt aber gescheut habe es online zu stellen, da der Aktualisierungaufwand enorm wäre und ich selber voll in Lohn und Brot stehe. Mich regt das Gaststättenfutter (Convenience Food) auf. Wenn ich für gutes Geld vorgefertigte Nahrung aus dem Glas bekomme und nicht mehr richtig gekocht wird dann schwillt mir der Hals. Die Idee war darum ein Bewertungssystem einzuführen (Deutschlandweit). Bewertet wird durch den Gast. Vielleicht hebt das ja die Qualität.
P.S.: Für den schnellen Einstig in Joomla: Sonderheft Joomla1.5 von OpenSource , momentan im Handel und als HTML das Buch Joomla 1.5 lesen unter http://openbook.galileocomputing.de/joomla15/oder http://download.galileo-press.de/openbook/jooml…ng_joomla15.zip als PDF herunterladen.