[HTML/CSS] Text ipv plaatje als plaatje er niet is

[Angeloonie]

Ik zit dus met een mini-probleempje. Ik heb een header voor een pagina, maar ik heb ook een h1 en h2 met een titel, en een korte slogan zeg maar, nu staan die ook in het plaatje, maar ik wil dat die regels zichtbaar zijn als het plaatje er niet is, dus dat ze zeg maar onder het plaatje verstopt zitten. Ik heb geprobeerd met Google een antwoord te vinden, maar ik heb geen idee waar ik op moet gaan zoeken.

Ik heb iig dit nu staan:

code:

<div id="pageHeader">
        <h1></h1>
        <h2></h2>
        <a href="index2.html"></a>
</div>

Ik gebruik deze CSS erbij:

code:

/* header div start */
#pageHeader {
    width: 700px;
    height: 175px;
    background-image: url(img/style1/header.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    border-top: 0px;    
    border-right: 1px solid #aaa;    
    border-bottom: 1px solid #aaa;    
    border-left: 1px solid #aaa;    
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px;
    }
#pageHeader a {
    display: block;
    height: 175px;
    margin: -50px 0px 0px 0px;
    }

#pageHeader h1 {
    width: 600px;
    color: #7F606F;
    font-size: 24px; 
    line-height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 0px 0px 5px;
    padding: 0px 0px 0px 0px;
    }
    
#pageHeader h2 {
    width: 600px;
    color: #000;
    font-size: 11px; 
    line-height: 16px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0px 0px 0px 5px;
    padding: 0px 0px 10px 4px;
    }
/* header div end */

Je ziet dus dat de pageHeader div een achtergrond heeft. Nu lijkt me niet dat het op die manier kan, aangezien dat plaatje de achtergrond is. Goed, dan plaats ik het plaatje gewoon via een <img> in de div. Maar hoe zorg ik er dan voor dat die text er onder verstopt zit? Want als ik dat doe dan blijft de text gewoon er bovenop staan. Heeft iemand een idee hoe ik dit kan oplossen?

Alvast bedankt!

[Verwijderd]

eehmz wat is er mis met het alt attribuut? da's daarvoor eigenlijk

[André]

Zet het plaatje als background op de div en geef de h1 en h2 een text-indent van -9999px

[Angeloonie]

Verwijderd schreef op vrijdag 10 februari 2006 @ 23:47:
eehmz wat is er mis met het alt attribuut? da's daarvoor eigenlijk

Had ik ook aan gedacht, maar dan heb je minitext, en ik wil gewoon een redelijke header hebben staan dan.

André schreef op vrijdag 10 februari 2006 @ 23:48:
Zet het plaatje als background op de div en geef de h1 en h2 een text-indent van -9999px

Die snap ik niet, dan staat de text toch gewoon heel erg buiten beeld? Ook al is het plaatje er wel of niet?

[André]

Oh wacht, ik denk dat ik het verkeerd begreep, jij wil een grote tekst zien op het moment dat een plaatje niet bestaat.

Dan gewoon een img in je div plaatsen en de z-index daarvan hoger maken dan die van de h1 en h2. Met position: absolute kun je de onderdelen over elkaar heen plaatsen.

[Angeloonie]

André schreef op vrijdag 10 februari 2006 @ 23:53:
Oh wacht, ik denk dat ik het verkeerd begreep, jij wil een grote tekst zien op het moment dat een plaatje niet bestaat.

Dan gewoon een img in je div plaatsen en de z-index daarvan hoger maken dan die van de h1 en h2. Met position: absolute kun je de onderdelen over elkaar heen plaatsen.

Weer wat geleerd Hij doet het!

Ff snel een testpagina: http://www.crazy4angie.com/test/index.html

Zonder plaatje: http://www.crazy4angie.com/test/index2.html

[ Voor 9% gewijzigd door Angeloonie op 11-02-2006 00:03 ]

[crisp]

Je zou ook een soort image-replacement techniek kunnen gebruiken: met javascript de image inladen, en als die geladen is de inhoud van je header daarmee vervangen mbv DOM-methods.
Gangbaar en unobtrusive

[Angeloonie]

crisp schreef op zaterdag 11 februari 2006 @ 00:04:
Je zou ook een soort image-replacement techniek kunnen gebruiken: met javascript de image inladen, en als die geladen is de inhoud van je header daarmee vervangen mbv DOM-methods.
Gangbaar en unobtrusive

Bedankt voor de suggestie, maar ik wil eigenlijk zo min mogelijk javascript gebruiken ivm met toegankelijkheid En het wordt dan wel een beetje te ingewikkeld denk ik

[Verwijderd]

owja, is waar ook, IE doet dat niet.

Andere browsers laten de alt-tekst gewoon in opmaak zien als je iets doet als

code:

<h1>[img]"nietTeVinden.jpg"[/img]</h1>

ff snel uit het hoofd:

code:

<h1>
<img src="nietTeVinden.jpg" alt="kop"
onerror="this.parentNode.replaceChild(document.createTextNode(this.getAttribute('alt')),this)">
</h1>

dat fixed je minitekst voor IE, andere browsers (die de onerror niet doen), deden het al goed. Verder te stylen met je h1 CSS uiteraard

[ Voor 84% gewijzigd door Verwijderd op 11-02-2006 00:21 ]

[crisp]

Angeloonie schreef op zaterdag 11 februari 2006 @ 00:05:
[...]


Bedankt voor de suggestie, maar ik wil eigenlijk zo min mogelijk javascript gebruiken ivm met toegankelijkheid En het wordt dan wel een beetje te ingewikkeld denk ik

Is tekst niet toegankelijk dan

[Angeloonie]

crisp schreef op zaterdag 11 februari 2006 @ 00:11:
[...]

Is tekst niet toegankelijk dan

Dat zeker, maar je zei "plaatje inladen met javascript" Daar doelde ik op

[RayNbow]

Angeloonie schreef op zaterdag 11 februari 2006 @ 00:12:
[...]


Dat zeker, maar je zei "plaatje inladen met javascript" Daar doelde ik op

Maar als een browser geen javascript ondersteunt, dan werkt je site nog steeds. Het javascript voegt alleen iets extra's toe.

[ Voor 4% gewijzigd door RayNbow op 11-02-2006 00:14 ]

[Verwijderd]

Voorbeeldje IR-techniek:

HTML:

<h1><span></span>Te verbergen tekst</h1>

Cascading Stylesheet:

h1 {
    margin: 0 auto;
    width: 761px;
    height: 127px;
    position: relative;
    text-align: left
}

h1 span {
    background: url(../gfx/h-bg.jpg) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%
}

[ZeilDude]

Ehmm.. om welke reden zou je plaatje niet bestaan?