/ 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
Header og footer med absolut positionering~
Fra : Stefan Kristensen


Dato : 13-03-05 18:32

Hej NG.

http://jems.dk/test/default.html har jeg en testopsætning af mit layout.
Det er næsten på plads bortset fra tre ting:
1: Jeg vil gerne have centreret de to overskrifter i headeren, men beholde
biledet øverst til venstre.
2: Hvorfor er footeren højere i FF end i IE og Opera?
3: Hvis siden ikke er maksimeret, følger footeren med op og når jeg scroller
i FF og IE. Det virker dog fint i Opera.

Mvh
Stefan



 
 
Erik Ginnerskov (14-03-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 14-03-05 00:44

Stefan Kristensen wrote:
> Hej NG.
>
> På http://jems.dk/test/default.html har jeg en testopsætning af mit
> layout. Det er næsten på plads bortset fra tre ting:
> 1: Jeg vil gerne have centreret de to overskrifter i headeren, men
> beholde biledet øverst til venstre.

Indsæt i stedet billedet som baggrund i header:

..header {
position: absolute;
top: 0;
left: 0;
width:100%;
background-image:url(smiley.jpg) top left no-repeat;
margin-left: auto;
margin-right: auto;
text-align:center;
border: 1px black solid;
}


> 2: Hvorfor er footeren højere i FF end i IE og Opera?

Fordi der er forskel på browsernes default margin-top og margin-bottom på et
p-tag. Hvis du definerer en ønsket størrelse, vil det være ens i alle
browsere:

..footer p {
margin-top:3px;
margin-bottom:3px;
}

> 3: Hvis siden ikke er maksimeret, følger footeren med op og når jeg
> scroller i FF og IE. Det virker dog fint i Opera.

Du kan fastlåse den i bunden:

http://hjemmesideskolen.dk/html/testsider/fixed.asp

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://frip.dk/ginnerskov



Stefan Kristensen (14-03-2005)
Kommentar
Fra : Stefan Kristensen


Dato : 14-03-05 08:51

> > 1: Jeg vil gerne have centreret de to overskrifter i headeren, men
> > beholde biledet øverst til venstre.
>
> Indsæt i stedet billedet som baggrund i header:
....
> background-image:url(smiley.jpg) top left no-repeat;
....

Det skulle være background: url(smiley.jpg) top left no-repeat;, så virkede
det. Perfekt


> > 2: Hvorfor er footeren højere i FF end i IE og Opera?
>
> Fordi der er forskel på browsernes default margin-top og margin-bottom på
et
> p-tag. Hvis du definerer en ønsket størrelse, vil det være ens i alle
> browsere:

Nåå ja.


> > 3: Hvis siden ikke er maksimeret, følger footeren med op og når jeg
> > scroller i FF og IE. Det virker dog fint i Opera.
>
> Du kan fastlåse den i bunden:
>
> http://hjemmesideskolen.dk/html/testsider/fixed.asp

Smart. Ved du om M$ har planer om at understøtte dette i en nær fremtid?
Kan jeg angive en margin eller noget på footeren så den ikke vises oven på
indeholdet når der scrolles?

Et sidste spørgsmål og jeg skulle være kørende:
Hvis jeg sætter width på header og / eller footer til 100% 'rager det ud
over' siden, og jeg får en horisontal scrollbar der dækker footeren.
Er der nogle margener jeg mangler at sætte?

Mvh
Stefan



Erik Ginnerskov (14-03-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 14-03-05 14:11

Stefan Kristensen wrote:

> Ved du om M$ har planer om at understøtte dette i en nær
> fremtid?

Jeg ved - har fundet ud af i sidste uge - at Microsoft forventer at barsle
med en IE7 i løbet af sommeren. I første omgang kun til WinXP SP2, men
sikkert snart efter også til Win2K

> Kan jeg angive en margin eller noget på footeren så den ikke
> vises oven på indeholdet når der scrolles?

Sæt en baggrundsfarve på footer, så er det problem løst (kan uden problem
være hvis som resten af siden) - det ser jeg nu, at du allerede har gjort.

> Et sidste spørgsmål og jeg skulle være kørende:
> Hvis jeg sætter width på header og / eller footer til 100% 'rager det
> ud over' siden, og jeg får en horisontal scrollbar der dækker
> footeren.

Det burde det ikke gøre og jeg kan ikke se en sådan fejl på det, du har
liggende ude nu. Men jag kan se, at du har glemt at indføre de særlige
tilpasninger, der får IE til også at fastlåse footer i bunden af
browservinduet.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://frip.dk/ginnerskov



Stefan Kristensen (14-03-2005)
Kommentar
Fra : Stefan Kristensen


Dato : 14-03-05 14:40

> > Kan jeg angive en margin eller noget på footeren så den ikke
> > vises oven på indeholdet når der scrolles?
>
> Sæt en baggrundsfarve på footer, så er det problem løst (kan uden problem
> være hvis som resten af siden) - det ser jeg nu, at du allerede har gjort.

Ja, og en bund-margin på content der er større end højden på footer, ellers
bliver bunden af content skjult af footer'en.

> > Et sidste spørgsmål og jeg skulle være kørende:
> > Hvis jeg sætter width på header og / eller footer til 100% 'rager det
> > ud over' siden, og jeg får en horisontal scrollbar der dækker
> > footeren.
>
> Det burde det ikke gøre og jeg kan ikke se en sådan fejl på det, du har
> liggende ude nu.

Width er også kun sat til 99%. Jeg sætter den til 100 når jeg slipper fri
fra mit arbejde.

>Men jag kan se, at du har glemt at indføre de særlige
> tilpasninger, der får IE til også at fastlåse footer i bunden af
> browservinduet.

Ja, jeg blev nødt til at tage på arbejde :'(

Mange tak for dine svar og din glimragende hjemmeside.
Stefan



Stefan Kristensen (14-03-2005)
Kommentar
Fra : Stefan Kristensen


Dato : 14-03-05 20:31

> > Hvis jeg sætter width på header og / eller footer til 100% 'rager det
> > ud over' siden, og jeg får en horisontal scrollbar der dækker
> > footeren.

Hmm... Det må have været en anden fejl. Det virker med 100% nu.

Jeg har to spørgsmål og en kommentar til din opskrift
(http://hjemmesideskolen.dk/html/testsider/fixed.asp):
Du skriver i en kommentar at '1. Der er øverst indsat en linje 2. Der er
ikke defineret DTD '
Jeg synes da det ligner en DTD? Den anden linie er da i hvert fald magen til
min originale doctype-erklæring.

I IE Qirks mode rykker min højre menu helt ud i scroll-baren. Hvordan
flytter jeg den ind på plads?

En width på 98% er for bredt i min browser
(http://jems.dk/test/layout2.html) Jeg skal helt ned på 96% for at det ikke
rager ind over scroll-baren (http://jems.dk/test/layout3.html). Jeg kører
1024x768.

Mvh
Stefan



Erik Ginnerskov (15-03-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 15-03-05 21:31

Stefan Kristensen wrote:

> Jeg har to spørgsmål og en kommentar til din opskrift
> (http://hjemmesideskolen.dk/html/testsider/fixed.asp):
> Du skriver i en kommentar at '1. Der er øverst indsat en linje 2. Der
> er ikke defineret DTD '

Av, der tog du mig i at skrive noget decideret sludder. Jeg har rettet
formuleringen. ;)

> I IE Qirks mode rykker min højre menu helt ud i scroll-baren. Hvordan
> flytter jeg den ind på plads?

Giv din højre menu en margin-right svarende til bredden på scrollbaren. Husk
at få denne ekstra bredde medregnet i den padding- eller margin-right, du
har tildelt indholdsfeltet midt på siden. Husk også, at disse ændringer skal
ligge i den css, der kun indlæses af IE - og at IE-css skal indlæses efter
den generele.

> En width på 98% er for bredt i min browser
> (http://jems.dk/test/layout2.html) Jeg skal helt ned på 96% for at
> det ikke rager ind over scroll-baren
> (http://jems.dk/test/layout3.html). Jeg kører 1024x768.

Min specifikation på 98% er baseret på et browservindue på 800*600px og et
standard Windows-layout. Der skal muligvis lidt mere til, hvis man kører med
WinXP-skin. På den anden side, hvis man har sin browser oppe i størrelsen
1024*768px, bliver det igen en mindre %-del.

Den eneste forskel jeg lige umiddelbart kan se på dine to sider (layout 2 og
3) er, at du i nr. 3 har sat eg baggrund på header, så indholdet ikke ses
igennem header, når det scrolles op.

PS. I øjeblikket er header fastlåst i IE, men ikke i FF og Opera. Skal den
være fastlåst i alle browsere, skal du huske at lave kode for det i den
generelle css. Skal den ikke være fastlåst overhovedet, skal du flytte <div
class="header"> ind i <div class="content">.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://frip.dk/ginnerskov



Stefan Kristensen (15-03-2005)
Kommentar
Fra : Stefan Kristensen


Dato : 15-03-05 22:17

> > Jeg har to spørgsmål og en kommentar til din opskrift
> > (http://hjemmesideskolen.dk/html/testsider/fixed.asp):
> > Du skriver i en kommentar at '1. Der er øverst indsat en linje 2. Der
> > er ikke defineret DTD '
>
> Av, der tog du mig i at skrive noget decideret sludder. Jeg har rettet
> formuleringen. ;)

Nåå... Jamen jeg er heller ikke nået så langt at jeg putter det her sjov i
html tag'et


> > I IE Qirks mode rykker min højre menu helt ud i scroll-baren. Hvordan
> > flytter jeg den ind på plads?
>
> Giv din højre menu en margin-right svarende til bredden på scrollbaren.
Husk
> at få denne ekstra bredde medregnet i den padding- eller margin-right, du
> har tildelt indholdsfeltet midt på siden. Husk også, at disse ændringer
skal
> ligge i den css, der kun indlæses af IE - og at IE-css skal indlæses efter
> den generele.

Det kræver jo den store ledvogter eksamen. Jeg takker endnu en gang for din
hjælp.

> PS. I øjeblikket er header fastlåst i IE, men ikke i FF og Opera. Skal den
> være fastlåst i alle browsere, skal du huske at lave kode for det i den
> generelle css. Skal den ikke være fastlåst overhovedet, skal du flytte
<div
> class="header"> ind i <div class="content">.

Jamen det undrede mig også lidt. Jeg tror den er ved at være der.
Du er en guttermand

Mvh
Stefan



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste