/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Wrapper forstås ikke i firefox?
Fra : Marie Nielsen


Dato : 19-07-07 09:31

Kære allesammen,

Jeg forsøger at opbygge en hjemmeside for et frivilligcenter:
http://www.frivilliglolland.dk/endelig1.shtml

Jeg har en wrapper:

#wrapper {
   width: 720px;
   margin: 0 auto;
   text-align: left;
}

Det virker som om firefox ikke forstår dette, da min tekst
centreres og elementerne flyder helt ud til henholdsvis højre og
venstre.

Siden vises ellers pænt nok i min internet explorer.

Der er vist også noget med menuen der ikke vises rigtigt i
firefox, men der kan jeg ikke selv gennemskue problemet.

Er der nogen der kan hjælpe?

Kh
Marie


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Robert Nielsen (19-07-2007)
Kommentar
Fra : Robert Nielsen


Dato : 19-07-07 11:03

Marie Nielsen wrote in dk.edb.internet.webdesign.html:

> Jeg har en wrapper:
>
> #wrapper {
>    width: 720px;
>    margin: 0 auto;
>    text-align: left;
> }
>
> Det virker som om firefox ikke forstår dette, da min tekst
> centreres og elementerne flyder helt ud til henholdsvis højre
og
> venstre.
>
ude på sitet ser din #wrapper lidt anderledes ud

#wrapper {
   width: 720px;
   margin-top: 20px;
   margin-left: auto;
   margin-right: auto
   text-align: left;
   position: relative;
}

lige før text-align:left; mangler du et semikolon på
margin-right, jeg gætter på at både left og relative er sprunget
over, fordi du mangler et semikolon efter sidste auto.
Der er iøvrigt heller ingen doctype og sprog angivet i din kode.



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Marie Nielsen (19-07-2007)
Kommentar
Fra : Marie Nielsen


Dato : 19-07-07 11:20

Robert Nielsen wrote in dk.edb.internet.webdesign.html:
> Marie Nielsen wrote in dk.edb.internet.webdesign.html:

Tusind tak for at kikke på det!

> ude på sitet ser din #wrapper lidt anderledes ud

Ja undskyld, jeg ændrede lidt da jeg fandt en artikel der skrev
det skulle skrives op sådan.
>
> #wrapper {
>    width: 720px;
>    margin-top: 20px;
>    margin-left: auto;
>    margin-right: auto
>    text-align: left;
>    position: relative;
> }
>
> lige før text-align:left; mangler du et semikolon på
> margin-right, jeg gætter på at både left og relative er
sprunget
> over, fordi du mangler et semikolon efter sidste auto.

Har nu indsat semikolon og det ændrer desværre ikke på, at siden
ikke vises ordentligt i firefox??


> Der er iøvrigt heller ingen doctype og sprog angivet i din
kode.

Nej, ikke endnu - det skal jeg først have lært hvordan jeg
indføjer. Er kun lige startet med denne spændende, men sværre
verden.
>
>
>
> --
> Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
> - Pædagogiske tutorials på dansk
> - Kom godt i gang med koderne
> KLIK HER! => http://www.html.dk/tutorials


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Bertel Lund Hansen (19-07-2007)
Kommentar
Fra : Bertel Lund Hansen


Dato : 19-07-07 12:22

Marie Nielsen skrev:

>> Der er iøvrigt heller ingen doctype og sprog angivet i din
>> kode.

> Nej, ikke endnu - det skal jeg først have lært hvordan jeg
> indføjer. Er kun lige startet med denne spændende, men sværre
> verden.

Det skal du have på plads som det allerførste. Ellers får du
problemer undervejs, og når du så senere tilføjer en doctype,
vælter hele læsset.

Sæt denne her linje som den allerførste i alle dine hjemmesider:

   <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' ''>http://www.w3.org/TR/html4/strict.dtd'>

og et sted mellem <head> og </head> sætter du denne her:

   <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>

Så er det på plads, og så kan du om et par år give dig til at
fundere over hvorfor jeg anbefaler netop dem, og om du ikke gerne
vil bruge nogle andre.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Jørgen Farum Jensen (19-07-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-07-07 12:23

Marie Nielsen skrev:

> Har nu indsat semikolon og det ændrer desværre ikke på, at siden
> ikke vises ordentligt i firefox??
>
>
>> Der er iøvrigt heller ingen doctype og sprog angivet i din
> kode.
>
> Nej, ikke endnu - det skal jeg først have lært hvordan jeg
> indføjer. Er kun lige startet med denne spændende, men sværre
> verden.

Det kan du lige så godt starte med, du kan
ikke regne med nogetsomhelst, hvis ikke du
har en standardsættende dokumenttypeer-
klæring for eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="da">
<head>
<title>Sidens titel</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
+ evt andet indhold i head-delen.
</head>

De her ting er lige så vigtige for din side,
som det for eksempel er at fundamentet for
et nyt hus er i water.

Jeg kan ikke lige gennemskue, hvor det er
det går galt på din side (bortset fra at du
har to div'er med samme id), så her er et råd
om hvordan du kommer godt fra start:

Start med at bygge sidens hovedelementer op
med noget mumletekst. Du har 4 hovedelementer
på din side:
Én div omslutter alt indhold på siden.
Én div rummer sidehoved.
Én div omslutter 3 spalter.
Én div udgør sidefoden.

Når du har de fire elementer, og det står som
du ønsker, kan du oprette de tre spalter og
putte noget indhold i.

Hvis du hele tiden tjekker, hvordan det ser ud,
ser du med det samme når du har gjort noget
forkert, og finder fejlen ved ondets rod.
Det gør det også meget lettere for deltagerne
i denne nyhedsgruppe at retlede dig, når
du laver bommerter.

Du begår den samme fejl som så mange andre
begyndere - du vil for meget for hurtigt.

Den menukonstruktion du har valgt kræver
en del indsigt i CSS-formatering af lister,
så jeg vil anbefale dig min artikel
http://webdesign101.dk/www/cssmenu/dropdownmenu.php

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
Webdesign håndbøger: http://733.dk

Marie Nielsen (19-07-2007)
Kommentar
Fra : Marie Nielsen


Dato : 19-07-07 13:26


> >
> >> Der er iøvrigt heller ingen doctype og sprog angivet i din
> > kode.
>
> Det kan du lige så godt starte med, du kan
> ikke regne med nogetsomhelst, hvis ikke du
> har en standardsættende dokumenttypeer-
> klæring for eksempel:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html lang="da">
> <head>
> <title>Sidens titel</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=ISO-8859-1">
> + evt andet indhold i head-delen.
> </head>


Tusind tak for retvisningerne omkring doctype og sprog - og hvad jeg
skulle skrive der! Det har jeg nu skrevet ind

>
> Jeg kan ikke lige gennemskue, hvor det er
> det går galt på din side (bortset fra at du
> har to div'er med samme id), så her er et råd
> om hvordan du kommer godt fra start:
>
> Start med at bygge sidens hovedelementer op
> med noget mumletekst. Du har 4 hovedelementer
> på din side:
> Én div omslutter alt indhold på siden.
> Én div rummer sidehoved.
> Én div omslutter 3 spalter.
> Én div udgør sidefoden.
>
> Når du har de fire elementer, og det står som
> du ønsker, kan du oprette de tre spalter og
> putte noget indhold i.

Okay, jeg må prøve forfra igen. Jeg har ihvertfald ikke lavet en div
der rummer tre spalter. Jeg havde lavet:
En div om alt indhold
En div om sidehoved
En div om menuen
En div om content (div-main og div-secondary)
en div om sidefoden

hmmm.. jeg må jo forsøge på ny! Har fundet nogle sider om at
floatingboxe bryder "containing element" i firefox:
http://www.w3.org/TR/CSS21/visuren.html#flow-control
Så det må være der et sted min fejl er!

> Du begår den samme fejl som så mange andre
> begyndere - du vil for meget for hurtigt.
>
> Den menukonstruktion du har valgt kræver
> en del indsigt i CSS-formatering af lister,
> så jeg vil anbefale dig min artikel
> http://webdesign101.dk/www/cssmenu/dropdownmenu.php
>
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> http://webdesign101.dk
> Webdesign håndbøger: http://733.dk

Det er faktisk din artikel jeg har fulgt fra bunden af for at lave
menuen :) Den giver en rigtig grundig trin for trin indføring og jeg
har brugt http://www.sitepoint.com/books/cssant1/cssant1-sample.pdf
til at style din menu! Det tog mig en del prøver at nå frem til den
der virker: www.frivilliglolland.dk/igen7.html.

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jørgen Farum Jensen (19-07-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-07-07 14:05

Marie Nielsen skrev:


> Okay, jeg må prøve forfra igen. Jeg har ihvertfald ikke lavet en div
> der rummer tre spalter. Jeg havde lavet:
> En div om alt indhold
> En div om sidehoved
> En div om menuen
> En div om content (div-main og div-secondary)
> en div om sidefoden

Må vi se?

> hmmm.. jeg må jo forsøge på ny! Har fundet nogle sider om at
> floatingboxe bryder "containing element" i firefox:
> http://www.w3.org/TR/CSS21/visuren.html#flow-control
> Så det må være der et sted min fejl er!

Se evt. også
http://webdesign101.dk/css/floatcontainer.php


> Det er faktisk din artikel jeg har fulgt fra bunden af for at lave
> menuen :) Den giver en rigtig grundig trin for trin indføring og jeg
> har brugt http://www.sitepoint.com/books/cssant1/cssant1-sample.pdf
> til at style din menu! Det tog mig en del prøver at nå frem til den
> der virker: www.frivilliglolland.dk/igen7.html.

Flot arbejde - det er ret smart af dig
at lave menuen for sig selv, og så først
sætte den ind på siden når du ved den
virker.

Der er en ting ved stylesheet'et til
menuen der virker forkert - det er
div#navigation li.sub {
<img src= "pil.jpg">
}
der formodentlig er tænkt at skulle
indsætte en pil-grafik i de menupunkter
der har undermenuer.

Det virker ikke. Du kan ikke indsætte en
html-markør i et stylesheet. Vi bruger
sædvanligvis

div#navigation li.sub {
background-image: url(pil.jpg);
background-repeat:no-repeat;
background-position:right center;
}

--
--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
Webdesign håndbøger: http://733.dk

Marie Nielsen (19-07-2007)
Kommentar
Fra : Marie Nielsen


Dato : 19-07-07 15:08

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Marie Nielsen skrev:
>
>
> > Okay, jeg må prøve forfra igen. Jeg har ihvertfald ikke lavet en div
> > der rummer tre spalter. Jeg havde lavet:
> > En div om alt indhold
> > En div om sidehoved
> > En div om menuen
> > En div om content (div-main og div-secondary)
> > en div om sidefoden
>
> Må vi se?

mener du når jeg er færdig med at prøve forfra? Eller er det den
oprindelige opdeling jeg havde lavet du ville se? Den oprindelige er
nedenfor her:

<div id="wrapper">
<div id="branding"> <img src="banner3.jpg"/> </div>
<div id="navigation"><!--#include file="endeligmenu.inc"--></div>
<div id="content">
<div id="mainContent">
yyyy
</div>
<div id="secondaryContent">
xxxx
</div>
</div>
<!--#include file="footer.inc"-->
</div>
</div>

åh, måske er sidefoden ikke lavet som en rigtig div, men den reagerer nu
i forhold til min css-kodning...

> Se evt. også
> http://webdesign101.dk/css/floatcontainer.php

Tak for dit link :) Den havde jeg ikke selv fundet endnu! Vil forsøge at
bruge det i mit næste forsøg...

> Flot arbejde - det er ret smart af dig
> at lave menuen for sig selv, og så først
> sætte den ind på siden når du ved den
> virker.

Tusind tak : ) Og tak for hjælpen med dit gode grundlag!

> Der er en ting ved stylesheet'et til
> menuen der virker forkert - det er
> div#navigation li.sub {
> <img src= "pil.jpg">
> }
> der formodentlig er tænkt at skulle
> indsætte en pil-grafik i de menupunkter
> der har undermenuer.
>
> Det virker ikke. Du kan ikke indsætte en
> html-markør i et stylesheet. Vi bruger
> sædvanligvis
> div#navigation li.sub {
> background-image: url(pil.jpg);
> background-repeat:no-repeat;
> background-position:right center;
> }

Ja, jeg havde ret mange problemer med pilen! Jeg kunne godt få det til at
virke efter din forskrift, men ikke når jeg samtidig valgte en
background-color... Og så gav jeg op der. For lige at vise hvad jeg mener
har jeg indsat det med pilen igen og fjernet baggrundsfarverne:
http://www.frivilliglolland.dk/endelig4.shtml
Æv, ærgeligt at begge ting ikke virker på en gang.

Men endnu engang tusind tak for input ind til nu. Jeg vender tilbage når
jeg har prøvet at opbygge det fra bunden igen - og det forhåbentlig
virker med "float"elementerne.

Kh
Marie



--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jørgen Farum Jensen (19-07-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-07-07 16:30

Marie Nielsen skrev:

>> Må vi se?
>
> mener du når jeg er færdig med at prøve forfra? Eller er det den
> oprindelige opdeling jeg havde lavet du ville se? Den oprindelige er
> nedenfor her:

Nåh, jeg misforstod fir indlæg, jeg troede
du havde lavet det jeg foreslog og ville
så gerne se det online.

> <div id="wrapper">
> <div id="branding"> <img src="banner3.jpg"/> </div>
> <div id="navigation"><!--#include file="endeligmenu.inc"--></div>
> <div id="content">
> <div id="mainContent">
> yyyy
> </div>
> <div id="secondaryContent">
> xxxx
> </div>
> </div>
> <!--#include file="footer.inc"-->
> </div>
> </div>
>
> åh, måske er sidefoden ikke lavet som en rigtig div, men den reagerer nu
> i forhold til min css-kodning...

Ovenstående burde være:
<div id="wrapper">
<div id="branding"> <img src="banner3.jpg"/>
</div>
<div id="indhold">
   <div id="navigation">
   <!--#include file="endeligmenu.inc"-->
   </div>
   <div id="content">
   yyyy
   </div>
   <div id="secondaryContent">
   xxxx
   </div>
<div class="clear"></div>
</div>
<div id="sidefod">
<!--#include file="footer.inc"-->
</div>
</div>
Så bliver wrapper reference-element for alt
indholdet, inkl. #sidehoved, #sidefod og #indhold.
Inde i #indhold kan du så float'e dine elementer
af hjertens lyst, så længe du husker at clear'e dem
/før/ afslutningen af #indhold.


>> Der er en ting ved stylesheet'et til
>> menuen der virker forkert - det er
>> div#navigation li.sub {
>> <img src= "pil.jpg">
>> }
>> der formodentlig er tænkt at skulle
>> indsætte en pil-grafik i de menupunkter
>> der har undermenuer.
>>
>> Det virker ikke. Du kan ikke indsætte en
>> html-markør i et stylesheet. Vi bruger
>> sædvanligvis

> Ja, jeg havde ret mange problemer med pilen! Jeg kunne godt få det til at
> virke efter din forskrift, men ikke når jeg samtidig valgte en
> background-color... Og så gav jeg op der. For lige at vise hvad jeg mener
> har jeg indsat det med pilen igen og fjernet baggrundsfarverne:
> http://www.frivilliglolland.dk/endelig4.shtml
> Æv, ærgeligt at begge ting ikke virker på en gang.

Det gør det sandelig også, hvis du ellers
kigger på de rette elementer.

div#navigation li.sub a {
background-image: url(pil.jpg);
background-repeat:no-repeat;
background-position:right center;
}

div#navigation li a {
background-color:red; /* OBS tilfældig farve */
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 150px;
}

Obs flg: Du kan ikke nøjes med background:farve,
når du har en baggrundsgrafik; Obs også
at din pilegrafik har hvid som baggrund, den
skal naturligvis have samme baggrundsfarve som
det element, den danne baggrund for, eller -
bedre - have en transparent baggrund. Og derfor
laves som en png eller gif.

> Men endnu engang tusind tak for input ind til nu. Jeg vender tilbage når
> jeg har prøvet at opbygge det fra bunden igen - og det forhåbentlig
> virker med "float"elementerne.

Right. Mon ikke du er på rette spor nu?

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
Webdesign håndbøger: http://733.dk

Marie Nielsen (19-07-2007)
Kommentar
Fra : Marie Nielsen


Dato : 19-07-07 20:29

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Marie Nielsen skrev:
>
> >> Må vi se?
> >
Så har jeg fulgt dit råd og bygget det op på ny :)
http://www.frivilliglolland.dk/endelig5.shtml

Nu vises de forskellige elementer næsten rigtigt, så det er en stor forskel
fra i morges - tak for hjælpen!
>

> Det gør det sandelig også, hvis du ellers
> kigger på de rette elementer.
>
> div#navigation li.sub a {
> background-image: url(pil.jpg);
> background-repeat:no-repeat;
> background-position:right center;
> }
>
> div#navigation li a {
> background-color:red; /* OBS tilfældig farve */
> display: block;
> padding: 0.25em 0 0.25em 0.5em;
> text-decoration: none;
> width: 150px;
> }
Jubiii - nu er der både farve og pil. Der går dog nu noget andet galt med
pilene. De bliver vist på alle undermenuerne. Jeg har siddet og tjekket min
navngivning af i forhold til dit (Jørgen Farums) navngivningseksempel - og
jeg kan simpelthen ikke selv få øje på fejlen?

> Right. Mon ikke du er på rette spor nu?
Jo, virkelig dejligt med så hurtig og effektiv hjælp! :)
> --
> Med venlig hilsen
> Jørgen Farum Jensen
> http://webdesign101.dk
> Webdesign håndbøger: http://733.dk


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Lars Raaby (19-07-2007)
Kommentar
Fra : Lars Raaby


Dato : 19-07-07 21:42

Marie Nielsen skrev:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
> Så har jeg fulgt dit råd og bygget det op på ny :)
> http://www.frivilliglolland.dk/endelig5.shtml
>
> Nu vises de forskellige elementer næsten rigtigt, så det er en stor forskel
> fra i morges - tak for hjælpen!
>
> Jubiii - nu er der både farve og pil. Der går dog nu noget andet galt med
> pilene. De bliver vist på alle undermenuerne. Jeg har siddet og tjekket min
> navngivning af i forhold til dit (Jørgen Farums) navngivningseksempel - og
> jeg kan simpelthen ikke selv få øje på fejlen?
>
> Jo, virkelig dejligt med så hurtig og effektiv hjælp! :)
>
>
Du har 2 ID footer og 2 ID navigation samt at du mangler og lave
en ALT tekst på dit billede.


--
Venlig Hilsen
Lars Raaby
- nu med blog
http://lars.raaby.dk/blog

Jørgen Farum Jensen (19-07-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-07-07 22:54

Marie Nielsen skrev:


> http://www.frivilliglolland.dk/endelig5.shtml
>
> Nu vises de forskellige elementer næsten rigtigt, så det er en stor forskel
> fra i morges - tak for hjælpen!

Ja, nu skal der blot pudses lidt på det...

>> Det gør det sandelig også, hvis du ellers
>> kigger på de rette elementer.
>>
>> div#navigation li.sub a {
>> background-image: url(pil.jpg);
>> background-repeat:no-repeat;
>> background-position:right center;
>> }
>>
>> div#navigation li a {
>> background-color:red; /* OBS tilfældig farve */
>> display: block;
>> padding: 0.25em 0 0.25em 0.5em;
>> text-decoration: none;
>> width: 150px;
>> }
> Jubiii - nu er der både farve og pil. Der går dog nu noget andet galt med
> pilene. De bliver vist på alle undermenuerne. Jeg har siddet og tjekket min
> navngivning af i forhold til dit (Jørgen Farums) navngivningseksempel - og
> jeg kan simpelthen ikke selv få øje på fejlen?

Jeg glemte at nævne det, men det er
jo som det skal være: background-image arves.
Derfor mangler du:

div#navigation li.sub ul li a{
background-image:none;
}

Dine gif'er er ikke særlig pæne - hvid
halo-effekt.
Når du laver pilen skal du antialias'e
over i en farve, der ligger tæt op af
baggrundsfarven.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
Webdesign håndbøger: http://733.dk

Søg
Reklame
Statistik
Spørgsmål : 177559
Tips : 31968
Nyheder : 719565
Indlæg : 6408938
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste