Image verdwijnt na positioneren

[IINamoRII]

Ik heb een probleem met een background image die verdwijnt:

dit is de css code voor het plaatje:

Cascading Stylesheet:

td.contentheading {
background:url(../images/title.png) no-repeat 0px 0px;  
color: #666;
position:absolute;
top:50px;
left:-10px;
}

ik geef het plaatje dus een negatieve linker positie om het plaatje 10 px uit de content box te laten steken, maar die 10px verdwijnen en ook de text verdwijnt.
link naar mijn site:
http://www.mulder-tutorials.com/index.php?option=com_content&view=article&id=2&Itemid=5

ps:site is verder nog onder constructie dus als je nog andere leuke tips hebt stel ik dat zeer op prijs

[ Voor 0% gewijzigd door MueR op 26-02-2010 12:40 . Reden: code tags toegevoegd ]

[MueR]

Je geeft je box een -10px, niet je image.

[IINamoRII]

background:url(../images/title.png) no-repeat -10px 0px;
als ik me image -10px geef verdwijnt er een stuk van 10px aan de rechter kant van de image.
en de missende 10px aan de linker kant zijn nog steeds verdwenen

[MueR]

Je box heeft een left:-10px;

[IINamoRII]

background:url(../images/title.png) no-repeat 0px 0px;
de image positionering geeft alleen aan welk gedeelte je van de image wil laten zien, ik wil gewoon de hele image laten zien. dus moet deze positie op 0px 0px beginnen, dan wil ik dat de image 10 px oversteekt, maar als ik dus mijn box 10px verplaats ten opzichte van de content100 box verdwijnen die 10 px.

ja ik begrijp dat ik mijn box 10px verplaats maar aangezien mijn image als background is ingesteld van de box zou die ook mee moeten verplaatsen

[ Voor 17% gewijzigd door IINamoRII op 26-02-2010 13:01 ]

[MueR]

Je positioneert een box abosluut vanaf een relatief punt, drie niveaus hoger in je dom. Ergens daartussenin doe je nog een padding van 10 pixels op je inside div, waar die absolute position zich ongeveer nul van aantrekt. Met andere woorden, je bent je header table (waarom een table is me een raadsel maar goed) 10 pixels buiten je content aan het plaatsen. Op welke manier verwacht je dan iets anders te zien gebeuren dan dat de eerste 10 pixels van je titel wegvallen? In plaats van dat je stom elke keer hetzelfde stuk CSS post (wat overigens compleet irrelevant voor het probleem is) zou je misschien eens moeten kijken hoe de styling van je site nu werkelijk in elkaar zit met een Firebug of zelfs IE Developer tools.

[mcDavid]

Wtf is dit?

code:

<!--[if gte mso 10]>

en Wtf is dit? (behalve dat je blijkbaar voor mailcliënts aan het schrijven bent, zoek eens wat op over CSS selectors!)

code:

<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">
<p class="MsoNoSpacing">

En vanwaar al die tables?

En nu de dirty-fix waar je op zit te wachten: geen position gebruiken, maar margin-left.

[ Voor 9% gewijzigd door mcDavid op 26-02-2010 14:07 ]

[MueR]

Dat is klassieke "ik schrijf mn HTML in Word" code.

[IINamoRII]

het is een table omdat joomla zo zijn articles opzet, maar ik poste elke keer het zelfde css stuk omdat jij elke keer een reactie poste van je box is -10px left, waar ik niks mee kan omdat ik dat al weet en ik probeerde uit te vissen wat jij met die -10px left comment bedoelde en ik maak al gebruik van firebug en web developer tools. Ik wil de box ook stijlen ten opzichte van de box drie niveau's hoger. Maar ik zal eens kijken naar die padding misschien is dat het probleem. Ik wil ook juist dat de headertable 10 px uit mijn content div steekt met behoudt van mijn image en text of is dit niet mogelijk?

edit:
padding op nul zetten heeft geen effect.

[ Voor 12% gewijzigd door IINamoRII op 26-02-2010 14:12 ]

[MueR]

Oh, je wil hem 10 pixels uit dat grijze vlak laten steken? Bedoel je dat met "content box" (beschrijf je probleem eens duidelijk, misschien een plaatje van je beoogde doel erbij)? Ja, dat is wel mogelijk, maar niet op de manier zoals je nu bezig bent. Daarvoor zul je een andere opzet qua CSS en HTML moeten gaan gebruiken. Tables zijn daar zeker niet voor te gebruiken.

[ Voor 13% gewijzigd door MueR op 26-02-2010 14:17 ]

[IINamoRII]

ja,ja
Maar dan zit ik dus met het probleem dat joomla die article titles maakt in een table of kan ik dan een extra title div maken die de titel van het article dynamische genereert en dan verder met css opmaken?

of ligt het er aan dat ik het stuk text uit word2007 in de joomla editor heb geplakt.

[ Voor 17% gewijzigd door IINamoRII op 26-02-2010 14:21 ]

[NMe]

Tekst uit Word in Joomla plakken is altijd slecht. En wat jij wil kan gewoon niet zomaar met tables. Maak dan een Joomla template dat wél met semantische HTML werkt. De enige andere oplossing die ik kan verzinnen is een soort van faux-columns die je misbruikt om de eerste 10 pixels van je container wit te maken terwijl je de rest de echte achtergrondkleur geeft, vervolgens alles een padding van 10px extra geven en dat ene element een padding van 0 geven, maar dat is dermate ranzig dat ik je dat ten zeerste afraad.

[IINamoRII]

Ik zal me even verdiepen in de standaard templates van joomla die ik nou nog gewoon gebruik voor de opmaak van de articles. Ik moet waarschijnlijk ook aanpassingen doen in de php template files ofniet? of is het ook mogelijk om hier een andere extensie voor te downloaden die articles opmaakt in div containers?

[ Voor 21% gewijzigd door IINamoRII op 26-02-2010 14:44 ]

[mcDavid]

IINamoRII schreef op vrijdag 26 februari 2010 @ 14:19:
ja,ja
Maar dan zit ik dus met het probleem dat joomla die article titles maakt in een table of kan ik dan een extra title div maken die de titel van het article dynamische genereert en dan verder met css opmaken?

of ligt het er aan dat ik het stuk text uit word2007 in de joomla editor heb geplakt.

Het ligt aan de table. Uit een table kun je simpelweg niets laten uitsteken. Nou weet ik dat joomla een ramp is om zelf aan te passen, maar je kunt het toch echt wel voor elkaar krijgen die tabellen eruit te slopen lijkt me?

En sja die tekst die je uit word geplakt hebt, da's gewoon gigantisch slordig en onnodig veel code. Maar zolang het crossbrowser werkt zoals je wilt, moet je het zelf weten...

[IINamoRII]

oke bedankt allemaal ik kijk eerst wel hoe ik van die tabellen af kom.

[IINamoRII]

Ben ik weer, heb de tables eruit gesloopt.
maar de image verdwijnt nog steeds.
zo wil ik het: http://www.mulder-tutorials.com/test-image.html
maar als ik dit toepas op deze pagina verdwijnt het gedeelte van de image??
http://www.mulder-tutoria...iew=article&id=3&Itemid=5

misschien hebben jullie nog ideeën

[NMe]

Padding-left van 13px op div#wrap zetten. Nee, toch niet.

En daarna heel snel wat gaan lezen over semantiek. Er zijn niet voor niets meer tags dan alleen divs.

[ Voor 6% gewijzigd door NMe op 04-03-2010 01:20 ]

[IINamoRII]

NMe schreef op donderdag 04 maart 2010 @ 01:18:
Padding-left van 13px op div#wrap zetten. Nee, toch niet.

En daarna heel snel wat gaan lezen over semantiek. Er zijn niet voor niets meer tags dan alleen divs.

ja, je moet even niet letten op die lege div's en rare namen voor sommige div's, ik had even snel die joomla template file aangepast en soms probeer je even snel dingen uit met tijdelijk div's. maar dat terzijde want daar ligt het probleem niet.

die padding-left van 13px op wrap heeft geen invloed.

[disjfa]

Je plaatst een item in een container met een stijl overflow hidden.

Wat denk je dat dat doet

IINamoRII schreef op donderdag 04 maart 2010 @ 01:25:
[...]
ja, je moet even niet letten
probeer je even snel dingen uit

Als wij er niet op moeten letten of je weet waar je mee bezig bent, waarom zou jij

[ Voor 58% gewijzigd door disjfa op 04-03-2010 01:27 ]

[IINamoRII]

disjfa schreef op donderdag 04 maart 2010 @ 01:25:
Je plaatst een item in een container met een stijl overflow hidden.

Wat denk je dat dat doet
dom helemaal niet gezien,

[...]

Als wij er niet op moeten letten of je weet waar je mee bezig bent, waarom zou jij

heb je gelijk in, maar in de productie fase is veel niet definitief en wil je soms snel even dingen kunnen testen.

Maar allemaal bedankt het probleem is opgelost. Het zijn altijd van die kleine foutjes waar je honderd keer overheen leest.

[NMe]

IINamoRII schreef op donderdag 04 maart 2010 @ 01:25:
[...]

ja, je moet even niet letten op die lege div's en rare namen voor sommige div's, ik had even snel die joomla template file aangepast en soms probeer je even snel dingen uit met tijdelijk div's. maar dat terzijde want daar ligt het probleem niet.

Daar ligt wel een groot probleem, domweg omdat je weer laat zien dat je iets aan het doen bent waar je niet genoeg over gelezen hebt. Semantiek is belangrijk. Google "snapt" niet dat <div class="header"> een header is, maar wél dat <h1> of <h2> dat is.

die padding-left van 13px op wrap heeft geen invloed.

Wel in combinatie met het goed zetten van die overflow.

[disjfa]

IINamoRII schreef op donderdag 04 maart 2010 @ 01:34:
[...]
heb je gelijk in, maar in de productie fase is veel niet definitief en wil je soms snel even dingen kunnen testen.

Als je fouten en rotte code wilt maken doe je dat zeker

Verder hoef je niet aan elk element wat je maakt een classe geven. Dat is pas rot. Maar dat zal je vast met even snel testen en nog meer rotte code maken wel tegen komen.