Jump to content
Just nu i M3-nätverket

Hjälp kodning xhtml + css


SarahOhrn

Recommended Posts

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 months later...

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...