login  Naam:   Wachtwoord: 
Registreer je!
 Forum

html script tekst over een plaatje (Opgelost)

Offline purers - 05/09/2008 20:55
Avatar van purersNieuw lid   hallo iedereen!  

ik heb een klein probleempje. ik ben pas geleden begonnen met een website te maken bij byethost. ik krijg hulp van een paar vrienden van me, alleen nu heb ik een vraagje die ze niet konden beantwoorden.
ik heb zelf een hele pagina ontworpen dat er aardig goed uit ziet, alleen 1 probleempje.
dit is mijn link:  
purers.byethost16.com

zoals je ziet, zie je mijn plaatje. het probleem is dat ik er geen tekst overheen kan zetten!
ik heb het op google allemaal al proberen te vinden, en heb ook wel een paar sites gevonden die het uitlegde, alleen het werkte alsmaar niet! weet iemand het probleem om op te lossen?

buiten die vraag heb ik ook nog een ander klein vraagje.
je ziet dat om het plaatje nogsteeds witte randen zitten. hij kan ik ervoor zorgen dat het plaatje heel de pagina bedekt?

nouja hopelijk begrijpen jullie me, ik ben nog maar nieuw maar heb echt hulp nodig!
bedankt!  

14 antwoorden

Gesponsorde links
Offline Abbas - 05/09/2008 20:59
Avatar van Abbas Gouden medaille

Crew .NET
Je kan met div's werken. Je plaatst dan een afbeelding in een div met daarover nog een floating div met tekst in. Die div komt dan over de andere div te staan.
Offline daan38 - 05/09/2008 21:06 (laatste wijziging 05/09/2008 21:12)
Avatar van daan38 Nieuw lid Om te beginnen zou ik met div's gaan werken : http://www.site...iv_element
Om het probleem gewoon snel op te lossen gebruik je deze code:

  1. <body background="plaatje.JPG">
  2.  
  3. </body>
  4. </html>
Offline Abbas - 05/09/2008 21:12
Avatar van Abbas Gouden medaille

Crew .NET
@daan38: CODETAGS!!! Ook voor kleine stukken code.
Offline timmie_loots - 05/09/2008 21:13 (laatste wijziging 05/09/2008 21:20)
Avatar van timmie_loots PHP gevorderde Wat titjes aangeeft kan werken, maar dat is waarschijnlijk iets te hoog gegrepen. Simpeler is om het plaatje als achtergrond te gebruiken. Een achtergrond word gezien als opmaak, en opmaak in een HTML pagina kun je het beste in een apart bestand zetten. Zo'n bestand heet een CSS-stylesheet. Dat is dus eigenlijk een bestand waarin je bepaalt welke achtergrond er gebruikt moet worden, maar ook dingen als lettertype kun je er in bepalen.

Een voorbeeldje van wat voor jou zou werken is ongeveer het volgende.

Gebruik deze HTML:
  1. <title>PureRS - Be a REAL pure</title>
  2. </head>
  3. <link rel="stylesheet" href="style.css" type="text/css">
  4. <div id="alle_inhoud">
  5. <div id="tekstuele_inhoud">
  6. Kijk, dit staat op de goede plek!
  7. </div>
  8. </div>
  9. </body>
  10. </html>


En het volgende zet je in een apart bestand, en dit bestand moet je style.css noemen (vergeet het niet te uploaden naar de website ;)).

  1. body {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. div#alle_inhoud {
  7. width: 800px;
  8. height: 800px;
  9. background-image: url(./bg3.gif);
  10. background-repeat: no-repeat;
  11. }
  12.  
  13. div#tekstuele_inhoud {
  14. position: relative;
  15. top: 230px;
  16. left: 210px;
  17. width: 385px;
  18. }


Wat je nu zult zien, is dat de tekst in het midden van de pagina staat. Dat hebben we gedaan door het je plaatje als achtergond in te stellen van de HTML-tag "div", met het id "alle_inhoud". Dit zie je in de CSS terugkomen als "div#alle_inhoud". Vervolgens geven we daar een viertal eigenschappen aan mee, namelijk width (de breedte), height (de hoogte), background-image (welk plaatje we gebruiken) en background-repeat (of de achtergrond zich moet blijven herhalen als de pagina groter wordt).

Voor de HTML-tag "div" met het id "tekstuele_inhoud" geven we vervolgens een aantal andere eigenschappen op. Namelijk hoe we de positie aan willen geven, in dit geval is dat "relative". Dat wil zeggen dat de volgende eigenschappen invloed hebben op de positie waar het element in eerste instantie zou staan. De volgende eigenschappen zijn "top" en "left", dat zijn het aantal pixels dat het element moet verschuiven vanaf de originele positie. Als laatste hebben we nog "width", zodat de tekst niet aan de rechterkant over de achtergrond heen zal gaan lopen als een zin te lang is.

Voor meer informatie over CSS verwijs ik je door naar deze tutorial op deze website.
Offline Abbas - 05/09/2008 21:21
Avatar van Abbas Gouden medaille

Crew .NET
timmie_loots schreef:
Wat titjes aangeeft kan werken, maar dat is waarschijnlijk iets te hoog gegrepen.
Natuurlijk werkt wat ik zeg! :D
Offline purers - 05/09/2008 22:08 (laatste wijziging 05/09/2008 22:12)
Avatar van purers Nieuw lid
timmie_loots schreef:
Wat titjes aangeeft kan werken, maar dat is waarschijnlijk iets te hoog gegrepen. Simpeler is om het plaatje als achtergrond te gebruiken. Een achtergrond word gezien als opmaak, en opmaak in een HTML pagina kun je het beste in een apart bestand zetten. Zo'n bestand heet een CSS-stylesheet. Dat is dus eigenlijk een bestand waarin je bepaalt welke achtergrond er gebruikt moet worden, maar ook dingen als lettertype kun je er in bepalen.

Een voorbeeldje van wat voor jou zou werken is ongeveer het volgende.

Gebruik deze HTML:
[..code..]

En het volgende zet je in een apart bestand, en dit bestand moet je style.css noemen (vergeet het niet te uploaden naar de website ;)).

[..code..]

Wat je nu zult zien, is dat de tekst in het midden van de pagina staat. Dat hebben we gedaan door het je plaatje als achtergond in te stellen van de HTML-tag "div", met het id "alle_inhoud". Dit zie je in de CSS terugkomen als "div#alle_inhoud". Vervolgens geven we daar een viertal eigenschappen aan mee, namelijk width (de breedte), height (de hoogte), background-image (welk plaatje we gebruiken) en background-repeat (of de achtergrond zich moet blijven herhalen als de pagina groter wordt).

Voor de HTML-tag "div" met het id "tekstuele_inhoud" geven we vervolgens een aantal andere eigenschappen op. Namelijk hoe we de positie aan willen geven, in dit geval is dat "relative". Dat wil zeggen dat de volgende eigenschappen invloed hebben op de positie waar het element in eerste instantie zou staan. De volgende eigenschappen zijn "top" en "left", dat zijn het aantal pixels dat het element moet verschuiven vanaf de originele positie. Als laatste hebben we nog "width", zodat de tekst niet aan de rechterkant over de achtergrond heen zal gaan lopen als een zin te lang is.

Voor meer informatie over CSS verwijs ik je door naar deze tutorial op deze website.


bedankt, je hebt me al een aardig eind geholpen.
alleen ik snap nog 2 kleine dingetjes niet.
1. het plaatje staat er nu, alleen de rechterkant is nog helemaal wit. moet ik het plaatje dan breeder maken? zoja, hoe? 
2. toen ik een stukje tekst schreef komt het linksboven te staan, hoe kan ik nou een andere positie bepalen waar het moet staan?

misschien zijn het nog al simpele vragen voor jullie, maar ik ben er nog nieuw in dus ik probeer het te leren 
Offline roberini - 05/09/2008 22:22 (laatste wijziging 05/09/2008 22:22)
Avatar van roberini HTML beginner @ purers:

1. Ja, dan moet je hem groter maken totdat hij over je scherm past. Je krijgt dan wel problemen met mensen met een andere resolutie, dus je kan misschien het beste de max resolutie nemen zodat hij bij iedereen goed is

2.

Zie je dit?

  1. div#tekstuele_inhoud {
  2. position: relative;
  3. top: 230px;
  4. left: 210px;
  5. width: 385px;


als je de pixels aanpast naar iets anders, komt hij op een andere plek te staan. Ik weet niet hoe groot jou resolutie scherm is maar je kan het aanpassen totdat je tevreden bent.
Offline Kr4nKz1n - 05/09/2008 23:38
Avatar van Kr4nKz1n Onbekend Leuk dat je een website bouwt, heel leuk en aardig.

Maar ik denk toch dat je je even mag verdiepen in (X)HTML en CSS.

Wij zijn er natuurlijk om vragen te beantwoorden, maar hoe je een achtergrond zet, tja sorry maar, achja, ieder z`n mening daarover.

Gebruik www.w3schools.com om informatie te winnen over (X)HTML en CSS.

Daarnaast kun je google-en op bijv. de woorden: html css achtergrond background plaatje.

En dan nog een advies, maak je plaatjes niet te groot. Slice die zooi.

Slicen = versnijden, om het maar even makkelijk te maken.
Offline purers - 05/09/2008 23:55
Avatar van purers Nieuw lid ik heb het plaatje groter gemaakt, maar hierdoor zit ik weer met een nieuw probleem.
ik heb de html script van timmie verandert:
div#alle_inhoud { width: 800px; height: 800px; background-image: url(./bg3.gif); background-repeat: no-repeat;}

hetgene wat ik verandert heb is: background-image: url(./bredere bg.gif); alleen het werkt niet  
wat doe ik verkeerd?
Offline Kr4nKz1n - 05/09/2008 23:56
Avatar van Kr4nKz1n Onbekend Beter dat je geen spaties in namen gebruikt, gebruik dan een _.
En gebruik '.
  1. background-image: url('./bredere bg.gif');


Dan zijn spaties wel mogelijk, maar nog steeds niet netjes en handig.
Offline purers - 06/09/2008 00:11
Avatar van purers Nieuw lid ok dankjewel,

P.S: een vriend heeft het al voor me gesliced alleen toen we het uiteindelijk op plakte zag het er echt niet mooi uit.
vast iets verkeerds gedaan 
Offline Kr4nKz1n - 06/09/2008 00:13
Avatar van Kr4nKz1n Onbekend Hoezo niet mooi uit?
Grafisch gezien, of stond het niet op de juiste plek?
Offline purers - 06/09/2008 00:37 (laatste wijziging 06/09/2008 13:22)
Avatar van purers Nieuw lid het is allemaal gelukt,

bedankt jongens! leuke forum, als ik meer vragen heb dan is dit forum mijn 1e keuze 
hij staat in me favoriete, ga zo door! 
Offline Kmh - 21/08/2009 09:03
Avatar van Kmh Nieuw lid eey heb ik een andere vraag  

Die tekst werkt prima niks mis mee!
Alleen kan die tekst ook een plaatje zijn met link >
Weten jullie daar de code van hoe je dat maakt?

div#tekstuele_inhoud { << Plaatuele_Inhoud ?  
position: relative;
top: 270px;
left: 210px;
width: 385px;
}

Met vriendelijke Groet,

Kevin
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.188s