Avatar billede gil-galad Nybegynder
14. februar 2004 - 17:32 Der er 25 kommentarer og
1 løsning

centrere min hjemmide, som er bygget af flere css bokse

Jeg har et problem med at -Få 5 bokse til at være centreret på siden ligemeget hvor stor/lille oplsning de køre + at den ene boks (den der indeholder indholdet) skal ligge øverst i koden, men ikke på skærmen.

se siden her:
http://spiff.users.whitehat.dk/



Jeg placerer nogle bokse sådan her:

HTML'en:
_______________________
<div class="title">
  <?php
  include("filer/banner.php");
  ?>
</div>

<div class="content">
  <?php
  include("filer/topmenu.php");
  ?>
</div>

<div class="leftmenu">
  <?php
  include("filer/leftmenu.php");
  ?>
</div>
OSV OSV.....
_______________________


CSS'en:
_______________________
.title{
    position: absolute;
    left: 65px;
    top: 15px;
    width: 865px;
    height: 100px;
}

.rightmenu{
    position: absolute;
    left: 780px;
    top: 120px;
    width: 150px;
    height: 616px;
}

.content{
    position: absolute;
    left: 220px;
    top: 150px;
    width: 555px;
    height: 586px;
}
OSV OSV.....

sikkert rimelig dårligt forklaret. Bare spørg.
Avatar billede bearhugx Nybegynder
14. februar 2004 - 17:51 #1
læser jeg rigtigt kan du bruge
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 278px;  /* halvdelen af bredden */
  margin-top:  293px;  /* halvdelen af højden */
}
Avatar billede gil-galad Nybegynder
14. februar 2004 - 17:55 #2
hvis jeg skriver left: 50%; , kommer den venstre side til at være i midten... skal du have hele koden?
Avatar billede bearhugx Nybegynder
14. februar 2004 - 17:55 #3
laver lige et indholdsløst eksempel
Avatar billede gil-galad Nybegynder
14. februar 2004 - 17:55 #4
oki
Avatar billede bearhugx Nybegynder
14. februar 2004 - 17:56 #5
hov - det er også mig, som glemmer noget...

left: 50%;
top:  50%;
margin-left: -278px;
margin-top:  -293px;

(glemte minuser!!)
Avatar billede bearhugx Nybegynder
14. februar 2004 - 17:59 #6
koden gør det, at den først placerer øverste venstre hjørne af .content på midten af siden (50% ind (left) og 50% ned (top))

Derefter flyttes margenen af boksen havdelen af bredden tilbage (minus 278 pixels) og halvdelen af højden op (minus 293 pixels)... ergo har du placeret boksen i midten! :-)

er næsten færdig med eksemplet :-)
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:09 #7
det viser sig at jeg ikke lige læste rigtigt --- Men retter eksempelt til nu :-)
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:09 #8
du kan jo også se siden....
http://spiff.users.whitehat.dk/
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:20 #9
prøv at kig på følgende eksempel...

Er det noget du kan bruge ???

http://skroeder.dk/eksperten.dk/universet.tk/
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:20 #10
bemærk -- jeg har slået vertikal centrering fra, da det vil gå galt, hvis containeren er højere en browserens højde...
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:22 #11
jeg kikker lige på det :-)
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:22 #12
css koden findes i style-tag'et i koden... Du kan se det ved at vælge "vis kilde" :-)
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:23 #13
jojo det ved jeg godt ;-)
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:24 #14
(sorry... Jeg tænkte efter jeg sendte beskeden afsted, at du jo nok vidste det :-))
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:31 #15
det ser rigtigt ud.

Slynger du ikke lige et stk svar?
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:33 #16
¨^svar^¨
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:34 #17
lige et spørgsmål:
id = # og bruges hvis der kun er et element der skal høre ind under den
class = . og bruges hvis flere elementer skal

men hvorfor ikke bare altid bruge class?
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:34 #18
håber du kan bruge det i din videre færd :-)
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:34 #19
det kan jeg nok :-)
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:37 #20
Det handler om at fastlåse struktur... hvis du har vedtaget at header er den blok som skal indeholde overskriften (i dette tilfælde din planet-grafik) - og det er implicit at der kun findes én af dem - så kan man lige så godt bruge ID til at henvise til det :-)

Jeg er enig i at f.eks. de rammer som er rundt om fakta, hovedmenu, etc - så bør den jo laves som class, da det er en style, som er tiltænkt at blive brugt mange steder :-)
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:37 #21
takker for points :-)
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:37 #22
selv tak
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:44 #23
ved ikke om det bare er mig, eller kan man ikke lave en boks til indholdet i dit eksempel, så det kommer til at ligne mit gamle?
Avatar billede bearhugx Nybegynder
14. februar 2004 - 18:59 #24
??? ... hvad mener du specifikt ?

mener du som nu :: http://skroeder.dk/eksperten.dk/universet.tk/ ??

Er væk den næste time, -skal hente mad -og spise...
Avatar billede gil-galad Nybegynder
14. februar 2004 - 18:59 #25
jeg har fundet ud af det ;-)
Avatar billede bearhugx Nybegynder
14. februar 2004 - 21:48 #26
ok :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester