[css] Hoe tot dit gedrag komen?

[b19a]

Terwijl jullie lekker aan de paaseitjes zitten heb ik helaas nog een vraagje op m'n vrije middag . Ik wil met CSS een bepaald gedrag realiseren op een webpagina. Nu kan dit prima als alle browsers max-width ondersteuning bieden, maar helaas zijn er wat uitzonderingen . Wat ik wil is het volgende:

Ik heb een header en die bestaat uit 2 onderdelen, de koptekst en een afbeelding. De koptekst staat links en de afbeelding rechts. Nu moet die afbeelding de ruimte naast de koptekst opvullen. De afbeelding is zo'n 450 px breed, de koptekst ook ongeveer. background-position: right werkt prima, echter mogen beide delen niet overlappen. Is er te weinig ruimte voor de afbeelding, dan moet deze worden afgekapt aan de rechterkant.

Ik had het volgende in gedachten:

HTML:

<div id="header">
   <h1>Koptekst</h1>
   <span>[img]"images/afbeelding.jpg"[/img]</span>
</div>

Cascading Stylesheet:

#header {
height: 105px;
}

#header span {
display: block;
width: auto;
text-align: right;
overflow: hidden;
}

h1 {
float: left;
width: 400px;
height: 105px;
}

Dit werkt prima zoals het moet in Firefox als Opera, echter dezelfde browser die moeite heeft met max-width, IE, gooit span rechtsonder de h1 als de breedte kleiner wordt dan 850 (h1: 400, img: 450). De bedoeling is dus dat de overflow: hidden dan in werking treedt (zoals in de andere browsers).

Een paaseitje voor de brein met de oplossing .

[ Voor 12% gewijzigd door b19a op 15-04-2006 15:48 . Reden: 450+400=950 errr 850 :) ]

[Verwijderd]

Wat bedoel je met "bijgesneden"? Aan de linkerkant of rechts?

Je zou het plaatje als achtergrond m.b.v x-pos=400 kunnen zetten.
De breedte van de header op 100%

[b19a]

Verwijderd schreef op vrijdag 14 april 2006 @ 20:41:
Wat bedoel je met "bijgesneden"? Aan de linkerkant of rechts?

Je zou het plaatje als achtergrond m.b.v x-pos=400 kunnen zetten.
De breedte van de header op 100%

Sorry, formulering was niet helemaal duidelijk. Jouw achtergrondoplossing gaat niet werken, aangezien je met background niet duidelijk kunt zijn over het afkappen van de afbeelding. (zie herziene tekst)

[Verwijderd]

als je een span als block gebruikt, waarom gebruik je dan geen div?

en heb je al geprobeerd om de overflow:hidden op #header te zetten?

[ Voor 35% gewijzigd door Verwijderd op 14-04-2006 23:01 ]

[Verwijderd]

BoukeHaarsma schreef op vrijdag 14 april 2006 @ 22:24:
[...]

Sorry, formulering was niet helemaal duidelijk. Jouw achtergrondoplossing gaat niet werken, aangezien je met background niet duidelijk kunt zijn over het afkappen van de afbeelding. (zie herziene tekst)

Hoezo niet?
Op deze manier gebeurt dit allemaal automatisch. De afmeting van de achtergrondafbeelding blijft hetzelfde, alleen wat je werkelijk ziet wordt bepaald door de grootte van de header. Door de div-header wordt als het ware een raamwerk over de afbeelding gezet.... Of ik begrijp je niet goed...


overigens klopt dit echt niet wat je hieronder zegt:

background-position: right werkt prima, echter mogen beide delen niet overlappen. Is er te weinig ruimte voor de afbeelding, dan moet deze worden afgekapt aan de rechterkant.

Je doet een background-position: right en vervolgens heb je het over aan de rechterkant afkappen.

Dus tusen de tekst en de afbeelding mag best ruimte zitten?

[ Voor 28% gewijzigd door Verwijderd op 14-04-2006 23:10 ]

[X-Lars]

Volgens mij bedoelt sinaasappelsap het wel goed hoor. Zoiets is volgens mij precies wat jij bedoelt:

HTML:

<h1>Koptekst</h1>

Cascading Stylesheet:

h1 {
  height: 105px;
  background:url("image.jpg") 400px top no-repeat;
}

[b19a]

Op lagere resoluties zal het inderdaad doen wat ik wil. Echter moet de afbeelding bij resolutie > 850* in de rechterhoek gaan zitten. In bovenstaande CSS blijft de afbeelding op 400px vanaf links hangen.

code:

zo dus:
________________________
[tekst]     [afbeelding]

met bovenstaande css zal dit het resultaat zijn:
________________________
[tekst][afbeelding]

en het probleem zit 'm in de overflow die ik wil realiseren:
______________
[tekst][afbee]

in plaats van:
______________
[tekst][lding]

Het wilde dus alwel werken met m'n bovenstaande code, alleen IE gaat vervelend doen. Misschien dat er een oplossing in die richting te vinden is?


*850, geen 950 zoals in de SP stond

[ Voor 18% gewijzigd door b19a op 15-04-2006 15:47 ]

[Verwijderd]

Dit bedoelde ik in eerste instantie (overigens niet getest):

HTML:

<div id="header">
   <h1>Koptekst</h1>
</div>

Cascading Stylesheet:

#header {
height: 105px;
width: 100%;  /* of andere breedte*/
background:url(images/afbeelding.jpg) 400px top no-repeat;
}

h1 {
float: left;
width: 400px;
height: 105px;
}

code:

zo dus:
________________________
[tekst]     [afbeelding]

met bovenstaande css zal dit het resultaat zijn:
________________________
[tekst][afbeelding]

en het probleem zit 'm in de overflow die ik wil realiseren:
______________
[tekst][afbee]

in plaats van:
______________
[tekst][lding]

Doe je het toch zo (moet je zelf ff de Table omzetten naar div's

HTML:

<table>
  <tr>
    <td width="400px"><h1></h1></td>
    <td width="100%"><div style="width: 100%; background: ...positie-rechts"></td>
  </tr>

[/html]