/ 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
css-positionering i Mozilla
Fra : Rasmus Kjær


Dato : 14-06-05 21:06

2 spørgsmål:
1) Siden www.rusty.1go.dk/website12/ ser fin nok ud i IE, men
bliver vist venstrestillet i Mozilla i stedet for centreret,
hvilket også gør at nogle af grafikelementerne bliver placeret
forkert (De er placeret relativt).

HTML og CSS validerer.

Har nogen et bud på hvordan jag får gjort noget ved problemet,
eller kan I evt. pege mig i den rigtige retning?

2) Jeg vil gerne have overskriften flyttet ned, så den står i
bunden af boksen. Skal jeg gøre det ved at give den en stor
padding i toppen, eller kan det gøres smartere.
Jeg har prøvet med vertical-align, men kunne ikke få det til at
virke.

På forhånd tak. Rasmus

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

 
 
Jens Gyldenkærne Cla~ (14-06-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 14-06-05 22:26

Rasmus Kjær skrev:

> 1) Siden www.rusty.1go.dk/website12/ ser fin nok ud i IE, men
> bliver vist venstrestillet i Mozilla i stedet for centreret,

Det er ikke så mærkeligt. Du centrerer kun med den forkerte IE-
metode - text-align: center. Du skal bruge margin: auto på de
elementer der skal centreres

Tilføj evt. bare følgende nederst i din css:

body * { margin: auto; }


> 2) Jeg vil gerne have overskriften flyttet ned, så den står i
> bunden af boksen. Skal jeg gøre det ved at give den en stor
> padding i toppen,

Ja (husk at trække fra i højden).
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Rasmus Kjær (15-06-2005)
Kommentar
Fra : Rasmus Kjær


Dato : 15-06-05 11:44

> Det er ikke så mærkeligt. Du centrerer kun med den forkerte IE-
> metode - text-align: center. Du skal bruge margin: auto på de
> elementer der skal centreres

Så lærte jeg det! Mange tak!

> Tilføj evt. bare følgende nederst i din css:
>
> body * { margin: auto; }

Det virker det skidt - men jeg vil gerne have linien
forklaret. Jeg har aldrig set stjernen brugt i css før.

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

Rasmus Kjær (15-06-2005)
Kommentar
Fra : Rasmus Kjær


Dato : 15-06-05 11:51

> > Tilføj evt. bare følgende nederst i din css:
> >
> > body * { margin: auto; }
>
> Det virker det skidt

...men placeringen af grafikken er forskellig i Mozilla og IE, så
det ser underligt ud. Er der en anden måde at positionere på, så jeg
ikke render ind i dette problem:

www.rusty.1go.dk/website12/ (Ikke i IE)

Har ikke testet i Opera eller Netscape.

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

Jens Gyldenkærne Cla~ (15-06-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 15-06-05 12:54

Rasmus Kjær skrev:

>> body * { margin: auto; }
>
> Det virker det skidt - men jeg vil gerne have linien
> forklaret.

Stjernen betyder et vilkårligt element (altså et jokertegn som i
DOS/Windows mm.)

"body *" betyder så et (vilkårligt) element der ligger inde i body.

Eksempel:

<body><h1>Denne overskrift er påvirket</h1>
<div>Denne div er også påvirket.
<ul>
   <li>Det samme gælder denne liste</li>
   <li>- der må altså godt være mellemliggende elementer</li>
</ul>
</div>
</body>

Hvis du ikke vil have margenindstillingerne ind på underelementer i alle
niveauer, vil jeg foreslå dig at specificere margin auto direkte på de
elementer du vil centrere - eller endnu bedre, bruge en div til at samle
de elementer du vil centrere, og så putte margin auto på den.

--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Rasmus Kjær (16-06-2005)
Kommentar
Fra : Rasmus Kjær


Dato : 16-06-05 08:55

> Stjernen betyder et vilkårligt element (altså et jokertegn som i
> DOS/Windows mm.)
>
> "body *" betyder så et (vilkårligt) element der ligger inde i body.
>
> Eksempel:
>
> <body><h1>Denne overskrift er påvirket</h1>
> <div>Denne div er også påvirket.
> <ul>
>    <li>Det samme gælder denne liste</li>
>    <li>- der må altså godt være mellemliggende elementer</li>
> </ul>
> </div>
> </body>
>
> Hvis du ikke vil have margenindstillingerne ind på underelementer i alle
> niveauer, vil jeg foreslå dig at specificere margin auto direkte på de
> elementer du vil centrere - eller endnu bedre, bruge en div til at samle
> de elementer du vil centrere, og så putte margin auto på den.

Mange tak! Så blev jeg så meget klogere.

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

Claus Jacobsen (15-06-2005)
Kommentar
Fra : Claus Jacobsen


Dato : 15-06-05 17:33

Rasmus Kjær skrev:

> 2 spørgsmål:
> 1) Siden www.rusty.1go.dk/website12/ ser fin nok ud i IE, men
> bliver vist venstrestillet i Mozilla i stedet for centreret,
> hvilket også gør at nogle af grafikelementerne bliver placeret
> forkert (De er placeret relativt).
>
> HTML og CSS validerer.
>
> Har nogen et bud på hvordan jag får gjort noget ved problemet,
> eller kan I evt. pege mig i den rigtige retning?
>
> 2) Jeg vil gerne have overskriften flyttet ned, så den står i
> bunden af boksen. Skal jeg gøre det ved at give den en stor
> padding i toppen, eller kan det gøres smartere.
> Jeg har prøvet med vertical-align, men kunne ikke få det til at
> virke.
>
> På forhånd tak. Rasmus

Der er lidt med best practices her. Som Jens ganske rigtigt skriver så
er det {margin:auto;} der giver udslaget, men det er ikke lige meget
hvor det står henne.
Som du har lavet det på din side pt, så er det dine divs der skal have
en margin:auto.
Rigtigt mange mennesker laver en "wrapper" div uden om deres design som
de så giver en fast bredde sætter position:relative på den og giver den
en margin:auto. Dette medfører at du ikke behøver skrive det for hver
enkelt div (eller som jens gav dig en * - altså ALLE elementer efter
body) det sparer altså et par tastaturtryk, og alt efter hvor pernitten
man er, så er det også ok semantisk. På den måde har du også en let
måde at styre hele din side hvis du vælger venstre/højrecentreret eller
med %vis margin eller fast margin. uden at skulle gøre det ved alle
dine divs.


Claus

Rasmus Kjær (16-06-2005)
Kommentar
Fra : Rasmus Kjær


Dato : 16-06-05 08:58

> Der er lidt med best practices her.

Det er jo præcis det, jeg prøver at få fat i. Man kan jo lige så godt
lære at gøre tingene ordenligt fra starten

Tak for den uddybende forklaring!
Rasmus

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

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

Månedens bedste
Årets bedste
Sidste års bedste