next »

[Please Support Us!]

Please Support Us!

Please help keep (=WDG=) alive

• Server rules
• Forum rules
• Join us
  
• Clan members
• About the clan
• Server stats
• WDG YouTube Channel
• WDG Downloads
• IRC Webchat

Steam groups:

• WDG community
• WDG clan group
• WDG Battlelog Platoon

Our allies:

• [NuB] TF2 clan
• Velocity Gamers Hub
• Destination Gamer

GoG Links:

• Wix Discord
• Wix IRC channel

TF2 Links:

• Official TF2 Blog
• TF2 Steam Forum
• The Fort 2

October 2025

Mo	Tu	We	Th	Fr	Sa	Su
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31
	Birthdays
Chaos (40)
	Upcoming Events
Upcoming Birthdays: Chaos (40)

[discordance]

Sooo I really don't know much css, i'm currently trying to position an image on top of another image, i've done this with absolute positioning but i can't get the document flow to resume after my relative container.

Code:

<div style="position: relative;font-size: 0pt; line-height: 0pt; cursor: help;">
<div style="position: absolute;">{{click|image=rewardBg{{#switch:{{Data|{{{1}}}|rare|false}}|true=_rare|false=|}}.gif|link={{{1}}}}}</div>
<div style="position: absolute; margin-left: 8px; margin-top: 9px;">{{click|image={{Data|{{{1}}}|image|r_ban.gif}}|link={{{1}}}}}</div>
<div style="text-align: right;font-size: 7.5pt;color: #F8EACB;font-weight: bold;letter-spacing: -0.5pt;"></div>
</div><div style="position: relative;left:32px;>Luckgfnsogser</div>

the div contents you can ignore thats some wiki templates that get processed into html, the first absolute div will always contain a 32x32 background image, the second is a smaller image that floats over it. the text in my final div just resumes flow right at the start of the container and the first few letters are under the background image

[DeadlyAvenger]

Probably want a

Code:

<div style="clear:both;"></div>

After the images so the document flow can continue.

Also - I'm pretty sure using CSS to overlap images is a bad idea.

[r007]

Isn't clear just for floats? Also I'm pretty sure you can put the clear into the first paragraph that needs to resume normal page flow. (No need for an extra div.)

Two possibilities: Either the two images are really a "float" (e.g. Text needs to wrap around them); or they are merely over- or underlays (which is what you have right now). I'd bet the first.

Also you're using implicit values a lot. I think it should be along the lines of:

Code:

div#first {
  position: relative;
  top: somevalue-relative-to-normal-position;
  left: same-here;
}

div#image1 {
  position: absolute;
  top: some-position-on-the-page;
  left: you-guessed-it;
  /* float: left; */ /* if you want that */
}

(add float's as appropriate)

[DeadlyAvenger]

Don't some of the positioning methods automatically make things float?

(I'm very much a try it and see css-er - I can usually get something working by tinkering with it repeatedly until it looks how I want)

[r007]

Same here, really; Personal experience has taught me not to mess with the position attribute. I got it to work like this:

Code:

<div style="cursor: help;float:left;">
<div style="float: left; top: 0px; left: 0px;">{{click|image=rewardBg{{#switch:{{Data|{{{1}}}|rare|false}}|true=_rare|false=|}}.gif|link={{{1}}}}}</div>
<div style="float: left; margin-left: -24px; margin-top: 9px;">{{click|image={{Data|{{{1}}}|image|r_ban.gif}}|link={{{1}}}}}</div>
<div style="float: left; text-align: right;font-size: 7.5pt;color: #F8EACB;font-weight: bold;letter-spacing: -0.5pt;">Text beside image?</div>
</div><div style="clear:both;">Luckgfnsogser</div>

[discordance]

guys we all suck, i was missing a " on the final div haha. Thanks for the help will test both r007s and my now fixed position stuff.

EDIT: Still testing but i think floats with a few tweaks would probably work better, my method causes problems with the following line