<div> med gjennomsiktig bakgrunn

C₈H₁₀N₄O₂ · 25. februar 2007

Heeeey,

Driver og tuller litt rundt her og prøver å lære meg xhtml og CSS. I sida jeg lager nå har jeg en 900px bred container-div med grå (#B0B0B0) bakgrunn. Denne inneholder en enkel header-div og noen avsnitt med tekst. I <body> har jeg et bakgrunnsbilde. Nå er altså planen min at contailer-div'en skal være semi-gjennomsiktig så man så vidt kan se bakgrunnsbildet til <body>. Dette gjør jeg slik:

#container {
background-color: #B0B0B0;
color: black;
font-family: arial, sans-serif;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
padding-left: 20px;
border-style: double;
border-width: thin;
border-color: black;
letter-spacing: .7px;
width: 900px;
align: center;
text-align: left;
opacity: .8;
filter: alpha(opacity=80);	
}

Legg merke til opacity og filter helt nederst.

Funker flott det, men problemet er at alt inne i div'en som er gjennomskitig også blir gjennomsiktig. Headeren og all teksten får også gjennomsiktighet selv om jeg har satt

opacity: 1.0;

filter: alpha(opacity=100);

på dem. Er det noen måte å fikse dette på? Her kommer CSSen og xhtml'en:

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 <head>
   <title>Testside</title>
   <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all" />
 </head>

 <body style="background: green url(images/body-background.jpg) no-repeat fixed right bottom;">

   <div id="container">
     <span>
     <div style="width: 100%; height: 50px; background: white url(images/header.jpg) no-repeat right center;">
       <h1 class="title">
         Tittel FTW!!
       </h1>
     </div>
     
     
     <div style="width: 100%; height: 20px; background-color: green;">
<ul id="navbar">
  <li><a href="#" id="navlink">En link til et sted</a></li>
  <li><a href="#" id="navlink">En link til et sted</a></li>
  <li><a href="#" id="navlink">En link til et sted</a></li>
  <li><a href="#" id="navlink">En link til et sted</a></li>
</ul>
     </div>

     <p>
       Tjuddelidu tra lalalilu
     </p>
     
     <p>
Tanken er et molekylært fenomen ordnet radiært med "jeg"-et som sentrum.                                   Først som en absolutt konsekvens av de universelle kontraster oppnår den (tanken) sin fulle gyldighet som individ.
     </p>

     <p>
Dummytext
     </p>
     
     <p>
Dummytext
     </p>
     </span>
   </div>

 </body>

</html>

body {
text-align: center;
}

p {	
padding: 5px;
width: 760px;
opacity: 1.0;
filter: alpha(opacity=100);
}

h1 {
font-family: verdana, arial, fantasy;
color: gray;
font-size: 30px;
letter-spacing: 1px;
}

span {
opacity: 1.0;
filter: alpha(opacity=100);
}

h1.title {
font-family: /*"Smudger LET",*/ verdana, arial, sans-serif;
font-size: 35px;
color: black;
vertical-align: middle;
padding-top: 5px;
padding-left: 60px;
letter-spacing: .5px;
opacity: 1.0;
filter: alpha(opacity=100);
}

#navbar div {
backgound-color: green;
height: 20px;
width: 100%;
opacity: 1.0;
filter: alpha(opacity=100);
}

#navbar a {
text-decoration: none;
font-size: 100%;
font-family: airal, sans-serif;
color: black;
background-color: olive;
opacity: 1.0;
filter: alpha(opacity=100);
}

#navbar li {
display: inline;
list-style-type: none;
margin-left: 10px;
vertical-align: middle;
opacity: 1.0;
filter: alpha(opacity=100);
}


#container {
background-color: #B0B0B0;
color: black;
font-family: arial, sans-serif;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
padding-left: 20px;
border-style: double;
border-width: thin;
border-color: black;
letter-spacing: .7px;
width: 900px;
align: center;
text-align: left;
opacity: .8;
filter: alpha(opacity=80);	
}

Som dere ser prøvde jeg med en <span> også, men det gikk ikke. Er det noen som har snøring på hvordan jeg kan få fiksa dette?

PS: Vær litt snill med de kodene mine... har nettopp begynt med dette her...

-G.G.

Torkild · 25. februar 2007

Ikke et uvanlig problem å støte på dette. Du har to måter å løse dette på:

1. Legge en div under den med innholde, og ha backgrunnen på den med semi-trans.

2. Legge til et semi-trans bakgrunnsbilde(altså en .png-fil).

Nummer to krever litt mekk, for IE er ikke av seg selv så glad i semi-trans png, men ved hjelpet av denne siden: http://bjorkoy.com/post/show/8 skal du helt fint få det til.

(Vil anbefale å sette deg inn i alternativ 2, etter som du vil oppleve mindre kludd med det)

C₈H₁₀N₄O₂ · 25. februar 2007

Det funka flott! Tusen takk for hjelpa!

Logg inn

<div> med gjennomsiktig bakgrunn

Anbefalte innlegg

C₈H₁₀N₄O₂

Lenke til kommentar

Videoannonse

Torkild

Lenke til kommentar

C₈H₁₀N₄O₂

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer