Brauche etwas Hilfe bei Homepage...

JBJHJM

Hi,
Ich bin gerade dabei, meine erste Homepage zu erstellen, bin also noch ziemlicher Anfänger.

Jetzt habe ich aber drei Probleme (Link zur Site und Code siehe unten):

1. Der Titelbalken passt sich verschiedenen Bildschirmgrößen in der Breite wunderbar an - die Seitenleiste in der Höhe allerdings nicht. (Beide bestehen jeweils aus Logo/ strukturiertem Teil und einem wiederholenden Teil.) Wer kann mir sagen warum das nicht klappt?

2. Solange ich nicht rauszoome, sieht die HP auf meinem Bildschirm ja noch ganz ok aus, aber sobald ich die Auflösung ändere bzw. rauszoome, "zerbröckelt" alles ein wenig... eigentlich möchte ich, dass das Hauptfenster (momentan durch helleren Hintergrund angedeutet), unabhängig von der Fenstergröße, immer die Fläche vom jetzigen linken Ende bis kurz vorm rechten Ende des Bildschirms (also rechts ca. 50px Platz) füllt. Ist das (leicht) realisierbar?

3. Außer dem Text soll die Site nicht scrollbar sein, allerdings ist anscheinend momentan auch der Text bewegungsunfähig, wenn ich einen längeren Text reinschreibe, dann ist das Ende außerhalb des Sichtbereichs (nach unten hin), und ich kann nicht weiterscrollen.

So, das sind wohl erstmal genug dumme Anfängerfragen

Link zur HP

Im Anhang noch die .css-Datei, liegt auf der Homepage in ../Data/style.css.

Vielen Dank für eure Hilfe!!!!

Bandit

Erst mal die Fehler beheben und dann weitersehen: Klick mich

yeti66

Ähhhm,......WIP`s ?? oder meinst Du VIP (Very Important Person)....

JBJHJM

Werde die Fehler mal durchgehen.

Nein, es ist NICHT VIP gemeint. WIP ist richtig - ist die Abkürzung für Work-In-Progress.

JBJHJM

OK, habe die Fehler alle korrigiert.
Die oben genannten Probleme bestehen weiterhin (hätte mich auch gewundert wenn nicht ), zusätzlich noch folgende neue:

4. Habe ich gerade gemerkt, dass am linken Rand ein schmaler Streifen entsteht, allerdings sollte die Seitenleiste direkt am Rand der Site sein.

5. Das Hauptmenü und die Deutsch/Englisch-Buttons sind ganz verschwunden - ich hab sie aber nicht gelöscht... werden einfach nicht richtig eingebaut.

Hier ist die korrigierte style.css".txt"!

yeti66

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

<!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">&nbsp;</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>

Alles anzeigen

PS.: Die Deklaration <H2> und der Navi solltest Du durch eine id ersetzen

Code

<li id="fett"></li>

JBJHJM

Danke, werde mir deinen Code mal angucken!

JBJHJM

Schon Mal einige wesentliche Verbesserungen!
Allerdings bekomme ich es net hin, dass der Header und die Sidebar fest positioniert sind und nur der Main-Teil scrollbar ist...

yeti66

Ok, ich habe etwas nachgebessert:

HTML

<!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">&nbsp;</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>

Alles anzeigen

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.

JBJHJM

Super!!! Vielen Dank!!! Geld verdienen.. kann ich gut verstehen, ist ja später auch noch Zeit genug Du hilfst mir so viel weiter, da kann ich dich schlecht dazu drängen, schnell weiterzumachen - also sage ich einfach DANKE und warte ab, bis du Zeit hast

In Opera siehts größtenteils auch gut aus, allerdings wird dass Hauptfenster links eingerückt, sodass zwischen Navbar und Main-Fenster ca. 7-8cm Platz ist.

Wird bei dir die Deutschflagge angezeigt? Irgendwie ist sie bei mir weder mit Opera noch mit IE 8 online oder offline zu sehen!?

P.S.: "sadipscing elitr" - Ist das wirklich noch Latein? Kommt mir etwas ungewohnt vor

yeti66

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.

yeti66

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

<!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">&nbsp;</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>

Alles anzeigen

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!

JBJHJM

Die Flagge ist als de.png genau da abgelegt wo sie sein sollte. Auf der HP liegt sie in ../data/de.png, also genau, wo auch die amerikanische Flagge abgelegt ist, das Bild ist auch in Ordung. Früher gings noch, und irgendwann hat er sie nicht mehr angezeigt. Auch mit der lokalen Homepagestruktur auf meinem PC gehts nicht.

Der Hintergrund ist gekachelt, bloß ist die Kachel recht groß ..und auch noch in hoher Qualität...

Feste Höhe einstellen - ja, das sollte ich wohl noch schaffen.. denk ich
Auf jeden Fall vielen Dank für deine Mühe!

FreshPC

Ne, die gibts ja anscheinend nicht:
Not Found

The requested URL /jbjhjm/Data/de.png was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Wenn du auf Grafik anzeigen gehst..

JBJHJM

Stimmt. Allerdings ist das Bild laut FTP genau wos sein soll. Ich werde es mal löschen und neu laden, vlt funktionierts dann...

... bringt auch nichts. Kann ich höchstens einen anderen Dateinamen versuchen... *wtf*?!

Pion

Ähm welches Data hast du

Lad das bild mal da rein wo auch die index.htm ist und dann verlink richtig drauf also in den selben ordner das bild mal hochladen

JBJHJM

Über den ftp-server findet er die Datei, über http nicht...

Was meinst du mit "welches data hast du"?
Ich kann die Flagge mal direkt ins Homeverzeichnis laden, allerdings kann es daran eigentlich nicht liegen, da es mit allen anderen Bildern - darunter auch der Amerikanischen Flagge - funktioniert.

Tags