Frage stellen

Hintergrund 2 Farben

4.1k Aufrufe
Gefragt in Webseiten HTML von
Guten Abend,
ich möchte den Hintergrund einer Homepage gern ich zwei Farben haben. Z. B. links 600px grün, rechts 600px gelb. Trotz vieler Versuche gelingt es mit nicht.
Wie baue ich diese Seite auf?
Danke für die Hilfe.
Schönen Abend und
beste Grüße

17 Antworten

0 Punkte
Beantwortet von
Hallo computerschrat,
Hans-Peter ist richtig.
Danke für Deine Nachricht. Ich habe sämtliche Empfehlungen versucht, umzusetzen. Jedoch ohne Erfolg. Es erscheint lediglich eine gelbe Seite mit dem Text: "hier ist der Inhalt der Seite".
Folgenden Text habe ich stehen:

<head>
<link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>

<img src="../bilder/test.png" width="600" height="600" border="0" alt="">

<div id="inhalt">
<h1>hier ist der Inhalt der Seite</h1>
</div><!--Ende #inhalt-->
</body>
</body>

In der css-Datei steht:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#fuellung {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

#inhalt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}

Was ist jetzt falsch?
Danke für Deine Geduld.
Gruß
Hans-Peter
0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
Hallo Hans-Peter,

mir der Zeile

<img src="../bilder/test.png" width="600" height="600" border="0" alt="">

benutzt du nicht die CSS Formatierung aus dem File test.css.
Richtig wäre:

<img id="fuellung" src="../bilder/test.png" >

über id="fuellung" wird dem Bild die Formatierung aus dem oben eingebundenen CSS-File zugewiesen, und da steht schon die Größe mit 100% des Fensters in X und Y drin. Damit wird das Bild unabhängig von der Bildgröße und Fenstergöße auf das ganze Fenster skaliert. Deshalb steht in der Zeile <img src ... auch keine Größenangabe mehr drin.

Gruß
computerschrat
0 Punkte
Beantwortet von
Hallo computerschrat,
ich bekomme es einfach nicht hin. Nun sitze ich mehrere Stunden vor dem Computer, versuche jede Einstellung, ohne Erfolg.
Für heute ist das Ende der Fahnenstange erreicht. Vielleicht versuche ich es in den nächsten Tagen noch einmal.
Dir Danke ich für Deine Mühe und wünsche Dir ein schönes Wochenende.
Gruß
Hans-Peter
0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
Hallo Hans-Peter,

dann erstmal gute Erholung vom PC :-)
Wenn du noch einen Versuch machen möchtest, dann lösch mal testweise den Cache deines Browsers. Ich habe es schon oft erlebt, dass Änderungen im CSS vom Browser nicht als neu erkannt wurden und deshalb der alte Cache-Inhalt verwendet wurde.

Gruß und schönes Wochenende
computerschrat
0 Punkte
Beantwortet von
Hi,
ich hoffe, du hast die css-Datei im gleichen Ordner, wie die html-Datei abgelegt. Sonst musst du den Pfad zur css-Datei in der html-Datei anpassen.

<link rel="stylesheet" type="text/css" href="Pfad?/test.css">
0 Punkte
Beantwortet von
Ich glaune es geschafft zu haben. Überprüft noch einmal.
Dankeund
Gruß
Hans-Peter


body {
font: 23px Helvetica, Arial, sans-serif;
color: black; background-color: #FFFF00;

}
p {
margin: 3em 0 0 3em; /* Positionierung des 'zurueck'-Links */
}
p a {
color:black; /* Farbe des 'zurueck'-Links */
}

html {
padding: 0;
}
body {
margin: 0; padding: 0;
}

#fixiert {
position: absolute;
top: 0.8em; left: 200px;
width: 800px;
background-color: white;
border: 0px solid silver;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
#fixiert img {
height: 6.8em; float: right: 800px;
}

#Inhalt {
margin-right: 1000px; padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray;
}
* #Inhalt { /* versteckt vor Netscape 4 */
background-color: #9F00FF;
}

#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1em;
margin: 1em 0;
}

#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: border: 1px solid silver;
}
h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}

#Navigation {
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black; background-color: #eee;
}
ul#Navigation a:visited {
color: #666; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
</style>
</head>
0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
Hallo Hans-Peter,

wie nun deine Seite unter Verwendung dieses CSS aussieht kann ich nicht sehen, von der HTML- Seite hast du nichts gepostet. Aber wenn es bei dir so aussieht, wie du es wplltest,ist das Problem ja gelöst.

Gruß
computerschrat
Seite:
...