Plaatje op de plek van tekst

carlos

Beste Leden,

Ik ben bezig met deze test-website: www.a-vanreeven.nl/test
Zoals je kan zien zie je halverwege de site staan: A-vanReeven, waar de "R" een kraan is. Nu wil ik op die gehele plek i.p.v. tekst een logo neerzetten wat ongeveer even groot is.
Kan ik er gewoon een plaatje neerzetten? Deze? Zie bijlage? Het zelfde logootje wil ik ook neerzetten linksboven op de site? Kan dit ??berhaupt, omdat er nu geheel tekst staat?
En kunnen jullie mij dan een beetje op weg helpen, hoe dit ongeveer te doen...?

Ik heb al wat geprobeerd met CSS, maar t gaat niet helemaal goed omdat de site responsive is. Ik hoor het graag Nuet :-)

Alvast hartelijk dank!
Gr, Carlos.R.

nuet

In je index.html bovenaan waar het logo staat zet je gewoon het image neer:

<!-- START LOGO -->
                    <div id="logo" class="group">
                        <h1>                       
                        <a class="logo-text" href="index-2.html" title="A-van Reeven| Installatie Techniek"><img src="images/logokraan.jpg" alt="logokraan" /></a>
			</h1>
                        <p><font color="yellow">InstallatieTechniek</font></p>
                    </div>
                    <!-- END LOGO --> 

En iets verder naar beneden hetzelfde image:

<div class="inner home-row group">
                
                <div class="widget-first widget one-third widget-icon-text group">
		    <img src="images/logokraan.jpg" alt="logokraan" />
                    <p>A-van Reeven heeft de vaardigheid om hoog kwalitatief werk af te leveren. </p>
                </div>

ReneV

Ik zou er dit van maken:

HTML:

<div id="logo" class="group">
 <h1>
  <a class="logo-text" href="index.html" title="A-van Reeven| Installatie Techniek">A-van Reeven| Installatie Techniek</a>
 </h1>
</div>

CSS:

#header .logo-text {
 background:url(images/logokraan.jpg) 0 0 no-repeat;
 display:block;
 height: ...px;
 width: ....px.
 text-indent: -999em;
}

Geef bij de height en width de aantal pixels op van het logo.

Waarom een background logo inplaats van een image in de h1 header tag, puur voor de seo.

carlos

Heren bedankt! Hier kan ik wat mee!
Altijd behulpzaam, en goede uitleg. Hier leer ik het meest van.
Ga zo door! Top!

nuet

Nav je PM: het logo bovenaan is idd met een witte achtergrond. Als je een plaatje met witte achtergrond opslaat als .png bestand wil dat niet automatisch zeggen dat je dan een transparante achtergrond krijgt. Die zul je zelf moeten creeeren. Met een grafisch programma kun je dat doen (fuzzy of toverstok, iets in die zin). Wil je het heel nauwkeurig zul je vaak tot op de pixel nauwkeurig moeten gaan werken.
Ik heb op basis van jouw logo een transparant image genomen en wat geknutseld, in de trant van wat jij ook al had (kraan staat voor "r" met de rest erachter).
In bijlage toegevoegd als .zip
Misschien kun je er wat mee...
De kleurcode van gele is:

#f4e112

carlos

Weer enorm bedankt Nuet! Dit noem ik tenminste helpen! Jij en Rene helpen mij altijd waar jullie kunnen! Top
Mag ook wel eens gezegd worden!

ReneV

Kijk eens aan, vindt je dit nog ergens terug zoon behulpzaam forum

carlos

Beste forumleden,

Tot zover is het in orde op: http://www.a-vanreeven.nl/test/
maar onder de kraan in het midden van de home/index ben ik het streepje eronder kwijt.
gekeken in de CSS maar kan het niet vinden, waar het nu misgaat? hetgeen ernaast hebben de streepjes wel...?
Zie bijlage... ik hoor het graag nog even. Incl een beetje onderbouwing zodat wij er allen van leren ;-)

nuet

Da streepje hoort bij een H2 tag. Omdat je de H2 vervangen hebt door een image (logokraan) valt deze nu weg.
Makkelijkste is achter het image de H2 neer te zetten (leeg uiteraard), maar dan met een margin om op gelijke hoogte te komen met de streepjes rechts ervan, dus:

<div class="widget-first widget one-third widget-icon-text group">
  <img alt="logokraan" src="images/icons/logokraan1.png"><br />
  <h2 style="margin-top: 7px"></h2>

Speel even met die margin-top waarde om hem precies te krijgen

carlos

Helemaal Goud! Nuet! Top, dank je man!
Groet, C