Avatar billede kgp43 Nybegynder
23. april 2004 - 12:44 Der er 18 kommentarer og
1 løsning

Tables vs CSS

Hejsa,

Normalt "designer" jeg i tables, men vil gå over i CSS, da det er besværligt når der skal rettes i tables.

Mit spørgsmål:
På min side (www.savefile.com) har jeg en stor tabel og en midre én (for at få den centreret). Jeg har læst diverse CSS artikler og tutorials, men de beskriver ikke mit problem. Skal man lave selve den lille tabel (som table.. doh) og herefter positionere den midt på siden med CSS? Eller kan man lave det hele i CSS?
Avatar billede roenving Novice
23. april 2004 - 13:50 #1
En standard centrer-ting:

<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
body{text-align:center}
#center{
  margin:0px auto;
  width:760px;
  text-align:left;
}
</style>

Det er så ligegyldigt om det er en table eller en div som har id="center", bare du tager fat i et block-level-element !-)
Avatar billede kgp43 Nybegynder
23. april 2004 - 14:27 #2
hvis du nu skulle lave noget lignende det på min side, hvordan vil du så gøre? Ikke fordi jeg vil have dig til at lave det, men for at så et overblik.
Avatar billede roenving Novice
23. april 2004 - 14:37 #3
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
body{text-align:center}
#center{
  margin:auto;
  width:450px;
  text-align:left;
  border:0px;
  border-collapse:collapse;
}
#center td{border:0px;padding:0px;}
</style>


<body>
  <table id="center" class="border-all">
Avatar billede kgp43 Nybegynder
23. april 2004 - 14:44 #4
Dvs. at du stadig laver tabellen, men positionere den bare med CSS?
Troede at man skulle gøre det 100% i CSS
Avatar billede roenving Novice
23. april 2004 - 14:50 #5
Det er der ikke nogen som siger, man skal ...

(Nåeh jo, der er en masse guruer, som går rundt og fortæller, at man aldrig mere må bruge tabeller til at løse design-mæssige problemer, men der er ikke _noget_ i html, som medfører, at man skal det ene eller det andet, det er fuldt legalt at blande det i et passende forhold !-)

-- men din kunne nemt nok løses ved at have en stor div, med passende højde og bredde og så de andre ting som divs inde i (det ville også fjerne den inderligt overflødige colspan !-)
Avatar billede kgp43 Nybegynder
23. april 2004 - 15:16 #6
mangler noget materiale. Har læst en masse tutorials om CSS, men de omhandler bare farver, margin mv (som jeg allerede bruger).
Avatar billede roenving Novice
23. april 2004 - 15:41 #7
Jeg har ikke kigget på den vertikale position for alvor, men det er ikke det voldsomme ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Savefile.com - Upload your doc, pictures and other files for free</title>
<meta NAME="Description" CONTENT="Savefile.com is a free uploading service that let you save files to our server.">
<meta NAME="Keywords" CONTENT="upload,upload file,upload picture,save file,save picture,uploading">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="http://www.savefile.com/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
body{text-align:center;vertical-align:middle;}
#center{
  position:relative;
  margin:auto;
  width:450px;
  height:260px;
  text-align:left;
  border:1px solid blue;
  border-collapse:collapse;
}
#center div{border:0px;padding:0px;margin:0px;width:100%;}
</style>
</head>

<body>
  <div id="center" class="border-all">
    <div style="height:25px;" class="topic">
      <h1>Savefile.com : Upload and access your files from anywhere</h1></div>
    <div style="height:20px;text-align:center">&nbsp;</div>
    <div style="height:20px;text-align:center">
      <h2>Upload your documents, pictures, zip's and more</h2></div>
    <div style="height:20px;text-align:center">
      <h2>&nbsp;</h2></div>
    <div style="height:70px;width:250px;text-align:center;margin:0px 100px;" class="infobox">
      <p>You don't need any account to upload files. However having an account will give you some benefits.</p></div>
    <div style="height:20px;text-align:center">&nbsp;</div>
    <div style="height:20px;text-align:center"><input type="file" name="file"></div>
    <div style="height:20px;text-align:center"><p>File size: 600Kb</p></div>
    <div style="height:20px;text-align:center">&nbsp;</div>
    <div style="height:20px;text-align:center;width:113px;float:left;" class="bottom">Login/Apply</div>
    <div style="height:20px;text-align:center;width:112px;float:left;" class="bottom">Directory</div>
    <div style="height:20px;text-align:center;width:112px;float:left;" class="bottom">Support</div>
    <div style="height:20px;text-align:center;width:113px;float:left;" class="bottom">Advertise</div>
</div>
</body>
</html>
Avatar billede roenving Novice
23. april 2004 - 15:44 #8
I øvrigt har jeg heller ikke fundet nogle rigtig gode css-steder, hvor man fik en ordentlig fornemmelse for positionerings-magien osv., men lidt er der da som reference-ting:

http://www.csszengarden.com/

og indexDot:

http://blooberry.com/indexdot/css/index.html
Avatar billede kgp43 Nybegynder
23. april 2004 - 16:14 #9
fandt lige denne her (ser ud til at være okay): http://www.glish.com/css/

Ligger du lige et svar, så får du point.
Avatar billede roenving Novice
23. april 2004 - 16:37 #10
Velbekomme '-)
Avatar billede roenving Novice
23. april 2004 - 16:43 #11
-- og tak for point ;~}
Avatar billede kgp43 Nybegynder
23. april 2004 - 16:47 #12
velbekomme :)

Har dog stadig et problem med at få den centereret verticalt.
Avatar billede kgp43 Nybegynder
23. april 2004 - 17:06 #13
Hvordan får du teksten til at være .... hvad hedder det.... vertical=middle, eller sådan noget?
Avatar billede roenving Novice
23. april 2004 - 17:06 #14
<body onload="document.getElementById('center').style.top=(screen.availHeight-360)/2+'px';">
Avatar billede kgp43 Nybegynder
23. april 2004 - 17:10 #15
hvis du så gør vinduet mindre, så følger boksen ikke med.
Avatar billede roenving Novice
23. april 2004 - 18:17 #16
-- så kan du også tilføje onresize med det samme som onload ...

-- og så er det vist ret sjældent at brugere aktivt resizer vinduer med 'noget' i !-)
Avatar billede kgp43 Nybegynder
23. april 2004 - 18:31 #17
hehe.

Jeg lavede det om til tables igen :P
Tror jeg springer lidt for hurtigt frem.
Avatar billede roenving Novice
23. april 2004 - 18:41 #18
I hvert fald er specielt lodret centrering noget af en opgave med de nuværende definitioner og implementeringer af css !-)
Avatar billede kgp43 Nybegynder
23. april 2004 - 18:50 #19
Tror det er lettest at lave det på den nuværende måde.
Skal igang med en "alm" side om nogle måneder, så går jeg over til css.
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