Need a clue on how to create this div box

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hola, html folk!

I am trying to combine a div box with a graphic.  There is a poorly
executed approximation here:

How do I get the graphic and the div hooked together?  I would like to get
the graphic centered in the middle of the blue box, a little to the left
of the left hand border.  I have a couple different icons I want to use,
but they are the same size as the one in the example page above.

Any hints, advice, referrals, etc., much appreciated!


Re: Need a clue on how to create this div box

Danny Anderson wrote:
Quoted text here. Click to load it

If I understand it, you are letting the quickbox flow into place normally,
without positioning, but you are trying to make an absolutely positioned
element, quickbox_ icon, align with it? (If I've got that wrong, ignore what I
say below).

That is probably doomed. It will blow apart whenever anything disturbs the
normal flow. It blows apart when I use a large text size, for example.

I think you will have to wrap the 2 of them together to ensure they stay
together, then position each of them somehow within the wrapper. For example:

<div id="quickwrapper">
<div id="quickicon"><img .......></div>
<div id="quickbox">....</div>

Then you might float the icon left, and let the box flow normally into place
with a 50px left margin so that it doesn't overwrite the icon.

There are other options, of course - but I think the key is the wrapping them

Barry Pearson / / /

Re: Need a clue on how to create this div box

Quoted text here. Click to load it

Put green_hand.gif directly inside quickbox, then use "position:relative;
top:-Xpx", where X is half the height of green_hand. That's probably not
all, but from here on, it shouldn't take much from here to get it to work.


Site Timeline