CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede badut Nybegynder
05. april 2004 - 14:35 Der er 8 kommentarer og
1 løsning

Auto centrere et billede

Hejsa,

jeg har brug for et stykke kode, der gør at det billede jeg har på min hjemmeside altid vil være centreret uanset opløsning og browser størrelse.

Nogen der kan hjælpe?
Avatar billede roenving Novice
05. april 2004 - 14:45 #1
Hvad med at sætte det som baggrund !-)

<style type="text/css">
html,body{height:100%}
body{
  background: url('ditBillede.jpg') center center no-repeat;
}
</style>

-- og så kan du ændre med:

<script type="text/javascript">
function newPic(pic){
  document.body.style.backgroundImage = "url('"+pic+"')";
}
</script>
Avatar billede badut Nybegynder
05. april 2004 - 14:49 #2
Ok, tænkte på om du ville tage et kig på www.davidjacobsen.dk? Det er faktisk alt det der står på forsiden der skal være centreret.. Overskrift, billedet, knapper o.s.v.
Alle delene er jo ikke bare et stort billede..
Avatar billede roenving Novice
05. april 2004 - 15:30 #3
Tjah, jeg kan jo tydeligt se, at FrontPage har været der ,-(

Og så kan jeg se, at koden af en eller anden grund (chikane ?-) er lavet, så den flok internet-brugere, som ikke bruger Internet Explorer, får en meget dårlig oplevelse ...

Jeg går ud fra, at du har ladet FrontPage generere koden, men det er da tosset at udelukke 12-14 % af internet-brugerne til gengæld for at de ca. 0,1% som stadig bruger IE4 kan være med :-(

Ved at skrive koden en anelse anderledes ville _alle_ moderne browsere kunne være med, men ikke IE4, det ville kræve en fordobling, at få både det ene og det andet med ...

Men generelt set omkring centreringen, så skal du sætte alt dit indhold ind i en div (to faktisk !-) og så have følgende i stylesheet:

html,body{height:100%}
#main{
  height:100%;
  text-align:center;
}
#content{
  margin:auto;
  text-align:left;
  height:480px;
  width:640px;/*Højde og bredde skal du selvfølgelig sætte, som du har behov for*/
  /*Top skal sættes for ie og andre, som ikke forstår margin:auto;*/
}

Koden, kommer så til at se sådan ud:

<body onload="denKodeDuHarIdag();posMain();"><!-- Dit bodytag skal næsten ikke ændres, men det er med for tydelighed -->
<div id="main">
<div id="content">

<!-- Her sætter du alt det, som idag er imellem body og /body -->

</div></div>
</body>

javascriptet til positionering ser så sådan ud:

function posMain(){
  if(navigator.userAgent.indexOf('MSIE')>0){
    var mainH = document.getElementById("main").offsetHeight;
    var cont = document.getElementById("content");
    cont.top = ((mainH-cont.offsetHeight)/2)+'px';
  }
}

-- og egentlig kunne jeg jo ligesågodt have brugt .all, men vaner ...
Avatar billede badut Nybegynder
06. april 2004 - 09:32 #4
Hej igen, ja der er jo en grund til at jeg bruger Frontpage og det er jo fordi vi er nogen analfabeter til det her =) - nu har vi prøvet at klippe og klistre din kode ind i vores.... men men det virker ikke. Måske og det er sikkert derfor, så er sætter vi det sikkert ind det forkerte sted =)

Er det muligt, og har du lyst til at fortælle os nøjagtig hvor det skalind henne? Evt. sætte sidekoden ind her, sammen med det du har lavet?
Avatar billede roenving Novice
06. april 2004 - 22:48 #5
Det burde virke, hvis du sætter dette ind i stedet for _alt_ fra </head> og til slut ...

(Her er det forsiden !-)

<style type="text/css">
html,body{height:100%}
#main{
  height:100%;
  text-align:center;
}
#content{
  margin:auto;
  text-align:left;
  height:480px;
  width:640px;/*Højde og bredde skal du selvfølgelig sætte, som du har behov for*/
  /*Top skal sættes for ie og andre, som ikke forstår margin:auto;*/
}
</style>
<script type="text/javascript">
function posMain(){
  if(navigator.userAgent.indexOf('MSIE')>0){
    var mainH = document.getElementById("main").offsetHeight;
    var cont = document.getElementById("content");
    cont.top = ((mainH-cont.offsetHeight)/2)+'px';
  }
}
</script>
</head>
<body onload="posMain();FP_preloadImgs(/*url*/'buttonB.gif', /*url*/'buttonC.gif', /*url*/'button33.gif', /*url*/'button34.gif', /*url*/'button36.gif', /*url*/'button37.gif', /*url*/'button39.gif', /*url*/'button3A.gif', /*url*/'button3F.gif', /*url*/'button40.gif')">
<div id="main">
<div id="content">
<p><!--[if gte vml 1]><v:shapetype id="_x0000_t202"
coordsize="21600,21600" o:spt="202" path="m,l,21600r21600,l21600,xe">
<v:stroke joinstyle="miter"/>
<v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1025" type="#_x0000_t202" alt="" style='position:absolute;
left:159.75pt;top:55.5pt;width:448.5pt;height:41.25pt;z-index:1' filled="f"
stroked="f">
<v:textbox>
<table cellspacing="0" cellpadding="0" width="100%" height="100%">
    <tr>
        <td align="center"><b><font size="4" color="#848484">KONTRAST&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        STRUKTUR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; BALANCE</font></b></td>
    </tr>
</table>
</v:textbox>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
absolute;z-index:1;left:213px;top:74px;width:602px;height:59px'><img width=602 height=59 src="default_files/image001.gif" v:shapes="_x0000_s1025"></span><![endif]>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;

<a href="profil.htm">
<img border="0" id="img9" src="button3E.gif" height="20" width="100" alt="Profil" fp-style="fp-btn: Jewel 2; fp-font: Verdana; fp-font-color-normal: #808080; fp-font-color-hover: #FFFFFF; fp-transparent: 1" fp-title="Profil" onmouseover="FP_swapImg(1,0,/*id*/'img9',/*url*/'button3F.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img9',/*url*/'button3E.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img9',/*url*/'button40.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img9',/*url*/'button3F.gif')"></a></p>
<div style="position: absolute; top: 96px; left: 52px; width: 170px; height: 407px; z-index: 1">
    <img border="0" src="front.jpg" width="191" height="399"></div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<a href="salg.htm">
<img border="0" id="img6" src="button32.gif" height="20" width="100" alt="Til salg" onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button33.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button32.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button34.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button33.gif')" fp-style="fp-btn: Jewel 2; fp-font: Verdana; fp-font-color-normal: #808080; fp-font-color-hover: #FFFFFF; fp-transparent: 1" fp-title="Til salg"></a></p>
<p>&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<a href="privat.htm">
<img border="0" id="img7" src="button35.gif" height="20" width="100" alt="Privat eje" onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'button36.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button35.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'button37.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'button36.gif')" fp-style="fp-btn: Jewel 2; fp-font: Verdana; fp-font-color-normal: #808080; fp-font-color-hover: #FFFFFF; fp-transparent: 1" fp-title="Privat eje"></a></p>
<p>&nbsp;</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<a href="inspiration.htm">
<img border="0" id="img8" src="button38.gif" height="20" width="100" alt="Inspiration" onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'button39.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'button38.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'button3A.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'button39.gif')" fp-style="fp-btn: Jewel 2; fp-font: Verdana; fp-font-color-normal: #808080; fp-font-color-hover: #FFFFFF; fp-transparent: 1" fp-title="Inspiration"></a></p>
<p>&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
<a href="kontakt.htm">
<img border="0" id="img1" src="buttonA.gif" height="20" width="100" alt="Kontakt" fp-style="fp-btn: Jewel 2; fp-font: Verdana; fp-font-color-normal: #808080; fp-font-color-hover: #FFFFFF; fp-transparent: 1" fp-title="Kontakt" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonB.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonA.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonC.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonB.gif')"></a></p>
<div style="position: absolute; top: 210px; left: 558px; width: 121px; height: 281px; z-index: 2">
    <img border="0" src="profil.JPG" width="121" height="281"></div>
<div style="position: absolute; top: 498px; left: 68px; width: 167px; height: 81px; z-index: 3">
    <img border="0" src="sign-nagativ.gif" width="167" height="81"></div>
</div></div>
</body>
</html>
Avatar billede badut Nybegynder
14. april 2004 - 09:38 #6
Tusind tak - det virker =)
Avatar billede badut Nybegynder
14. april 2004 - 09:38 #7
Læg et svar, for point..
Avatar billede roenving Novice
14. april 2004 - 22:35 #8
Velbekomme '-)
Avatar billede roenving Novice
16. april 2004 - 20:53 #9
-- og tak for points ;~}
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
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
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 3 29/09/202410:58 20/03/202513:38
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
Seneste spørgsmål Seneste aktivitet
I dag 19:11 Ændre autoudfyld i Outlook og Word Af TTA i Office & Kontorpakker
I dag 12:27 Office Pro 2019 forsvinder Af mort1 i Office & Kontorpakker
I går 16:34 Se filmen : "Vi, som går køkkenvejen" (Hovedperson : Birgitte Reimer Af Ikke-ekspert i Fri debat
02/0719:07 Mellem tidspunkter Af nyhavn18 i Excel
02/0710:02 Oversigt over antal feriedage Af AnjaJesse i Excel
White papers
Flere white papers »


Premium
Teaser billede
Vil fyre tusindvis af ansatte globalt: Nu reagerer Microsofts danske organisation med 800 medarbejdere
Læs mere »
Staten binder sig med ny aftale til Microsoft i usædvanlig lang tid - og det er der en særlig årsag til
Pengene vælter ud af den danske Dynamics-kæmpe Cepheo i selskabets andet leveår - men forretningen buldrer frem
Du skal opdatere hurtigst muligt: Alvorlig sårbarhed opdaget i Citrix-software
Se alle »
Computerworld
Teaser billede
Danmarks største fiberselskab skifter navn: Norlys skal ikke længere hedde Norlys
Læs mere »
Glemte at fjerne adgang for suspenderet it-medarbejder: Næste dag var kunder i Tyskland og Bahrain låst ude
Amerikansk koncern med 700 ansatte i Danmark: Sender besked til kunder 21 måneder efter storstilet angreb
Aktie-kursen ottedoblet på fire år: Er nu verdenshistoriens mest værdifulde selskab
Se alle »
CIO
Teaser billede
Microsoft kæmper med at få Copilot ud over rampen – og det skyldes især én ting
Læs mere »
Her står medarbejderne for at ansætte og fyre - og det har gjort rekruttering af it-professionelle langt lettere
Rigspolitiet gør klar til stort opgør med it-evighedskontrakter: Søger hjælp fra leverandørerne
Mange CISO'er mistrives i jobbet: Nu stiller tidligere cyber security-chef i Energinet og Ørsted et kontroversielt forslag
Se alle »
Job & Karriere
Teaser billede
Fungerede ikke: Dropper AI som erstatning for kundeservice-medarbejdere - har nu brug for nye folk
Læs mere »
It-chef og halv it-afdeling fyret i forsikringsselskab på grund af kommentar om potteplante
Danske it-folk tør ikke længere skifte job hele tiden - og det er der en særlig årsag til
Itm8 fyrer: Opsiger ansatte og reorganiserer
Se alle »
White paper
Teaser billede
Revolutionér kundeoplevelsen med AI og automatisering
Læs mere »
Sådan samler du virtualisering og containerdrift i én løsning
Sådan automatiserer du vagtplanlægningen med AI
Sikkerhed gjort enkelt: Beskyt din virksomhed direkte i browseren
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »