Dennis Hullin: Homepage an jede Auflösung anpassen!

Hallo Leute... ich habe ein großes Problem und frage mich ob ihr mir vielleicht helfen könntet.

Mein Problem bezieht sich auf die Seite http://www.pes-wl.de

Wie ihr vielleicht seht befindet sich neben dem Bild (http://burn2007.freehost.ag/Design...png) eine schwarze Fläche... wie schaffe ich es diese Fläche wegzubekommen und das Bild auf die ganze Fläche zu strecken??

Gäbe es dann auch eine Möglichkeit Leuten mit einer kleineren Auflösung das ewige Scrollen zu ersparen??? Bitte helft mir

Hier ein Teil des HTML-Codes:

<html>
<!-- Design by http://www.myblog.de/endless-design -->
<head>
<title>Paris</title>
<meta name="author" content="Shell">

<style type="text/css">
<!--

a:link     {  color:#FFFFFF ; cursor:crosshair; text-decoration: none  }
a:visited { color:#FFFFFF; cursor:crosshair; text-decoration: none  }
a:active { color:#FFFFFF; cursor:crosshair; text-decoration: none  }
a:hover { color:#FFFFFF; cursor:crosshair; text-decoration: none}
-->
</style>
<style type="text/css">
<!--

body, div, td {
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color:##990000;
scrollbar-face-color: #000000;
scrollbar-highlight-color:#000000 ;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color:#990000;
scrollbar-shadow-color: #FFFFFF;
font-family: verdana, arial, helvetica;
font-Size: 8pt;
Color: #FFFFFF;
}
       TEXTAREA {
                width: 250px;
                Color: #FFFFFF;
                Background-Color: transparent ;
                Font-Family: verdana, arial, helvetica;
                Font-Size: 8pt;
                width:330;
                Border: 1px dotted #FFFFFF;
                }

INPUT { Color: #FFFFFF;
             Background-Color:transparent ;
             Font-Family: verdana, arial, helvetica;
             Font-Size: 8pt;
             Border: 1px dotted  #FFFFFF;
             }

.entry  {font-family: verdana, arial, helvetica;
                 font-size: 8pt;
                 Color: #FFFFFF;
                 border: 2px, solid;
                 background-color:transparent ;
                 text-align: left;
                 width:300;
                  padding: 5px;}

.nav  {font-family: verdana, arial, helvetica;
                 font-size: 8pt;
                 color: #FFFFFF;
                 background-color:transparent ;
                 text-align: left;
                  padding: 5px;}

.entriesdate {
                     font-family: verdana, arial, helvitica;
                     font-size: 8px;
                     color: #FFFFFF;
                     background-color:transparent ;
                     text-align: left;
                     width:300;}

.inhaltetable{
              width:315;
              Color: #FFFFFF;
              border: #FFFFFF 1px
              Background-Color: transparent ;
              Font-Family: verdana, arial;
              Font-Size: 8pt;}

a:link     {  color:#FFFFFF ; cursor:crosshair; text-decoration: none  }
a:visited { color:#FFFFFF; cursor:crosshair; text-decoration: none  }
a:active { color:#FFFFFF; cursor:crosshair; text-decoration: none  }
a:hover { color:#FFFFFF; cursor:crosshair; text-decoration: none}

.navi {
color: #FFFFFFF;

}

//-->
</style>

<style type="text/css">
<!--
TEXTAREA {width: 250;
}
//-->

</style>

<style>
<!--
.inhaltetable {
width: 315;
}
//-->
</style>

</head>

<body style="cursor:crosshair" text="#000000" bgcolor="#000000" >

<div style="position:absolute;  left: 0px; top: 0px" ><img
src="http://burn2007.freehost.ag/Design...png" border="0"
alt=""></div>

  1. Hallo Dennis,

    Hallo Leute... ich habe ein großes Problem und frage mich ob ihr mir vielleicht helfen könntet.

    Mein Problem bezieht sich auf die Seite http://www.pes-wl.de

    hmmm... ich fürchte, das ist mit ein bis zwei Tipps nicht getan. HTML ist vom Prinzip erst mal ziemlich flexibel, d.h. viele Elemente passen sich vom Inhalt her an den verfügbaren Platz von selber an - da muß man gar nicht soviel tun.

    Bei Dir sind aber jetzt fast alle Elemente mit der CSS-Eigenschaft "position" als "absolut" festgetackert, Sowohl dein Hintergrundbild als auch der Rest, wenn ich das richtig sehe. Da kann sich nix mehr ausbreiten...

    Ohne ein etwas tiefgreifenderes Befassen mit CSS, das z.B. auf so ein dreispaltiges, floatendes Layout aufsetzt, wirst Du das Problem nicht so "mal eben" lösen können.

    Mal abgesehen davon ist die Darstellung doch gar nicht so furchtbar ;-) - das bißl Schwarz neben dem Inhalt paßt da doch gut hin. Um wenigstens  den Querscrolli auszuschalten, würde ich allerdings dein Haupthintergrundbild auch wirklich als  Hintergrundbild einbinden, und zwar am besten in den body.

    Würde dir das schon mal weiterhelfen? Wenn Du den Rest auch ausprobieren möchtest, einfach mal anfangen und hier wieder fragen, wenn es klemmt.

    Gruß aus Köln-Ehrenfeld,

    Elya

    --
    1. Danke für deine schnelle Antwort... wie schaff ich es denn aber nun das Bild als Hintergrund einzurichten??

      muss doch einfach nur anstatt backround1.gif meinen link einfügen oder??? funktioniert aber leider so nicht...

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html><head><title>background-image</title>
      </head><body style="background-image:url(background1.gif)">

      <div style="background-image:url(background2.gif); margin:0px; padding:10px">
      <h1 style="text-align:center;color:#FFFFCC">Willkommen im Reich der Texturen!</h1>

      <div style="background-image:url(background3.jpg); margin:30px; padding:10px">
      <h2 style="text-align:center;color:#804000">Willkommen im Reich der Texturen!</h2>

      </div></div>

      </body></html>

      1. Hallo Dennis,

        Danke für deine schnelle Antwort... wie schaff ich es denn aber nun das Bild als Hintergrund einzurichten??

        Hattest Du Dir das Kapitel zu background-image mal angesehen?

        funktioniert aber leider so nicht...

        was genau passiert denn?

        Zusätzlich zum Bild solltest Du noch angeben, ob sich das Bild kacheln (wiederholen) soll oder nicht, und evtl. eine Position für den Hintergrund angeben. Die einzelnen CSS-Anweisungen trennst du mit ;

        </head><body style="background-image:url(background1.gif)">

        einfacher wird es, wenn Du alle CSS-Angaben in ein separates Stylesheet auslagerst, dann brauchst du es nur einmal zentral zu verwalten und nicht in jeder Einzelseite.

        Gruß aus Köln-Ehrenfeld,

        Elya

        --