• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Hintergrundfarbe: Balken am unteren Rand

F

FaFeL

Neues Mitglied
Hallo zusammen,

da sich mein anderer Thread selbst zerschossen hat, hier noch einmal.

Ich muss für die Schule eine Webseite für einen fiktiven Sportverein erstellen, wird dann als Arbeit gewertet. Allerdings ist am unteren Rand ein unschöner Balken.

Hier ein Screenshot:
LW2Nbnm.png


Die Tabelle ist schon richtig so und auch vorgegeben.

CSS-Code:

Code: 
* {
margin:0px;
padding:0px;
}

body {

background: #87e3fd; /* Old browsers */
background: -moz-linear-gradient(top, hsla(193,97%,76%,1) 26%, hsla(193,97%,76%,1) 26%, hsla(200,100%,36%,1) 100%, hsla(200,100%,36%,1) 100%, hsla(193,96%,45%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(26%,hsla(193,97%,76%,1)), color-stop(26%,hsla(193,97%,76%,1)), color-stop(100%,hsla(200,100%,36%,1)), color-stop(100%,hsla(200,100%,36%,1)), color-stop(100%,hsla(193,96%,45%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsla(193,97%,76%,1) 26%,hsla(193,97%,76%,1) 26%,hsla(200,100%,36%,1) 100%,hsla(200,100%,36%,1) 100%,hsla(193,96%,45%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, hsla(193,97%,76%,1) 26%,hsla(193,97%,76%,1) 26%,hsla(200,100%,36%,1) 100%,hsla(200,100%,36%,1) 100%,hsla(193,96%,45%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, hsla(193,97%,76%,1) 26%,hsla(193,97%,76%,1) 26%,hsla(200,100%,36%,1) 100%,hsla(200,100%,36%,1) 100%,hsla(193,96%,45%,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, hsla(193,97%,76%,1) 26%,hsla(193,97%,76%,1) 26%,hsla(200,100%,36%,1) 100%,hsla(200,100%,36%,1) 100%,hsla(193,96%,45%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e3fd', endColorstr='#05b1e1',GradientType=0 ); /* IE6-9 */
}

div#centerhelper {
width:1px;
height:50%;
margin-bottom:-400px;
float:left;
}

div#container {
width:1000px;
height:800px;
margin:0 auto;
clear:left;
}

HTML-Code:

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
 <title>SC Musterstadt</title>
 <meta charset="utf-8">
 <meta name="description" content="Willkommen auf der Startseite des SC Musterstadt. Hier finden sie alle wichtigen Informationen und Neuigkeiten rund um unseren Club.">
 <meta name="keywords" content="Sport, Club, Musterstadt, Team, Fu&szlig;ball, Volleyball, Triathlon, Leichtatlethik, Handball, Mannschaft, Wettkampf, Neuigkeiten, Turnier, Feld, Platz, Liga">
 <meta name="author" content="Kevin">
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

 <div id="centerhelper"></div>
 <div id="container">

  <table border="0" cellpadding="0" cellspacing="0">
   <colgroup>
    <col width="200">
    <col width="200">
    <col width="200">
    <col width="200">
   </colgroup>
   <tr height="100">
    <td>Zeile 1 - Spalte 1</td>
    <td>Zeile 1 - Spalte 2</td>
    <td>Zeile 1 - Spalte 3</td>
    <td>Zeile 1 - Spalte 4</td>
    <td>Zeile 1 - Spalte 5</td>
   </tr>
   <tr height="50">
    <td>Zeile 2 - Spalte 1</td>
    <td>Zeile 2 - Spalte 2</td>
    <td>Zeile 2 - Spalte 3</td>
    <td>Zeile 2 - Spalte 4</td>
    <td>Zeile 2 - Spalte 5</td>
   </tr>
   <tr height="600">
    <td>Zeile 3 - Spalte 1</td>
    <td>Zeile 3 - Spalte 2</td>
    <td>Zeile 3 - Spalte 3</td>
    <td>Zeile 3 - Spalte 4</td>
    <td>Zeile 3 - Spalte 5</td>
   </tr>
   <tr height="50">
    <td>Zeile 4 - Spalte 1</td>
    <td>Zeile 4 - Spalte 2</td>
    <td>Zeile 4 - Spalte 3</td>
    <td>Zeile 4 - Spalte 4</td>
    <td>Zeile 4 - Spalte 5</td>
   </tr>
  </table>

 </div>

</body>
</html>

Vielen Dank schon mal.

Gruß

FaFeL
 
Zuletzt bearbeitet:
Eventuell musst du dem body und/oder html 100% Höhe geben. Ich vergesse immer wieder was man genau machen muss :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben