|
|
 | div med top:0px rykkes ned i FireFox
Fra : Skunsen |
Dato : 20-02-09 15:32 |
|
Hej!
Jeg er ved at lave en side hvor jeg har et banner i toppen og
under det en tekst.
Link: www.skunsen.dk/cv/forside.php#ok
Jeg har brugt følgende doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
" http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
Her er css for teksten:
#site_title {
position:absolute;
font-weight:bold;
font-size:250%;
top:190px;
left:230px;
width:810px;
text-align:center;
}
Hvis jeg sætter top til 0 px, så vises teksten i toppen i IE men
i FF bliver den gemt bag banneret i toppen.
Er der nogen, der har en forklaring?
Mvh Tina
--
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 (21-02-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 21-02-09 12:17 |
|
Skunsen skrev:
> Hej!
> Jeg er ved at lave en side hvor jeg har et banner i toppen og
> under det en tekst.
> Link: www.skunsen.dk/cv/forside.php#ok
>
> Jeg har brugt følgende doctype:
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> " http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html;
> charset=iso-8859-1">
>
> Her er css for teksten:
> #site_title {
> position:absolute;
> font-weight:bold;
> font-size:250%;
> top:190px;
> left:230px;
> width:810px;
> text-align:center;
> }
>
> Hvis jeg sætter top til 0 px, så vises teksten i toppen i IE men
> i FF bliver den gemt bag banneret i toppen.
>
> Er der nogen, der har en forklaring?
Ikke uden et link til siden.
Teorien er: Et absolut positioneret element
udgør et lag, der så at sige svæver over websiden
og dækker over websidens øvrige elementer.
Hvis omstændighederne ellers er de samme er
der ingen forskel på browservisningen. Så
mit spørgsmål er:
Hvad er #site_title, hvad er "teksten", hvad er
"banneret i toppen". Det besvares bedst med et
link til siden, og /ikke/ en skærmfuld mere
kode i en usenet posting.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Birger Sørensen (21-02-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 21-02-09 13:03 |
|
Efter mange tanker skrev Jørgen Farum Jensen:
> Skunsen skrev:
>> Hej!
>> Jeg er ved at lave en side hvor jeg har et banner i toppen og
>> under det en tekst.
>> Link: www.skunsen.dk/cv/forside.php#ok
>>
>> Jeg har brugt følgende doctype:
>> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> " http://www.w3.org/TR/html4/strict.dtd">
>> <html>
>> <head>
>> <meta http-equiv="content-type" content="text/html;
>> charset=iso-8859-1">
>>
>> Her er css for teksten:
>> #site_title {
>> position:absolute;
>> font-weight:bold; font-size:250%; top:190px; left:230px; width:810px;
>> text-align:center;
>> }
>>
>> Hvis jeg sætter top til 0 px, så vises teksten i toppen i IE men
>> i FF bliver den gemt bag banneret i toppen.
>>
>> Er der nogen, der har en forklaring?
>
> Ikke uden et link til siden.
>
> Teorien er: Et absolut positioneret element
> udgør et lag, der så at sige svæver over websiden
> og dækker over websidens øvrige elementer.
>
> Hvis omstændighederne ellers er de samme er
> der ingen forskel på browservisningen. Så
> mit spørgsmål er:
> Hvad er #site_title, hvad er "teksten", hvad er
> "banneret i toppen". Det besvares bedst med et
> link til siden, og /ikke/ en skærmfuld mere
> kode i en usenet posting.
Hvad er der galt med det link der er givet? ^^
http://www.skunsen.dk/cv/forside.php#ok
Men ellers har du ret. Uklar tale. Og formentlig en sammenblanding af
absolut positionering og almindeligt flow. Måske noget med at
positionere i forhold til forskellige elementer.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
 Jørgen Farum Jensen (21-02-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 21-02-09 17:15 |
|
Birger Sørensen skrev:
>> Hvad er #site_title, hvad er "teksten", hvad er
>> "banneret i toppen". Det besvares bedst med et
>> link til siden, og /ikke/ en skærmfuld mere
>> kode i en usenet posting.
>
> Hvad er der galt med det link der er givet? ^^
> http://www.skunsen.dk/cv/forside.php#ok
>
> Men ellers har du ret. Uklar tale. Og formentlig en sammenblanding af
> absolut positionering og almindeligt flow. Måske noget med at
> positionere i forhold til forskellige elementer.
Ups, det havde jeg lige overset i forvirringen.
Og ikke at det havde hjulpet noget. Siden er en
slem rodebutik ed jeg ved ikke hvor mange id'er,
som det er umådelig svært at se formålet med.
Til Tina:
Start på en frisk inden du vikler dig ind
i flere lapperier. Less is More gælder også
i websidekonstruktion. Du har brug for siger
og skriver 3 layout-elementer:
<div id="wrapper">
<div id="leftcol">
[ Venstre spaltes indhold }
</div>
<div id="rightcol">
[Højre kolonnes indhold ]
</div>
<div class="clearalle">
</div>
</div>
Eksempler finder du her:
http://webdesign101.dk/layout/
Det er bare for meget at spilde tiden på runde hjørner
før du har brugt tiden på noget relevant indhold, der
beskriver dine kompetencer.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Skunsen (23-02-2009)
| Kommentar
Fra : Skunsen |
Dato : 23-02-09 12:39 |
|
Jeg blev ked af det og også lidt sur, da jeg læste svarene til mit
spørgsmål...
Jeg synes at det er kedeligt at man skal "hejles" igennem for alt muligt
andet end lige det spørgsmålet handler om.
F.eks.:
> Det er bare for meget at spilde tiden på runde hjørner
> før du har brugt tiden på noget relevant indhold, der
> beskriver dine kompetencer.
Jeg synes at det er underligt at Jørgen skal til at kommentere på den måde
jeg laver hjemmesiden på. Han kender jo overhovedet ikke
forudsætningerne!?!
Jeg har en anden hjemmeside, hvor alt relevant indhold ligger i en
MySQL-database og "blot" skal "flyttes" over i det nye design.
DERFOR "spilder" jeg tiden med runde hjørner!
Og DERFOR bruger jeg endnu ikke siden i jobsøgningssammenhæng!
Kommentarer som denne...
> Og ikke at det havde hjulpet noget. Siden er en
> slem rodebutik ed jeg ved ikke hvor mange id'er,
> som det er umådelig svært at se formålet med.
...gør at min lyst til at bruge dette forum er dalet ganske drastisk!
Jeg har ikke brug for at blive slået i hovedet...
Jeg har nu siddet og skiftevis hidset mig op og været ked af det, så jeg
tror at jeg stopper nu, og finder et andet sted eller en anden måde at løse
mit problem på...
--
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
| |
Erik Olsen (23-02-2009)
| Kommentar
Fra : Erik Olsen |
Dato : 23-02-09 12:45 |
|
Skunsen wrote:
> ..gør at min lyst til at bruge dette forum er dalet ganske drastisk!
> Jeg har ikke brug for at blive slået i hovedet...
Du læser og skriver ikke i et webforum på html.dk, men derimod i
nyhedsgruppen news:dk.edb.internet.webdesign.html. Se mere på
http://www.usenet.dk/.
--
Venlig hilsen/Best regards
Erik Olsen
http://www.modelbaneteknik.dk/
| |
Skunsen (23-02-2009)
| Kommentar
Fra : Skunsen |
Dato : 23-02-09 13:58 |
|
> Du læser og skriver ikke i et webforum på html.dk, men derimod i
> nyhedsgruppen news:dk.edb.internet.webdesign.html. Se mere på
> http://www.usenet.dk/.
Jeg mente forum i bred forstand og henviser heller ikke til html.dk 
Meeen jeg skal nok huske at skrive nyhedsgruppe, hvis jeg benytter det i
fremtiden!
Mvh Tina
--
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
| |
Skunsen (23-02-2009)
| Kommentar
Fra : Skunsen |
Dato : 23-02-09 14:00 |
|
> Du læser og skriver ikke i et webforum på html.dk, men derimod i
> nyhedsgruppen news:dk.edb.internet.webdesign.html. Se mere på
> http://www.usenet.dk/.
Jeg mente forum i bred forstand og henviser derfor heller ikke til
html.dk
Meeen jeg skal nok huske at skrive nyhedsgruppe, hvis jeg benytter det i
fremtiden!
Mvh Tina
--
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
| |
Birger Sørensen (23-02-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 23-02-09 14:36 |
|
Skunsen kom med følgende:
> Jeg blev ked af det og også lidt sur, da jeg læste svarene til mit
> spørgsmål...
>
> Jeg synes at det er kedeligt at man skal "hejles" igennem for alt muligt
> andet end lige det spørgsmålet handler om.
>
"Hvis jeg sætter top til 0 px, så vises teksten i toppen i IE men
i FF bliver den gemt bag banneret i toppen.
Er der nogen, der har en forklaring?"
Dit spørgsmål er uklart.
Hvis man tager sig tiden, og ser siden i både IE7 og FF3, kan man måske
se hvad du mener.
Der er 61 advarsler om tomme <b> elementer.
Og jeg holder med Jørgen :
Din kode er ikke specielt overskulig.
Hvis man har tiden og energien, kan man sikkert rydde op i den, så den
bliver læselig og overskuelig.
Jeg skal gerne gentage mit tidligere svar : Jeg tror du har et problem
med noget absolut positioneret - evt. hvad det er absolut positioneret
i forhold til.
FF3 med HTML validator og FireBug er fantastiske værktøjer.
Den generelt nemmeste vej, er at få tingene til at blive vist rigtigt i
FF, samtidig med at standarderne overholdes - uanset hvad man har tænkt
sig at fylde i hullerne senere - og derefter tilpasse til IE (og evt
andre).
Du befinder dig i en nyhedsgruppe. Alle har ret til at give deres
mening. Jørgen er - IMHO - en af de dygtigste og mest vidende herinde.
At han mener som han gør og giver udtryk for det, kan du hverken gøre
fra eller til.
Andet end måske at tage hans meninger til efterretning - og næste gang
udtrykke dit spørgsmål præcist, og evt. rydde op i din kode, og skrive
den så andre end du selv, har en chance for at finde rundt i den.
Måske vil din chance for at få hjælp være større, hvis man ikke skal
bruge en halv time på at finde overblikket først...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Jørgen Farum Jensen (23-02-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 23-02-09 19:41 |
|
Skunsen skrev:
> Jeg blev ked af det og også lidt sur, da jeg læste svarene til mit
> spørgsmål...
Og jeg er skuffet og vred over sådan en reaktion
fra en person, der har både en multimediedesigner-
uddannelse og en kandidatgrad i IT med multimedier
som speciale.
Hvis det er niveauet, hvad i alverden skal vi
andre halvstuderende røvere så stille op når vi
ikke kan finde ud af det?
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
| |
Skunsen (24-02-2009)
| Kommentar
Fra : Skunsen |
Dato : 24-02-09 09:49 |
|
> [...] der har både en multimediedesigner-
> uddannelse og en kandidatgrad i IT med multimedier
> som speciale.
>
> Hvis det er niveauet, hvad i alverden skal vi
> andre halvstuderende røvere så stille op når vi
> ikke kan finde ud af det?
Kandidatgraden er ikke en uddannelse i programmering og hvor meget jeg
end gerne ville, så har jeg ikke en multimediedesigneruddannelse, men
jeg må indrømme at jeg var noget nærtagende i går... Jeg havde vist
ikke sovet nok??!?!
Jeg kiggede i koden via "Vis kilde" og så kan jeg godt se jeres
pointe... Det ER meget rodet!!!
Men det er altså mere overskueligt, når jeg kigger på koden via Stones
Webwriter - hvilket naturligvis ikke er nogen undkyldning!!
Nu har jeg ryddet fuldstændigt op, så der kun er
titlen/teksten(id="site_title") tilbage.
Jeg har lavet en absolut positionering med "top: 0px;" men i FF bliver
den rykket ned???
Jeg håber at I har tålmodighed til at kigge endnu engang - denne gang
skulle det være til at overskue -uden at være detektiv!
LINK: www.skunsen.dk/cv/forside.php
Mvh Tina
--
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 (24-02-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 24-02-09 10:44 |
|
Skunsen skrev:
> Nu har jeg ryddet fuldstændigt op, så der kun er
> titlen/teksten(id="site_title") tilbage.
>
> Jeg har lavet en absolut positionering med "top: 0px;" men i FF bliver
> den rykket ned???
>
> Jeg håber at I har tålmodighed til at kigge endnu engang - denne gang
> skulle det være til at overskue -uden at være detektiv!
Sådan!
Jeg kan ikke se andet end at boksen
står i toppen i både Firefox og IE (IE8).
Men det er stadigvæk totalt overflødigt
at bruge position til en sidetitel. Det
er en meget betydende overskrift og burde
således markeres
<div id="site_title">
<h1>Tina Revsbæk</h1>
</div>
Så kan du formatere elementet med
følgende:
#site_title {
margin:0 auto;
width:810px;
border: 1px solid #000000;
}
#site_title h1 {
text-align:center;
font-size:250%;
}
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
| |
Skunsen (24-02-2009)
| Kommentar
Fra : Skunsen |
Dato : 24-02-09 10:58 |
|
Birger Sørensen kom med følgende
>FF3 med HTML validator og FireBug er fantastiske værktøjer.
Ja! Dem har jeg fundet nu og der kunne jeg se at der på <p> var sat en
margin på 40...
> <div id="site_title">
> <h1>Tina Revsbæk</h1>
> </div>
>
> Så kan du formatere elementet med
> følgende:
>
> #site_title {
> margin:0 auto;
> width:810px;
> border: 1px solid #000000;
> }
> #site_title h1 {
> text-align:center;
> font-size:250%;
> }
Ja selvfølgelig!!!
Jeg havde da lige glemt h1 - hmm! Det er vist et dårligt tegn?
Tusind tak for hjælpen!
Jeg starter forfra...
Hilsen Tina
--
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
| |
Birger Sørensen (24-02-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 24-02-09 11:19 |
|
Jørgen Farum Jensen har bragt dette til verden:
> Skunsen skrev:
>
>> Nu har jeg ryddet fuldstændigt op, så der kun er
>> titlen/teksten(id="site_title") tilbage.
>>
>> Jeg har lavet en absolut positionering med "top: 0px;" men i FF bliver
>> den rykket ned???
>>
>> Jeg håber at I har tålmodighed til at kigge endnu engang - denne gang
>> skulle det være til at overskue -uden at være detektiv!
8X
> Så kan du formatere elementet med
> følgende:
>
> #site_title {
> margin:0 auto;
> width:810px;
> border: 1px solid #000000;
> }
> #site_title h1 {
> text-align:center;
> font-size:250%;
> }
Det er da til at finde ud af!
Der er heller ikke noget der rykkes ned her.
Der er forskel på default padding og margin i forskellige browsere, og
det er formentlig årsagen til at det ikke ser ens ud.
Det kan du komme ud over med css:
* {
margin : 0px;
padding : 0px;
}
eller ved at sætte dem for de enkelte elementer.
Lidt mere arbejde - til gengæld er resultatet ens i alle browsere.
Brug overskrifterne. Søgemaskinerne bruger dem til at indeksere siden,
og som keywords.
Du kan formattere dem som du vil med css, hvis ikke default ser ud som
du vil have dem - som i Jørgens forlag.
<p> står for paragraf - et afsnit i teksten. Det er normalt ikke der
man sætter en overskrift.
Absolut positionering, tager elementet ud af det normale dokumentflow,
og andbringer dem der hvor du angiver. Andre elementer vil bruge den
samme plads.
Som du er begyndt, ender du med at skulle positionere alle andre
elementer også.
Almindeligvis, skal der meget vægtige grunde eller specielle
konstruktioner til at absolut positionere elementer.
Der er ingen grund til at gøre det, med en almindelig overskrift, og
det vil give dig problemer sidenhen.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Skunsen (24-02-2009)
| Kommentar
Fra : Skunsen |
Dato : 24-02-09 12:30 |
|
> Der er forskel på default padding og margin i forskellige browsere, og
> det er formentlig årsagen til at det ikke ser ens ud.
Ja det var det 
--
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
| |
Rune Jensen (25-02-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 25-02-09 00:07 |
|
Skunsen skrev:
>> Der er forskel på default padding og margin i forskellige browsere, og
>> det er formentlig årsagen til at det ikke ser ens ud.
>
> Ja det var det
Jeg var ved at skrive en kommentar i går, men så faldt vidst i søvn over
keyboardet...
Den ultimative kodeform er at kode sin side lagdelt.
Dvs. at man tager sit indhold, og _først_ sætter betydende tags på.
F.eks. <h1> for overskrift, <p> for afsnit <li> for liste.. you get the
point..
Dernæst, når det er sat korrekt op og valideret, så lægger man CSS på,
som man validerer og dernæst
om nødvendigt lægger man javascript på.
Jeg synes selv man helt skal undgå inline styles og inline javascript
(det sidste alt efter kompleksitet af siden), for det giver en virkelig
overskuelig HTML, som er meget disciplineret også. At lægge alle sine
CSS-styles eksternt, er vidst også hvad XHTML strict lægger op til (men
ikke noget jeg selv er ultimativt go til).
Lagdelt kodning uden inline styles og JS kaldes unobtrusive scripting,
på dansk noget i retning af ikke-sammenblandet kode ( der er ikke noget
godt dansk ord).
http://www.itst.dk/kommunikation-og-tilgaengelighed/tilgengelighed/tilgengelighed-i-praksis/vejledning-wcag/krav-6-nye-teknologier/teknologi
Det er en ganske fiffig måde at gøre det på, når man (så vidt muligt)
tager det slavisk i den rækkefølge, og vidst også den korrekte, som
Jørgen er inde på.
Man får en masse fordele på den måde, fordi hvert lag er valideret og
virker, og hvis der opstår en fejl, så ved man, at den findes i
nuværende lag, ikke i en underliggende.
Samtidig, så får man også den fordel, at siden kan ses i enhver browser
eller medie, som bare forstår HTML.
Derudover, så er der nogle "recommodations", man kan følge, bl.a. at
sætte menuer på lister. Man behøver måske ikke, men det virker
overskueligt, synes jeg - og det vil næsten ikke kunne gøres på anden
måde, skulle man få lyst til at lave drop-down-menuer.
Den ultimative test er et kig på din side i LYNX, alternativt i stedet
med CSS, JS og billeder slået fra, som så skal give mening, være
struktureret, og kunne navigeres. Her kan du også få en idé om, om du
bruger f.esk. H-tags korrekt/i rigtig rækkefølge (men der findes online
værktøjer til det også, som er beregnet til det)
Hnnn, ja, det var vidst det;)
MVH
Rune Jensen
--
House and Dance will never die!
WinAMP lige nu: Kendi - Connected
Støt kampen imod IE6 - læs hvorfor: http://drop-ie6.dk/
| |
|
|