/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
Hvordan overføres internal style-kode til ~
Fra : Sabine J

Dato : 02-02-10 13:59
Jeg vil gerne gøre så mit baggrundsbillede fylder hele skærmen
ud. Jeg har læst at det ikke sådan lige lader sig gøre, men
ifølge denne her
artikel(http://webdesign101.dk/showcase/background/) skulle det
altså alligevel kunne lade sig gøre. Men problemet er, at i
artiklen skal jeg indsætte kode-delen i <head></head> af min
side, og altså bruge et internt stylesheet.

På min side bruger jeg et eksternt stylesheet fordi jeg synes det
gør det mere overskueligt, men hvordan får jeg så konverteret den
kode stump over til det eksterne, og hvilken del af mit css skal
den stå under "body" eller "content"?

Mit side er opbygget sådan:
Banner (øverst), content(det meste af venstre side) menu (ombrudt
til højre for content-delen) og en footer nederst.

På forhånd tak
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

 
 
Jørgen Farum Jensen (02-02-2010)
Kommentar
Fra : Jørgen Farum Jensen

Dato : 02-02-10 14:32
Sabine J skrev:
> Jeg vil gerne gøre så mit baggrundsbillede fylder hele skærmen
> ud. Jeg har læst at det ikke sådan lige lader sig gøre, men
> ifølge denne her
> artikel(http://webdesign101.dk/showcase/background/) skulle det
> altså alligevel kunne lade sig gøre. Men problemet er, at i
> artiklen skal jeg indsætte kode-delen i <head></head> af min
> side, og altså bruge et internt stylesheet.
>
> På min side bruger jeg et eksternt stylesheet fordi jeg synes det
> gør det mere overskueligt, men hvordan får jeg så konverteret den
> kode stump over til det eksterne, og hvilken del af mit css skal
> den stå under "body" eller "content"?
>
> Mit side er opbygget sådan:
> Banner (øverst), content(det meste af venstre side) menu (ombrudt
> til højre for content-delen) og en footer nederst.

Godt fundet. Jeg havde helt glemt at jeg havde
lavet det eksempel.

Jeg tror du har misforstået eksemplet. Der
er /ikke/ noget baggrundsbillede i eksemplet,
men derimod indsat et billede på selve siden:
<img src="intothewest.jpg" alt="" />

Det kan du let konstatere ved at gøre browservinduet
smallere eller bredere.

De operative CSS formdeklarationer i den
sammenhæng er:
#side {
position:absolute;
top:0;right:0;bottom:0;left:0;
color:white;padding:0;border:none;}
#side img {width:100%;height:100%;}

Der intet i vejen for at indsætte
sådanne formdeklarationer i et
eksternt stylesheet. At jeg ikke
gør det i mine eksempler er fordi
jeg ønskerr at gøre dem så over-
skuelige som muligt

Hvis du ønsker yderligere forklaringer
må du nok komme med et link til siden.
Dem,, der kommenterer i denne nyhedsgruppe
har normalt ikke noget bevsær med at
læse et eksternt stylesheet.

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

Bertel Lund Hansen (02-02-2010)
Kommentar
Fra : Bertel Lund Hansen

Dato : 02-02-10 15:51
Sabine J skrev:

> På min side bruger jeg et eksternt stylesheet fordi jeg synes det
> gør det mere overskueligt, men hvordan får jeg så konverteret den
> kode stump over til det eksterne, og hvilken del af mit css skal
> den stå under "body" eller "content"?

Jørgen har svaret på noget af det. Her er en forklaring på
hvordan man flytter intern CSS over i en ekstern fil. Det er
ganske nemt (når man ved hvordan).

Jeg har her kopieret Jørges interne CSS idet jeg dog klipper det
meste væk. Jeg bruger det kun som eksempel:

<style type="text/css">
* {margin:0;padding:0;}
html,body {
font-family:georgia,arial,sans-serif;
background-color:#000;}
img {border:none;}
#side {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
color:white;
padding:0 0;
border:none;
/*overflow:hidden;*/}
</style>

Det indledes med <style type="text/css">
og afsluttes med </style>.

Alt hvad der står derimellem, skal kopieres direkte over i din
CSS-fil. Andet er der ikke i det - medmindre man allerede har
brugt de samme klassenavne eller allerede har stylet nogle af de
samme tags. Så får man konflikter - tingene ipfører sig måske
anderledes end forventet, men koden er stadig valid (hvis den var
det i forvejen).

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

Sabine J (03-02-2010)
Kommentar
Fra : Sabine J

Dato : 03-02-10 11:53
> Jørgen har svaret på noget af det. Her er en forklaring på
> hvordan man flytter intern CSS over i en ekstern fil. Det er
> ganske nemt (når man ved hvordan).
>
> Jeg har her kopieret Jørges interne CSS idet jeg dog klipper det
> meste væk. Jeg bruger det kun som eksempel:
>
> <style type="text/css">
> * {margin:0;padding:0;}
> html,body {
> font-family:georgia,arial,sans-serif;
> background-color:#000;}
> img {border:none;}
> #side {
> position:absolute;
> top:0;
> right:0;
> bottom:0;
> left:0;
> color:white;
> padding:0 0;
> border:none;
> /*overflow:hidden;*/}
> </style>
>
> Det indledes med <style type="text/css">
> og afsluttes med </style>.
>
> Alt hvad der står derimellem, skal kopieres direkte over i din
> CSS-fil. Andet er der ikke i det - medmindre man allerede har
> brugt de samme klassenavne eller allerede har stylet nogle af de
> samme tags. Så får man konflikter - tingene ipfører sig måske
> anderledes end forventet, men koden er stadig valid (hvis den var
> det i forvejen).
>
> --
> Bertel
> http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

Tak for hjælpen Jørgen og Bertel, men det virker stadig ikke.
Jeg har indsat koden ovenfor øverst i mit css, og indsat billedet
nederst på hver side, men det ser stadig ikke ud som en baggrund, som
på webdesign 101 demo-siden, men nærmere et fritstående billede.

Her er linket til siden jeg har eksperimenteret med det på:
http://www.ravnfoto.dk/test/layout.html

Og hvis ikke I bare finder linket i "vis kilde" så er her linket til
min "master.css" (jeg beklager måden det er stillet op på når man
klikker, sådan ser det ikke ud hos mig):
http://www.ravnfoto.dk/test/master.css

Jeg håber I får tid til at svare :).
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

Jørgen Farum Jensen (03-02-2010)
Kommentar
Fra : Jørgen Farum Jensen

Dato : 03-02-10 20:44
Sabine J skrev:

> Her er linket til siden jeg har eksperimenteret med det på:
> http://www.ravnfoto.dk/test/layout.html

Mine eksempler på Webdesign 101 forudsætter som
regel et vist kendskab til grundlæggende HTML.

En helt grundlæggende egenskab ved HTML-elementer
er at blokelementer vises i en browser i den
orden - fra oven og nedad - elementerne forekommer
i kildekoden.

At ændre på det forhold kræver et vist minimum
af kendskab til CSS-egenskaben position (eller
float-egenskaben).

En grundlæggende regel i webdesign er at man
ikke gaber over mere end man kan sluge. På
din prøveside har du ikke mindre end 3
"effekter" som kræver noget mere kendskab
til faget end du umiddelbart synes at have.

Mit råd til dig er, hvis du vil eftergøre
mit eksempel på et billede på hele siden
at eftergøre eksempel med både min HTML-kode
(med dit eget billede af rovfuglen) og
min CSS-kode. Når det så er lykkedes
kan du begynde at file på det. Du har
også et eksempel som er noget lettere
for mig og andre at forholde sig til.

Der er ikke noget forkert ved det, det er
den metode jeg selv bruger, når jeg ser
en side med egenskaber, som jeg kunne tænke
mig at kende noget til. Andre i denne
gruppe gør sikkert det samme.

En anden gylden design-regel er
"Content is King". Et budskab skal
først og fremmest formidles af tekst
og billeder. Layout og effekter er
noget der /tilføjes/ denne tekst og
disse billeder.

I sammenhængen skal du også overveje
hvordan du bruger båndbredde. Er
rovfuglen en væsentlig del af dit
budskab eller er det bare en billig
gimmick.

Du kan rettelig spørge mig om
jeg har gjort den overvejelse, da jeg
lavede mit eksempel. Ja, det havde
jeg, selv om det kun er et eksempel.
Det billede jeg havde i mit hoved
da jeg valgte billedet var de
sidste scener i filmen "Return of the King"
og lydsporet til disse scener.
Derfor filnavnet på billedet af
nogle fugle over Limfjorden, på vej
vestover i solnedgangen.

Hvis du ellers har brug for en
mening med det der kun er et
eksempel.
--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

Sabine J (13-02-2010)
Kommentar
Fra : Sabine J

