---

Hej igen,
Jeg håber I kan hjælpe mig med et lille problem der er opstået i
forbindelse med mit layout.

Siden er delt op i "page container" der indeholder en
"header"(her skal evt. bannere placeres), en navigations menu,
footer, og så selve content-delen hvor teksten på siden skal
være.
Ideen var så at indsætte et gennemsigtigt boks-element i
"content" delen, men jeg kan ikke få det til at virke.

Her er et link til min biografi-side, som er der hvor jeg
forsøger at få den transperante tekstboks frem på.
(http://www.ravnfoto.dk/test/bio.html )

Koden til boksen har jeg fået herfra, og det er noget a la det
resultat jeg gerne vil have bare på min biografi side.
(http://www.w3schools.com/CSS/css_image_transparency.asp example
3 )

Jeg tror det skyldes "<div class="background">" som jeg linker
til, men i mit stylesheet har jeg ikke lavet et specifikt element
jeg kalder "background", men bare startet mit stylesheet med at
definere baggrundsbilleder, position, tekstfarve osv.
sådan her:

"body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
   font-size: 12px;
   font-color: #666666;
   background-color: #4C6055;
   background-image:
url(http://www.ravnfoto.dk/test/billeder/baggrund1.jpg);
   background-repeat: no-repeat;
   background-position:center center;
}"


Så er det muligt at jeg så linker til "<div class="body">" i
stedet, eller bør jeg simpelthen lave et seperat element, der kun
omhandler baggrundsbilleder osv. der gælder for hele siden?

Jeg håber mit problem er forståeligt, og at nogen kan hjælpe mig
videre.

Sabine




--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Sabine J wrote:

> Ideen var så at indsætte et gennemsigtigt boks-element i
> "content" delen, men jeg kan ikke få det til at virke.

Du kalder et billede, der på serveren ikke eksisterer med det kaldte navn i
den kaldte mappe. Det er en Apache-server, så der er forskel på store og små
bogstaver - kan det være der, hunden ligger begravet? Eller har du helt
glemt at uploade billedet?

--
Med venlig hilsen
Erik Ginnerskov
http://ginnerskov.dk - http://html-faq.dk

---

> Du kalder et billede, der på serveren ikke eksisterer med det kaldte navn i
> den kaldte mappe. Det er en Apache-server, så der er forskel på store og små
> bogstaver - kan det være der, hunden ligger begravet? Eller har du helt
> glemt at uploade billedet?
>
> --
> Med venlig hilsen
> Erik Ginnerskov
> http://ginnerskov.dk - http://html-faq.dk

Er det billedet på biografi-siden du tænker på (den linje i koden der hedder:
<img src="http://www.ravnfoto.dk/billeder/karl.jpg" title="Karl Ravn"
alt="Karl Ravn" border="0" hspace="20" vspace="20" width="200" height="283"
align="right">
), for det har jeg ganske rigtigt ikke uploadet endnu. Der har jeg bare gjort
plads på siden til det, om man vil.

Men det jeg mente var nu, at jeg ikke ved hvad jeg gør med "<div
class="background">" skal jeg oprette et nyt "element" øverst i mit stylesheet
eller kan jeg linke direkte til "body"-delen af stylesheetet? Det virker bare
umiddelbart ikke for mig, som en smart løsning.

Med venlig hilsen
Sabine

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Sabine J skrev:
> Hej igen,
> Jeg håber I kan hjælpe mig med et lille problem der er opstået i
> forbindelse med mit layout.


> "body {
> font-family: Arial, Helvetica, Verdana, Sans-serif;
>    font-size: 12px;
>    font-color: #666666;
>    background-color: #4C6055;
>    background-image:
> url(http://www.ravnfoto.dk/test/billeder/baggrund1.jpg);
>    background-repeat: no-repeat;
>    background-position:center center;
> }"
>
>
> Så er det muligt at jeg så linker til "<div class="body">" i
> stedet, eller bør jeg simpelthen lave et seperat element, der kun
> omhandler baggrundsbilleder osv. der gælder for hele siden?
>
> Jeg håber mit problem er forståeligt, og at nogen kan hjælpe mig
> videre.

Det eksempel du henviser til er logisk bygget op
omkring et element på siden, som har fået en
blomsterbaggrund, oven på dette er så lagt
et andet element med en hvid baggrund. Dette
andet elements opacitet er så ændret med to
formregler for hhv. IE og andre browsere.

På siden
http://webdesign101.dk/showcase/opacity/index.php
anstiller jeg nogle eksperimenter med opacity-
egenskaben, som muligvis kan være en en hjælp.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

> Det eksempel du henviser til er logisk bygget op
> omkring et element på siden, som har fået en
> blomsterbaggrund, oven på dette er så lagt
> et andet element med en hvid baggrund. Dette
> andet elements opacitet er så ændret med to
> formregler for hhv. IE og andre browsere.
>
> På siden
> http://webdesign101.dk/showcase/opacity/index.php
> anstiller jeg nogle eksperimenter med opacity-
> egenskaben, som muligvis kan være en en hjælp.
>
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> http://webdesign101.dk

Jeg læste din guide og forsøgte mig derefter i hhv. mit stylesheet og
min webside, men intet ændrer sig.
Jeg tror så småt jeg er ved at stirre mig blind på den kode, og jeg
tillader mig at poste hele mit stylesheet nedenfor, da jeg tænkte
fejlen måske var opstået et andet sted end i selve den gennemsigtige
boks.
Jeg håber meget du kan se hvor fejlen er, for jeg forstår simpelthen
ikke hvorfor den ikke viser den halvgennemsigtige boks på siden.

Mit CSS:

body {
background-color: #4C6055;
background-image:
url("http://www.ravnfoto.dk/test/billeder/baggrund1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}

p {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12px;
color: #FFFFFF
}

..hidden {
display: none;
text-align: center;
margin: 0;
padding: 0;
}

a:link {
background-color: transparent;
color: blue;
}

a:visited {
background-color: transparent;
color: red;
}

a:hover {
background-color: transparent;
color: red;
text-decoration: none;
font-weight: bold;
}

a:active {
background-color: transparent;
color: red;
text-decoration: none;
}

#page-container {
   margin: auto;
   text-align: left;
   }
   
   #header {
   height: 150px;
   }
   
   #nav {
   float: right;
   width: 280px;
   }
   
   #nav .padding {
   padding: 25px;
   line-height: 18px;
}

   #content {
   float: left;
   margin-left: 150px;
   line-height: 18px;
   }
   
   #div.transbox { /* half visible box */
