[CSS] Text en image positionering binnen een paragraaf

De Parasitaire Capaciteit!

DerKleinePunkt schreef op woensdag 20 april 2005 @ 15:30:Absolute positionering is niet mogelijk aangezien er meer alinea's onder elkaar komen te staan..

Ik heb je hele bericht nog niet verder gelezen en dat ga ik zo wel doen

maar ik denk dat je je vergist in dit statement. Om mezelf maar ff te quoten: [rml]Sappie in "[ css]probleem met "faux columns" layout"[/rml]

Geef dus expliciet in je <p> aan dat het position: relative heeft en je kan absoluut positioneren tov die p

Edit:

DerKleinePunkt schreef op woensdag 20 april 2005 @ 15:30:
Een voorbeeld van wat de klant wil is o.a. te vinden op tweakers.net (zie de headlines van vandaag).

Bedoel je hiermee iets zoals hier te zien: http://www.tweakers.net/nieuws/dag/0 ?

Zoja, dat kun je eenvoudig oplossen met de float property.. http://www.w3schools.com/css/pr_class_float.asp

[ Voor 33% gewijzigd door Sappie op 20-04-2005 15:44 ]

woensdag 20 april 2005 16:09

Acties:

woensdag 20 april 2005 16:22

Es gibt keine kleinen Punkte!

Topicstarter

Sappie schreef op woensdag 20 april 2005 @ 15:39:
[...]

Ik heb je hele bericht nog niet verder gelezen en dat ga ik zo wel doen maar ik denk dat je je vergist in dit statement. Om mezelf maar ff te quoten: [rml]Sappie in "[ css]probleem met "faux columns" layout"[/rml]

Geef dus expliciet in je <p> aan dat het position: relative heeft en je kan absoluut positioneren tov die p

Mits we elkaar goed begrijpen, elke paragraaf worden m.b.v. van een loop uit de database gelezen en dan op de pagina binnen de div genaamd hoofdstuk gezet. Dus hoofdstuk 1 en dan paragraaf 1 t/m.... . Als ik dan (al dan niet) binnen het hoofdstuk een div absolute zou positioneren dan overlappen de teksten elkaar of ze komen in een ander positie.

Bedoel je hiermee iets zoals hier te zien: http://www.tweakers.net/nieuws/dag/0 ?

Ik was nogal onduidelijk ik bedoelde de volgende twee delen van de startpagina:

Nieuwsberichten van woensdag 20 april
Reviews, features & aankondigingen

Ik ga er dan wel vanuit dat wanneer de tekst van de items langer wordt deze niet onder het img komen te staan

[ Voor 13% gewijzigd door DerKleinePunkt op 20-04-2005 16:50 ]

Ein kleiner Punkt in einer grossen Welt

Acties:

De Parasitaire Capaciteit!

zoiets:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>blaat</title>
    <style type="text/css">
        p.test {
            padding: 0 0 0 30px; /* 30px is de breedte van het plaatje dan ongeveer + padding */
            position: relative;
        }
        
        p.test img {
            position: absolute;
            top: 0;
            left: 0;
        }
        
    </style>
</head>

<body>
    <p class="test">
        [img]"test.gif"[/img]
        bladiebladbladieblad<br>
        bladiebladbladieblad<br>
        bladiebladbladieblad<br>        
    </p>
</body>
</html>

edit:
ff "// blabla" in "/* blabla */" veranderd.. stom foutje

[ Voor 64% gewijzigd door Sappie op 20-04-2005 16:29 ]

woensdag 20 april 2005 16:55

Acties:

woensdag 20 april 2005 17:08

Es gibt keine kleinen Punkte!

Topicstarter

Sappie schreef op woensdag 20 april 2005 @ 16:22:
zoiets:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>blaat</title>
    <style type="text/css">
        p.test {
            padding: 0 0 0 30px; /* 30px is de breedte van het plaatje dan ongeveer + padding */
            position: relative;
        }
        
        p.test img {
            position: absolute;
            top: 0;
            left: 0;
        }
        
    </style>
</head>

<body>
    <p class="test">
        [img]"test.gif"[/img]
        bladiebladbladieblad<br>
        bladiebladbladieblad<br>
        bladiebladbladieblad<br>        
    </p>
</body>
</html>

edit:
ff "// blabla" in "/* blabla */" veranderd.. stom foutje

Krijg nou tieten het werkt

$_/-\o_$ (wil je een kusje voor de moeite

)

Nu nog even passend maken binnen mijn css en ik ben happy, hartelijk dank!

Edit:
Zul je net weer zien in zijn huidige vorm kan IE 6.0 er niet mee overweg. Ik ben er momenteel naar het probleem aan het kijken.

offtopic:
Aan jou oplossing had ik dus zelf niet gedacht, heb gelukkig nog genoeg te leren.

[ Voor 48% gewijzigd door DerKleinePunkt op 20-04-2005 17:02 ]

Ein kleiner Punkt in einer grossen Welt

Acties:

De Parasitaire Capaciteit!

DerKleinePunkt schreef op woensdag 20 april 2005 @ 16:55:
Zul je net weer zien in zijn huidige vorm kan IE 6.0 er niet mee overweg. Ik ben er momenteel naar het probleem aan het kijken.

aii ik zie het.. hmmz ik ga er ook nog ff naar kijken

Dit is dus ten dele onzin, zie editIk weet niet waarom IE6 dit niet goed doet.. verander het hieronder staande om het ook in IE6 goed te krijgen. Absoluut positioneren lijkt in IE6 tov de inhoud van het absoluut / relatief gepositioneerde parent element te gebeuren. Wist ik niet en daar ga ik zelf nog es ff naar kijken.

code:

p.test img {
    position: absolute;
    top: 0;
    left: 0;
    _left: -30px; /* IE only */
}

EDIT:

Stomme fout was het gewoon.. jij hebt denk ik, net als ik de 2e keer, de verkeerde code gekopieerd uit het stukje hierboven (ik editte het na een paar minuten pas). Daar staat een comment in de CSS in de vorm "// comment" dit is natuurlijk geen geldig CSS comment en zou in deze vorm moeten zijn "/* comment */". Verander dat en als t goed is werkt t weer ok

[ Voor 69% gewijzigd door Sappie op 21-04-2005 09:35 ]

woensdag 20 april 2005 17:28

Acties:

woensdag 20 april 2005 17:29

Es gibt keine kleinen Punkte!

Topicstarter

Sappie schreef op woensdag 20 april 2005 @ 17:08:
[...]

aii ik zie het.. hmmz ik ga er ook nog ff naar kijken

Ik weet niet waarom IE6 dit niet goed doet.. verander het hieronder staande om het ook in IE6 goed te krijgen. Absoluut positioneren lijkt in IE6 tov de inhoud van het absoluut / relatief gepositioneerde parent element te gebeuren. Wist ik niet en daar ga ik zelf nog es ff naar kijken.
code:
1
2
3
4
5
6
p.test img {
    position: absolute;
    top: 0;
    left: 0;
    _left: -30px; /* IE only */
}

[beginner modus]
Ik zie wat die _left doet, maar zou jij me misschien uit kunnen leggen wat die _ betekend?
M.a.w. wat is het verschil, ben dit namelijk nog nooit tegengekomen (css pas enkele maanden dus wees aub lief)
[/beginner modus]

Ein kleiner Punkt in einer grossen Welt

Acties:

De Parasitaire Capaciteit!

das de zogenaamde underscore hack.. zoek daar maar op op google.. het komt er op neer dat FF en anderen daar overheen lezen, maar IE niet.

Verder kijk mijn vorige post.. ik had iets stoms gedaan in eerste instantie

woensdag 20 april 2005 17:41

Acties:

woensdag 20 april 2005 18:00

Es gibt keine kleinen Punkte!

Topicstarter

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>blaat</title>
    <style type="text/css">
        p.test {
                    padding: 0 0 0 100px;
                    position: relative;
        }
        
        p.test img {
            position: absolute;
            top: 0px;
            left: 0px;
                        /*_left: -30px;*/
        }
        
    </style>
</head>
<body>
    <p class="test">
        [img]"test.gif"[/img]
                blablablabla<br>
                blablablabla<br>
                blablablabla<br>
                blablablabla<br>
                blablablabla<br>
    </p>
</body>
</html>

Lees ik er overheen, maar hier doet hij het nog niet zonder die underscore hack?

Die underscore hack is wel leuk, nu zijn namelijk ook gelijk wat andere problemen met IE opgelost.

[ Voor 73% gewijzigd door DerKleinePunkt op 20-04-2005 17:47 ]

Ein kleiner Punkt in einer grossen Welt

Acties:

De Parasitaire Capaciteit!

ahh verkeerd gelezen.. ff kijken nog

edit:

hmmz kennelijk moet je voor IE6 een width opgeven aan de parent <p>. dan werkt het hier wel. Kan zo ook niet zeggen waarom dat is en zal er vandaag ook niet meer aan toe komen daarnaar te gaan kijken.

[ Voor 151% gewijzigd door Sappie op 20-04-2005 18:07 ]

woensdag 20 april 2005 18:35

Acties: