[CSS] Dingen laten overlappen (met relative) - Softwareontwikkeling

maandag 2 augustus 2004 23:20

Acties:

Topicstarter

Zucht, ik kom er gewoon niet uit. Ik heb een plaatje van 500x500 ofzo, en ik wil er tekst op zetten. Dat plaatje staat gewoon gecentreerd. Hoe moet ik hier nou gewoon tekst opkrijgen? Ik wil dat het plaatje de 'parent element' is. Ik heb echt al zoveel geprobeerd, maar niks werkt. Relative pakt de Z-index niet, maar hoe moet het dan?

Kan iemand mij helpen? Hieronder nog de 'basis' broncode... Alvast enorm bedankt

code:

<html>
<head>
<title>Untitlted</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#000000">

<div align="center">
[img]"plaatje.jpg"[/img]
<span>Hoi</span>
</div>

</body>

</html>

[ Voor 39% gewijzigd door TMC op 02-08-2004 23:21 . Reden: Code wat overzichtelijker gemaakt. ]

maandag 2 augustus 2004 23:33

Acties:

crisp

Devver

Pixelated

HTML:

<div align="center" id="bla">
<img src="plaatje.jpg" width="500" height="500">
<span>Hoi</span>
</div>

Cascading Stylesheet:

#bla span {
  position: relative;
  top: -250px;
  left: -250px;
  color: white;
}

zelfs zonder z-index staat die text boven het plaatje hoor...

Intentionally left blank

maandag 2 augustus 2004 23:34

Acties:

Johnny

ondergewaardeerde internetguru

HTML:

<div style="text-align:center;">
<div style="margin:auto; width: 500px; position:relative; background-color:#ddd;">
[img]"test.jpg"[/img]
<p style="position: absolute; top: 20px; left:100px;">hoi</p>
</div>
</div>

Shit, crisp was me voor

Maar mijn manier is makkelijker om de tekst te positioneren omdat je niet hoeft terug te rekenen en negatieve waarden hoeft te gebruiken.

[ Voor 40% gewijzigd door Johnny op 02-08-2004 23:36 ]

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

maandag 2 augustus 2004 23:38

Acties:

crisp

Devver

Pixelated

Johnny: hij vroeg toch om relative?

Maar goed, ik denk dat we bij deze wel gedemonstreerd hebben wat nou het verschil is tussen relative en absolute - namelijk het punt van waaruit je redeneert. z-index heeft daar weinig mee te maken, dat werkt gewoon hetzelfde voor alle gepositioneerde boxen.
Note dat bij relative het element op z'n oorspronkelijke plaats wel nog ruimte inneemt.

[ Voor 13% gewijzigd door crisp op 02-08-2004 23:41 ]

Intentionally left blank

maandag 2 augustus 2004 23:39

Acties:

TMC

Topicstarter

$_/-\o_$ Heel erg bedankt!

Ik ben nog niet zo'n ster in CSS, en ik zit al een uur te klooien. Ik ga nu even jullie codes nader onderzoeken.

maandag 2 augustus 2004 23:40

Acties:

TMC

Topicstarter

Ik snap absolute/relative wel, alleen de z-index werkt niet bij relative.

maandag 2 augustus 2004 23:42

Acties:

Verwijderd

ligt er aan of het gewenst is maar dit kan ook door middel van een background.
alla

Cascading Stylesheet:

1
2
3

.class {
background: transparent url(plaatje.jpg) no-repeat;
}

vind ik meestal simpeler.
maar hangt af van waar je het voor nodig hebt

maandag 2 augustus 2004 23:43

Acties:

TMC

Topicstarter

Verwijderd schreef op 02 augustus 2004 @ 23:42:
ligt er aan of het gewenst is maar dit kan ook door middel van een background.
alla
Cascading Stylesheet:
1
2
3
.class {
background: transparent url(plaatje.jpg) no-repeat;
}
vind ik meestal simpeler.
maar hangt af van waar je het voor nodig hebt

Inderdaad simpeler, alleen zo leer iK CSS nooit

. Ik had er zelf nog niet aan gedacht overigens, thanks

maandag 2 augustus 2004 23:43

Acties:

crisp

Devver

Pixelated

TerryC schreef op 02 augustus 2004 @ 23:40:
Ik snap absolute/relative wel, alleen de z-index werkt niet bij relative.

volgens de specs zou dat wel moeten werken voor relative geplaatste elementen; die spreken namelijk over 'gepositioneerde elementen' en dat zijn alle elementen met een position waarde anders dan 'static'. Als een browser dat niet honoreerd dan is dat gewoon een bug.

Intentionally left blank

Pagina: 1

Reageer