[CSS] Een <DIV> tussen tekst in

[Morphine]

Heren,

Het volgende zou ik graag te werk willen stelligen (op 1 regel alles), zie mijn voorbeeld:

Tekst bla bla bla bla [div met background-image] tekst bla bla bla

- Het float element voorziet helaas alleen de optie left of right, en dus niet middle (of iets dergelijks)
- Margin-left optie is geen keuze, omdat de linkerkant kan veranderen
- ... verder heb ik geen idee wat er verdere mogelijkheden zijn.


Misschien weet iemand een totaal andere oplossing voor mijn probleem? Het gaat er namelijk om dat er een afbeelding op CSS niveau beheert kan worden (CSS kan on-the-fly gewijzigd worden, en hierbij alle afbeeldingen ook, dit gebeurd nu prima met background-images, maar <img> wijzigen op css is helaas geen optie, vandaar mijn keuze om alles background-images te maken).

[ Voor 5% gewijzigd door Morphine op 04-04-2005 11:11 ]

[Verwijderd]

waarom een div? dat slaat semantisch absoluut geen hout

verder wil je waarschijnlijk een inline-block element erin zetten, dus iets als

HTML:

tekst lalala <span id="huppeldepup"></span>

en

Cascading Stylesheet:

span#huppeldepup {
display: inline-block;
display: -moz-inline-box;
background-image: url();
width: 200px;
}

[Morphine]

Wow!

Ik heb geen idee waarom een DIV, waarschijnlijk omdat ik SPAN nog nooit gebruikt heb, en dus geen idee heb wat het nut ervan is, maar dat is me nu wel aardig duidelijk!

Geweldig bedankt!

[Verwijderd]

div zou ook wel kunnen in theorie (het levert wat moeilijkheden in IE), maar semantisch is het niks, gebruik div liever voor het structureren van grote delen van je document (hoofdstukken en paragrafen in de eerste plaats)

[Morphine]

Helaas is het alleen niet mogelijk om <spans> een width te geven omdat het een inline-block is...
maargoed daarvoor plaats ik er dan wel een spacertje afbeelding in

[RobIII]

Verwijderd schreef op maandag 04 april 2005 @ 11:37:
div zou ook wel kunnen in theorie (het levert wat moeilijkheden in IE), maar semantisch is het niks, gebruik div liever voor het structureren van grote delen van je document (hoofdstukken en paragrafen in de eerste plaats)

Hoofdstukken gebruik je <h1> t/m <h6> voor, paragrafen gebruik je <p> voor. Ik denk dat ik je verkeerd begijp?

[ Voor 8% gewijzigd door RobIII op 04-04-2005 11:41 ]

[Morphine]

Waar dienen de attributen:

display: inline-block; display: -moz-inline-box;

eigenlijk voor?

mozilla geval lijkt me sterk op een workaround voor inline-block... maaruhm weghalen of niet.. ik zie geen verschil

Is een span per definitie niet een inline-block ?

---

Weet iemand overigens dat wanneer ik een <A> tag om een <SPAN> zet, hoe dat ik dan de BORDER van de span weghaal ? (border-style: 0px solid; werkt niet, en border: 0 ooknie )

[ Voor 38% gewijzigd door Morphine op 04-04-2005 12:04 ]

[Verwijderd]

