Avatar billede NielsErikP Mester
15. oktober 2010 - 16:57 Der er 25 kommentarer og
2 løsninger

Centrering af (JPG) i HTML...???

Hej...
Spurgte for noget tid her på eksperten.dk, hvordan man kom igang med hejmmeside programmering.
Fik et indtryk af HTML.. Og siden www.w3schools.com
Nu er jeg imidlertidigt stødt på et problem...  Hvordan centrer man sit JPG billed, centrer den på siden mener jeg..
Følgende har jeg skrevet...:

<img border=5 src="C:\users\starman\pictures\Bamse.jpg" align="middle" width="120" height="142" alt="Starman Bamsen" > </img>

Men den ALIGN virker kun med "right".
Håber der er en "Hardcore" der kan give en nybegynder lidt hjælp.

På forhånd tak..!!
Avatar billede noltus Novice
15. oktober 2010 - 17:11 #1
Du skal bruge CENTER kommandoen

<CENTER><IMG SRC="dit billed"></CENTER>
Avatar billede Slettet bruger
15. oktober 2010 - 17:14 #2
Er det ikke noget med at <center> tagget bliver set meget ned på af W3C?

Et alternativ ville være:
style="display:block;text-align:center"

Altså:
<img style="display:block;text-align:center" border=5 src="C:\users\starman\pictures\Bamse.jpg" width="120" height="142" alt="Starman Bamsen" > </img>

Forresten, selvom tags virker med store bogstaver, bør du skrive dem med småt for at være fremtids sikret.
Avatar billede keysersoze Guru
15. oktober 2010 - 17:57 #3
hvis vi skal begynde at diskutere hvad der bliver set ned på så kan vi lige så godt tage det hele med, nemlig at border-attributten er lige så dårlig at bruge - de er nemlig begge deprecated.

Ellers er det korrekt at der bør benyttes CSS i form af text-align: center;
Avatar billede NielsErikP Mester
15. oktober 2010 - 18:08 #4
Hej...
Det var hurtigt, der kom et svar..
Har prøvet begge dele både Tag'set <center>.. og style attributen.
Har valgt at bruge style, da jeg også følger W3C, de har meget med at fortælle, hvad der er god skik.
Men da begge dele gør det jeg søgte bliver i nød til at dele.
Måske en af jer havde lyst til at fortælle, hvad "display:block" gør og evt. hvor man kan få mere at vide om den.
Avatar billede Slettet bruger
15. oktober 2010 - 18:30 #5
Først og fremmest et link i tilfælde af at min forklaring er dårlig: http://www.w3schools.com/css/pr_class_display.asp

Men altså, display vælger hvordan et element (så som en paragraf eller et billede) skal vises.

Som standard er display sat til inline, dvs. ingen ny linje før og efter elementet.

Hvis du sætter den til block, vil der derimod være et linje skift før og efter. Så når den er sat til block vil der ikke kunne være et HTML element ved siden af den.

Så det fixer det der stod i vejen for at bruge text-align. For du kan jo ikke sætte noget tekst i venstre side og noget andet tekst på samme linje i midten.

Håber min forklaring giver mening. :)
Avatar billede Slettet bruger
15. oktober 2010 - 19:18 #6
Den her side kunne godt bruge en edit knap eller noget lignende. :/

Det jeg mente med "For du kan jo ikke sætte noget tekst i venstre side og noget andet tekst på samme linje i midten." var, at du ikke kan sætte align på noget tekst til venstre og sætte align på noget tekst i samme linje til midten.
Avatar billede NielsErikP Mester
15. oktober 2010 - 22:57 #7
Hej...
Nej det kan jeg forstå... jeg HELT ny og er først ved at begynde at prøve på at lære HTML... Som jeg kan forstå er det man starter med.
Så CSS på 

    http://www.w3schools.com/css/pr_class_display.asp

er vel næste skridt efter HTML eller hvad..??
Men nu til det det handler om...

Når jeg nu har brugt "style="display:block;text-align:center"
er skærmen over bunden af billedet(JPG'et)så udenfor min rækkevidde...
For jeg har nu med jeres hjælp fået mit billed ind på midten, min mening var så at have nogle links i venstre side af skærmen, hvor det først skulle være i en horizontal linje til midten af billedet. Men det måske uopnåeligt med HTML kun.
Håber der er en der giver sin respons.
Avatar billede Slettet bruger
16. oktober 2010 - 01:22 #8
Ja, det ville være en god ide at lære CSS efter HTML.

Jeg ved ikke om det er muligt på den måde som du vil have det, men det lykkedes mig da at få gjort så der kunne stå én linje af tekst ved siden af.

Jeg ville oprindeligt have lavet to eksempler, fordi jeg ikke er ikke er sikker på hvordan du vil have det til at se ud. Men jeg er alt for træt til at tænke lige nu, så det må blive i morgen, med mindre det skal se ud som det følgende eksempel.

Eksempel:
http://myhideout.nfshost.com/other/wrap1.html

Koden:
<p>En lang linje før linjen med billedet. En lang linje før linjen med billedet.<br />Noget tekst..<img src="http://www.google.dk/intl/en_com/images/srpr/logo1w.png" text-align="center"/>Mere tekst.<br />En lang linje efter linjen med billedet. En lang linje efter linjen med billedet.</p>

Nu skal det lige siges, at jeg selv er ret ny til HTML osv. så det er begrænset hvor meget jeg kan hjælpe dig. ;)
Avatar billede NielsErikP Mester
16. oktober 2010 - 10:39 #9
Hej..
Jamen først lige tusind tak for dit forsøg på at hjalpe...ny eller ej.

Nu prøvede jeg dette eksempel..:

    http://myhideout.nfshost.com/other/wrap1.html

Så jeg lavede følgende:

<html>
<head>
      <title>Centrering af billed, med tekst på sammen linje som billedet..!! </title>
</head>
<body>
  <p> Dette er tekst før billedet. <br /> Teksten ser sådan ud.
          <img border=5 src="C:\users\starman\pictures\Bamse.jpg" width="120" height="142" alt="Starman Bamsen"  text-align="center" </img>
          Dette er tekst efter billedet.Dette er så teksten . </p>   

</body>
</html>

Og det gav følgende resultat:

      Dette er tekst
        før billedet . -->  -------------
                            !            !
                            !            !
                            !  Billed    !
                            !            !
                            !            !
                            !            !
                            !            !
                            !            !
Teksten ser sådan ud -->  !-------------! -->Dette er teksten
                                              efter billedet.
                                              Dette er så tekst-
                                              en.


Og det jeg gik efter var sådan her :

                          !--------------!
                          !              !
                          !              !
                          !              !
  Dette er tekst før -->  !  Billed      ! --> tekst efter bill.
  billeder.              !              !
                          !              !
Teksten ser sådan ud -->  !              !       
                          !              !
                          !              !
                          !              !
                          !--------------!



Håber der er en der har en løsning .. på forhånd tak
Avatar billede NielsErikP Mester
16. oktober 2010 - 10:41 #10
Nå  det blev da vist en værre gang rod... nu havde jeg ellers lige brugt tid på at skabe noget der skulle ligne 2 billeder.
Avatar billede Slettet bruger
16. oktober 2010 - 11:06 #11
Måtte bare kopiere de to "billeder" ind i notepad for at se dem ordenligt. :)

Men problemet ligger, at man vist ikke kan have flere linjer ved siden af billedet. Men nu må du ikke hænge mig op på det jeg siger, for jeg er ikke helt sikker.

Du kan dog have tekst i midten ved siden af billedet f.eks.:
http://myhideout.nfshost.com/other/wrap2.html

Koden:
<p>En lang linje før linjen med billedet. En lang linje før linjen med billedet.<br />Noget tekst..<img src="http://www.google.dk/intl/en_com/images/srpr/logo1w.png" align="middle" />Mere tekst.<br />En lang linje efter linjen med billedet. En lang linje efter linjen med billedet.</p>

Bemærk at jeg brugte align="middle" og ikke text-align="center".
Avatar billede NielsErikP Mester
16. oktober 2010 - 11:22 #12
Hej...
Ej.. det lyder godt, så fik du da billederne rigtigt ;)
Prøver lige at tjekke dine ud der, men har lige selv fundet et spørgsmål her på eksperten.dk, er du også interesseret så tjek den :

http://www.eksperten.dk/spm/454427

Vender frygtligt tilbage.. ;)
Avatar billede Slettet bruger
16. oktober 2010 - 11:46 #13
Uha, så nu tror jeg endelig jeg vågnede rigtigt op.
Du kan selvfølgelig bruge tables, og sikkert også <div> til at få den ønskede effekt.

Eksempel med brug af tables:
http://myhideout.nfshost.com/other/wrap3.html

Koden:
<table align="center">
    <tr>
    <td><img src="http://www.google.dk//intl/en_com/images/srpr/logo1w.png" />
    </td>
    <td>
    Noget tekst<br />Noget tekst<br />Noget tekst<br />Noget tekst<br />Noget tekst
    </td>
    </tr>
</table>

Du kan også få tekst til venstre for billedet samtidig, kig på http://www.w3schools.com/tags/tag_table.asp hvis du er i tvivl om hvordan.
Avatar billede keysersoze Guru
16. oktober 2010 - 12:27 #14
Tables bør kun benyttes til tabulleret opsætning af data - ikke design. Sæt float: left på som style på dit billede og teksten vil placere sig som ønsket om billedet.
Avatar billede NielsErikP Mester
16. oktober 2010 - 13:25 #15
Hej...
Ja okay.. Har prøvet sådan her, men det ser jo også ud som om , det er "FLOAT:LEFT", men dog også tables og div..:
(Her r HTML'en) :


<html>
<head>
      <title>Tekst på sammen linje som billedet..!! </title>
</head>
<body>
    <tr>
    <div style="float:left;font-size:20;"> <br /> <br /> <br />
    <ul>
        <li> <a href="side1.html"> Personlige interesser. </a> <br/> </li>
        <li> <a href="side2.html"> Galleri. </a> </div> </li>
    </ul>
    <div> <img  style="display:block;text-align:center;" width="200px" height="200px" ";margin-left:auto;margin-right:auto;"
                src="C:\users\starman\pictures\Bamse.jpg" alt ="Starman Bamsen";
          /> </div> </tr>    

</body>
</html>


Dog stadig et problem, billedet er ikke HELT centreret.
Avatar billede Slettet bruger
16. oktober 2010 - 13:57 #16
Keysersoze, kan du komme med et eksempel? Hvis du bare sætter float:left på billedet vil den jo ikke være centreret som han ønskede.

Og lige et spørgsmål fra min side af, <table> behøves ikke for at bruge <tr> tagget eller hvad?
Avatar billede keysersoze Guru
17. oktober 2010 - 12:09 #17
skal tekst gå både højre og venstre om et billede kan det ikke floates - så er du nødt til alternative muligheder.

tr kræver en table jo.
Avatar billede NielsErikP Mester
17. oktober 2010 - 12:41 #18
Hej... keysersoze/fault..

Nu har jeg prøvet at arbejde med det, følgende HTML :

----------------------------------------------------------------
<html>
<head>
      <title>Tekst på sammen linje som billedet..Og billede centreret..!! </title>
</head>
<body>
   
    <div style="float:left;font-size:22"> <br /> <br /> <br />            <br />
                         
        <ul>
    <li> <a href="side1.html"> Personlige interesser. </a> <br/> </li>
    <li> <a href="side2.html"> Galleri. </a> </div></li> 
                   
    <div>  <img style="display:block;text-align:center" width="200px" height="200px"        src="C:\users\starman\pictures\Unge dage\img016.jpg" alt ="Niels Erik Pedersen"; /> </div>       
    </ul>
       
</body>
</html>

----------------------------------------------------------------
Gør at teksten(linksene) godt nok er på venstre side og på samme linje som billedet. Men billedet kommer til at ligge på den højre halvdel af skærmen. Altså ikke helt centreret.

Gør man følgende istedet :

---------------------------------------------------------------

<html>
<head>
      <title>Tekst på sammen linje som billedet..Og billede    centreret..!! </title>
</head>
<body>


<div>  <img style="display:block;text-align:center" width="200px" height="200px"                   src="C:\users\starman\pictures\Unge dage\img016.jpg" alt ="Niels Erik Pedersen"; />


<div style="float:left;font-size:22"> <br /> <br /> <br />
                         
        <ul>
    <li> <a href="side1.html"> Personlige              interesser.</a>      <br/> </li>
    <li> <a href="side2.html"> Galleri. </a> </div></li> 
    </div>       
    </ul>
       
</body>
</html>

--------------------------------------------------------------

Så bliver billedet centreret, men så kommer Linjerne(linksene) godt nok til at ligge til venstre, men i en linje under billedet. Altså ikke på samme linje.

Håber der er en med lidt hjælp, ebt. dig KEYSER.
Avatar billede Slettet bruger
17. oktober 2010 - 16:01 #19
Jeg er ved at løbe helt tør for ideer, men jeg kom da på en rimelig kompliceret måde at gøre det på ved hjælp af <div> tags.

Eksempel:
http://myhideout.nfshost.com/other/wrap4.html

Koden:
<p>EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST</p>
<div style="width:550px;margin-left:auto;margin-right:auto">
<div style="float:left">
<img src="http://www.google.dk/intl/en_com/images/srpr/logo1w.png">
</div><p>EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST</p>
<div style="float:right">
<img src="http://www.google.dk/intl/en_com/images/srpr/logo1w.png">
</div><p>EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST</p>
</div>
<p>EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST EN MASSE TEKST</p>
Avatar billede keysersoze Guru
17. oktober 2010 - 16:25 #20
Jeg kan ikke helt gennemskue på din kommentar om du har opnået hvad du vil eller ej - men glem nu ikke en doctype da du ellers ikke kan forvente noget godt resultat. Dernæst, du kan ikke "bare" få tekst på begge sider af et billede hvis det er det du vil - er det det findes løsningen ikke automatisk, så skal du som nævnt ud i alternative løsninger som fx en tabel med tre rækker eller 3 divs på række.
Avatar billede NielsErikP Mester
17. oktober 2010 - 16:44 #21
Hej....
Fault jeg vil prøve din "formel" i #19.

Det har jeg ikke opnået endnu KEYSERSOZE.
Vil du evt. fortælle en nybegynder, hvad en "DOC-type " er..????
Okay alternative løsnunger siger du, prøver ellers at efterleve, hvad du tidligere har sgat her i tråden, at "TABELLER" ikke bruges til design, men kun til tabulleret data.
Evt. hvis du kunne give et hint, hvorledes de 3 div kan løse problemet..
Avatar billede keysersoze Guru
17. oktober 2010 - 17:16 #22
http://www.web-dev.dk/post/DOCTYPE-og-valid-kode-ens-udseende-i-Internet-Explorer-og-FireFox.aspx

Hvis man vil lave noget den nuværende teknologi ikke direkte tillader bliver man nødt til at gøre tingene på en anderledes måde - det kan fx være vha tabeller.

<div style="width: 600px;">
  <div style="width: 250px; float: left;">
    tekst 1
  </div>
  <div style="width: 100px; float: left;">
    billede 1
  </div>
  <div style="width: 250px; float: left;">
    tekst 2
  </div>
  <div style="width: 600px;">
    tekst 3
  </div>
  <div style="clear: both;"></div>
</div>
Avatar billede NielsErikP Mester
18. oktober 2010 - 14:14 #23
Hej...
Ja nu har jeg læst den artikel om DOC TYPER, kan godt se det sunde i at have nogle standarder, men for mit vedkommen er jeg først ved at lære, og når man har fået en del begreb om HTML'en.... ja så kan man jo begynde at rette sin stil ind imod at være "standardiseret". for nu vil jeg bare lege og lege HTML.

KEYSERSOZE... tak for din hjælpp her til sidst med det DIV eksempel. Jeg har selv leget med og prøvet at tilpasse dit eksempel... her er, hvad jeg kom frem til...:

<html>
<head>
      <title>Tekst på sammen linje som billedet..Og billede centreret..!! </title>
</head>
<body  alink="violet" vlink="blue">
   
    <div style="width:1200px" >
        <div style="width:550px;font-size:22px;float:left" >
    <br/> <br/> <br/> <br/> <br/> <br/>
    <ul>
      <li> <a href="side1.html">Personlige interesser.</a>
          </li>
      <li> <a href="side2.html">Galleri.</li>
      </ul>
        </div>
        <div style="width:200px;float:left" >

                BILLEDE
        </div>   
        <div style="clear:both" > </div>
        </div>

Og det må siges at være det jeg tilstræbte..
Endnu engang tak for hjælpen.

Take care.

</body>
</html>
Avatar billede keysersoze Guru
18. oktober 2010 - 14:38 #24
Det er, men al respekt, ikke den rigtige tilgang at have til at lære HTML - dette dels fordi, at hvis du ikke vælger doctype før du lærer html risikerer du bare at lære lidt fra flere forskellige standarder i stedet for at få styr på én og dels, og måske endda primært, kan du ikke forvente at din HTML bliver fortolket som den skal uden en doctype og dermed får du slet ikke det rigtige billede af hvordan de forskellige elementer opfører sig under forskellige forhold.

Det svarer lidt til at du beslutter dig for at lære sprog og så er første side i bogen du kigger i på tysk mens den anden er på spansk, den tredie på engelsk osv.
Avatar billede NielsErikP Mester
18. oktober 2010 - 14:58 #25
Hej...
Kan godt forstå dit synspunkt, og giver dig tildels ret.
Når jeg nu har valgt at prøve at lege og lære HTML, hvad er så din holdning mht. til, hvordan man som nybegynder holder styr på, hvad der hører til hvilke DOC TYPER osv..
Jeg har ger på siden fået foreslået at studere og lære fra www.W3schools.com og ligeledes www.HTML.dk.. Hvilke DOC TYPER kan man så sige man følger, kan kun sige at de på W3schools gør en del ud af at nævne hvad der er og hvad der bliver tilladt i fremtidige HTML'er.
Ville bare lige høre, hvordan man som nybegynder og "støvsugen" alt til sig...kan vide hvilke DOC TYPER man følger.
Avatar billede keysersoze Guru
18. oktober 2010 - 19:12 #26
html.dk ville jeg holde mig fra - w3schools er acceptabel omend ikke perfekt. Det bedste sted at kigge er på w3.org og her er det delt ind efter hver standard som en kodebog heller ikke blander indgredienser fra forskellige opskrifter sammen - se fx http://www.w3.org/TR/html401/
Avatar billede NielsErikP Mester
20. oktober 2010 - 14:07 #27
Hej...
Kan kun sige at jeg er blevet anbefalet www.html.dk og w3schools.com her på siden, siden for ekspertviden, præcis som jeg er blevet anbefalet  http://www.w3.org/TR/html401/ af dig også her på siden, men kan da godt se at som de fortæller på w3schools.com  at alle kan lære HTML, ja så er den på W3.org da en lidt større mundfuld. Men tak for rådet allesammen.

Take care..!!
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
Kurser inden for grundlæggende programmering

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