Gå till innehåll
Just nu i M3-nätverket

Hjälp kodning xhtml + css


SarahOhrn

Rekommendera Poster

Jag är riktig nybörjare på detta men ska in med en uppgift idag och får inte till det. Det är bara en enkel grunduppgift så får inte använda andra element, därav den otroligt tråkiga sidan! :) Hur som helst är det flera saker jag inte får till.

 

1. Ul-koden - ska vara ett annat typsnitt än typsnittet för body. Var ska jag sätta detta och är det rätt kodat?

2. H2 blir ine kursiv?! Däremot blir den fet, jättekonstigt.

3. Ska ha en div id-selektor med annan bakgrundsfärg än vanliga bakgrunden, vet inte hur jag ska få till detta riktigt.

4. Länken ska ju bli en annan färg som jag angett men den blir ändå vanlig blå...

 

Tacksam för hjälp! Såhär ser koderna ut nu.

 

CSS

 

body {

background-color: #ffffff;

font-family: times new roman;

font-size:11px;

color: #000000;

}

 

h1 {

font-size:36px;

font-style:bold;

}

 

h2 {

font-size:14px;

font-style:italic;

}

 

a:link {

color: #33CCFF;

text-decoration: none;

}

 

a:hover {

text-decoration: underline;

}

 

ul {

font-family: verdana;

}

 

li {

letter-spacing: 1px;

}

 

#ruta {

background: #E0E0E0;

width: 200px;

height: 100px;

margin-left: 10px;

margin-top: 10px;

}

 

 

 

XHTML

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Fotografering</title>

</head>

<body>

<h1>Fotografering</h1>

 

<h2>Landskapsfoto</h2>

 

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

<div id="ruta">

Text text text text text text text text . Klicka in dig <a href="http://fotografgruppen.se/">här</a> text text text text text text .

</div>

 

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

</body>

</html>

Länk till kommentar
Dela på andra webbplatser

Du har satt:

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

på fel ställe. Det ska vara inom head-taggen, inte inom body, för att sidan ska läsa av css-dokumentet rätt.

Länk till kommentar
Dela på andra webbplatser

Aha! Tack!! Då va det sidan jag gick efter som skrivit fel :( Hoppas det funkar då...

Länk till kommentar
Dela på andra webbplatser

Ligegr filerna i samma mapp? Och heter CSS-filen verkligen examination.css? Visa info på filen för att se att den inte har något annat namn eller filändelse.

Länk till kommentar
Dela på andra webbplatser

Jag har ju gjort båda filerna i textwrangler med nåt css-tillägg. Och sparat den ena som examination1.html och den andra som examination1.css och båda ligger i en och samma mapp sparade... :S

Länk till kommentar
Dela på andra webbplatser

Har ni nåt tips på nån annan bra redigerare för både xhtml och css för mac? Som är gratis?

Länk till kommentar
Dela på andra webbplatser

Tog hem en ny editor och testade där också men samma problem! :( Fattar inte vad som är fel, så frustrerande! Komemr ju ingen vart.... När an inte ens får kursiv text på h2, den är knappast felkodad :S Det ser ju t o m jag...

 

Såhär ser det ut nu:

 

XHTML

 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Fotografering</title>

</head>

<body>

<h1>Fotografering</h1>

 

<h2>Landskapsfoto</h2>

 

<p>Detaljerna är det som gör bilden. De gör det lättare för ögat att se djupet i bilden. 3D-fotografier behöver inga ledtrådar, men på långt håll förlorar ögonen möjligheten att bedöma djupeffekter, och då går hjärnan på ledtrådar istället. Referensobjekt gör bilden lättare att begripa, och kan också göra den mer spännande. Står det två människor på diagonallinjen genom ett fjällmotiv, så kan man förstå hur långt det är om den ena är stor som en tändsticksask och den andra liten som ett knappnålshuvud. Genast lägger hjärnan in djup i bilden och det majestätiska fjället känns så mycket större. Hus i en landskapsbild lägger till en färgklick. Det är det som får ögat att upptäcka dem. Men för att inte dominera bilden måste de vara små, och helheten väl avvägd. För mycket färg och främmande saker stör den upplevelsen. Landskapfoto kräver inga speciella objektiv, det räcker med de normala. Vad det kräver är känsla för bildens ljusspel. En skogsutsikt blir helt annorlunda om man får molnskuggor på platser där det är kontraster i vegetationen. Se till så du har tid att vänta på att naturen lägger sig rätt – och var snabb när den gör det. Under tiden, rama in bilden. Det är bara när man står på en fjälltopp som man kan se 360 graders utsikt i den obebyggda naturen. Överallt annars finns det alltid någonting i vägen.</p>

<div id="ruta">

Information lånad från Fotografgruppen. Klicka in dig <a href="http://fotografgruppen.se/">här</a> för att läsa mer om landskapsfoto.

</div>

 

</body>

</html>

 

 

CSS

 

/*

----------------------------------------------------------------------------------

 

Umeå universitet

Institutionen för informatik

Kurs: CSS-baserad webbdesign

 

----------------------------------------------------------------------------------

*//*

----------------------------------------------------------------------------------

 

Namn: Sarah Öhrn

 

----------------------------------------------------------------------------------

*/

 

/* Skriv dina selektorer och deklarationer nedanför denna kommentar */

 

body {

background-color: #ffffff;

font-family: times new roman;

font-size:11px;

color: #000000;

}

 

h1 {

font-size:36px;

font-style:bold;

}

 

h2 {

font-size:14px;

font-style:italic;

}

 

a:link {

color: #33CCFF;

text-decoration: none;

}

 

a:hover {

text-decoration: underline;

}

 

ul {

font-family: verdana;

}

 

li {

letter-spacing: 1px;

}

 

#ruta {

background: #E0E0E0;

width: 200px;

height: 100px;

margin-left: 10px;

margin-top: 10px;

}

Länk till kommentar
Dela på andra webbplatser

Examination.css borde du väl döpa den till. Inte examination1.css?

 

Den måste heta så enl uppgiften. Men det ska väl inte spela nån roll så länge jag anger rätt namn i länken?

Länk till kommentar
Dela på andra webbplatser

Men åh ser nu att jag ju inte skrivit med 1an i länken, suck! Testa igen då!

Länk till kommentar
Dela på andra webbplatser

Japp och där funkade det! :P Åh få se om jag kan få ordning på allt nu då hehe

Länk till kommentar
Dela på andra webbplatser

Nu fick jag ordning på det. Puh! Men, den här rutan

 

#ruta {

background: #E0E0E0;

width: 200px;

height: 80px;

margin-left: 2px;

margin-top: 20px;

}

 

Hur ändrar jag marginalerna inuti så texten inte hamnar så långt åt höger i rutan?? Dessa "margin" är ju bara runt om rutan

Länk till kommentar
Dela på andra webbplatser

Ingen som kan hjälpa mig hur texten hamnar centrerad i rutan från alla håll? Den ligger automatiskt mot höger och övre kant. Försökt med padding men får inte till det jämnt eftersom den inte ligger mot alla kanter lika från början....

 

div#ruta {

background: #E0E0E0;

width: 20px;

height: 80px;

margin-left: 0px;

margin-top: 10px;

}

Länk till kommentar
Dela på andra webbplatser

Ingen som kan hjälpa mig hur texten hamnar centrerad i rutan från alla håll? Den ligger automatiskt mot höger och övre kant. Försökt med padding men får inte till det jämnt eftersom den inte ligger mot alla kanter lika från början....

 

div#ruta {

background: #E0E0E0;

width: 20px;

height: 80px;

margin-left: 0px;

margin-top: 10px;

}

Har inte riktigt koll på det själv, men är det inte något i stil med text-align. Som på den här länken tex http://www.w3.org/Style/Examples/007/center

text-align: center;

 

Så bli texten centererad i rutan. Men du vill nog ha lite padding med så du inte råkar få text ända ut i kanten.

 

#ruta {
background: #e0e0e0;
width: 200px;
height: 80px;
margin-left: 0px;
margin-top: 10px;

text-align: center;
padding: 3px;
}

Länk till kommentar
Dela på andra webbplatser

Ingen som kan hjälpa mig hur texten hamnar centrerad i rutan från alla håll? Den ligger automatiskt mot höger och övre kant. Försökt med padding men får inte till det jämnt eftersom den inte ligger mot alla kanter lika från början....

 

div#ruta {

background: #E0E0E0;

width: 20px;

height: 80px;

margin-left: 0px;

margin-top: 10px;

}

 

Ett annat tips är ju googla det du vill veta, det finns ju finns väldigt mycket information på internet redan.. Sök tex efter "css center text", så hittar du nog svar

Länk till kommentar
Dela på andra webbplatser

  • 2 months later...

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.



×
×
  • Skapa nytt...