html - Altid centreret - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript html css

<< < 1 2 > >>

Bruger #14317 @ 28.08.12 11:49

Hej allesammen,

Jeg har et meget langt billede som er 8000 i width, fordi når man klikker på et menupunkt kører den hen til et andet punkt på billedet.

Så jeg vil høre om man altid kan centrere det punkt det kører hen til uanset skærmens størelse og opløsning.

Jeg ved ikke om der skal bruges javascrip, eller måske bare css og html.

Jeg håber der er en der kan hjælpe mig.
Og håber i forstår hvad jeg mener.

På forhånd tak

12 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #15853 @ 28.08.12 23:01

Ja det billede som skal centreres og som er de billeder som slider hver gang man klikker på et link. de er width: 1024px

det er dem du mente ik?

Jeg ved ikke om jeg også skulle ændre noget ved mit lange billede, som er den de små billeder slider på.

Der har jeg nemlig ikke ændret noget, det kunne jeg ikke helt forstå om jeg skulle.

hvis du for eksempel zoomer ud i browseren, så kan du se at det er et langt billede som slider.

Jeg ved ikke om du forstod det?

Håber stadig der er noget at gøre

Har du prøvet med margin-left: auto; på din div der holder dine billeder? Det burde rykke div'en ind i midten af skærmen.

Bruger #13010 @ 28.08.12 11:53

440

Har du link så vi kan se ?

Bruger #17081 @ 28.08.12 11:57

1.258

det kommer lidt an på hvordan du har sat det op, hvis du har et link eller noget i den stil, lige som @scootergrisen siger, kan det være nemmere, at kommentere på.

Bruger #14317 @ 28.08.12 12:01

jeps,

linket er: http://wearecrunch.dk/gammelsjuf/

lige nu er headeren centreret.
men bodyen som er det lange billede har bare en fast margin nu, og det er den jeg ønsker altid skal centreres.

Hvis i klikke på menuen i headeren kan i se at den slider til det næste billede.

Jeg tænker at jeg nok hvis det er muligt at jeg skal ved hjælp af javascript finde ud af hvor stor brugerens skærm eller browser er, og så centrere det i forhold til det.

Men jeg ved ikke om detter er muligt.

Jeg har fundet noget kode, som muligvis kunne gøre det, men jeg er ikke så god til javascript, så jeg ved ikke helt hvad jeg skal ændre for at det kunne virke til min webside.

Her er koden:

JScript kode

 // JavaScript Document
 
     function getObj(name){
     if (document.getElementById){
     this.obj = document.getElementById(name);
     this.style = document.getElementById(name).style;
     }
     else if (document.all){
     this.obj = document.all[name];
     this.style = document.all[name].style;
     }
     }
      
     function getWinSize(){
     var iWidth = 0, iHeight = 0;
      
     if (document.documentElement && document.documentElement.clientHeight){
     iWidth = parseInt(window.innerWidth,10);
     iHeight = parseInt(window.innerHeight,10);
     }
     else if (document.body){
     iWidth = parseInt(document.body.offsetWidth,10);
     iHeight = parseInt(document.body.offsetHeight,10);
     }
      
     return {width:iWidth, height:iHeight};
     }
      
     function resize_id(obj) {
     var oContent = new getObj(obj);
     var oWinSize = getWinSize();
     if ((oWinSize.height - parseInt(oContent.obj.offsetTop,10))>0)
     oContent.style.height = (oWinSize.height - parseInt(oContent.obj.offsetTop,10));
     }
      
     window.onresize = function() { resize_id('divresize'); }

og jeg ville have den til at rezise en div som har id "divrezise" så den fylder hele browseren, og derefter ville jeg kunne centrere det som er inde i den div.

det er ihvertfald den løsning jeg kunne tænke mig til.

Jeg ved ikke hvad jeg skal skrive i de felter der står (name)

jeg håber der er en der kan hjælpe.
Tak

Indlæg senest redigeret d. 28.08.2012 14:14 af Bruger #14317

Bruger #15853 @ 28.08.12 21:32

jeps,

linket er: http://wearecrunch.dk/gammelsjuf/

lige nu er headeren centreret.
men bodyen som er det lange billede har bare en fast margin nu, og det er den jeg ønsker altid skal centreres.

Hvis i klikke på menuen i headeren kan i se at den slider til det næste billede.

Jeg tænker at jeg nok hvis det er muligt at jeg skal ved hjælp af javascript finde ud af hvor stor brugerens skærm eller browser er, og så centrere det i forhold til det.

Men jeg ved ikke om detter er muligt.

Jeg har fundet noget kode, som muligvis kunne gøre det, men jeg er ikke så god til javascript, så jeg ved ikke helt hvad jeg skal ændre for at det kunne virke til min webside.

Her er koden:

JScript kode
 // JavaScript Document
 
     function getObj(name){
     if (document.getElementById){
     this.obj = document.getElementById(name);
     this.style = document.getElementById(name).style;
     }
     else if (document.all){
     this.obj = document.all[name];
     this.style = document.all[name].style;
     }
     }
      
     function getWinSize(){
     var iWidth = 0, iHeight = 0;
      
     if (document.documentElement && document.documentElement.clientHeight){
     iWidth = parseInt(window.innerWidth,10);
     iHeight = parseInt(window.innerHeight,10);
     }
     else if (document.body){
     iWidth = parseInt(document.body.offsetWidth,10);
     iHeight = parseInt(document.body.offsetHeight,10);
     }
      
     return {width:iWidth, height:iHeight};
     }
      
     function resize_id(obj) {
     var oContent = new getObj(obj);
     var oWinSize = getWinSize();
     if ((oWinSize.height - parseInt(oContent.obj.offsetTop,10))>0)
     oContent.style.height = (oWinSize.height - parseInt(oContent.obj.offsetTop,10));
     }
      
     window.onresize = function() { resize_id('divresize'); }
og jeg ville have den til at rezise en div som har id "divrezise" så den fylder hele browseren, og derefter ville jeg kunne centrere det som er inde i den div.

det er ihvertfald den løsning jeg kunne tænke mig til.

Jeg ved ikke hvad jeg skal skrive i de felter der står (name)

jeg håber der er en der kan hjælpe.
Tak

Er ikke sikker på at du behøver JavaScript. :-)
Tjek dette link ud...

Bruger #14317 @ 28.08.12 22:06

Hmm,

Jeg prøvede lige den første mulighed, men det virker ikke

Alle billederne ender bare oven i hinanden og det er samme sted og er blevet gjort mindre.

Jeg lader det lige være i 10 minutter, hvis du vil se hvad der sker og du måske har en bedre ide.

min css ser nu sådan her ud:

CSS kode

 #img_margin{
     /* Set rules to fill background */
     min-height: 100%;
     min-width: 1024px;
     
     /* Set up proportionate scaling */
     width: 100%;
     height: auto;
     
     /* Set up positioning */
     position: fixed;
     top: 0;
     left: 0;
 }
 
 
 
 #first_img_margin{
     /* Set rules to fill background */
     min-height: 100%;
     min-width: 1024px;
     
     /* Set up proportionate scaling */
     width: 100%;
     height: auto;
     
     /* Set up positioning */
     position: fixed;
     top: 0;
     left: 0;
 
 }

og min html som disse billeder og denne css er tilknyttet ser således ud:

HTML kode

 <div id="sliding-background">
             <div id="main-bg">
                 <span id="first_img_margin">
                 <img src="images/bg_side1.jpg" />
                 </span>
                 <span id="img_margin">
                 <img src="images/bg_side2.jpg" />
                 </span>
                 <span id="img_margin">
                 <img src="images/bg_side3.jpg" />
                 </span>

Jeg håber stadig du kan hjælpe.
Tak

Bruger #15853 @ 28.08.12 22:22

Hmm,

Jeg prøvede lige den første mulighed, men det virker ikke

CSS kode

 #img_margin{
     /* Set rules to fill background */
     min-height: 100%;
     min-width: 1024px;
     
     /* Set up proportionate scaling */
     width: 100%;
     height: auto;
     
     /* Set up positioning */
     position: fixed;
     top: 0;
     left: 0;
 }
 
 
 
 #first_img_margin{
     /* Set rules to fill background */
     min-height: 100%;
     min-width: 1024px;
     
     /* Set up proportionate scaling */
     width: 100%;
     height: auto;
     
     /* Set up positioning */
     position: fixed;
     top: 0;
     left: 0;
 
 }

og min html som disse billeder og denne css er tilknyttet ser således ud:

HTML kode

 <div id="sliding-background">
             <div id="main-bg">
                 <span id="first_img_margin">
                 <img src="images/bg_side1.jpg" />
                 </span>
                 <span id="img_margin">
                 <img src="images/bg_side2.jpg" />
                 </span>
                 <span id="img_margin">
                 <img src="images/bg_side3.jpg" />
                 </span>

Jeg håber stadig du kan hjælpe.
Tak

Det var da ærgeligt at det ikke virkede... Har du husket at sætte min-width til samme bredde som dit billede? :-)

Bruger #14317 @ 28.08.12 22:39

Ja det billede som skal centreres og som er de billeder som slider hver gang man klikker på et link. de er width: 1024px

det er dem du mente ik?

Jeg ved ikke om jeg også skulle ændre noget ved mit lange billede, som er den de små billeder slider på.

Der har jeg nemlig ikke ændret noget, det kunne jeg ikke helt forstå om jeg skulle.

hvis du for eksempel zoomer ud i browseren, så kan du se at det er et langt billede som slider.

Jeg ved ikke om du forstod det?

Håber stadig der er noget at gøre

Bruger #14317 @ 28.08.12 23:07

Ja jeg går ud fra du mener det her:

CSS kode

 #first_img_margin{
 margin-left:0 auto;
 }

men der sker ikke noget når jeg gør det

html'en som er tilknyttet det ser sådan ud

HTML kode

 <span id="first_img_margin">
 <img src="images/bg_side1.jpg" />
 </span>

Bruger #15853 @ 28.08.12 23:42

Ja jeg går ud fra du mener det her:

CSS kode
 #first_img_margin{
 margin-left:0 auto;
 }
men der sker ikke noget når jeg gør det

html'en som er tilknyttet det ser sådan ud

HTML kode
 <span id="first_img_margin">
 <img src="images/bg_side1.jpg" />
 </span>

Kan du ikke bare lave en ny div uden om alle de der billeder, og så sætte margin: 0 auto; ind?

<< < 1 2 > >>

Altid centreret

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler