halbtransparente feste grafik

Penske1

Servus Leute,

schaut mal bitte auf diese Seite. LINK
Dort ist ganz unten eine feste Grafik die noch dazu über dem Rest der Website liegt. Etwas in der Art hätte ich auch gerne.
Also eine feste Grafik, die so halbtransparent ist und sich über der Webseite befindet.

lukasn

Die Transparenz machst du, indem du eine halbtransparente PNG von der Art wie du sie brauchst erstellst (z.b. schwarzer Verlauf von 90% bis 50% oder so) Das PNG kannst du dann als Hintergrund in ein DIV einsetzen, in das dann auch der weitere footerinhalt kommt.
Die Positionierung machst du per CSS, in diesem falle wohl am einfachsten mit position: absolute; Damit das ganze dann auch über der Website liegt musst du dem DIV möglicherweise noch einen hohen z-wert geben.
Das mal so als Ansatz, wenn du dich nicht auskennst sag's, dann kann ich dir ein Codebeispiel schreiben

Gruss,
-Lukas

Penske1

Vielen Dank schonmal, aber nicht auskennen trifft es gut
Wäre super wenn du mir sowas schreiben könntest. Die Grafik werd ich sicher selbst hin bekommen.

lukasn

So, ich hab mal was einfaches zusammengebastelt. Es ist noch nicht ganz perfekt, da es eine fixe Breite hat, aber für deine Zwecke sollte es wohl genügen:

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" xml:lang="de" lang="de">


<head>
    <title>Footer - Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="main.css" type="text/css" media="screen, projection" />
</head>


<body>


    <div id="wrapper">Text
    <div id="footer"><p>Test</p></div>
    </div>
</body>


</html>

Alles anzeigen

Code

[COLOR='Red']html, body {
height: 100%;
}[/COLOR]


#wrapper {
[COLOR='Red']position: relative;
height: 100%;[/COLOR]
width: 800px;
margin-left: auto;
margin-right: auto;
background: #AAAAAA url(note.png) repeat;
}


#footer {
[COLOR='red']position: absolute;
bottom: 0;[/COLOR]
left: 10px;
width: 780px;
height: 45px;
text-align: center;
[COLOR='red']background: url(background.png) no-repeat;[/COLOR]
}

Alles anzeigen

Da hat's jetzt noch einige Zusatzinformationen drin, die wirklich relevanten Sachen sind rot markiert.
Falls du noch Schwierigkeiten hast schau doch noch auf ohne-css.gehts-gar.net vorbei, da findest Lösungen für die meisten Pobleme besser formuliert als bei mir

Hier noch einen Screenshot vom Resultat und von meiner background.png

Tags