Avatar billede dennism Nybegynder
27. april 2008 - 01:38 Der er 11 kommentarer og
1 løsning

HTML: Centreret div

Jeg har denne lille kode:

<div style="width:300px;height:300px;background-color:#000000;">
    <div style="width:200px;height:200px;background-color:#e0e0e0;"></div>
</div>

Her har jeg et div inden i et andet div. Jeg vil gerne have, at det inderste div er centreret både verticalt og horisontalt.

Håber der er nogen der kan hjælpe mig med det?
Avatar billede w13 Novice
27. april 2008 - 10:38 #1
Måske:

<div style="width:300px;height:300px;background-color:#000;">
    <div style="width:200px;height:200px;margin:auto;position:absolute;top:50px;background-color:#e0e0e0;"></div>
</div>
Avatar billede roenving Novice
28. april 2008 - 13:30 #2
Hrm, nok nærmere:

<div style="width:300px;height:300px;background-color:#000;position:relative;">
    <div style="width:200px;height:200px;margin:0 auto;position:relative;top:50px;background-color:#e0e0e0;">&nbsp;</div>
</div>
Avatar billede w13 Novice
28. april 2008 - 14:57 #3
Doh! Ja, relativt self. :)
Avatar billede roenving Novice
28. april 2008 - 15:06 #4
-- det vigtige var at containeren fik en position !-)
Avatar billede jeppe999 Nybegynder
28. april 2008 - 16:54 #5
Hvad med:
<div align="center">
Avatar billede roenving Novice
28. april 2008 - 16:56 #6
deprecated kode de sidste 10 år ,-(
Avatar billede jeppe999 Nybegynder
28. april 2008 - 17:39 #7
align="center" var noget jeg så da jeg lige skulle se hvordan eksperten var centreret.

Udpluk af ekspertens html:
<div align="center"><table id="table_main" style="width: 890px;"><tr><td rowspan="7" class="margin_white"><span class="spacer"></span></td><td colspan="2" class="margin_white"><span class="spacer"></span></td><td rowspan="7" class="margin_white"><span class="spacer"></span></td></tr><tr><td rowspan="2" style="width: 110px; vertical-align: top;"><a href="/"><img src="/img/elogo.png" alt="" class="elogo" /></a></td><td class="banner-top"><!--JavaScript Tag // Tag for network 277: IDG Online - Denmark // Website: Eksperten // Page: Default // Placement: Default 728x90 (72962) // created at: Jan 23, 2007 4:34:10 PM-->
<script language="javascript"><!--
document.write('<scr'+'ipt language="javascript1.1" src="http://adserver.adtech.de/addyn|3.0|277|72962|0|225|ADTECH;loc=100;target=_blank;grp=[group];misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script><noscript><a href="http://adserver.adtech.de/adlink|3.0|277|72962|0|225|ADTECH;loc=300;grp=[group]" target="_blank"><img src="http://adserver.adtech.de/adserv|3.0|277|72962|0|225|ADTECH;loc=300;grp=[group]" border="0" width="728" height="90"></a></noscript>
<!-- End of JavaScript Tag --></td></tr><tr><td style="text-align: center; height: 16px;"><ul id="tabmenu"><li><a href="/" class="set">Spørgsmål &amp; Svar</a></li><li><a href="/artikler/">Artikler</a></li><li><a href="/priser/">Priser</a></li><li><a href="/job/cv/">C.V.</a></li><li><a href="http://www.cafeshops.com/eksperten" class="shop">Butikken</a></li><li><a href="http://www.idg.dk/" class="idg">IDG</a></li></ul></td></tr><tr><td colspan="2"><form action="/list.phtml" method="get" class="searchbar"><input type="hidden" name="method" value="and" /><input type="hidden" name="excerpt_on" value="1" /><table style="width: 100%;"><tr><td class="menu_td" style="border-left: 1px solid #000000;"><ilayer id="layerMenu"><div id="divMenu"><img src="/img/t.gif" alt="" class="menu_img" /></div></ilayer></td><td class="menu_td" style="width: 128px;"><input type="text" name="find" value="S&oslash;g" onclick="this.value='';" maxlength="100" accesskey="q" class="searchbar_input" /></td><td class="menu_td" style="width: 5px;"><span class="spacer">&nbsp;</span></td><td class="menu_td" style="width: 11px;"><input src="/img/submit_arrow.gif" type="image" alt="Search" class="searchicon" /></td><td class="menu_td" style="width: 5px; border-right: 1px solid #000000;"><span class="spacer">&nbsp;</span></td></tr></table></form></td></tr><tr><td colspan="2" class="margin_white"><span class="spacer"></span></td></tr><tr><td colspan="2" style="width: 890px;"><form id="fexp" name="fexp" action="/respons.php" method="post"><input type="hidden" name="qid" value="829345" /><input type="hidden" name="impid" value="0" /><input type="hidden" name="rselected" value="" /><table style="width: 100%;table-layout: fixed; overflow: hidden;"><tr valign="top"><td id="box_left" class="boxes" style="width: 150px;"><div id="b08" class="box" style="background-color:#71b8db;"><div class="box_title" style="background-color:#006699;"><img id="b08i" src="/img/arrow-down.gif" class="box_arrow" alt="Minimer / Maksimer" title="Minimer / Maksimer" onclick="box_click('b08');" />&nbsp;Dine data</div><div id="b08c" class="box_content"><table><tr><td style="width:56px;">Navn</td><td style="text-align:right;"><a href="/konto.phtml">jeppe999</a></td></tr><tr><td>Point</td><td style="text-align:right;">530</td></tr><tr><td>Point ude</td><td style="text-align:right;">0</td></tr><tr><td>Placering</td><td style="text-align:right;">11.334</td></tr></table></div></div><div id="b09" class="box" style="background-color:#71b8db;"><div class="box_title" style="background-color:#006699;"><img id="b09i" src="/img/arrow-down.gif" class="box_arrow" alt="Minimer / Maksimer" title="Minimer / Maksimer" onclick="box_click('b09');" />&nbsp;Sp&oslash;rgsm&aring;l data</div><div id="b09c" class="box_content"><table><tr style="vertical-align:top;"><td>Kategori</td><td title="Programmering :: (D)HTML ::">(D)HTML</td></tr><tr><td>Point</td><td>15</td></tr><tr><td>Oprettet</td><td>27/04 2008</td></tr><tr><td>Tidspunkt</td><td>01:38:29</td></tr></table></div></div><div id="b10" class="box" style="background-color:#71b8db;"><div class="box_title" style="background-color:#006699;"><img id="b10i" src="/img/arrow-right.gif" class="box_arrow" alt="Minimer / Maksimer" title="Minimer / Maksimer" onclick="box_click('b10');" />&nbsp;Funktioner</div><div id="b10c" class="box_content" style="display:none;visibility:hidden;"><a href="#message">Kommenter / Svar</a><br /><a href="/spm/829345?fullscreen=1" onclick="set_browser_width();">Vis fuld skærm</a><br /><a href="/tip.phtml">Tip en ven</a><br /><a href="java script:report_abuse();">Anmeld misbrug</a><br /><a href="/translate.phtml">Translate this page</a></div></div><div id="b23" class="box" style="background-color:#71b8db;"><div class="box_title" style="background-color:#006699;">Annonce</div><div id="b23c" class="box_content"><div style="padding:2px;"><iframe width="120" height="40" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" src="http://adserver.adtech.de/?adiframe|2.0|277|75592|1|246|target=_blank;"></iframe></div></div></div></td><td id="content" class="spm-content"><div class="you-are-here">Du er her : <a href="/">Eksperten</a> : <a href="/spm/">Spørgsmål &amp; Svar</a> : <a href="/spm/Programmering/">Programmering</a> :: <a href="/spm/Programmering/DHTML/">(D)HTML</a> :: <a href="/spm/829345">HTML: Centreret div</a> :</div><p /><div class="enews-div" onclick="document.location.href='/enyt.phtml?id=170';">Sidste nyt fra Eksperten : <b>Microsoft udviklings-community hyggeaften i Odense d. 29 maj</b><div class="enews">Arbejder du med Microsoft-produkter, s&aring; skal du m&aring;ske afs&aelig;tte d. 29. maj. for Microsoft inviterer til udvikler-hyggeaften. Stedet er Radison SAS hotel i Odense kl. 19:00 hvor der vil v&aelig;re b&aring;de v&aring;dt og...&nbsp;<span style="text-decoration: underline;">[læs mere]</span></div></div><br /><p /><table style="width: 100%;"><tr><td><h1 style="display: inline; font-size: 11pt;"><a href="/spm/829345" style="color: #000000; text-decoration: none;">HTML: Centreret div</a></h1></td><td style="text-align: right;"><img src="/img/flag_green.gif" title="Ubesvaret" class="flag_status" alt="" />&nbsp;<b>15</b>&nbsp;point fra <b><a href="/bruger.phtml?navn=dennism" style="color: #000000;">dennism</a></b></td><td valign="bottom" style="width: 50px; padding-left: 5px; font-size: 1px;"></td></tr></table><p style="clear: all;" /><div id="artbanner" style="padding-bottom: 3px; text-align:right; float:right; width:336px;"><div style="border-bottom: 2px solid #c0c0c0; width:336px;"><span title="Luk annonce" style="background-color: #c0c0c0; font-weight: bold; cursor:pointer;" onclick="artbanner_control(0,1);">&nbsp;X&nbsp;</span></div><iframe width="336" height="280" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" src="http://adserver.adtech.de/?adiframe|2.0|277|72328|1|171|target=_blank;"></iframe></div>Jeg har denne lille kode:<br /><br />&lt;div style="width:300px;height:300px;background-color:#000000;"&gt;<br />&nbsp; &nbsp; &lt;div style="width:200px;height:200px;background-color:#e0e0e0;"&gt;&lt;/div&gt;<br />&lt;/div&gt;<br /><br />Her har jeg et div inden i et andet div. Jeg vil gerne have, at det inderste div er centreret både verticalt og horisontalt.<br /><br />Håber der er nogen der kan hjælpe mig med det?</td></tr><tr valign="top"><td id="rid7097019" class="spm-from" style="border-right: 3px solid #c0c0c0;"><a name="7097019">Kommentar</a>: <a href="#rid7097019" onclick="post_tools(7097019,'w13',event);" class="link_black_spm">w13</a><br />27/04-2008 10:38:52</td><td class="spm-respons">Måske:<br /><br />&lt;div style="width:300px;height:300px;background-color:#000;"&gt;<br />&nbsp; &nbsp; &lt;div style="width:200px;height:200px;margin:auto;position:absolute;top:50px;background-color:#e0e0e0;"&gt;&lt;/div&gt;<br />&lt;/div&gt;</td></tr><tr valign="top"><td id="rid7098083" class="spm-from" style="border-right: 3px solid #c0c0c0;"><a name="7098083">Kommentar</a>: <a href="#rid7098083" onclick="post_tools(7098083,'roenving',event);" class="link_black_spm">roenving</a><br />28/04-2008 13:30:37</td><td class="spm-respons">Hrm, nok nærmere:<br /><br />&lt;div style="width:300px;height:300px;background-color:#000;position:relative;"&gt;<br />&nbsp; &nbsp; &lt;div style="width:200px;height:200px;margin:0 auto;position:relative;top:50px;background-color:#e0e0e0;"&gt;&amp;nbsp;&lt;/div&gt;<br />&lt;/div&gt;</td></tr><tr valign="top"><td id="rid7098157" class="spm-from" style="border-right: 3px solid #c0c0c0;"><a name="7098157">Kommentar</a>: <a href="#rid7098157" onclick="post_tools(7098157,'w13',event);" class="link_black_spm">w13</a><br />28/04-2008 14:57:39</td><td class="spm-respons">Doh! Ja, relativt self. :)</td></tr><tr valign="top"><td id="rid7098164" class="spm-from" style="border-right: 3px solid #c0c0c0;"><a name="7098164">Kommentar</a>: <a href="#rid7098164" onclick="post_tools(7098164,'roenving',event);" class="link_black_spm">roenving</a><br />28/04-2008 15:06:21</td><td class="spm-respons">-- det vigtige var at containeren fik en position !-)</td></tr><tr valign="top"><td id="rid7098264" class="spm-from" style="border-right: 3px solid #c0c0c0;"><a name="7098264">Kommentar</a>: <a href="#rid7098264" onclick="post_tools(7098264,'jeppe999',event);" class="link_black_spm">jeppe999</a><br />28/04-2008 16:54:43</td><td class="spm-respons">Hvad med:<br />&lt;div align="center"&gt;</td></tr><tr valign="top"><td id="rid7098265" class="spm-from" style="border-right: 3px solid #c0c0c0;"><a name="7098265">Kommentar</a>: <a href="#rid7098265" onclick="post_tools(7098265,'roenving',event);" class="link_black_spm">roenving</a><br />28/04-2008 16:56:40</td><td class="spm-respons">deprecated kode de sidste 10 år ,-(</td></tr><tr valign="top"><td style="border-top: 1px solid #000000; padding: 5px; padding-top: 20px;"><input type="radio" name="msg_action" value="comment" onclick="document.fexp.message.focus();" checked="checked" /><span onclick="checkbox_click('comment', 'fexp');"> Kommentar</span><br /><input type="radio" name="msg_action" value="answer" onclick="document.fexp.message.focus();" /><span onclick="checkbox_click('answer', 'fexp');"> Svar</span><p /><br /><input type="checkbox" name="subscribe" value="on" checked="checked" onclick="document.fexp.message.focus();" /><span title="Du modtager en E-Mail når der er nye indlæg i spørgsmålet." onclick="checkbox_click('msg_option', 'fexp'); document.fexp.message.focus();"> Abonnér</span><p /><a href="/pro.phtml?r=1" tabindex="0"><img src="/img/recycle.gif" class="recycle" border="0" alt="" title="Opdater [Alt-r]+[enter]" /></a><p /><br /><a href="/pro.phtml"><img src="/img/epro.png" style="width: 120px; height: 40px; border: 1px solid #006699;" alt="Køb Eksperten Pro" title="Køb Eksperten Pro" /></a></td><td style="border-top: 1px solid #000000; padding: 5px; padding-top: 20px;"><a name="message"></a><textarea name="message" cols="45" rows="10" tabindex="0" class="msg_box" accesskey="m"></textarea><br /><input type="submit" name="action" value="Send" accesskey="s" title="[alt+s]" tabindex="1" style="width:100%;" /></td></tr><tr><td colspan="2" style="padding: 15px; padding-top: 25px; text-align: center;"><script type="text/javascript"><!--
google_ad_client = "pub-7411742756402756";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text";
//2006-12-04: Eksperten 728*90
google_ad_channel = "2275125930";
google_color_border = "006699";
google_color_bg = "FFFFFF";
google_color_link = "006699";
google_color_text = "000000";
google_color_url = "3399CC";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td></tr></table></form><div id="qtools" class="post_tools_active"><span onclick="post_tools_action(0);" class="post_tools_link">Vis brugerinfo</span><br /><span onclick="post_tools_action(7);" class="post_tools_link">Giv Karma</span><br /></div></td></tr><tr><td colspan="2" class="margin_white"><span class="spacer"></span></td></tr></table></div>

<!-- CoolMenus: Copyright Thomas Brattli (www.dhtmlcentral.com) -->
<script type="text/javascript" language="JavaScript1.2" src="/js/coolmenus/coolmenus4.js"></script><script type="text/javascript" language="JavaScript1.2" src="/js/coolmenus/cm_addins.jfl.js"></script><script type="text/javascript" language="JavaScript1.2" src="/js/coolmenus/exp_menu.js"></script>

<div class="counters">
<iframe width="1" height="1" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" src="http://adserver.adtech.de/?adiframe|2.0|277|73011|1|16|target=_blank;"></iframe>
<!-- GALLUP -->
<script type="text/javascript" src="/tmv11.js"></script>
<script type="text/javascript">
<!--
getTMqs('http', '', '', 'idg_dk', 'dk', 'ISO-8859-15');
//-->
</script>
<noscript><img src="http://statistik-gallup.net/V11***idg_dk/dk/ISO-8859-15//" alt="" /></noscript>
<!--GALLUP SLUT -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-364357-5";
urchinTracker();
</script>
<!-- (C)2000-2007 Gemius SA - gemiusAudience / eksperten.dk / Main Page -->
<script type="text/javascript">
var pp_gemius_identifier = new String('bIg7_9RZsBI.BjVwPXgllbbtT.P8AgSCXEaXutCWvQz.17');
</script>
<script type="text/javascript" src="http://www.eksperten.dk/javascript/gemius/xgemius.js"></script>
</div>
Avatar billede roenving Novice
28. april 2008 - 17:46 #8
Jepz, Ekspertens kode er ikke den allerbedste ...

-- og ovenikøbet har den den umulige doctype xhtml1 transitional, endda med xml-prolog, som notorisk ødelægger css-understøttelse i IE ...

xhtml1 (specielt transitional !-) kan aldrig tolkes som andet end fejlfyldt html4.01 i nogen nulevende eller kommende browsere, så det er bare tåbeligt at bruge !o]
Avatar billede olebole Juniormester
29. april 2008 - 01:02 #9
<ole>

- og da f.eks. iframe ikke er del af HTML4.01 (kun i Transitional flavour), er der vel strengt taget tale om, at XHTML 1.0 Transitional kun er HTML3.2 i festtøj  =)

/mvh
</bole>
Avatar billede dennism Nybegynder
18. maj 2008 - 14:08 #10
Roenving >>

Smider du lige et svar?
Avatar billede roenving Novice
19. maj 2008 - 17:06 #11
Oki '-)
Avatar billede roenving Novice
20. maj 2008 - 16:13 #12
-- og tak for point ;~}
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