Avatar billede scorpe Nybegynder
20. oktober 2007 - 22:26 Der er 12 kommentarer og
2 løsninger

Hjælp med CSS i Dreamweaver

Hej! Jeg skal have mit design centreret i Dreamweaver, men har aldrig arbejdet så meget med CSS, og det er mit første design uden tabeller, men med DIVs. Jeg kan ikke finde ud af at centrere designet, uden teksten bliver centreret.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>KBO Software</title>
        <style type="text/css">
            @import url('style.css');
        </style>   
    </head>
   
        <body>
                <div id="content">
                Brødtekst
            </div>
                <div id="menu">
                Menu
            </div>
                <div id="logo">
                Logo
            </div>
        </body>
</html>

Hilsen Kasper
Avatar billede w13 Novice
20. oktober 2007 - 22:53 #1
Du må bare sætte text-align:left; på dine divs, så indholdet af dem venstrestilles. Når du centrerer div'erne arver de nemlig centreringen og putter den på teksten.
Avatar billede olebole Juniormester
20. oktober 2007 - 23:33 #2
<ole>

Du kan ikke centrere block-elementer (table, div, m.fl.) med 'text-align:center'. Det virker kun i IE og det er en decideret fejl. I stedet bruger man margin:

<div style="width:300px;margin:0 auto;background:yellow">Mit div</div>

/mvh
</bole>
Avatar billede olebole Juniormester
20. oktober 2007 - 23:35 #3
- og værdierne betyder 0px i top og bund og 'auto' i siderne ... hvilket igen betyder, at det overskydende 'luft' skal fordeles på de to sider  :)
Avatar billede scorpe Nybegynder
20. oktober 2007 - 23:47 #4
Mange tak :) Bare for at være sikker, er det så ikke Padding der sætter afstanden fra browserens top, til dokumentets start?
Avatar billede w13 Novice
21. oktober 2007 - 00:30 #5
Nope. Det er også margin. Padding sætter, hvor langt der er fra indholdet af et element, til elementets kant. Eks. med et div-element (hvis eksperten.dk ikke forskubber det helt, når jeg gemmer):

-------------------------
|    Her er indholdet  |
|                      |
|                      |
|                      |
-------------------------

Her har det f.eks. en padding-left på lidt mere, end dens padding-right, og en padding-bottom på endnu mere.
Avatar billede olebole Juniormester
21. oktober 2007 - 02:02 #6
Her er et link, du bør føje til dine Favoritter:
    http://www.w3.org/TR/REC-CSS2/box.html

Her forklares 'box modellen', som er standarden for, hvordan et HTML-elements forskellige 'fysiske' CSS-egenskaber skal forstås ... margin, border-bredde, padding, width, height, top, right, bottom og left (... glemte jeg nogen?).

Jeg ved godt, det kan virke lidt overvældende og tørt ved første øjekast. Gør dig selv den tjeneste at kikke på det engang imellem - så siver det ind efterhånden og du får øvelsen i at læse standarder  ;o)
Avatar billede scorpe Nybegynder
21. oktober 2007 - 12:24 #7
Okay.. Én ting mere: hvad gør Position så?
Avatar billede w13 Novice
21. oktober 2007 - 14:27 #8
position kan være static, fixed, absolute eller relative. Det afgør, hvor "top" og "left" gælder fra.

Static er standard.

Fixed er placeret i forhold til browservinduet.

Absolute er i forhold til dens "beholder" eller "parent".

Relative er i forhold til dens originale position.

Så f.eks. position:relative;top:5px;left:10px; flytter et element 5px ned og 10px hen.
Avatar billede scorpe Nybegynder
21. oktober 2007 - 17:00 #9
Smider i et svar? ;)
Avatar billede w13 Novice
21. oktober 2007 - 17:13 #10
Ok :)
Avatar billede olebole Juniormester
21. oktober 2007 - 18:12 #11
- men vær lige opmærksom på, at w13's i seneste eksempel med det relativt positionerede div, flyttes div'et godtnok ... men det  optager stadig sin oprindelige plads. Intet andet bliver rykket derhen, hvor div'et lå uden dets left- og top-værdier  :)

- og her er sør'me et link mere, der forklarer lidt om position, m.m:
    http://www.w3.org/TR/REC-CSS2/visuren.html  ;o)
Avatar billede olebole Juniormester
21. oktober 2007 - 18:13 #12
- og svaret  :)
Avatar billede olebole Juniormester
21. oktober 2007 - 19:31 #13
Tak for points  :)
Avatar billede scorpe Nybegynder
21. oktober 2007 - 19:35 #14
:)
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

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