Dato : 13-02-10 21:34
Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Sabine J skrev:
>
> > Her er linket til siden jeg har eksperimenteret med det på:
> > http://www.ravnfoto.dk/test/layout.html
>
> Mine eksempler på Webdesign 101 forudsætter som
> regel et vist kendskab til grundlæggende HTML.
>
> En helt grundlæggende egenskab ved HTML-elementer
> er at blokelementer vises i en browser i den
> orden - fra oven og nedad - elementerne forekommer
> i kildekoden.
>
> At ændre på det forhold kræver et vist minimum
> af kendskab til CSS-egenskaben position (eller
> float-egenskaben).
>
> En grundlæggende regel i webdesign er at man
> ikke gaber over mere end man kan sluge. På
> din prøveside har du ikke mindre end 3
> "effekter" som kræver noget mere kendskab
> til faget end du umiddelbart synes at have.
>
> Mit råd til dig er, hvis du vil eftergøre
> mit eksempel på et billede på hele siden
> at eftergøre eksempel med både min HTML-kode
> (med dit eget billede af rovfuglen) og
> min CSS-kode. Når det så er lykkedes
> kan du begynde at file på det. Du har
> også et eksempel som er noget lettere
> for mig og andre at forholde sig til.
>
> Der er ikke noget forkert ved det, det er
> den metode jeg selv bruger, når jeg ser
> en side med egenskaber, som jeg kunne tænke
> mig at kende noget til. Andre i denne
> gruppe gør sikkert det samme.
>
> En anden gylden design-regel er
> "Content is King". Et budskab skal
> først og fremmest formidles af tekst
> og billeder. Layout og effekter er
> noget der /tilføjes/ denne tekst og
> disse billeder.
>
> I sammenhængen skal du også overveje
> hvordan du bruger båndbredde. Er
> rovfuglen en væsentlig del af dit
> budskab eller er det bare en billig
> gimmick.
>
> Du kan rettelig spørge mig om
> jeg har gjort den overvejelse, da jeg
> lavede mit eksempel. Ja, det havde
> jeg, selv om det kun er et eksempel.
> Det billede jeg havde i mit hoved
> da jeg valgte billedet var de
> sidste scener i filmen "Return of the King"
> og lydsporet til disse scener.
> Derfor filnavnet på billedet af
> nogle fugle over Limfjorden, på vej
> vestover i solnedgangen.
>
> Hvis du ellers har brug for en
> mening med det der kun er et
> eksempel.
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> http://webdesign101.dk
> ..

Tak for rådet. Jeg gjorde som du foreslog, startede ud med at
kopiere både din html-kode og css-koden og få det til at virke.
Det gik fint. Derefter arbejdere jeg så videre på stylesheetet så
det kom til at indeholde de elementer jeg gerne ville have, det
gik også fint.
Men jeg kan stadig ikke få teksten i den halvgennemsigtige boks
til at stå frem med hvid tekst som kan ses.

Jeg startede forfra kodemæssigt og her er linket:
http://www.ravnfoto.dk/test2/galleri.html

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

Kerim Ellentoft (13-02-2010)
Kommentar
Fra : Kerim Ellentoft

Dato : 13-02-10 22:54
Sabine J <sabinej0811@gmail.com> skrev :

>Men jeg kan stadig ikke få teksten i den halvgennemsigtige boks
>til at stå frem med hvid tekst som kan ses.

Du har sat baggrundsfarve til white på transbox og teksten er
også sat til hvid, det er formentlig årsagen.

Iøvrigt er der også flere fejl, du har blokelementer inde i et
andet blokelement, det er ikke tilladt (bl. a. h2 inde i en p).

Husk altid at valider siderne på W3cs validator.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ravnfoto.dk%2Ftest2%2Fgalleri.html&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1

PS. Du må også gerne klippe i dine svar, der er ingen grund til
at citere hele det indlæg som man svarer på.
--
Kerim
http://www.facebook.com/kerim.ellentoft

Sabine J (14-02-2010)
Kommentar
Fra : Sabine J

Dato : 14-02-10 13:06
> Du har sat baggrundsfarve til white på transbox og teksten er
> også sat til hvid, det er formentlig årsagen.

Tak for tippet m. samme farve i baggrund og tekst, det hjalp.

> Iøvrigt er der også flere fejl, du har blokelementer inde i et
> andet blokelement, det er ikke tilladt (bl. a. h2 inde i en p).

Jeg har tjekket dokumentet endnu en gang og denne gang får jeg at vide koden er i orden.

Jeg håber du lige vil forklare den sidste del du skrev med at det ikke er "lovligt" at have et blok element inden i et andet, for jeg forstår ikke helt
hvad du mener.

Jeg har f.eks. et sted skrevet: <p><b>Kongeørn</b></p> (http://www.ravnfoto.dk/test2/galleri.html)

Hvilket er det jeg forstår udfra XHTML-guiden herindefra er den korrekte måde at gøre det på, så hvori består fejlen?
Link til lektion 3 fra XHTML-guiden: http://www.html.dk/tutorials/xhtml/lektion3.asp#nested

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

Kerim Ellentoft (14-02-2010)
Kommentar
Fra : Kerim Ellentoft

Dato : 14-02-10 18:12
Sabine J <sabinej0811@gmail.com> skrev :

>Jeg har f.eks. et sted skrevet: <p><b>Kongeørn</b></p> (http://www.ravnfoto.dk/test2/galleri.html)
>
>Hvilket er det jeg forstår udfra XHTML-guiden herindefra er den korrekte måde at gøre det på, så hvori består fejlen?

Ovennævnte er der ikke noget galt med, for <b> gør en tekst fed,
så det er ikke et element, men tag.
(jeg ville dog bruge css til det).

På siden i går havde du <p><h2>Dette er forsiden til mit
galleri</h2></p> bl.a., så vidt jeg husker.
Og det er ikke tilladt.
--
Kerim
http://www.facebook.com/kerim.ellentoft

Jørgen Farum Jensen (14-02-2010)
Kommentar
Fra : Jørgen Farum Jensen

Dato : 14-02-10 21:39
Sabine J skrev:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>> Sabine J skrev:
>>
>>> Her er linket til siden jeg har eksperimenteret med det på:
>>> http://www.ravnfoto.dk/test/layout.html
>>
>> Mine eksempler på Webdesign 101 forudsætter som
>> regel et vist kendskab til grundlæggende HTML.
>>
>> En helt grundlæggende egenskab ved HTML-elementer
>> er at blokelementer vises i en browser i den
>> orden - fra oven og nedad - elementerne forekommer
>> i kildekoden.
>>
>> At ændre på det forhold kræver et vist minimum
>> af kendskab til CSS-egenskaben position (eller
>> float-egenskaben).
>>
>> En grundlæggende regel i webdesign er at man
>> ikke gaber over mere end man kan sluge. På
>> din prøveside har du ikke mindre end 3
>> "effekter" som kræver noget mere kendskab
>> til faget end du umiddelbart synes at have.
>>
>> Mit råd til dig er, hvis du vil eftergøre
>> mit eksempel på et billede på hele siden
>> at eftergøre eksempel med både min HTML-kode
>> (med dit eget billede af rovfuglen) og
>> min CSS-kode. Når det så er lykkedes
>> kan du begynde at file på det. Du har
>> også et eksempel som er noget lettere
>> for mig og andre at forholde sig til.
>>
>> Der er ikke noget forkert ved det, det er
>> den metode jeg selv bruger, når jeg ser
>> en side med egenskaber, som jeg kunne tænke
>> mig at kende noget til. Andre i denne
>> gruppe gør sikkert det samme.
>>
>> En anden gylden design-regel er
>> "Content is King". Et budskab skal
>> først og fremmest formidles af tekst
>> og billeder. Layout og effekter er
>> noget der /tilføjes/ denne tekst og
>> disse billeder.
>>
>> I sammenhængen skal du også overveje
>> hvordan du bruger båndbredde. Er
>> rovfuglen en væsentlig del af dit
>> budskab eller er det bare en billig
>> gimmick.
>>
>> Du kan rettelig spørge mig om
>> jeg har gjort den overvejelse, da jeg
>> lavede mit eksempel. Ja, det havde
>> jeg, selv om det kun er et eksempel.
>> Det billede jeg havde i mit hoved
>> da jeg valgte billedet var de
>> sidste scener i filmen "Return of the King"
>> og lydsporet til disse scener.
>> Derfor filnavnet på billedet af
>> nogle fugle over Limfjorden, på vej
>> vestover i solnedgangen.
>>
>> Hvis du ellers har brug for en
>> mening med det der kun er et
>> eksempel.
>> --
>> Med venlig hilsen
>> Jørgen Farum Jensen
>> http://webdesign101.dk
>> ..
>
> Tak for rådet. Jeg gjorde som du foreslog, startede ud med at
> kopiere både din html-kode og css-koden og få det til at virke.
> Det gik fint. Derefter arbejdere jeg så videre på stylesheetet så
> det kom til at indeholde de elementer jeg gerne ville have, det
> gik også fint.
> Men jeg kan stadig ikke få teksten i den halvgennemsigtige boks
> til at stå frem med hvid tekst som kan ses.

Bortset fra det Kerim gør opmærksom på,
tror jeg du ikke helt forstået hvad opacity
gør ved din #transbox: /Alt/ indhold i denne
boks bliver gennemskinneligt.

Det kan du komme om ved med
1) en tilføjelse
til dit stylesheet fsv. angår #transbox -

#transbox {
position: relative;
....
}

og
2) sætte en ny boks /inde/ i
transbox og positionere den
absolut i forhold til #transbox.
I denne nye boks putter du alt
det indhold, der skal være
"oven på" den gennemskinnelige boks.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..
Søg
Reklame
Statistik
Spørgsmål : 177580
Tips : 31968
Nyheder : 719565
Indlæg : 6409080
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.