/ 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
Centrering af boks - vandret og lodret
Fra : Karina[6000]


Dato : 11-09-03 16:20

Hvordan fåe man en boks til at være lige i midten både lodret og vandret med
css?

Har lavet en div til boksen..

mvh

Karina



 
 
René Lønstrup (11-09-2003)
Kommentar
Fra : René Lønstrup


Dato : 11-09-03 16:29

Karina[6000] wrote:
> Hvordan fåe man en boks til at være lige i midten både lodret og
> vandret med css?
>
> Har lavet en div til boksen..

Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
indholdet), kan denne metode bruges:

<style>
#boks {
position: absolute;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
background-color: red;
}
</style>

<div id="boks">indhold...</div>


--
Mvh René Lønstrup
min web: http://www.rel7star.dk?r=usenet
min email: se om du kan regne dén ud..



Karina[6000] (11-09-2003)
Kommentar
Fra : Karina[6000]


Dato : 11-09-03 16:39


> Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
> indholdet), kan denne metode bruges:
>
> <style>
> #boks {
> position: absolute;
> width: 400px;
> height: 300px;
> left: 50%;
> top: 50%;
> margin-left: -200px;
> margin-top: -150px;
> background-color: red;
> }
> </style>
>
> <div id="boks">indhold...</div>
>
>


Hejsa.. kan ikke rigtigt bruge den.. hvis man ændre størrelse på boksen
bliver den ikke ved med at være centreret.. andre bud?



René Lønstrup (11-09-2003)
Kommentar
Fra : René Lønstrup


Dato : 11-09-03 16:57

Karina[6000] wrote:
> Hejsa.. kan ikke rigtigt bruge den.. hvis man ændre størrelse på
> boksen bliver den ikke ved med at være centreret.. andre bud?

Når du ændrer på boksens størrelse, gør du det så ved at ændre på 'width' og
'height' i stylesheet'et, eller sker det ved at fylde mere indhold i boksen
(så det er indholdet der bestemmer størrelse)?
Er det det første, skal du bare ændre på 'margin-left' og 'margin-top' også.
Begge skal stå til halvdelen af hhv. width og height, bare som negativt tal.
Er width f.eks. 300px skal margin-left være -150px og er height 248px skal
margin-top være -124px og så fremdeles.

Men er det indholdet der bestemmer størrelsen, virker ovenstående rigtigt
nok ikke, og så er jeg ikke sikker på at det kan lade sig gøre med brug af
kun html/css. Så bliver du nok nødt til at scripte dig ud af det, vha.
javascript.


--
Mvh René Lønstrup
min web: http://www.rel7star.dk?r=usenet
min email: se om du kan regne dén ud..



Jens Gyldenkærne Cla~ (11-09-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 11-09-03 21:04

René Lønstrup skrev:

> Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
> indholdet), kan denne metode bruges:

Metoden med negativ margen er den mindst ringe løsning til lodret
centrering. Den fungerer og validerer, men kan give problemer med
små browservinduer og den kræver at man kender højden på forhånd.

Til vandret centrering er der ingen grund til at benytte negativ
margen - det kan klares med margin: auto; samt (hvis man vil have
IE<6 med) en wrapper med text-align: center.
--
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

Bjarne Wichmann Pete~ (13-09-2003)
Kommentar
Fra : Bjarne Wichmann Pete~


Dato : 13-09-03 08:25

René Lønstrup wrote:

>> Hvordan fåe man en boks til at være lige i midten både lodret og
>> vandret med css?
>> Har lavet en div til boksen..
> Hvis boksens størrelse er fast (mao. den ikke ændres afhængigt af
> indholdet), kan denne metode bruges:

.... hvilket kræver at brugeren benytter *præcis* samme fonte, samme
font-størrelser, samme opløsning og samme browser som designeren?

Da jeg selv kører et andet OS end Windows, bruger en anden browser en IE og
har en opløsning der er større end "1024x768" og jeg har sat
font-størrelser til *læsbar* er det *drønirriteren* at ramle ind i sådan en
side med "everything fixed!"... oplevelsen bliver fra grim til ulæselig.

Mht. font-størrelse... så kan man selvfølgelig sikre sig ved at lave en
"font-size: 9px"... og give fingeren til alle brugere som ikke køre
"1024x768" men størrer...

.... bare et surt opstød og et hint om at "fixed" ikke er smart i
webdesign...

Bjarne

Jens Gyldenkærne Cla~ (11-09-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 11-09-03 21:01

Karina[6000] skrev:

> Hvordan fåe man en boks til at være lige i midten både lodret
> og vandret med css?

Vandret er ganske enkelt (i nyere browsere) - sæt en bredde på
mindre end 100% og sæt venstre/højre-margen til auto:

Fx som her:

body{
   width: 750px;
   margin-left: auto;
   margin-right: auto;
}

- eller med procentangivelse:

body{
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

IE 6 skal formentlig i standardmode for at tolke det korrekt. Søg
på Google eller i gruppen her efter doctype switching for at se
mere om hvordan det gøres. Ældre IE'er kan komme med via et hack -
det kan andre sikkert hjælpe med.

Lodret centrering er ikke muligt uden krumspring. Hvis man ikke
kender højden af boksen (og dermed kan bruge det trick Rene har
vist) er man så vidt jeg husker henvist til javascript.
--
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

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