Forum Moderators: not2easy

Message Too Old, No Replies

a question of header

how to join image + text wrapping around

         

helphope

3:22 pm on Feb 25, 2006 (gmt 0)

10+ Year Member



Hello to everybody!
I'm stumped.
I'm trying to put in the left corner of a header an image which should be surrounded by some text.
This is the CSS code:

#navcontainer {
width: 560px;
font-size: 69px;}

#header {
border: 1px solid #000;
background-image: url(../../../../03.png);
background-position: 0% 0%;
background-repeat: no-repeat;
padding: 5px; }

... plus more boxes

This is the HTML code
<div id="container">
<div id="header"></div>

But all this stuff doesn't work. I mean the text won't wrap around the image.
I also tried to nest another box inside the <div id="header"> but it came out as a mess, leaving me in a muddle state of mind.
thanks for helping me.

doodlebee

3:37 pm on Feb 25, 2006 (gmt 0)

10+ Year Member



Well, one thing might be that your CSS calls for #navcontainer, but the div ID you're calling in your markup is simply "container"....

Also, you need to float your header image (add in float:left) - then the text will wrap around the image. You can adjust the padding as needed so the text won't butt right up against the image.

But that *should* do it.

helphope

2:53 pm on Feb 26, 2006 (gmt 0)

10+ Year Member



Thanks a lot!
I'll try as soon as possibe and tyou know.
thanks again

helphope

2:09 pm on Mar 1, 2006 (gmt 0)

10+ Year Member



Hi.
Here I am, again. just to let you know how I overcame the problem.
In the HTML code I wrote a new line:
<div id="navcontainer">
<div id="header">
<img id"img" src="03.png"></div>

In The CSS I wrote a new line too:
#header {
border: 1px solid #000;
padding: 5px; }
#img {float:left}

As far as I can see there is no way to manage all the thing just with CSS; there is the neeed of a bit of HTML.
Bye, bye.

Helphope

doodlebee

8:07 pm on Mar 2, 2006 (gmt 0)

10+ Year Member



Apologies - I didn't realize the image you neede to wrap was the background image in the header div. I thought you were trying to place an image inside the header - not set it as the background.

Your solution is what would work - the image would need to be put into the HTML, not set as the background - but if you wanted to have the image show as the background with text next to it, you could have also set your margin-left to the width of the image in the background. Then the text would be next to the image in question - not over it. However, it won't "wrap" around the image, because there's nothing for the text to wrap when the image is set as the background. If you wanted the text beside/below the image in question, then yes, some HTML is needed to make it wrap in such a way.

Glad it worked for you!

helphope

7:47 pm on Mar 3, 2006 (gmt 0)

10+ Year Member



Thans again, 'cause with this reply of yours I understand better the whole matter.
Thast' great. thanks.