Text wird vom Footer verdeckt

Bandit

Zitat von Helado

Nein ihr macht nicht meinen Job.

Da es sich wohl um eine kommerzielle Seite handelt, kann man aber davon ausgehen.

Zitat von Helado

Ich eröffne ein Thema weil ich nicht mehr weiterkomme.

Und du hast Antworten bekommen, die du nicht berücksichtigst oder nicht verstehst.

Zitat von Helado

Dumme Kommentare kann ich mir auch sonst wo holen.

Wieso dumme Kommentare? Wo? Nur weil ich gefragt habe, ob wir deinen Job machen???

Zitat von Helado

Dafür sind Foren da, um sich Hilfe zu verschaffen.

Richtig, aber nicht, um Grundlagen vermittelt zu bekommen.

Helado

Dass der Code Schrott ist (teilweise) sehe ich:-D. Ich versuche mal die Basics zu verstehen und anschließend umzusetzen.

explanator

Hier noch mal ein paar Tipps:

Verwende HTML5, das heisst den DOCTYPE sowie alle head und HTML-Elemente.
Verwende als Zeichensatz UTF-8 und speichere deine Dateien als utf-8 ohne BOM ab.

Das hier ist grundlegend falsch (Seite http://helado.bplaced.net/index_oa.html):

HTML

<div id="kopfbereich">
    <span style="color:#662908">
          <span style="font-size:50px;">
        <span style="font-variant:small-caps;">
                  <font face="Book Antiqua">GuS Gesundheits- und&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sozialdienstleistungen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>
                </span>
        </span>
    </span>
  </div>

zu viele Verschachtelungen, alle unnötig bis auf DIV
verwende keine Inessentielles!
das Element font war schon zu Zeiten von HTML4.0 veraltet, bitte vergessen, dass es das je gegeben hat, verwende CSS zum formatieren.
das geschützte Leerzeichen hat hier nichts verloren, Abstände macht man mit margin im CSS.

Berücksichtigt man das alles bleibt das hier übrig:

HTML

<div id="kopfbereich">
    <h1>GuS Gesundheits- und<br>
        <span>Sozialdienstleistungen</span>
    </h1>
</div>

Mit den Sslektoren von CSS kann nun jeder Teil angesprochen werden. Eigentlich braucht es auch das br dort nicht, aber, das würde dich überfordern und so bleibt wenigsten für die Suchmaschine der Zusammenhang gewahrt.

Wenn man das nun richtig macht sieht es so aus

HTML

<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>test</title>

    <style type="text/css">
        html, body {
            height:100%; 
            margin:0;
            padding:0;
            background: #FFF7C9
        }
        body {
            width: 90%;
            margin: 0 auto;
            border-left: 1px solid green;
            border-right: 1px solid green;
        }
        #kopfbereich {
            width: 98%;
            height: 13em;
            padding: 1%;
            background:url(http://helado.bplaced.net/images/hauptimage.jpg) no-repeat;
            background-size: cover;
        }
        #kopfbereich > h1 {
            margin:0 auto;
            width: 66%;
            font-variant: small-caps;
            font-size: 3em;
            color:#662908;
            font-face:"Book Antigua", verdana, sans-serif;
            text-shadow: 0.03em 0.25em 0.25em; 
        }
        #kopfbereich > h1 > span {
            display: block;
            text-align: right;
        }

</style>
</head>
<body>

<div id="kopfbereich">
    <h1>GuS Gesundheits- und<br>
        <span>Sozialdienstleistungen</span>
    </h1>
</div>    


</body>
</html>

Alles anzeigen

Passt sich der Browsergrösse an und ist übersichtlich.
Den Rest kannst ja dann alleine weitermachen. Sollte wohl nicht so lange dauern.

Helado

Vielen vielen Dank. Ich habe es so gemacht wie vorgegeben. Habe alle Formatierungen in CSS eingebunden und nur Text als HTML formatiert. Alle SPANs, FONTs, COLORs etc ist nun in CSS eingebunden.

Mal zum Footer.... Der Fehler lag meines Erachtens hieran:

Code

#inhalt {
  position:absolute;
  top:35%;
  left:4%;
  [COLOR=#ff0000][U][I][B]height:100%;[/B][/I][/U][/COLOR]  [B][U]hier hatte ich 60% stehen....:oops:[/U][/B]
  background-color: #FFF7C9;
  overflow-y:hidden;
  overflow-x:hidden;
  font-family: Book Antiqua;
  font-size:22px;
  color: #662908;
  text-align: left;
  margin-left:34%;
  margin-right:0%;
}

Alles anzeigen

Also Text wird nicht mehr verdeckt.

Ist es ratsam mein CSS-Quelcode separat zu speichern? Oder kann ich es, wie ich bereits habe, so lassen?

explanator

Separat in einer Datei speichern ist besser, da dann der Code der CSS/Datei, vom Browser zwischengespeichert wird und nicht jedesmal erneut heruntergeladen werden muss.

Tags