Register - Login
Views: 99848612
 Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies 		05-04-22 05:13:34 AM
Jul - Computers and Technology - CSS: Prevent text from overlapping positioned element New poll - New thread - New reply
Next newer thread | Next older thread
Rena
I had one (1) message in Discord deleted and proceeded to make a huge, huge mess about how it was a violation of free speech and how moderators are supposed to be spam janitors and nobody should have the right to tell me not to talk about school shootings
Level: 135


Posts: 3681/5390
EXP: 29078042
For next: 256963

Since: 07-22-07

Pronouns: he/him/whatever
From: RSP Segment 6

Since last post: 343 days
Last activity: 343 days
Posted on 09-28-10 05:01:30 AM (last edited by Rena at 09-28-10 02:03 AM) Link | Quote
09-28-10 12:01:30 AM
Post #3681
Well, I thought I'd try to improve upon this layout some more, and I think once again I've run up against one of the limitations of CSS.

What I want to do is get rid of this surrounding box and just place the image inline, lining it up with a series of empty <div>s of varying widths, preventing the text from flowing onto the non-transparent parts of the image. Creating those is fairly trivial:

(Each yellow rectangle is a <div> )

The problem is making the image work right. It needs to stick to the bottom of the container, but not pass the top.

e.g. a long post will end up like this:


whereas a short one will end up like this:



and not like this:





I've managed it in this layout by putting the image in an absolute-positioned box and using some clipping and scrolling settings. (I don't actually remember the exact method but I could easily figure it out again...)
The problem is, being absolute-positioned means text will ignore it and flow right overtop. I prevent that with a margin, but that doesn't allow text to line up close to the image - it just keeps it no less than a certain distance from the edge of the container, which happens to be the width of the image at its widest point.
I haven't found a way to properly clip the image without using absolute positioning, and the stacked <div>s need to be at the same Y position as the image, while still preventing text from flowing onto them individually. Is there any way to achieve this with CSS?

The other option is to eliminate the top clipping issue by setting a minimum height to display the entire image in every post. Since it's a large image, this is hardly ideal.

____________________



[loading witty comment...]
Blag! Like a blog, but better.
Leroy
Member
Level: 19


Posts: 60/60
EXP: 30501
For next: 5276

Since: 07-18-10


Since last post: 11.6 years
Last activity: 11.1 years
Posted on 09-28-10 09:34:15 AM (last edited by Leroy at 09-28-10 06:37 AM) Link | Quote
This is what 'container' and 'wrapper' divs are for. Create a 'top most' container div with the background image (positioned bottom right), a div 'underneath' that with a min-height property identical to the image's height, and in that div underneath, put all those right-floating divs and your post text.

____________________
Leroy and Dunja are going down under! =)
Rena
I had one (1) message in Discord deleted and proceeded to make a huge, huge mess about how it was a violation of free speech and how moderators are supposed to be spam janitors and nobody should have the right to tell me not to talk about school shootings
Level: 135


Posts: 3689/5390
EXP: 29078042
For next: 256963

Since: 07-22-07

Pronouns: he/him/whatever
From: RSP Segment 6

Since last post: 343 days
Last activity: 343 days
Posted on 10-03-10 02:35:02 AM (last edited by Rena at 10-02-10 11:36 PM) Link | Quote
10-02-10 09:35:02 PM
Post #3689
Yes, I have that, but how do I make the post itself only as tall as it needs to be (min-height 190px, whereas image height is 450px) without the image alignment problem? So far I have this:<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="test.css" />
<title></title>
</head>
<body>
<div class="rena_main">
<div class="rena_bg"></div>
<div class="rena_text">
<div class="x">
<div class="xp"></div>
<div class="xs" style="width: 175px"></div>
<div class="xs" style="width: 190px"></div>
<div class="xs" style="width: 243px"></div>
<div class="xs" style="width: 248px"></div>
<div class="xs" style="width: 235px"></div>
<div class="xs" style="width: 228px"></div>
<div class="xs" style="width: 238px"></div>
<div class="xs" style="width: 252px"></div>
<div class="xs" style="width: 263px"></div>
<div class="xs" style="width: 271px"></div>
<div class="xs" style="width: 279px"></div>
<div class="xs" style="width: 285px"></div>
<div class="xs" style="width: 287px"></div>
<div class="xs" style="width: 283px"></div>
<div class="xs" style="width: 262px"></div>
<div class="xs" style="width: 225px"></div>
<div class="xs" style="width: 227px"></div>
<div class="xs" style="width: 227px"></div>
<div class="xs" style="width: 232px"></div>
<div class="xs" style="width: 236px"></div>
<div class="xs" style="width: 237px"></div>
<div class="xs" style="width: 238px"></div>
<div class="xs" style="width: 238px"></div>
<div class="xs" style="width: 237px"></div>
<div class="xs" style="width: 235px"></div>
<div class="xs" style="width: 231px"></div>
<div class="xs" style="width: 229px"></div>
<div class="xs" style="width: 227px"></div>
</div>
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
jkg fdkjg kjlf jkgf vdfg gdsgh hf fg dsu ehg ue dygf fg wef
</div>
</div>
</body>
</html>.rena_main {
background: url('http://img188.imageshack.us/img188/1677/6fipens.png');
position: relative;
min-height: 190px;
color: #FFF;
overflow: hidden;
font-size: 1em;
}

.rena_bg {
background: url("http://img402.imageshack.us/img402/9793/renat.png") no-repeat bottom right;
height: 100%;
/*min-height: 450px;*/
min-width: 300px;
position: absolute;
bottom: 0px;
right: 0px;
border: 1px #F00 dotted;
}

.rena_text {

}

.x {
border: 1px #0F0 dashed;
}

.xp {
border: 1px #F0F solid;
height: 0px;
width: 1px;
margin-right: 0px;
}

.xs {
float: right;
clear: right;
outline: 1px #FF0 dashed;
margin-left: 0px;
height: 1em;
}
The result is this, which works except that I see no way to make the entire thing only as tall as needed. The stack of yellow boxes (and probably the image itself) stretch the entire container.

____________________



[loading witty comment...]
Blag! Like a blog, but better.
Joe
Common spammer
🍬
Level: 111


Posts: 1507/3392
EXP: 14502403
For next: 365957

Since: 08-02-07

From: Pororoca

Since last post: 13 days
Last activity: 3 hours
Posted on 10-03-10 02:44:41 AM Link | Quote
Your spacing boxes don't follow the image. Make the window really skinny and you'll see.

____________________
Rena
I had one (1) message in Discord deleted and proceeded to make a huge, huge mess about how it was a violation of free speech and how moderators are supposed to be spam janitors and nobody should have the right to tell me not to talk about school shootings
Level: 135


Posts: 3690/5390
EXP: 29078042
For next: 256963

Since: 07-22-07

Pronouns: he/him/whatever
From: RSP Segment 6

Since last post: 343 days
Last activity: 343 days
Posted on 10-03-10 02:46:53 AM Link | Quote
10-02-10 09:46:53 PM
Post #3690
Mhm, that's another problem I'd forgotten about... if the boxes aren't on the same layer as the image, they won't follow it when there's enough text to stretch the container.

____________________



[loading witty comment...]
Blag! Like a blog, but better.
Next newer thread | Next older thread
Jul - Computers and Technology - CSS: Prevent text from overlapping positioned element New poll - New thread - New reply


Rusted Logic

Acmlmboard - commit 47be4dc [2021-08-23]
©2000-2022 Acmlm, Xkeeper, Kaito Sinclaire, et al.

29 database queries.
Query execution time: 0.104854 seconds
Script execution time: 0.019445 seconds
Total render time: 0.124299 seconds