background-color:#FFFFFF;
   background-image: none;
   width:200px;
height:180px;
margin:10px 10px;
border:1px solid black; /* for IE */
filter:alpha(opacity=80); /* CSS3 standard */
   opacity: 0.8;
}
   
#div.transbox p { /* what happends when a p tag is found inside
this transbox - child */
margin:5px 5px;
font-weight:bold;
color:#000000;
padding-bottom: 5px;/* making sure there's space between the texts
*/}
   
   #div.transbox .padding {
   padding: 5px;
   }

#div.transbox h2 {
   margin: 0;
   padding: 0;
   padding-bottom: 0px;
}

#div.transbox h1 {
   margin: 0;
   padding: 0;
}
   
   #footer {
   clear: both;
   font-family: Tahoma, Arial, Helvetica, Sans-serif;
   font-size: 10px;
   color: #000000;
   line-height: 18px;
   border-top: 1px;
   }
   
   #footer a {
   color: #000000;
   text-decoration: none;/* no underlined hyperlink */
}

   #footer a:hover {/*what happends when mouse over link */
   color: #db6d16;
}
   
   #footer #altnav {
   width: 350px;
   float: right;
   text-align: right;
   padding-top: 13px;
}
   
   #footer #copyright {
   padding-top: 13px;
}

Siden jeg eksperimentere med boksen på, er:
http://www.ravnfoto.dk/test/bio.html

Tak på forhånd.
:)

Mvh.
Sabine J.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Sabine J skrev:

> Jeg læste din guide og forsøgte mig derefter i hhv. mit stylesheet og
> min webside, men intet ændrer sig.
> Jeg tror så småt jeg er ved at stirre mig blind på den kode, og jeg
> tillader mig at poste hele mit stylesheet nedenfor, da jeg tænkte
> fejlen måske var opstået et andet sted end i selve den gennemsigtige
> boks.
> Jeg håber meget du kan se hvor fejlen er, for jeg forstår simpelthen
> ikke hvorfor den ikke viser den halvgennemsigtige boks på siden.

Den side jeg henviste til var ikke en
guide i layout, men i brug af opacity-egenskaben.

>    
>    #div.transbox { /* half visible box */
> background-color:#FFFFFF;
>    background-image: none;
>    width:200px;
> height:180px;
> margin:10px 10px;
> border:1px solid black; /* for IE */
> filter:alpha(opacity=80); /* CSS3 standard */
>    opacity: 0.8;
> }

Dette er den operative formdeklaration for
et element med en id div.transbox. Dette element
er i HTML-koden <div id="div.transbox">

Det er første gang jeg oplever et punktum i
en id. Jeg ved ikke hvad standarden siger
om det, eller hvordan en browser vil se det.

Det første jeg ville prøve var
at ændre id til transbox og formdeklarationen
til #transbox.

Hvis du med half visible mener halvt
gennemskinnelig skal filter-faktoren
være 50/.5)

Bemærk at opacity virker på #transbox,
det vil sige også på kassens indhold af
tekst og billeder.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

---

> >    #div.transbox { /* half visible box */
> > background-color:#FFFFFF;
> >    background-image: none;
> >    width:200px;
> > height:180px;
> > margin:10px 10px;
> > border:1px solid black; /* for IE */
> > filter:alpha(opacity=80); /* CSS3 standard */
> >    opacity: 0.8;
> > }
>
> Dette er den operative formdeklaration for
> et element med en id div.transbox. Dette element
> er i HTML-koden <div id="div.transbox">
>
> Det er første gang jeg oplever et punktum i
> en id. Jeg ved ikke hvad standarden siger
> om det, eller hvordan en browser vil se det.
>
> Det første jeg ville prøve var
> at ændre id til transbox og formdeklarationen
> til #transbox.

Jeg skal lige være sikker, mener du jeg skal ændre #div.transbox til
#transbox og i html dokumentet ændre <div class="transbox"> til
<div="transbox"> ?

> Hvis du med half visible mener halvt
> gennemskinnelig skal filter-faktoren
> være 50/.5)
>
> Bemærk at opacity virker på #transbox,
> det vil sige også på kassens indhold af
> tekst og billeder.

Mener du jeg skal ændre filter til: filter:alpha(opacity=50); opacity: .5;
?


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Sabine J skrev:

> Jeg skal lige være sikker, mener du jeg skal ændre #div.transbox til
> #transbox og i html dokumentet ændre <div class="transbox"> til
> <div="transbox"> ?

#transbox i et stylesheet refererer til et element med
en id="transbox", for eksempel HTML-elementet
<div id="transbox">

div#transbox refererer til et konkret element, nemlig
HTML-elementet
<div id="transbox">

I praksis er der ingen forskel på de to stylesheet
selektorer (det der står foran {...}

..transbox i et stylesheet refererer til et element med
en class="transbox", for eksempel HTML-elementet
<div class="transbox">, men også
<p class="transbox">

div.transbox i et stylesheet refererer til et konkret
HTML-element med en class="transbox", nemlig HTML-elementet
<div class="transbox">

..red {color:red;}

vil således kolorere ethvert element der har
klassenavnet red, men

p.red vil kolorere alle tekstafsnit med klassenavnet
red.

Alt det ovenstående er betinget af at websidens
HTML validerer, det vil sige er syntaktisk korrekt
i forhold til den anvendte dokumenttypeerklæring.

>> Hvis du med half visible mener halvt
>> gennemskinnelig skal filter-faktoren
>> være 50/.5)
>>
>> Bemærk at opacity virker på #transbox,
>> det vil sige også på kassens indhold af
>> tekst og billeder.
>
> Mener du jeg skal ændre filter til: filter:alpha(opacity=50); opacity: .5;
> ?
Ja. Men som i andre forhold er øjets
opfattelse af farve og opacitet
ikke helt så lineær som en talværdi
mellem 0 og 1, subsidiært 0 og 100
synes at antyde.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Sabine J:
8X
> Jeg tror det skyldes "<div class="background">" som jeg linker
> til
8X
> Så er det muligt at jeg så linker til "<div class="body">"
8X

Hvad præcist mener du med at du "linker" til HTML elementerne (eller
mener du CSS klasserne?)

På din side er der et baggrundsbillede, med en tekst over.
Så det virker vel som det skal..
For mig ser det mere ud somom du ikke placerer elementerne rigtigt, og
det kunne være dit problem.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 31-01-2010, skrev Sabine J:
> Hej igen,
> Jeg håber I kan hjælpe mig med et lille problem der er opstået i
> forbindelse med mit layout.
>
> Siden er delt op i "page container" der indeholder en
> "header"(her skal evt. bannere placeres), en navigations menu,
> footer, og så selve content-delen hvor teksten på siden skal
> være.
> Ideen var så at indsætte et gennemsigtigt boks-element i
> "content" delen, men jeg kan ikke få det til at virke.
>
> Her er et link til min biografi-side, som er der hvor jeg
> forsøger at få den transperante tekstboks frem på.
> (http://www.ravnfoto.dk/test/bio.html )
>
> Koden til boksen har jeg fået herfra, og det er noget a la det
> resultat jeg gerne vil have bare på min biografi side.
> (http://www.w3schools.com/CSS/css_image_transparency.asp example
> 3 )
>
> Jeg tror det skyldes "<div class="background">" som jeg linker
> til, men i mit stylesheet har jeg ikke lavet et specifikt element
> jeg kalder "background", men bare startet mit stylesheet med at
> definere baggrundsbilleder, position, tekstfarve osv.
> sådan her:
>
> "body {
> font-family: Arial, Helvetica, Verdana, Sans-serif;
>    font-size: 12px;
>    font-color: #666666;
>    background-color: #4C6055;
>    background-image:
> url(http://www.ravnfoto.dk/test/billeder/baggrund1.jpg);
>    background-repeat: no-repeat;
>    background-position:center center;
> }"
>
>
> Så er det muligt at jeg så linker til "<div class="body">" i
> stedet, eller bør jeg simpelthen lave et seperat element, der kun
> omhandler baggrundsbilleder osv. der gælder for hele siden?
>
> Jeg håber mit problem er forståeligt, og at nogen kan hjælpe mig
> videre.
>
> Sabine

Checkede lige side for valideringsfejl.
Der er et par stykker - doctype XHTML men koden HTML er årsagen.
Der er også et problem med et eksternt stylesheet - der er et "style" i
tagget, som ikke hører til. Så måske kommer dit stylesheet slet ikke
med..

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk