Søg
Avatar billede skirk Nybegynder
10. august 2004 - 18:40 Der er 9 kommentarer og
1 løsning

Side Centrering ?

Hej

Jeg er ved at lave en side (jeg er dog nybegynder:) jeg lavede det første på en computer der kørte en opløsning på 1024*768 og da jeg kom hjem for at forsætte var siden ikke centreret fordi jeg køre med en højre opløsning på min egen skærm. Er der en css kommando som sørger for at siden altid er i midtin uanset opløsning. Jeg bruger div's og sætter placeringen i css med left, top, width osv.


Har i et forslag ?

Mvh

Skirk
Avatar billede exp Juniormester
10. august 2004 - 18:45 #1
www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html
Avatar billede skirk Nybegynder
10. august 2004 - 18:58 #2
Hvis nu jeg har en leftcontent, centercontent, rightcontent skal fx leftcontent kun have:


#leftcontent {
    width: 400px;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;    
    /* opera does not like 'margin:20px auto' */
    background: #666;
    border: 5px solid #ccc;
    text-align:left;
    /* part 2 of 2 centering hack */
    width: 400px; /* ie5win fudge begins */
    width: 370px;
    }

og right:

#leftcontent {
    width: 400px;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;    
    /* opera does not like 'margin:20px auto' */
    background: #666;
    border: 5px solid #ccc;
    text-align:left;
    /* part 2 of 2 centering hack */
    width: 400px; /* ie5win fudge begins */
    width: 370px;
    }

?
Avatar billede roenving Novice
11. august 2004 - 00:37 #3
Simpelt og effektivt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Centreret i alle browsere</title>
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;border:0px;text-align:center;}
div, iframe{margin:0px;padding:0px;border:0px;}
.center{margin:0 auto;width:760px;background:#22ee7f;text-align:left;}
.top{height:120px; background:transparent;}
.menu{width:117px;height:400px;float:left;background:#eee;}
.content{}
#contentFrame{width:640px;height:400px;}
</style>
</head>
<body>
<div class="center">
  <div class="top">
    En overskrift eller et banner
  </div>
  <div class="menu">
    Din menu
  </div>
  <div class="content">
    <iframe src="" name="contentFrame" id="contentFrame"></iframe>
  </div>
</div>
</body>
</html>
Avatar billede gustav-olsen Nybegynder
11. august 2004 - 16:59 #4
ellers kan det her vel også gå an:

body {
  width: 600px;
  margin: 10px auto 10px auto;
  }
Avatar billede roenving Novice
11. august 2004 - 17:09 #5
>>gustav-olsen

Ja, bortset fra, at det ikke virker i 80-95% af browserne i den virkelige verden ...

-- og så bruger jeg i øvrigt forkortelsen af multi-margins:

margin: 10px auto;

i din version ...
Avatar billede gustav-olsen Nybegynder
11. august 2004 - 17:45 #6
roenvig - det virker i IE - så det er mindst 90% af verden der kan se det...
Avatar billede roenving Novice
11. august 2004 - 17:54 #7
Siden hvornår ?-)

-- og det mener jeg zq helt alvorligt, for det virkede ikke i min IE for 2 eller 3 måneder siden, så der har været noget i den update, som kom for 10 dage siden !o]

Derfor har det været nødvendigt at lave et cowboy-trick for at få det til at virke i ie (nemlig at udnytte, at ie fejl-agtigt centrerede block-level elementer med text-align !-)
Avatar billede gustav-olsen Nybegynder
12. august 2004 - 19:21 #8
roenving: Jeg har brugt det i flere måneder og har aldrig haft problemer med IE..
Avatar billede roenving Novice
12. august 2004 - 19:37 #9
Fint nok, bare det virker ...

-- men du vil finde en masse kode og sider om centrering, som er lavet ud fra den forudsætning, at IE ikke understøtter margin:auto; hvilket den så heller ikke gjorde tidligere ...
Avatar billede skirk Nybegynder
12. august 2004 - 19:50 #10
jeg har fundet en løsning jeg luret her http://www.quirksmode.org/css/centering_example.html
og så hans exempel så der kom jeg meget længere :) men tak for hjælpen :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
IT-JOB

Capgemini Danmark A/S

Java Engineer

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Cyberdivisionen søger leder til Lokal IT Servicecenter i Holstebro

Statens IT

Teamkoordinator til databaseteam

Rambøll Management Consulting

Senior Software Engineer

Politiets Efterretningstjeneste

ML OPS til udvikling og støtte af Computer Network Exploitation
Seneste spørgsmål Seneste aktivitet
I går 21:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
I går 20:06 email adresse Af Malm i Forslag til ændringer
I går 19:54 problem med google crome Af Malm i Andet software
I går 09:36 Alternativ holder til to skærme... Af Don G i Skærme
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »