Notifikationer

Markér alle som læst Log ud

var Nybegynder

24. august 2007 - 22:38 Der er 31 kommentarer og
3 løsninger

Lægge info in på css fil

Hvordan kan jeg lægge koder ind på en css fil?

fx. Jeg vil have en footer. Og i den footer skal der stå en tekst som skal gælde på alle siderne, og hvis jeg nu skal rette i footer gider jeg ikke at rette i alle filerne men bare i css filen.

Tak på forhånd

Synes godt om

var Nybegynder

24. august 2007 - 22:39 #1

Spørgsmålet skulle hedde:
Hvordan kan jeg lægge TEKST ind på en css fil. :)

og Lægge info IND på css fil

Synes godt om

thesurfer Nybegynder

24. august 2007 - 22:49 #2

Du kan ikke gøre det med CSS alene.. du skal bruge CSS og JavaScript.. ser lige om jeg kan lave noget kode til dig, hvis ikke andre gør det først..

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:06 #3

HTML:
<html>
<head>
<title>footer test</title>
<link rel="stylesheet" type="text/css" href="footer.css">
<script type="text/javascript" src="footer.js"></script>
</head>
<body>

noget indhold her

</body>
</html>

java script:
window.onload = function()
{
// indsæt footer
d = document.createElement("div");
d.setAttribute("class","footer");
d.text = "hello world";
document.body.appendChild(d);
}

CSS:
.footer
{
border:1px solid #ff0000; /* en rød ramme på 1 pixel */
position:absolute; /* absolut positionen, så vi kan sætte koordinator */

top:100%; /* placering i bunden af skærmen, lodret */
left:50%; /* placering i midten af skæmen, vandret */

margin-left:-50px; /* bredden divideret med 2 */
margin-top:-30px; /* højden på boksen divideret med 2, minus 5*/

width:100px; /* bredden på boksen */
height:25px; /* højden på boksen */
}

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:08 #4

Hmm.. JavaScript koden skal der vist arbejdes på..

Det virker fint i Opera, men ikke i FireFox og Internet Explorer..

Kigger lige på det..

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:11 #5

Hmm.. Jeg skal vist bruge createNode i stedet for text.. :-)

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:18 #6

Nu virker det i Opera og FireFox:

window.onload = function()
{
// indsæt footer
d = document.createElement("div");
d.setAttribute("class","footer");
t = document.createTextNode("hello there");
d.appendChild(t);
document.body.appendChild(d);
}

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:21 #7

Rettelse..

Det her virker fint:

window.onload = function()
{
// indsæt footer
d = document.createElement("div");
d.setAttribute("id","footer");
t = document.createTextNode("hello there");
d.appendChild(t);
document.body.appendChild(d);
}

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:22 #8

Alle 3 dele.. læg mærke til at jeg har skiftet fra class (".footer") til id ("#footer")

HTML:
<html>
<head>
<title>footer test</title>
<link rel="stylesheet" type="text/css" href="footer.css">
<script type="text/javascript" src="footer.js"></script>
</head>
<body>

noget indhold her

</body>
</html>

java script:
window.onload = function()
{
// indsæt footer
d = document.createElement("div");
d.setAttribute("id","footer");
t = document.createTextNode("hello there");
d.appendChild(t);
document.body.appendChild(d);
}

CSS:
#footer
{
border:1px solid #ff0000; /* en rød ramme på 1 pixel */
position:absolute; /* absolut positionen, så vi kan sætte koordinator */

top:100%; /* placering i bunden af skærmen, lodret */
left:50%; /* placering i midten af skæmen, vandret */

margin-left:-50px; /* bredden divideret med 2 */
margin-top:-30px; /* højden på boksen divideret med 2, minus 5*/

width:100px; /* bredden på boksen */
height:25px; /* højden på boksen */
}

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:23 #9

Skriv lige, hvis du allerde har noget kode, der bruger "window.onload"..

Min kode vil nemlig overskrive tidligere funktioner.. så skal jeg have fundet en løsning..

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:24 #10

Svar :-)

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:31 #11

Så er teksten centreret:

window.onload = function()
{
d = document.createElement("div"); /* opret div */
d.setAttribute("id","footer"); /* tilføj id'et "footer" til div */
d.setAttribute("style","text-align:center;"); /* centrering af tekst */
t = document.createTextNode("hello world"); /* erstat "hello world" med din tekst */
d.appendChild(t); /* tilføj teksten til div'en */
document.body.appendChild(d); /* tilføj div til dokumentet */
}

Det virker i Opera og FireFox.. har endnu ikke fundet ud af, hvorfor det ikke virker i IE..

Synes godt om

olebole Juniormester

24. august 2007 - 23:33 #12

<ole>

function foo() {
// indsæt footer
d = document.createElement("div");
d.setAttribute("id","footer");
t = document.createTextNode("hello there");
d.appendChild(t);
document.getElementsByTagName("body")[0].appendChild(d);
}
if (window.attachEvent) window.attachEvent("onload", foo);
else if (window.addEventListener) window.addEventListener("load", foo, false);
else window.onload = foo;

/mvh
</bole>

Synes godt om

olebole Juniormester

24. august 2007 - 23:35 #13

thesurfer >> det virker da fint i IE6. Tester du i 7'eren? :)

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:36 #14

Det er denne her der ikke virker i IE6:

d.setAttribute("style","text-align:center;"); /* centrering af tekst */

Synes godt om

olebole Juniormester

24. august 2007 - 23:36 #15

