CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

webcreator Nybegynder

03. januar 2005 - 22:11 Der er 28 kommentarer og
1 løsning

Centrering af website

Hej Eksperter.

Min kode virker i firefox men selvfølgelig ikke i Internet Explore.

Jeg ønsker at centrere mit website vha. af "container" - som blot er en kasse (div) uden om hele mit site. Struktur-mæssigt ser det sådan ud :

<div class="container">
<div class="menu"><?php include("menu.php"); ?></div>
<div class="main"><?php include($page); ?><br><br></div>
</div>

Klaassen container (CSS) ser sådan ud :

.container
{
width: 924px; /* Breddens udregning: menu-bredde + (menu-padding*2) + menu-margin + main-page-bredde + (main-page-padding*2) + 4 (borderne fylder 4 pixels) */
margin: 0px auto; /* Centreringen sker her */
padding: 0px;
position: relative;
}

Nogen gode ideer til, hvordan jeg får det til at virke i både IE og Firefox?

Synes godt om

mccookie Seniormester

03. januar 2005 - 22:16 #1

smid et link

Synes godt om

webcreator Nybegynder

03. januar 2005 - 22:18 #2

http://filer.powerzone.dk/

Synes godt om

lyf Nybegynder

03. januar 2005 - 22:19 #3

Det må være din doctype der gør det. Ellers kan du sætte:

body {
text-align: center;
}
container {
text-align: left;
}

Synes godt om

webcreator Nybegynder

03. januar 2005 - 22:21 #4

Yep, det er nemlig min doctype - men jeg vil ikke lave den om.

Dit trick med body er dirty - and I like it :)

Andre måde der måske er bedre ?

Synes godt om

webcreator Nybegynder

03. januar 2005 - 22:22 #5

Hm, din metode virker faktisk ikke, Lyf - beklager.

Synes godt om

webcreator Nybegynder

03. januar 2005 - 22:31 #6

Andre forslag ?

Synes godt om

syvon Nybegynder

03. januar 2005 - 22:34 #7

noget i denne stil.

Nu kender jeg ikke lige breden på dit indhold så det må du selv rette

#container
{
font-family: Verdana, Geneva, Arial, sans-serif;
margin-left: -400px;
position: absolute;
left: 50%;
width: 800px;
visibility: visible;
}

Synes godt om

lyf Nybegynder

03. januar 2005 - 22:38 #8

Jeg er lidt blind for fejl lige nu, men burde du ikke bruge denne doctype istedet?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Synes godt om

webcreator Nybegynder

03. januar 2005 - 22:39 #9

Nope - den doctype ødelægger sitet fuldstændig. Hvis man bruger den, passer input-felterne ikke i bredden. Så den holder jeg mig langt fra :)

Synes godt om

webcreator Nybegynder

03. januar 2005 - 22:40 #10

syvon > Hvad er width og margin-left ? Vil din løsning ikke kræve, at brugeren benytter en ganske bestemt opløsning ?

Synes godt om

webcreator Nybegynder

03. januar 2005 - 22:49 #11

Synes godt om

roenving Novice

03. januar 2005 - 22:57 #12

Virker det ikke, hvis du:

body {
text-align: center;
}
.container
{
width: 924px; /* Breddens udregning: menu-bredde + (menu-padding*2) + menu-margin + main-page-bredde + (main-page-padding*2) + 4 (borderne fylder 4 pixels) */
margin: 0px auto; /* Centreringen sker her */
padding: 0px;
position: relative;
text-align:left;
}

-- det har da virket i alle de browsere, jeg har prøvet i ?-)

-- og så vil jeg give lyf ret i, at du børe sætte en ordentlig doctype på, så du kan se stort set det samme uanset browser !-)

Synes godt om

webcreator Nybegynder

03. januar 2005 - 23:09 #13

Hvis jeg benytter den doctype lyf foreslår, så virker det fint - men så ødelægges alle mine inputs, selects, buttons, textareas - de passer i hvertfald ikke i størrelsen. (se selv på login-siden på http://files.powerzone.dk
(det kan være svært at se, men input-felterne er 2 pixels større end submit-knappen)

Synes godt om

webcreator Nybegynder

03. januar 2005 - 23:10 #14

De to pixels er i Firefox - jeg tror det er 4 eller 5 pixels i Internet Explore.

Synes godt om

lyf Nybegynder

03. januar 2005 - 23:11 #15

Nååe, ku heller ikke forstå hvis den metode ikke virkede under den doctype. Så har du et nyt problem, men du bliver nød til at godtage den. Altså, det er vel ligesom at skrive <doctype hulabula det du har skrevet? Altså, den går i quirksmode vil jeg tro :-)

Synes godt om

webcreator Nybegynder

03. januar 2005 - 23:15 #16

Kan jeg få jer til at kigge på mit stylesheet og fortælle mig, hvad fejlen eventuel kan være ?

Stylesheet : http://powerzone.dk/ShareIt/style/style.css
Loginside : http://powerzone.dk/ShareIt/index.php?pageid=10

Ovenstående to dokumenter burde være nok til at lokalisere problemet.

Synes godt om

webcreator Nybegynder

03. januar 2005 - 23:15 #17

Jeg har afsat lidt flere points

Synes godt om

webcreator Nybegynder

03. januar 2005 - 23:31 #18

Nogen bud ?

Synes godt om

syvon Nybegynder

03. januar 2005 - 23:51 #19

Webcreator>>
left:50%; får den til at rykke det hele 50% halvdelen af browserens brede det vil sige til midten.
width er breden på din menu og main + mellemrum.
Margin-left er til at fortælle hvorlangt container skal være rykket ind på siden her har er den så sat til minus.

Synes godt om

syvon Nybegynder

03. januar 2005 - 23:55 #20

Og nej det vil kræve nogen bestemt opløsning.

Synes godt om

webcreator Nybegynder

04. januar 2005 - 00:08 #21

Jeg forstår ikke det med margin-left. Rykket ind i forhold til hvad? Jeg vil bare have min side 100% centreret, og ønsker ikke at skulle placere den i forhold til noget :)

Synes godt om

syvon Nybegynder

04. januar 2005 - 00:24 #22

hvis man nu siger at man starter med at sige den skal starte alt indhold på midten af browservinduet og Midten af browservinduet må jo være 50%.
så sætter man margin-left på og margin starter ved de 50% som er midten, når man så sætter margin-left til minus px så skal det jo gerne være i midten.
Minus px skal jo så være halvdelen af det der skal centrers.

Det eneste det bliver placeret i forhold til, er breden af browservinduet der kan variere pga. brugers opløsning hvor den altid finder midten.

Synes godt om

syvon Nybegynder

04. januar 2005 - 00:28 #23

et eksembel her hvor det er brugt prøv at ændre på størrelsen af din browser i breden og læg mærke at det hele tiden er centreret da det bliver ved med at finde midten af browservinduet.

http://www.povlsen.cc/syvon/pcc1/pcc.html

Synes godt om

webcreator Nybegynder

04. januar 2005 - 08:27 #24

Ah, det er margin i forhold til midten - mange tak. Så er jeg med igen :)

Kan jeg få nogle svar? Jeg tror jeg opretter et andet spørgsmål ang. problemet med min doctype.

Synes godt om

olebole Juniormester

06. januar 2005 - 13:19 #25

<ole>

webcreator >> Hvis du vil bruge CSS, er du pisket nødt til at bruge den DTD, lyf foreslår i kommentaren (03/01-2005 22:38:42).

Den ødelægger ikke dit design. Den renderer dit design, sådan som du har skrevet din CSS - og er som sagt en absolut nødvendighed, hvis du vil bruge CSS og have dine sider til at se ens ud i de fleste browsere.

At dit design ser rigtigt ud uden den DTD, du i øjeblikket benytter, betyder blot, at du har skrevet din CSS forkert :)

/mvh
</bole>

Synes godt om

olebole Juniormester

06. januar 2005 - 13:20 #26

"At dit design ser rigtigt ud med den DTD, du i øjeblikket benytter, betyder blot, at du har skrevet din CSS forkert" ... skulle der naturligvis stå ;o)

Synes godt om

webcreator Nybegynder

16. januar 2005 - 03:05 #27

Tak for hjælpen. Så er det svartid :)

Synes godt om

syvon Nybegynder

16. januar 2005 - 12:41 #28

et svar.

Synes godt om

olebole Juniormester

16. januar 2005 - 17:09 #29

Count me out ... jeg præciserede blot nogle andres kommentarer :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS