Linke CSS fil til HTML?

aDyingApril · 28. januar 2016

Hei. Har en utfordring her. Hvorfor får jeg ikke skriftypen og bakgrunnen jeg ønsker via css filen her?

Dette er HTML:

http://pastie.org/10698556

og CSS filen:

http://pastie.org/10698560

Hva har jeg skrevet feil siden effektene ikke kommer til syne i nettleseren?

nightowl · 28. januar 2016

Funket fint her, men det var et script inni der som jeg fjernet først.

aDyingApril · 28. januar 2016

Funket fint her, men det var et script inni der som jeg fjernet først.

Hvilket script da?

kjekset · 28. januar 2016

Hei,

bruk jsfiddle: http://jsfiddle.net

etter at koden er lagt inn, send url her så skal jeg ta en titt. En av lenkene dine fungerer ikke.

aDyingApril · 28. januar 2016

Hei,

bruk jsfiddle: http://jsfiddle.net

etter at koden er lagt inn, send url her så skal jeg ta en titt. En av lenkene dine fungerer ikke.

Her er den:

https://jsfiddle.net/vcy4b67r/

Har lagt merke til at bilde jeg la inn ikke kommer opp også. Kan det være at det er feil linket?

Koden virker merkelig i denne linken da.

kjekset · 28. januar 2016

Her er den:

https://jsfiddle.net/vcy4b67r/

Har lagt merke til at bilde jeg la inn ikke kommer opp også. Kan det være at det er feil linket?

Koden virker merkelig i denne linken da.

Ja, det stemmer. Det blir ikke hentet bilde fra noen location på internett akkurat nå. Det samme med

<link rel="stylesheet" type="text/css" href=style.css">

der style.css heller ikke har en location på internett.

hvis du har alt dette lokalt, må du opprette en fil med navn style.css, legge h1-taggen i den og lagre. Så kan koden rett over så urørt i <head> der du ønsker at css skal lastes inn.

aDyingApril · 28. januar 2016

Her er den:

https://jsfiddle.net/vcy4b67r/

Har lagt merke til at bilde jeg la inn ikke kommer opp også. Kan det være at det er feil linket?

Koden virker merkelig i denne linken da.

Ja, det stemmer. Det blir ikke hentet bilde fra noen location på internett akkurat nå. Det samme med
<link rel="stylesheet" type="text/css" href=style.css">
der style.css heller ikke har en location på internett.

hvis du har alt dette lokalt, må du opprette en fil med navn style.css, legge h1-taggen i den og lagre. Så kan koden rett over så urørt i <head> der du ønsker at css skal lastes inn.

Ok, jeg skal prøve og se på dette nå :

Dan-Levi · 28. januar 2016

Et sluttelement må inkludere en skråstrek (/) mellom åpningsbraketten og elementnavn

Ikke glem å avslutte HTML elementene, de må avsluttes med et sluttelement eller så oppstår det mest sannsynligvis problemer med visningen av nettsiden. Dette gjelder stort sett alle HTML elementer, med visse unntak

Feil

<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Hello, thanks for stopping by</title>
    </head>
    
    <body>
        <h1>Say Hello!</h1>
        <img src="woman.jpg">

Riktig

<!DOCTYPE html>
<html>
	<head>
            <title>Hello, thanks for stopping by</title>
            <link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	    <h1>Say Hello!</h1>
	    <img src="woman.jpg">
	</body> <!-- sluttelement -->
</html> <!-- sluttelement -->

La oss se på hvordan mappestrukturen din vil se ut for at dette spesifikke prosjektet skal fungere:

WWW
- index.html
- style.css
- woman.jpg

Så i mappen jeg refererer til som WWW har du 3 filer, en html fil, et stilark (css) og et bilde (jpg).

Filen style.css ser slik ut:

h1 {
    color: white;
    font-size: 80px;
    font-family:sans-serif;
    background-color: black;
}

Nå som HTML elementene er korrekte, og filene eksisterer og ligger på korrekt plass fungerer prosjektet, og du er klar for å lære mer.

Sjekk ut dette: CodeAcademy : HTML Fundamentals

aDyingApril · 28. januar 2016

Et sluttelement må inkludere en skråstrek (/) mellom åpningsbraketten og elementnavn

Ikke glem å avslutte HTML elementene, de må avsluttes med et sluttelement eller så oppstår det mest sannsynligvis problemer med visningen av nettsiden. Dette gjelder stort sett alle HTML elementer, med visse unntak

Feil
<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Hello, thanks for stopping by</title>
    </head>
    
    <body>
        <h1>Say Hello!</h1>
        <img src="woman.jpg">
Riktig
<!DOCTYPE html>
<html>
	<head>
            <title>Hello, thanks for stopping by</title>
            <link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	    <h1>Say Hello!</h1>
	    <img src="woman.jpg">
	</body> 
</html> 
La oss se på hvordan mappestrukturen din vil se ut for at dette spesifikke prosjektet skal fungere:

WWW
index.html

style.css

woman.jpg

Så i mappen jeg refererer til som WWW har du 3 filer, en html fil, et stilark (css) og et bilde (jpg).

Filen style.css ser slik ut:
h1 {
    color: white;
    font-size: 80px;
    font-family:sans-serif;
    background-color: black;
}
Nå som HTML elementene er korrekte, og filene eksisterer og ligger på korrekt plass fungerer prosjektet, og du er klar for å lære mer.

Sjekk ut dette: CodeAcademy : HTML Fundamentals

Jeg har fikset på mappestrukturen nå, men jeg får fortsatt ikke bakgrunnsbildet mitt frem. Ser du hvorfor?

HTML

http://pastie.org/10699532

CSS

http://pastie.org/10699534

Alt er ikke riktig organisert her enda

kjekset · 28. januar 2016

Er du sikker på at:

href="D:sayhello.no//

er riktig mål til style.css og womantalking.jpg? Hvis bildet hadde vært på web, så ville det blitt:

http://domene.no/womantalking.jpg

aDyingApril · 28. januar 2016

Er du sikker på at:
href="D:sayhello.no//
er riktig mål til style.css og womantalking.jpg? Hvis bildet hadde vært på web, så ville det blitt:

http://domene.no/womantalking.jpg

Ja, det skal være riktig. href="D:sayhello.no// er navnet på mappen bildet er i.

oppdatert: Fikk det til nå Måtte bare forandre litt på koden.

Endret 28. januar 2016 av aDyingApril

Dan-Levi · 28. januar 2016

Hei igjen,

Du avslutter ikke html elementene, og det mangler body tags.

Se her:

<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="D:sayhello.no//style.css">
        <title>Hello, thanks for stopping by</title>
         <div class="hero.text-box">
        <h1>Say Hello!</h1>
        <p>This is just a hobby project to see how many hello's I can get (in all languages)
        So spread the words and say Hello!</p>
            </div>

Denne linjen:

<link rel="stylesheet" type="text/css" href="D:sayhello.no//style.css">

Dette skal sikkert være slik? Dette er gitt at mappen på D:/ heter sayhello.no og inneholder style.css

<link rel="stylesheet" type="text/css" href="D:\sayhello.no\style.css">

Og denne:

<div class="hero.text-box">

Slik?

<div class="hero-text-box">

Så endelig kode burde være slik:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="D:/sayhello.no/style.css">
		<title>Hello, thanks for stopping by</title>
	</head>
	<body>
		<div class="hero-text-box">
			<h1>Say Hello!</h1>
			<p>This is just a hobby project to see how many hello's I can get (in all languages) So spread the words and say Hello!</p>
		</div>
	</body>
</html>&

Lær deg HTML via veiledede praktiske oppgaver med lærevideoer

CodeAcademy er det stedet jeg selv ville startet om jeg skulle "lært HTML på nytt". De har en fin læringsplan med praktiske oppgaver og videoer, og det er GRATIS.

Endret 28. januar 2016 av Dan-Levi

aDyingApril · 29. januar 2016

Hei igjen,

Du avslutter ikke html elementene, og det mangler body tags.

Se her:
<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="D:sayhello.no//style.css">
        <title>Hello, thanks for stopping by</title>
         <div class="hero.text-box">
        <h1>Say Hello!</h1>
        <p>This is just a hobby project to see how many hello's I can get (in all languages)
        So spread the words and say Hello!</p>
            </div>
