Notifikationer

Markér alle som læst Log ud

fotobob Nybegynder

09. november 2004 - 19:18 Der er 29 kommentarer og
2 løsninger

hjemmeside i css, indsætte grafik?

Hejsa

Jeg er ved at lave en hjemmeside i css, hvor der først er en menu dernæst noget grafik (topbillede)

Hvordan indsætter man grafik, skla jeg ind i min css-fil som jeg har kaldt header, eller skal det laves i selve html-filen (default.html)

Min css-fil ser sådan ud:
#header {
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width; 100%;
margin 0px;
}

og min html-fil:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title>Sundby - Øster Toreby vandværk</title>
<link rel="stylesheet" type="text/css" href="default.css" media="screen,projection
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="default.html">Forsiden</a></li>
<li><a href="default.html">Vedtægter</a></li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>

Er jeg på rette spor, jeg følger en rigtigt god artikel som ligger her på eksperten!

Synes godt om

dan_n Nybegynder

09. november 2004 - 19:24 #1

Du er på rette vej

Prøv med:
#header {
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width; 100%;
margin 0px;
background-image: url('mappe/billede.png');
}

læs mere på:
http://www.webtip.dk/typark/alleegenskaber/menu_egensk.php

- > background-attachment
- > background-image
- > background-position
- > background-repeat

Synes godt om

dan_n Nybegynder

09. november 2004 - 19:25 #2

Men du kan også blot lave en alminde lige
<img> tag, men hvis grafikken (menu/topbilleder) er det samme på alle dine undersider, vil jeg foreslå dig at bruge css, filen så er det mest overskuelig og vil også fyld min KB

Synes godt om

fotobob Nybegynder

09. november 2004 - 19:31 #3

dan n - Mit topbillede skal bruges på alle sider, så dan skal bare være "låst"

Er det forkert at kalde den for en header;-)?

Synes godt om

dan_n Nybegynder

09. november 2004 - 19:39 #4

Du kan kalde dden præcis hvad du har lyst til, det betyder ikke noget. Men header er et godt navn, da det repræsentere placeringen af dit <div>-tag.

Hvis indsætter du denne i dit style sheet, er du sikker på billeder ikke bliver gentaget (no-repeat) og at det beholder sin placring når der scrolles(foxed).
#header{
......
background: url("mappe/billede.png") no-repeat fixed;
}

Men husk altid at validere din stylesheets og html dokumenter her:
http://validator.w3.org/

Synes godt om

fotobob Nybegynder

09. november 2004 - 19:45 #5

Dan_n -> okay tak! Behøver jeg, height, width osv.i stylesheetet?

Et andet problem er at min grafik kommer altså ikke frem, selvom jeg linker rigtigt til den!

#header {
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width; 100%;
margin 0px;
background: url("website_vandværk/gfx/header.gif") no-repeat fixed;

}

og mit "reference" css er i orden!!!

Synes godt om

dan_n Nybegynder

09. november 2004 - 19:58 #6

Jeg vil først foreslå dig at omdøbe din mappe, så den ikke indeholder æøå eller andre special tegn til fx website_vandvaerk.
Prøv derefter:

background-image: url("website_vandvaerk/gfx/header.gif");

Synes godt om

fotobob Nybegynder

09. november 2004 - 20:06 #7

Det har jeg gjort nu, men det hjælper descværre ikke! sådan noget møg!

Ved ikk hvad der er i vejen!

Synes godt om

fotobob Nybegynder

09. november 2004 - 20:08 #8

selve html dukomentet er fuldstændigt tomt hvor jeg loader den!

Synes godt om

susanne_larsen Nybegynder

09. november 2004 - 20:29 #9

er ikke 100% på det hjælper med prøv at indsætte .p

background-position: top;

Synes godt om

fotobob Nybegynder

09. november 2004 - 20:31 #10

susanne -> det hjælper desværre ikke. Er virkelig lost lige nu!

Synes godt om

fotobob Nybegynder

09. november 2004 - 20:48 #11

Dette er min seneste html kode, og jeg hár givert den et "header" ID.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title>Sundby - Øster Toreby vandværk</title>
<link rel="stylesheet" type="text/css" href="default.css" media="screen,projection
</head>
<body>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
</body>
</html>

Og her er det stylesheet som definerer hvordan grafikken skal indsættes:

#header {
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
background-image: url("website_vandvaerk/gfx/header.gif");
background-position: top;

}

Jeg kan simpelthen ikke se, hvad der skulle være gelt med koden, men der er jo nok et eller andet bøvl med det. Kan I se det? eller kan det være noget helt tredje de er galt?

Synes godt om

dan_n Nybegynder

09. november 2004 - 20:58 #12

Jeg kan umildbart se du lander en slut ">" i denne linie
> <link rel="stylesheet" type="text/css" href="default.css" media="screen,projection

Prøv lige at tjekke dine stier en gang til. Ligger din html dokument i en undermappe til "website_vandvaerk" eller ligger din i mappen "website_vandvaerk" ?

Prøv evt. dette:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title>Sundby - Øster Toreby vandværk</title>
<style type="text/css">
#header {
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
background-image: url("website_vandvaerk/gfx/header.gif");
background-position: top;

}
</style>

</head>
<body>
<div id="header"> </div>
<div id="menu"> </div>
<div id="content"> </div>
</body>
</html>

Så burde det virke, hvis du har angivet dine stier rigtigt :-)

Synes godt om

fotobob Nybegynder

09. november 2004 - 21:10 #13

ja det ser fint ud Dan, men nu er det en ny måde du skriver det på, og det er ikke sådan jeg har tænkt mig at skrive det på, og lære det på!

jeg vil holde css i stylesheets og ikke i html koden!

Synes godt om

fotobob Nybegynder

09. november 2004 - 21:17 #14

html filen ligger i selve website_vandvaerk" i den mappe har en en undermapppe der hedder 'default' hvor alle css dokumenterne ligger!

Synes godt om

dan_n Nybegynder

09. november 2004 - 21:19 #15

Det brude være det samme, og virker ovenstående fint, ligger fejl i dine stier til/fra det externes stylesheet.

Så det er en metode, at tjekke dette på ????

Du kan blot hvis dette virker
kopiere dette ud:
#header {
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
background-image: url("website_vandvaerk/gfx/header.gif");
background-position: top;

}
og indsætte det i din fil og indsætte dette <tag> i dit dokument:
<link rel="stylesheet" type="text/css" href="default.css" media="screen,projection" />

Synes godt om

fotobob Nybegynder

09. november 2004 - 21:25 #16

Synes godt om

fotobob Nybegynder

09. november 2004 - 21:30 #17

sådan ser min default mappe ud:

@charset "ISO-8859-1";
@import "default/header.css";
@import "default/menu.css";
@import "default/content.css";
@import "default/basic.css";

Synes godt om

dan_n Nybegynder

09. november 2004 - 21:40 #18

[1] Virkede dokumentet jeg foreslog med stylesheet intern ????? ikke at du skal bruge dette jeg vil bare gerne vide om det virkede mth. til stier osv.

Af hvad jeg kan se i det nederste er der ikke noget dokument som hedder
>>> "default.css"

og det er det du linker til:

<link rel="stylesheet" type="text/css" href="default.css" media="screen,projection" />

og som du linker til det skal det ligge i samme mappe som din html fil.

hvis html fil ligger i lad os sige mappen

\din_hjemmeside\dit_dokument.htm

[2] hvor ligger den stylesheet fil du linker til så
[3] og hvor ligger din billede mappe ?

Synes godt om

fotobob Nybegynder

09. november 2004 - 21:48 #19

1. Nej resultatet var desværre det samme dvs. helt hvidt browserbillede!

2. den ligger i roden af website_vandvaerk, sammen med default.html. ALTSÅ, html OG default.css som er den der indeholder: De ligger altså begge to i roden af mappen.
@charset "ISO-8859-1";
@import "default/header.css";
@import "default/menu.css";
@import "default/content.css";
@import "default/basic.css";

Men mine css-filer ligger i en mappe, der hedder default. Og her ligger jo header.css

3. Billedemappen (gfx) ligger i website_vandvaerk mappen, som er placeret på skriverbordet.

Synes godt om

dan_n Nybegynder

09. november 2004 - 22:09 #20

fair nok

prøv at indsætte dette i din stylesheet fil isetde for:
..
background-image: url("gfx/header.gif");
..

Synes godt om

fotobob Nybegynder

09. november 2004 - 22:13 #21

hmm det virker heller ikke! virkelig deprimerende...

Synes godt om

dan_n Nybegynder

09. november 2004 - 22:20 #22

Det var da mystisk:

Vi er enige om at disse stier er rigtige:

/skrivebord/website_vandvaerk/dit_dokument.htm
/skrivebord/website_vandvaerk/default.css
/skrivebord/website_vandvaerk/gfx/header.gif

din css filer
/skrivebord/website_vandvaerk/default/header.css
/skrivebord/website_vandvaerk/default/menu.css
/skrivebord/website_vandvaerk/default/content.css
/skrivebord/website_vandvaerk/default/basic.css

Synes godt om

fotobob Nybegynder

09. november 2004 - 22:22 #23

Ja! lige præcis...

den hedder bare default.html (dit_dokument.htm)

Kunne det tænkes der skulle stå noget mere i selve html filen? under ID?

Synes godt om

dan_n Nybegynder

09. november 2004 - 22:27 #24

Så tror jeg har den:

jeg går ud fra #header ligge i din header.css

Så hvis du ændre, din header.css til dette:
#header {
position: absolute;
left: 0px;
top: 0px;
margin: 0px;
background-image: url("../gfx/header.gif");
background-position: top;
width: 100%;
height: 100%;
}

Synes godt om

fotobob Nybegynder

09. november 2004 - 22:33 #25

så virker de:-)

men nu er hele browseren fulstændig overlappet med min header.gif!?

Hvilken attribut skal jeg ændre?

Synes godt om

dan_n Nybegynder

09. november 2004 - 22:37 #26

du ændre blot:
width: 100%;
height: 100%;

til de mål du din header.gif har

width: xx px;
height: xx px;

Synes godt om

olebole Juniormester

09. november 2004 - 22:47 #27

<ole>

1. Du skal slette linien:
<?xml version="1.0" encoding="iso-8859-1"?>
Benytter du ikke 'rigtig' XML - men 'kun' XHTML - er den overflødig. Sletter du den ikke, kan du aldrig få IE til at tolke CSS korrekt.

2. Hvorfor skrive til XHTML1.1? Den er elendigt understøttet, så foreløbig er XHTML1.0 langt bedre at bruge - men husk, det skal være 'Strict'. XHTML1.0-Transitional er rystende ligegyldig, da man ingen fordele har ud af den fremfor HTML4.01

/mvh
</bole>

Synes godt om

fotobob Nybegynder

09. november 2004 - 23:06 #28

Olebole, jeg er med at slette den der linie. Men hvad skal erstattes med hvad?

Synes godt om

fotobob Nybegynder

09. november 2004 - 23:15 #29

dan_n jep det virker..

Synes godt om

fotobob Nybegynder

10. november 2004 - 01:14 #30

Lige et andet spørgsmål:

http://stud.imma.dk/thrane/

menuen jeg har lavet i toppen, hvorfor kan jeg ikke rykke den helt ud i venstre side?
her er mit stylesheet:
#menu {
position: absolute;
top: 10px;
left: 0px;
right: 0px;
background-color: transparent;
color: black;
height: 10px;
font-weight: bold;
}

#menu a {
text-decoration: none;
color: black;
background-color: transparent;
padding: 10px 11px 0px 10px;

}

#menu a:hover {
color: black;
background-color: #D9D9D9;
}

#menu a.external:hover {
color: black;
background-color: #D9D9D9;
}

#menu li {
display: inline;

}

Synes godt om

fotobob Nybegynder

10. november 2004 - 12:44 #31

Hvis man har en topmenu som hele skal være i toppen. Men man også vil have en bundbjælke på sin hjemmeside som man gerne vil have til hele tiden af være i bunden af siden,således at hjemmesiden i højden hele tiden er 100%!? håber i forstår.

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