@robIII: hx zijn voor koppen van hoofdstukken, p is voor alinea's, hoofdstukken bestaan uit koppen, alinea's, lijsten, tabellen etc. (zie http://www.w3.org/TR/html401/struct/global.html#edef-H1)

(d'r is een beetje een taalprobleem hier, in het nederlands zijn paragrafen subhoofdstukken, maar in het engels is het zowel een subhoofdstuk als alinea. De bedoeling is om het voor alinea's te gebruiken,. vandaar ook dat <p> geen lijsten en tabellen mag bevatten enzo, omdat dat geen onderdeel is van een alinea.)

een span is per definitie een inline element. inline-block elementen zijn block elementen (met dimensies) die inline geplaatst worden, daar is dus display: inline-block; voor. voor moz is -moz-inline-box het equivalent.

zie http://www.w3.org/TR/CSS21/visuren.html#propdef-display

@border verhaal? bedoel je dat stippellijntje in IE? da's geen border, maar nuttig voor mensen zonder muis, kan wel weg met een stukje js: onclick="this.blur()"

[ Voor 38% gewijzigd door Verwijderd op 04-04-2005 12:20 ]

[JHS]

Morphine schreef op maandag 04 april 2005 @ 11:39:
Helaas is het alleen niet mogelijk om <spans> een width te geven omdat het een inline-block is...
maargoed daarvoor plaats ik er dan wel een spacertje afbeelding in

. Ben je fijn met css bezig, ga je nog terugvallen op spacer gifs...

Maargoed, dankzij de inline-block value kan je juist wel dimensies opgeven. Alleen heeft mophor ze op zo een volgorde gezet dat IE de -moz- value neemt en dus niks doet . Als je ze omdraait werken ze wel gewoon:

Cascading Stylesheet:

span {
    background-color: lime;
    display: -moz-inline-box; 
    display: block;
    width: 1000px;
}

[ Voor 6% gewijzigd door JHS op 04-04-2005 14:27 ]

[Morphine]

hmm wist niet dat volgorde zo belangrijk was binnen css!

maar ik probeerde de width mee te geven bij de span style (<span id='hoppa' style='width: 10px'></span>)

en dan via css een image background eraan koppelen...
maargoed zal morgen nog is goed kijken, thx

[ Voor 52% gewijzigd door Morphine op 04-04-2005 20:59 ]

[JHS]

Morphine: Wat maakt het uit of je je css statements inline doet of in een apart bestand in dit geval?

[Verwijderd]

Morphine schreef op maandag 04 april 2005 @ 20:57:
hmm wist niet dat volgorde zo belangrijk was binnen css!

je kan belangrijkheid ook aangeven met

code:

!important

[wicher|IA]

Morphine schreef op maandag 04 april 2005 @ 11:57:Weet iemand overigens dat wanneer ik een <A> tag om een <SPAN> zet, hoe dat ik dan de BORDER van de span weghaal ? (border-style: 0px solid; werkt niet, en border: 0 ooknie )

Simpel. Als ik me niet vergis is dat geen randje van de span, maar van de a. Die moet je dan ook dáár weghalen. Dus: a { border: none; }

[JHS]

Verwijderd schreef op maandag 04 april 2005 @ 22:32:
[...]je kan belangrijkheid ook aangeven met

code:

!important

Dat gaat in dit geval niet op, omdat het om de volgorde van dezelfde attributes, maar met verschillende values, voor verschillende browsers. Dus de specifity veranderen heeft dan weinig zin .

[Morphine]

JHS schreef op maandag 04 april 2005 @ 21:07:
Morphine: Wat maakt het uit of je je css statements inline doet of in een apart bestand in dit geval?

het volgorde dillema zegmaar

(anyway: heb mijn probleem ondertussen op een hoger niveau opgelost)

[JHS]

Morphine schreef op dinsdag 05 april 2005 @ 14:01:
[...]het volgorde dillema zegmaar

Dat werkt inline op precies dezelfde manier, lijkt mij .

(anyway: heb mijn probleem ondertussen op een hoger niveau opgelost)

Misschien wel leuk voor de database om even te vertellen hóé .

[Verwijderd]

Morphine schreef op maandag 04 april 2005 @ 20:57:
hmm wist niet dat volgorde zo belangrijk was binnen css!

In principe slaat de C in CSS hier dus op

Overigens is het niet echt correct om een <span> in een <a> tag te zetten. Andersom kan weer wel. Ik denk dat je die span helemaal klikbaar wilt maken? In dat geval moet je zoiets hebben:

code:

span {
    display: block;
    width: 200px;
    height: 300px;
    background-color: #FC0;
}

span a {
    display: block;
    width: 200px;
    height: 300px;
}

<span><a href="#" title="Alles is klikbaar hier">klik</a></span>

[Morphine]

JHS schreef op dinsdag 05 april 2005 @ 17:17:
[...]
Misschien wel leuk voor de database om even te vertellen hóé .

Het ging erom dat op de CSS on the fly gewijzigd kon worden, echter stonden er een aantal afbeeldingen niet in de CSS maar in de render-template van de website.

Nu heb ik in een wat hoger niveau gezorgd dat wanneer de css gewijzigd wordt, dat er een variabele beschikbaar komt (1 of 2) die ik dan achter de afbeeldingen plak, zodat deze niet op css niveau hoeven te zitten

Verder is dat voor dit topic een beetje offtopic, omdat het nogal specifiek is

Maargoed thx allemaal !

[ Voor 10% gewijzigd door Morphine op 06-04-2005 11:18 ]