Denne linjen:
<link rel="stylesheet" type="text/css" href="D:sayhello.no//style.css">
Dette skal sikkert være slik? Dette er gitt at mappen på D:/ heter sayhello.no og inneholder style.css
<link rel="stylesheet" type="text/css" href="D:\sayhello.no\style.css">
Og denne:
<div class="hero.text-box">
Slik?
<div class="hero-text-box">
Så endelig kode burde være slik:
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="D:/sayhello.no/style.css">
		<title>Hello, thanks for stopping by</title>
	</head>
	<body>
		<div class="hero-text-box">
			<h1>Say Hello!</h1>
			<p>This is just a hobby project to see how many hello's I can get (in all languages) So spread the words and say Hello!</p>
		</div>
	</body>
</html>& 
Lær deg HTML via veiledede praktiske oppgaver med lærevideoer

CodeAcademy er det stedet jeg selv ville startet om jeg skulle "lært HTML på nytt". De har en fin læringsplan med praktiske oppgaver og videoer, og det er GRATIS.

T

Jeg driver og lærer meg basis koding via stackskills.com nå, men det er jo en del utfordringer på veien Nå som jeg endret til den endelig koden du gav meg så forsvant bakgrunnsbilde mitt, så må prøve og se hva som skjedde.

Endret 29. januar 2016 av aDyingApril

aDyingApril · 29. januar 2016

Hei igjen,

Du avslutter ikke html elementene, og det mangler body tags.

Se her:
<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="D:sayhello.no//style.css">
        <title>Hello, thanks for stopping by</title>
         <div class="hero.text-box">
        <h1>Say Hello!</h1>
        <p>This is just a hobby project to see how many hello's I can get (in all languages)
        So spread the words and say Hello!</p>
            </div>
Denne linjen:
<link rel="stylesheet" type="text/css" href="D:sayhello.no//style.css">
Dette skal sikkert være slik? Dette er gitt at mappen på D:/ heter sayhello.no og inneholder style.css
<link rel="stylesheet" type="text/css" href="D:\sayhello.no\style.css">
Og denne:
<div class="hero.text-box">
Slik?
<div class="hero-text-box">
Så endelig kode burde være slik:
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="D:/sayhello.no/style.css">
		<title>Hello, thanks for stopping by</title>
	</head>
	<body>
		<div class="hero-text-box">
			<h1>Say Hello!</h1>
			<p>This is just a hobby project to see how many hello's I can get (in all languages) So spread the words and say Hello!</p>
		</div>
	</body>
</html>& 
Lær deg HTML via veiledede praktiske oppgaver med lærevideoer

CodeAcademy er det stedet jeg selv ville startet om jeg skulle "lært HTML på nytt". De har en fin læringsplan med praktiske oppgaver og videoer, og det er GRATIS.

T

Vet du hvorfor teksten min kommer under bildet?

Dan-Levi · 29. januar 2016

Hei igjen,

Det er vanskelig å si ut i fra bildet, men antageligvis så er img elementet før p elementet?

Hvis bildet skal være inder teksten, burde det se slik ut:

<img src="woman.jpg">
<p>Say hello</p>

Leg merke til at img elementet ikke har et sluttelement, det skal det heller ikke ha.

Legg heller ved koden om noe er uklart, da ser jeg hva som er galt. Lykke til.

aDyingApril · 29. januar 2016

Hei igjen,

Det er vanskelig å si ut i fra bildet, men antageligvis så er img elementet før p elementet?

Hvis bildet skal være inder teksten, burde det se slik ut:
<img src="woman.jpg">
<p>Say hello</p>
Leg merke til at img elementet ikke har et sluttelement, det skal det heller ikke ha.

Legg heller ved koden om noe er uklart, da ser jeg hva som er galt. Lykke til.

Jeg vil at teksten skal være midt på bildet

Her er css:

http://pastie.org/10700856

html:

http://pastie.org/10700858

Endret 29. januar 2016 av aDyingApril

Dan-Levi · 30. januar 2016

Fungerer CSS stylingen din i det hele tatt?

Jeg legger merke til at du mangler anførselstegn her:

<link rel="stylesheet" type="text/css" href=D:/sayhello/style.css>

Hvorfor peker egentlig dette til D:/sayhello/style.css?

Jeg hadde gjort det slik og lagt style.css sammen med html filen;

<link rel="stylesheet" type="text/css" href="style.css">

Legg merke til anførselstegnene rundt stien til stilarket "style.css".

Jeg ser du har fått inn en Google font, det er stilig!

Angående tekst oppå bildet, det er ikke mye som skal til, men jeg synes du skal investere mer tid på markup, nemlig HTML. Når du har lært deg HTML kan du begynne på CSS, og deretter noe mer avansert, som et programmeringsspråk.

Du må lære deg HTML og CSS til den grad at du forstår hvorfor du gjør nettopp det du gjør.

Som med tekst oppå bildet, tenk deg hvordan det kan gjøres. Trenger du egentlig et img element i det hele tatt? Hva om det eneste du trengte å gjøre i HTML var slik:

<div class="bg-img-happy">
  <p class="os-b">Tekst på bilde.</p>
</div>

og i CSS så legger du til bildet slik:

.bg-img-happy {
  width:200px;
  height:140px;
  /*Se linjen under, her legges bildet inn*/
  background-image: url('http://i.imgur.com/dRI8owc.jpg');
  border:4px solid #000;
}
/*Dette er for å sentrere teksten horisontalt og vertikalt*/
.bg-img-happy p {
  margin-top:50px;
  text-align:center;
}
/*fontstørrelse, vekt og familie*/
.os-b {
  font-size:18px;
  font-weight:bold;
  font-family: 'Open Sans';
}

Resultat:

Endret 30. januar 2016 av Dan-Levi

aDyingApril · 4. februar 2016

Fungerer CSS stylingen din i det hele tatt?

Jeg legger merke til at du mangler anførselstegn her:
<link rel="stylesheet" type="text/css" href=D:/sayhello/style.css>
Hvorfor peker egentlig dette til D:/sayhello/style.css?

Jeg hadde gjort det slik og lagt style.css sammen med html filen;
<link rel="stylesheet" type="text/css" href="style.css">
Legg merke til anførselstegnene rundt stien til stilarket "style.css".

Jeg ser du har fått inn en Google font, det er stilig!

Angående tekst oppå bildet, det er ikke mye som skal til, men jeg synes du skal investere mer tid på markup, nemlig HTML. Når du har lært deg HTML kan du begynne på CSS, og deretter noe mer avansert, som et programmeringsspråk.

Du må lære deg HTML og CSS til den grad at du forstår hvorfor du gjør nettopp det du gjør.

Som med tekst oppå bildet, tenk deg hvordan det kan gjøres. Trenger du egentlig et img element i det hele tatt? Hva om det eneste du trengte å gjøre i HTML var slik:
<div class="bg-img-happy">
  <p class="os-b">Tekst på bilde.</p>
</div>
og i CSS så legger du til bildet slik:
.bg-img-happy {
  width:200px;
  height:140px;
  /*Se linjen under, her legges bildet inn*/
  background-image: url('http://i.imgur.com/dRI8owc.jpg');
  border:4px solid #000;
}
/*Dette er for å sentrere teksten horisontalt og vertikalt*/
.bg-img-happy p {
  margin-top:50px;
  text-align:center;
}
/*fontstørrelse, vekt og familie*/
.os-b {
  font-size:18px;
  font-weight:bold;
  font-family: 'Open Sans';
}
Resultat:

Hmmm. Har prøvd og sett på koden nå, men det er noe rart. Koden virker i jsfiddle.com men ikke ikke i nettleseren. Vet du hvorfor? Har prøvd med explore, firefox og chrome også.

Venator · 10. februar 2016

Om du fortsat sliter med dette (Ser at tråden sluttet med et spørsmålstegn 4.feb) så kan du linke opp filene dine slik:

For å gjøre det enklest mulig, ha alle filene i samme mappe:

I HTMLen vil du da linke til CSS filen din slik:

<link rel="stylesheet" href="style.css">

I CSSen din vil du linke til bilde slik:

background-image: url('bakgrund.jpg');

Om du allerede har svar på spørsmålet ditt beklager jeg, ellers lykke til!

Endret 10. februar 2016 av Venator

Linke CSS fil til HTML?

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Et sluttelement må inkludere en skråstrek (/) mellom åpningsbraketten og elementnavn

Lenke til kommentar

Et sluttelement må inkludere en skråstrek (/) mellom åpningsbraketten og elementnavn

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lær deg HTML via veiledede praktiske oppgaver med lærevideoer

Lenke til kommentar

Lær deg HTML via veiledede praktiske oppgaver med lærevideoer

Lenke til kommentar

Lær deg HTML via veiledede praktiske oppgaver med lærevideoer

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer