Avatar billede mini-me Nybegynder
21. april 2005 - 09:52 Der er 8 kommentarer og
1 løsning

Opbygning af website i CSS

Hej,

Nu har jeg læst så meget om, at det skulle være smart at bygge ens website i CSS i stedet for tabeller ;-) Så har sat mig for at jeg vil prøve det, men hvis nu mit site skal være centreret hvordan fixer jeg så det?? Jeg har nuppet flg. kode inde fra html.dk

Jeg vil have titlen til at være 754px bred og stå centreret?? Hvordan...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

body {
    margin:0px;
}
#title {
    position:relative;
    left:0px;
    top:0px;
    width:754px;
    height: 165px;
    background-color:orange;
}
#leftmenu {
    position:absolute;
    left:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#rightmenu {
    position:absolute;
    right:0px;
    top:75px;
    width:150px;
    background-color:silver;
}
#content {
    padding-top: 70px;
    margin-left:160px;
    margin-right:160px;
    background-color:white;
}

</style>

</head>

<body>
<div id="title">
<h1>Websidens titel</h1>
</div>

<div id="content">
<h1>Dette bør være en sigende overskrift for indholdet</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno.</p>
<p>Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur.</p>
<p>Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas.</p>
<p>Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas.</p>
</div>

<div id="leftmenu">
<p>Sidens venstre-menu indeholder....</p>
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
    <li>Punkt 6</li>
    <li>Punkt 7</li>
</ul>
</div>

<div id="rightmenu">
<p>Fra sidens højre-menu kan man læse mere om....</p>
<ul>
    <li>Ditten</li>
    <li>Datten</li>
</ul>
</div>


</body>
</html>
Avatar billede hyberpreprocessor Nybegynder
21. april 2005 - 09:58 #1
Tilføj: margin: 0 auto; , dvs.:

#title {
    position:relative;
    left:0px;
    top:0px;
    width:754px;
    height: 165px;
    background-color:orange;
    margin: 0 auto;
}

Så centeres den horsiontal
Avatar billede mini-me Nybegynder
21. april 2005 - 10:03 #2
Ja, det gør den, men hvad så hvis jeg har endnu et element der skal placeres 3px til højre for title elementen?? Eks. vil jeg flytte min rightMenu op i toppen sammen med title elementen men jeg vil have 3 px luft mellem dem?
Avatar billede hyberpreprocessor Nybegynder
21. april 2005 - 10:03 #3
så laver du en box udenom, centere den, og laver 3px margin imellem de 2 objekter.
Avatar billede mini-me Nybegynder
21. april 2005 - 10:04 #4
Kan du give et eksempel? Er ikke helt med på hvordan det virker endnu...
Avatar billede hyberpreprocessor Nybegynder
21. april 2005 - 10:10 #5
Test denne her kode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
   
    #title
    {
      width: 700px;
      border: 1px solid black;
      margin: 0 auto;
      padding: 2px;
    }
   
    #box1
    {
      width: 600px;
      border: 1px solid blue;
      float: left;

    }

    #box2
    {
      margin-left: 605px;
      width: 80px;
      border: 1px solid red;
    }

    </style>
  </head>
  <body>

    <div id="title">
      <div id="box1">
        foo
      </div>
      <div id="box2">
        bar
      </div>
    </div>

  </body>
</html>

Bemærk at CSS ikke er særlig god til at placere elementer ved siden af hinanden, dvs. kolonner.
Dertil at tables en rigtig god (og korrekt) løsning.
Avatar billede mini-me Nybegynder
21. april 2005 - 10:14 #6
Hyper, det virker fint, dog har jeg en del elementer placeret ved sidan af hinanden i mine nye layouts her dvs. jeg burde vende tilbage til min alm. tabeller?

Men hvis sitet nu ikke skulle have været centereret havde det vel været nemt nok at bygge elementerne op ved siden af hinanden??
Avatar billede mini-me Nybegynder
21. april 2005 - 10:14 #7
smid et svar
Avatar billede hyberpreprocessor Nybegynder
21. april 2005 - 10:18 #8
Centeringen har ikke den store betydning.

Problemet med at sætte ting ved siden af hinanden er at browserne ikke altid er så enige igen.
Hvis du laver din overordnet struktur i tables, og så bruger <div> til at adskille forskellige dele af layoutet, og styler det hele med CSS , så har du en god side struktur.

Du kan også sagtens centere tables med margin: 0 auto; bemærk dog at der kræves en fast brede på objektet. (px eller %)

Men kig da ind hos nudle, det kan være du får nogle ideer :)

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Avatar billede roenving Novice
22. april 2005 - 16:11 #9
-- og det skal i hvert fald tilføjes at den første sætning i spørgsmålet er noget vrøvl ...

"... i CSS i stedet for tabeller ;-)"

-- der er ikke det fjerneste i vejen for at bruge tabeller og bruge css sammen (eller css til at styre tabellers udseende !-)

-- men der er god grund til at benytte moderne metoder til at layoute ens side, for forne tiders tabelhelveder med måske op imod 20 lag af nestede tabeller og mylliarder af spacer.gifs til at bestemme størrelsen af de enkelte elementer er simpelthen overflødigt i dag ...

-- men har man brug for noget af den funktionalitet, tabeller stiller til rådighed, er det bestemt ligeså tåbeligt at undlade at bruge dem !o]
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