Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

tekst over afbeelding in HTML

tsjadrik - 27/07/2011 14:32 (laatste wijziging 27/07/2011 15:04)

Lid

Beste allen,
Ik wil graag een tekst zetten in de zwarte afbeelding in HTML maar helaas lukt het me niet. Kan iemand mij helpen?

html4strict code - Bekijk de code zonder highlighting - Klap code in

<HTML>
  <HEAD>
    <TITLE>fisu</TITLE>
    <BASE href="http://fisu.nl/">
    <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <META name=GENERATOR content="MSHTML 8.00.7600.16821">
    <META name=Keywords content="likeur sterke drank fishermentsfriend, fisherment, mint, alcohol">
    <META name=Description content="fisu home">
  </HEAD>
  <BODY background=homeplate aLink=#ff0000 link=#ff0000 bgColor=#000000 text=#ff0000 vLink=#ff4500>
    <P align=justify>d<IMG style="WIDTH: 527px; HEIGHT: 323px" src="http://fisu.nl/home1_JPG.jpg" width=1579 height=1049></P>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisuhome.html" target="HOME">HOME</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisufisu.html" target="Fisu">FISU</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisulaku.html" target="Laku">LAKU</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisushop.html" target="Shop">SHOP</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisucontact.html" target="Contact">CONTACT</A>
        </STRONG>
      </FONT>
    </BUTTON>
  </BODY>
</HTML>

<HTML>
  <HEAD>
    <TITLE>fisu</TITLE>
    <BASE href="http://fisu.nl/">
    <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <META name=GENERATOR content="MSHTML 8.00.7600.16821">
    <META name=Keywords content="likeur sterke drank fishermentsfriend, fisherment, mint, alcohol">
    <META name=Description content="fisu home">
  </HEAD>
  <BODY background=homeplate aLink=#ff0000 link=#ff0000 bgColor=#000000 text=#ff0000 vLink=#ff4500>
    <P align=justify>d<IMG style="WIDTH: 527px; HEIGHT: 323px" src="http://fisu.nl/home1_JPG.jpg" width=1579 height=1049></P>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisuhome.html" target="HOME">HOME</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisufisu.html" target="Fisu">FISU</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisulaku.html" target="Laku">LAKU</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisushop.html" target="Shop">SHOP</A>
        </STRONG>
      </FONT>
    </BUTTON>
    <BUTTON>
      <FONT color=#ff0000>
        <STRONG>
          <A href="fisucontact.html" target="Contact">CONTACT</A>
        </STRONG>
      </FONT>
    </BUTTON>
  </BODY>
</HTML>

Ik reken op jullie steun

6 antwoorden

Gesponsorde links

Abbas - 27/07/2011 15:04
Crew .NET		Volgende keer codetags gebruiken bij stukken code!

MiST - 27/07/2011 18:46

Lid

je kan de afbeelding instellen als achtergrond (CSS eigenschap) of je kan werken met relatieve positionering.

eerste optie:

css code - Bekijk de code zonder highlighting - Klap code in

                background-image: url(http://link/naar/je/afbeelding.jpg);

background-image: url(http://link/naar/je/afbeelding.jpg);

tweede optie:

html code - Bekijk de code zonder highlighting - Klap code in

                <div id="afbeelding-container">
    <img src="link/naar/je/afbeelding" id="afbeelding" />
    <div id="afbeelding-tekst">

    </div>
</div>

            
<div id="afbeelding-container">
    <img src="link/naar/je/afbeelding" id="afbeelding" />
    <div id="afbeelding-tekst">
 
    </div>
</div>
 

css code - Bekijk de code zonder highlighting - Klap code in

                #afbeelding-container {
    position: relative;
    padding: 0px;
}

#afbeelding {
    border: 0px;
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    width: /*breedte van afbeelding*/px;
    height: /*hoogte van afbeelding*/px;
}

#afbeelding-tekst {
    position: relative;
    top: afstand tot bovenrand vd figuur;
    left: afstand tot linkerrand van de figuur;
    z-index: 1; 
}

            
#afbeelding-container {
    position: relative;
    padding: 0px;
}
 
#afbeelding {
    border: 0px;
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    width: /*breedte van afbeelding*/px;
    height: /*hoogte van afbeelding*/px;
}
 
#afbeelding-tekst {
    position: relative;
    top: afstand tot bovenrand vd figuur;
    left: afstand tot linkerrand van de figuur;
    z-index: 1; 
}
 

Ik heb deze code niet getest maar ik denk dat ie zou moeten werken... Verder tweaken is aangeraden

Wave6 - 28/07/2011 09:41
PHP beginner		Dit kan het makkelijkst met "position: absolute;" (css). http://www.site...ing_layers

tsjadrik - 28/07/2011 12:11
Lid		Hoi allen, Ik heb een poging gedaan maar het is helaas niet gelukt. Maar in ieder geval dank voor de reacties. Maar hier is mijn probleem nog niet mee opgelost. Zou misschien iemand zo'n tekstvak kunnen plaatsen in de codes die ik meegestuurd heb zodat het voor mij een kwestie is van copy - paste? Het tekstvlak dient in de "golf" te komen. Ik zou erg geholpen zijn. Alvast dank dank!!!

Aar - 28/07/2011 12:29
PHP interesse		Niet lullig bedoeld, maar deze code is behoorlijk verouderd en lijkt uit het jaar 1999 te stammen? Hoe kom je aan deze code? Zelfgemaakt? => Leer (X)HTML en CSS Uit een programma => Updaten of ander recent programma gebruiken. We kunnen wel juiste code geven, maar het komt er op neer, dat als je het goed wilt, de hele code herschreven moet worden.

tsjadrik - 28/07/2011 12:46
Lid		Hallo Aar, Ik heb, zoals je wellicht hebt begrepen, niet heel veel verstand van deze materie.... Bij een hosting provider kreeg ik een "site editor bouwer". Daar wordt wat ik opschrijf omgezet in bovenstaande codes.... Dus vandaar. Het is in eerste instantie voor mij belangrijk dat de site zo snel mogelijk online komt te staan. Daarna kan ik altijd naar een pro gaan om een en ander te veranderen. Gr

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten