Autor |
Nachricht |
VaneX
Threadersteller
Dabei seit: 13.03.2009
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Mo 17.06.2013 16:53
Titel Transparente Fläche über Hintergrundbild |
|
|
Hallo,
ich habe als Neuling gerade echte schwierigkeiten bei einer Internetseite, die ich zur Zeit erstelle.
www.saunagaertchen.de so sieht sie bisher aus.
www.saunagaertchen.de/index1.html so soll sie aussehen, aber zwichen Navi und Text soll eine transparente weiße Fläche gelegt werden.
<head>
<body style="background-image:url(images/garten.png); background-repeat: no-repeat; width:100%; background-position: center; background-attachment:fixed;" leftmargin="" topmargin="0" marginwidth="0" marginheight="0">
</head>
<div id="header"> </div>
<div id="navi">Bild + Tabelle mit den Navigation links </div>
<div id="bg"> das soll die weiße transparente Fläche werden.
<div id="text"> das ist der text
</div>
</div>
<div id="bottom"></div>
style css:
#header {
background-image: url(images/header.png);
background-repeat: repeat-x;
height: 72px;
text-align:right;
position:static;
}
#navi a { color:#432918; font-weight:bold; text-decoration:none; }
#navi a:hover { color:#FFF; text-decoration:none;}
#navi
{
margin-top:10px;
padding-bottom:10px;
text-align:center;
position:relativ;
font-family:Arial, Helvetica, sans-serif;
font-size:2px;
}
#bg
{
width:560px;
height:100%;
color:#FFF;
}
#text a { color:#432918;text-decoration:underline; }
#text a:hover { color:#95C11F; text-decoration:underline;}
#text
{
margin:auto;
width:550px;
margin-top:10px;
text-align:left;
position:relativ;
color: #432918;
}
#bottom {
background-image: url(images/bottom.png);
background-repeat:repeat-x;
height: 102px;
clear:both;
width:100%;
position: absolute;
margin-top: 10px;
Ich würde mich freuen, wenn mir einer helfen kann.
Und ich betone nochmals, ich bin aboluter anfänger (was man ja auch sieht).
Lg
VaneX
|
|
|
|
|
Makhai
Dabei seit: 20.08.2011
Ort: -
Alter: 38
Geschlecht:
|
Verfasst Mo 17.06.2013 20:15
Titel
|
|
|
Soweit ich weiß, ist eine transparente Fläche doch durchsichtig? Ich verstehe deine Frage gar nicht... Willst du den Text vielleicht auf eine 70 prozentige Weißfläche setzen?
(Das Design ist auch nicht wirklich schön)
|
|
|
|
|
Anzeige
|
|
|
VaneX
Threadersteller
Dabei seit: 13.03.2009
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Mo 17.06.2013 20:33
Titel
|
|
|
Oh man auch wieder wahr.
Mein Fehler, der Text soll auf eine 70% Weißfläche gesetzt werden.
Ja, das Design ist nicht schön... keine Frage.
Aber mehr kann ich eben nicht machen, erstmal muss das reichen.
Lg
VaneX
Zuletzt bearbeitet von VaneX am Mo 17.06.2013 20:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Mo 17.06.2013 20:53
Titel
|
|
|
1. rgba(), aber bitte mit Fallback
2. Wenn du schon xhtml strict deklarierst, solltest du wirklich den Markup entsprechend in Ordnung und nebenbei ins neue Jahrtausend bringen.
|
|
|
|
|
VaneX
Threadersteller
Dabei seit: 13.03.2009
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Mo 17.06.2013 22:40
Titel
|
|
|
Danke für deine Antwort.
Kriege es zwar damit auch irgendwie nicht hin, aber naja...
zu 2. verstehe ich leider nicht, wie gesagt bin absoluter noob auf dem Gebiet
|
|
|
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Di 18.06.2013 08:18
Titel
|
|
|
Öhh rgba() ist wirklich nicht so schwer zu kapieren, Du legst Deine Hintergrundfarbe einfach in RGB an (in Deinem Fall also 255, 255, 255) und dann gibt es noch a, das steht für alpha oder Deckkraft.
Du könntest also z.B.
Code: |
.weisse_flaeche{
background: rgba(255,255,255,0.7);
}
|
...so eine 70% Deckkraft erzielen. Nur wie Morgo bereits sagte, brauchst Du dafür auch ein Fallback, denn rgba wird von alten, schrecklichen Browsern nicht richtig darstellt. Wie man das gerade am besten löst, sagt Dir der Link von morgo oder eine Google Suche nach rgba fallback
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] hintergrundbild
HIntergrundbild mit css
IE 6/7 Bug Hintergrundbild
Inhaltsabhängiges Hintergrundbild per CSS
Problem mit Hintergrundbild
usb stick mit hintergrundbild?
|
|