Style-objektet er én af DOM-elementets properties, så det skal vi sætte direkte:

function foo() {
// indsæt footer
d = document.createElement("div");
d.setAttribute("id","footer");
d.style.textAlign = "center";
t = document.createTextNode("hello there");
d.appendChild(t);
document.getElementsByTagName("body")[0].appendChild(d);
}
if (window.attachEvent) window.attachEvent("onload", foo);
else if (window.addEventListener) window.addEventListener("load", foo, false);
else window.onload = foo;

Synes godt om

thesurfer Nybegynder

24. august 2007 - 23:39 #16

Doh! Det skulle jeg have tænkt på.. :-)

Det her er SWEEEEET!:

function AddToWindowOnload(func)
{
if (window.attachEvent) window.attachEvent("onload", func);
else if (window.addEventListener) window.addEventListener("load", func, false);
else window.onload = func;
}

AddToWindowOnload(foo);

Så kan det genbruges.. :-)

Synes godt om

olebole Juniormester

24. august 2007 - 23:54 #17

function setEventListener(oElm, sType, func)
{
if (oElm.attachEvent) oElm.attachEvent("on"+sType, func);
else if (oElm.addEventListener) oElm.addEventListener(sType, func, false);
else oElm.onload = func;
}

setEventListener(window, "load", foo);

Synes godt om

var Nybegynder

25. august 2007 - 13:13 #18

Jeg søger kun en metode i CSS

Jeg vil ikke have javascript på sitet. Men det kan altså ikke gøres på andre måder?

Synes godt om

thesurfer Nybegynder

25. august 2007 - 14:48 #19

Nope.

Synes godt om

Slettet bruger

25. august 2007 - 15:37 #20

Det kommer an paa hvordan serveren er konfigureret. Paa Apache kunne man anvende Server Side Include. Her skal der bare indsaettes en speciel kommentar paa hver side, denne erstattes (af serveren) med indholdet af f.eks. en fil.

Har ingen erfaring med ISS, saa jeg ved ikke om SSI ogssa er tilgaengeligt der.

En ulempe ved SSI er hvis man aendrer noget ved den inkluderede fil saa skal man have tvunget browserne til at indlaese siderne igen, f.eks. ved at opdatere tidsstemplet paa filerne.

Du kan ikke anvende CSS til at indsaette tekst. CSS er kun til konfiguration af udseendet, ikke til inklusion af tekst. Eneste maade at inkludere tekst via CSS er ved at inkludere teksten som et billede.

Synes godt om

olebole Juniormester

25. august 2007 - 15:51 #21

Det er da lidt sjovt, du gerne vil lægge det i CSS, men ikke i JavaScript ... dén logik har jeg svært ved at følge =)

Synes godt om

var Nybegynder

26. august 2007 - 10:49 #22

Har hørt at der var nogle ulemper når man lagde javascript på siden

Synes godt om

Slettet bruger

26. august 2007 - 11:32 #23

f.eks. folk som ikke anvender javascript, eller som anvender skaermoplaesere.

Synes godt om

olebole Juniormester

26. august 2007 - 14:37 #24

De 24 brugere på WWW, der har disabled JavaScript kan vi vel hurtigt springe over ;o)

Hvis man skriver et site, skriver man vel en speciel udgave til bl.a. højtlæsere ... ellers afskærer man jo sig selv for at bruge langt de fleste tekniske fremskridt fra 1996 og frem.

Hvad er det for reelle problemer, der er ved at bruge JavaScript?

Synes godt om

var Nybegynder

27. august 2007 - 23:07 #25

smid svar dem som har hjulpet.

Synes godt om

olebole Juniormester

28. august 2007 - 00:16 #26

*griiiiiiiiiiiiib* :)

Synes godt om

thesurfer Nybegynder

28. august 2007 - 00:19 #27

Jeg har vel også hjulpet.. :-)

Synes godt om

var Nybegynder

30. august 2007 - 19:55 #28

GREBEEEEEEEEEEEEEEEEEET!

Synes godt om

olebole Juniormester

30. august 2007 - 21:09 #29

Tak for points ;o)

Synes godt om

jensgram Nybegynder

30. august 2007 - 21:15 #30

Tja, alternativet er vel :before eller :after pseudoklasserne, og i dén henseende må en JS-løsning siges at være noget bredere understøttet.

Synes godt om

thesurfer Nybegynder

30. august 2007 - 22:28 #31

jensgram> Huh?
Hvis du har en alternativ løsning, er jeg sikker på at fazli gerne vil høre/læse mere til løsningen.. .. :-)

Eksempel, tak :-)

Synes godt om

jensgram Nybegynder

31. august 2007 - 09:11 #32

Tænkte noget lign.

<html>
<head>
<style type="text/css">
div#footer:before
{
content: "Min footer tekst";
}
</style>
</head>

<body>
<div id="footer"></div>
</body>

</html>

Men problemet er, at :before vist er meget lidt understøttet i dagens browsere.

Synes godt om

olebole Juniormester

31. august 2007 - 17:28 #33

Ja, det er CSS 2.1-stuff, men det understøtter IE6 ikke - og IE7 understøtter heller ikke hele CSS 2.1 endnu :o|

Synes godt om

jensgram Nybegynder

31. august 2007 - 19:33 #34

Ole > Nej, netop. Nævnte det også kun fordi det principielt er muligt (men jeg kunne ikke selv finde på at bruge det)

En tanke: Man kunne vel også definere sin egen entitet i en custom DTD (&footer;)... Mn igen; næppe en robust løsning.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS