Tekst in achtergrondplaatje

Status
Niet open voor verdere reacties.
K

KREEFTMEIJER

Gebruiker
Lid geworden
14 sep 2010
Berichten
188
Op mijn site fysiotherapieboschenduin.nl moet de onderstaande tekst
<div class="header">
<div class="header_resize">
<div class="logo">
<h1><span>fysiotherapie</span><font color="#336699"> Bosch en Duin </font><small>Caspar
Treurniet</small><small>&nbsp;&nbsp;&nbsp;&nbsp;06 54278095</small></h1>
</div>
in de blauwe achtergrond staan, op de een of andere manier staat het er los boven, van alles geprobeerd
maar krijg het niet op zijn plaats.
Wie kan mij helpen.
Henk
 
Ehm, wat bedoel je? Ik kan de tekst niet selecteren, als je dat bedoelt. Anders moet je gewoon met photoshop de tekst in de achtergrond verwerken...
 
Het blauwe plaatje staat in de css
De teksten Fysiotherapie Boschen Duin Caspar Treurniet 06 54278095
staan in de html .
Deze tekst moet in het blauwe plaatje staan, daar heeft het altijd gestaan.
Nu staat het in een balk erboven.
Het ziet erin dreamweaver ook raar uit, alle tekst highlight, kan ik niet veranderen.
 
Als ik het goed begrijp wil je die tekst dus lager hebben? Waarom neem je dan geen element, daar zet je het plaatje als achtergrond in, en dan zet je in je html de tekst ervoor.
 
Beste Kreeftmeijer,

Ben je in WYSIWYG-modus aan het werk
of kijk je ook in de html- en css-code?

Je hebt namelijk de bewuste tekst en de achtergrond niet in dezelfde DIV staan.
De tekst staat (diep genest) in de div "header"
en de achtergrond gif staat in de div "hbg"
en die staan helemaal los van elkaar.
Dus je html-structuur klopt gewoon niet.


Overigens begrijp ik ook niet waarom je voor een effen gekleurde achtergrond een image gebruikt; dat kan dan net zo goed door een kleurcode aan de achtergrond toe te kennen.
 
.hbg_resize {
margin:0 auto;
padding:187px 0 0;
width:970px;
background:url(images/image+ecg.jpg) no-repeat top;
height:256px;

Dit is het plaatje waar de tekst in moet komen te staan het plaatje mdet de ECG.
Het heeft daar altijd ingestaan maar is plotseling verhuisd.

HEnk
 
ekstEven een update van het probleem.

De tekst moet in het blauwe vak, niet het vak met het ECG streepje
Op je vraag waarom zo ingewikkeld,het is een template, ga nu de tekst in photoshop maken.
Henk
 
Het gaat om deze tekst, die zie ik wel met Firefox, maar niet met Internet Explorer.
 
<h1><span>fysiotherapie</span><font color="#336699">
Bosch en Duin </font><small>Caspar Treurniet</small><small>&nbsp;&nbsp;&nbsp;&nbsp;0654278095</small></h1>

was vergeten te plakken
 
Eerst even het background-image hbg_bg.gif.
@tecsman:
Dit is niet alleen de ene blauwe kleur, maar ook de grijze rand eronder, maar dat zie je pas als je 'n opblaast: ;)

hbg_bg.gif
>>>
hbg_bg-groot.gif

@kreeftmeijer:
Je kunt beter de grote versie gebruiken, die is 100px breed ipv 1px, maar nog steeds < 0,5kB. Dan hoeven browsers bij een schermbreedte van 1000px niet 1000 keer het img naast elkaar te zetten, maar maar 10 keer; dat scheelt in pagina-snelheid.

=======
Het ziet erin dreamweaver ook raar uit, alle tekst highlight, kan ik niet veranderen.
Klik om te vergroten...
Dat kan kloppen. Alle kopregels h1, h2, h3, h4, h5, h6 zijn bij bekijken in een browser geen selecteerbare letters meer, maar ... het zijn images geworden! *)
Dat kan je zien als je in Firefox bv. rechts klikt op het woord "Bosch" in de kop, of op "Menu", dan staat bovenaan: "Afbeelding bekijken". Klik je daarop, dan zie je afbeeldingen van de tekst, en geen echte tekst:

fysio-bosch.png
en
fysio-menu.png
enz.​

Dit wordt gedaan door de "Cufon"-techniek op de pagina. Haal je die er uit (of schakel je javascript uit, en herlaad je de pagina), dan krijg je wel gewone tekst te zien.
Maar hier wordt met Cufon het lettertype Arial vervangen door het lettertype Arial, en zie je nauwelijks verschil!

  • Het zou alleen nuttig kunnen zijn voor Operating Systems die geen Arial als standaard lettertype aan boord hebben. Dat was vroeger alleen de Mac (zie hier een overzicht; ik weet niet of dat nu nog zo is), maar de Mac's hebben een lettertype Helvetica, dat vergelijkbaar is met de Arial.
  • In de body-styles staat echter al de font-family volgorde: Arial, Helvetica, sans-serif. Als er geen Arial op de computer zit, wordt automatisch overgeschakeld naar de Helvetica.
  • Daarmee kan het hele Cufon-gebeuren achterwege gelaten worden zonder desastreuze gevolgen.
  • De pagina wint erdoor aan snelheid, en de bezoeker kan dan bv. ook het telefoonnummer selecteren om te kopiëren en te plakken: wel zo handig!

=======
Verder sluit ik me aan bij de raad van tecsman. Je zou ook de blauwe strook als background-image in de <body> kunnen zetten, als je de background-color uit de .main class haalt.

Met vriendelijke groet,
CSShunter
____________
*) De regel "Welkom op de site van fysiotherapie Bosch en Duin" niet: dat is geen echte h-kopregel, maar een <p> met <strong>. :)
 
Laatst bewerkt:
de "Cufon"-techniek zegt mij helemaal niets,
heb gezien dat in Firefox de tkest een plaatje wordt, met Internet Explorer zie ik helemaal niets.
Dat was in het verleden niet. Het probleem is een alle pagina's.
Is het mogelijk dat er in de CSS iets is veranderd ??

Henk
 
Hoi Henk,
Het "Cufon"-gebeuren is kort gezegd een manier om (via een aantal javascripts) eigen lettertypes op een website te gebruiken, in plaats van standaard-lettertypes.
Hoe dit bij jou in de html-code is terechtgekomen: geen idee (dwz ik vermoed dat het er door een template in is gezet).

Het kan eenvoudig buiten werking gesteld worden door uit de broncode de drie ingevoegde javascripts uit de <head> te verwijderen *):
HTML: 
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/arial.js"></script>
<script type="text/javascript" src="js/cuf_run.js"></script>
M.b.t. je eerdere vraag over de kopregel in het blauwe gedeelte:


  • Is dit zoiets als wat je bedoelt? bliksekaters.nl/tests/benduin-nw.htm
  • Zie broncode; hierin heb ik:
    de cufon-spullen verwijderd,
    de blauwe background-strook verplaatst volgens m'n vorige reactie,
    en de html en de styles binnen de <div class="logo"> aangepast.

Wat ik verder zou doen, zeker omdat onder het fysiotherapie-publiek naar verhouding veel ouderen zitten, is:
  1. het erg kleine letterformaat van de tekst wat opschroeven, en
  2. de letterformaten niet in px maar in em's opgeven, anders kunnen IE-gebruikers niet het letterformaat groter maken als zij dat prettiger vinden of nodig hebben.

Met vriendelijke groet,
CSShunter
_______
*) Als het in een "non-editable" gebied zit, dan zit het in een .dwt Dreamweaver-template, en moet het daar uit verwijderd worden.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan