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

Blueeyez Mester

12. maj 2012 - 19:16 Der er 10 kommentarer og
1 løsning

CSS problem

Har et mindre problem, men nok til at jeg er ved og gå ud af mit gode sinkd..

Jeg ejer siden dtmp.dk, jeg vil så ændre på udseendet hvilket går fint, men at få siden til og blive vist korrekt er værre, test siden er her: dtmp.dk/test.html og css filen: dtmp.dk/style3.css

Det jeg vil er at placere ALT i centrum.. hvordan gør jeg følgende?

Synes godt om

olsensweb.dk Ekspert

12. maj 2012 - 20:08 #1

kan du ikke bruge din frame som wrapper ??, og sette magin-left og magin-right til auto for at centrarer wrapperen, text-align: center; for at centrerer indholdet af wrapperen

#frame {
    /* display:inline-block; */
    background-color: #b5cfe0;
    border-radius: 20px 20px 20px 20px; border:2px #2c4762;    border-style:solid;
    /* overflow:hidden; */
    width: 450px;    
    text-align: center; /* centrarer indholdet af boxen */
    margin-left: auto ;  /* for at centrer boxen*/
    margin-right: auto ; /* for at centrer boxen*/    
    
}

demo http://experten.olsensweb.dk/962833/

Synes godt om

Blueeyez Mester

12. maj 2012 - 20:47 #2

#1 Tak for svar, men virker ikke rigtigt? Skal jeg gøre andet end at smide følgende kode i mit css der hvor nuværende #frame er? (den del med margin virker nemlig ikke)

Synes godt om

NielsErikP Mester

12. maj 2012 - 21:33 #3

Hej...

"den del med margin virker nemlig ikke"...

Du har en width: 450px; på din #frame ...
Du skal have en omkring liggende width der er større end width'en på #frame for at margin: auto; på #frame virker!!

Synes godt om

olsensweb.dk Ekspert

12. maj 2012 - 21:59 #4

#2 virker min demo på din maskine ??, kig på min demo, og sammenlign CSS, og lidt HTML (retten nogle validerings fejl)

#3 >Du har en width: 450px; på din #frame ...
frame fungerer som det vi andre kalder en wrapper, og den har en veldefinerede bredde, så den er god nok

Synes godt om

NielsErikP Mester

12. maj 2012 - 22:11 #5

Hej..

#3:
"frame fungerer som det vi andre kalder en wrapper, og den har en veldefinerede bredde" ??
For mig at se er frame en ganske almindelig div med en bredde på.. for at den skal kunne centreres med margin: auto; skal den ligge i et omkringliggende div etc. med egen bredde... ellers har browseren ikke noget at definere auto ud fra.

Synes godt om

Blueeyez Mester

12. maj 2012 - 22:54 #6

#4 auto funktionen smider den blot op i venstre hjørne (Standard) bruger som standard Chrome har os lige testet i Firefox, men samme resultat?

Har os prøvet i en tutorial: http://www.w3schools.com/cssref/playit.asp?filename=playcss_margin

Og synes at udfaldet derfra er bedre end de udfald jeg får ud fra koderne?

Synes godt om

NielsErikP Mester

12. maj 2012 - 23:18 #7

Hej...

<body>
<div id="container">
<div id="frame">
<div id="overskrift">Drivere til min pc</div>
<p>Velkommen til dtmp.dk<br />
Denne side understøtter kun Zepto.</p>
<p><select id="model">
<option value="">Vælg en model</option>
<option value="zepto/Anthea_A15/Anthea_A15.html">Anthea A15</option>
<option value="zepto/Hydra_A17/Hydra_A17.html">Hydra A17</option>
<option value="zepto/Mythos_A15/Mythos_A15.html">Mythos A15</option>
<option value="zepto/Nexus_A15/Nexus_A15.html">Nexus A15</option>
<option value="zepto/Nox_A14/Nox_A14.html">Nox A14</option>
<option value="zepto/Nox_A15/Nox_A15.html">Nox A15</option>
<option value="zepto/Orion_A15/Orion_A15.html">Orion A15</option>
<option value="zepto/Titan_A15/Titan_A15.html">Titan A15</option>
<option value="zepto/Titan_B15/Titan_B15.html">Titan B15</option>
<option value="zepto/Znote_120SL/Znote_120SL.html">Znote 120SL</option>
<option value="zepto/Znote_1100/Znote_1100.html">Znote 1100</option>
<option value="zepto/Znote_1120A/Znote_1120A.html">Znote 1120A</option>
<option value="zepto/Znote_1800/Znote_1800.html">Znote 1800</option>
<option value="zepto/Znote_2002/Znote_2002.html">Znote 2002</option>
<option value="zepto/Znote_2003/Znote_2003.html">Znote 2003</option>
<option value="zepto/Znote_2100/Znote_2100.html">Znote 2100</option>
<option value="zepto/Znote_2114/Znote_2114.html">Znote 2114</option>
<option value="zepto/Znote_2114W/Znote_2114W.html">Znote 2114W</option>
<option value="zepto/Znote_2125/Znote_2125.html">Znote 2125</option>
<option value="zepto/Znote_2215W/Znote_2215W.html">Znote 2215W</option>
<option value="zepto/Znote_2225W/Znote_2225W.html">Znote 2225W</option>
<option value="zepto/Znote_2314W/Znote_2314W.html">Znote 2314W</option>
<option value="zepto/Znote_2415W/Znote_2415W.html">Znote 2415W</option>
<option value="zepto/Znote_2425W/Znote_2425W.html">Znote 2425W</option>
<option value="zepto/Znote_3050/Znote_3050.html">Znote 3050</option>
<option value="zepto/Znote_3100CW/Znote_3100CW.html">Znote 3100CW</option>
<option value="zepto/Znote_3214W/Znote_3214W.html">Znote 3214W</option>
<option value="zepto/Znote_3215W/Znote_3215W.html">Znote 3215W</option>
<option value="zepto/Znote_3310/Znote_3310.html">Znote 3310</option>
<option value="zepto/Znote_3405W/Znote_3405W.html">Znote 3405W</option>
<option value="zepto/Znote_3414W/Znote_3414W.html">Znote 3414W</option>
<option value="zepto/Znote_3415W/Znote_3415W.html">Znote 3415W</option>
<option value="zepto/Znote_4015/Znote_4015.html">Znote 4015</option>
<option value="zepto/Znote_4040-4050/Znote_4040-4050.html">Znote 4040-4050</option>
<option value="zepto/Znote_4060/Znote_4060.html">Znote 4060</option>
<option value="zepto/Znote_4100/Znote_4100.html">Znote 4100</option>
<option value="zepto/Znote_4200/Znote_4200.html">Znote 4200</option>
<option value="zepto/Znote_4315/Znote_4315.html">Znote 4315</option>
<option value="zepto/Znote_6014W/Znote_6014W.html">Znote 6014W</option>
<option value="zepto/Znote_6015W/Znote_6015W.html">Znote 6015W</option>
<option value="zepto/Znote_6015WD/Znote_6015WD.html">Znote 6015WD</option>
<option value="zepto/Znote_6024W/Znote_6024W.html">Znote 6024W</option>
<option value="zepto/Znote_6025WD/Znote_6025WD.html">Znote 6025WD</option>
<option value="zepto/Znote_6214W/Znote_6214W.html">Znote 6214W</option>
<option value="zepto/Znote_6224W/Znote_6224W.html">Znote 6224W</option>
<option value="zepto/Znote_6314W/Znote_6314W.html">Znote 6314W</option>
<option value="zepto/Znote_6324W/Znote_6324W.html">Znote 6324W</option>
<option value="zepto/Znote_6515WD/Znote_6515WD.html">Znote 6515WD</option>
<option value="zepto/Znote_6615WD/Znote_6615WD.html">Znote 6615WD</option>
<option value="zepto/Znote_6625WD/Znote_6625WD.html">Znote 6625WD</option>
<option value="zepto/Znote_7000/Znote_7000.html">Znote 7000</option>
<option value="zepto/Znote_G14/Znote_G14.html">Znote G14</option>
<option value="zepto/Znote_G15/Znote_G15.html">Znote G15</option>
<option value="zepto/Znote_M15/Znote_M15.html">Znote M15</option>
<option value="zepto/Znote_V10/Znote_V10.html">Znote V10</option>
<option value="zepto/Znote_V11a/Znote_V11a.html">Znote V11a</option>
<option value="zepto/Znote_V14b/Znote_V14b.html">Znote V14b</option>
<option value="zepto/Znote_V15/Znote_V15.html">Znote V15</option>
<option value="zepto/Znote_X17/Znote_X17.html">Znote X17</option>
</select><br />
<input type="button" value="Videre" onclick="window.location.href=document.getElementById('model').value"></center></p>

<div id="info">
<p>Filerne du henter fra denne side, benyttes på eget ansvar.<br />
Hvis der er fejl, mangler, eller forældede drivere,<br />
så er du velkommen til at kontakte info@dtmp.dk.</p>
</div>
</div>
</div>

smid så dette i din Css fil :

#container {
width: 950px; // Bare en tilfældig valgt størrelse.
}
#frame {
margin: auto;
}

Håber det hjælper dig :-)

Synes godt om

NielsErikP Mester

12. maj 2012 - 23:21 #8

Hej...

Hvorfor bruger du forresten html 5 ?? ..det er ikke standard endnu!

Synes godt om

Blueeyez Mester

13. maj 2012 - 11:04 #9

#7 nja altså jeg har jo stadig det problem at min #frame ikke nødvendigvis er i centrum (Afhænger af folks opløsning)

#8 Fordi jeg regner med at det bliver standarden :)

Synes godt om

Blueeyez Mester

15. maj 2012 - 10:44 #10

#1 Smid venligst et svar, efter at have gennemgået koden og genopbygget den fandt jeg fejl i følgende kode, så nu virker margin-left:auto; og margin-right:auto; :)

Fejlen opstod ved: border:2px #2c4762;

Følgende endte med og blive til:

border:2px;
color:#2c4762;

Synes godt om

olsensweb.dk Ekspert

15. maj 2012 - 11:40 #11

får du her

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
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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS