Text and Pic

[Neal]

Hi, new here.

I'm designing a site. The page in question has a navbar on left taking 15%
of the screen. A header, containing a centered graphic, requires about
200px.

What I want is to have a picture on the right margin and the text not go
through the picture, as it does now. I figured out how to do this, but I
forgot.

Here's the CSS I have so far. Other than the text passing through the pic,
it looks right.

div.pcontent {

position: absolute;
top: 200px;
left: 20%;
width: 80%;

}


div.photoright {

position: absolute;
top: 200px;
right: 0;
padding: 1em;

}

Help?

[Neal]

Re: Text and Pic

If it's any help, here's the page in question:

http://www.opro.org/newdesign/nsbio.html

And the css is at http://www.opro.org/newdesign/default.css

Looks right, if only the text would wrap before the picture...

"Neal" <neal@spamrcn.c om> wrote in message
news:bpbkdi$cf9 $1@bob.news.rcn .net...[color=blue]
> Hi, new here.
>
> I'm designing a site. The page in question has a navbar on left taking 15%
> of the screen. A header, containing a centered graphic, requires about
> 200px.
>
> What I want is to have a picture on the right margin and the text not go
> through the picture, as it does now. I figured out how to do this, but I
> forgot.
>
> Here's the CSS I have so far. Other than the text passing through the pic,
> it looks right.
>
> div.pcontent {
>
> position: absolute;
> top: 200px;
> left: 20%;
> width: 80%;
>
> }
>
>
> div.photoright {
>
> position: absolute;
> top: 200px;
> right: 0;
> padding: 1em;
>
> }
>
> Help?
>
>[/color]

[Christoph Paeper]

Re: Text and Pic

*Neal* <neal@spamrcn.c om>:[color=blue]
>
> What I want is to have a picture on the right margin and the text not go
> through the picture, as it does now.[/color]

This is the perfect usecase of "float: right". That requires that the 'img'
is in the correct container, though.

--
The Hitchhiker's Guide to the Galaxy:
"The Universe, as has been observed before, is an unsettlingly big place,
a fact which for the sake of a quiet life most people tend to ignore."

[Neal]

Re: Text and Pic

"Christoph Paeper" <crissov2003Q4@ gmx.net> wrote in message
news:bpdd0b$2ui s$1@ariadne.rz. tu-clausthal.de...[color=blue]
> *Neal* <neal@spamrcn.c om>:[color=green]
> >
> > What I want is to have a picture on the right margin and the text not go
> > through the picture, as it does now.[/color]
>
> This is the perfect usecase of "float: right". That requires that the[/color]
'img'[color=blue]
> is in the correct container, though.
>
> --
> The Hitchhiker's Guide to the Galaxy:
> "The Universe, as has been observed before, is an unsettlingly big place,
> a fact which for the sake of a quiet life most people tend to ignore."[/color]

What would you suggest in my case?

[Christoph Paeper]

Re: Text and Pic

*Neal* <neal@spamrcn.c om>:[color=blue]
> "Christoph Paeper" <crissov2003Q4@ gmx.net> wrote[color=green]
>> *Neal* <neal@spamrcn.c om>:[/color]
>[color=green][color=darkred]
>>> What I want is to have a picture on the right margin[/color]
>>
>> This is the perfect usecase of "float: right". That requires that the 'img'
>> is in the correct container, though.[/color]
>
> What would you suggest in my case?[/color]

As said, use "float: right" on the image that is put inside the text's
container.
Do you want me to publish an illustrated step-by-step tutorial for it?

--
Useless Fact #7:
It cost 7 million dollars to build the Titantic and 200 million to make a movie
about it!

[Neal]

Re: Text and Pic


"Christoph Paeper" <crissov2003Q4@ gmx.net> wrote in message
news:bpec30$1eb v$1@ariadne.rz. tu-clausthal.de...[color=blue][color=green][color=darkred]
> >> This is the perfect usecase of "float: right". That requires that the[/color][/color][/color]
'img'[color=blue][color=green][color=darkred]
> >> is in the correct container, though.[/color]
> >
> > What would you suggest in my case?[/color]
>
> As said, use "float: right" on the image that is put inside the text's
> container.
> Do you want me to publish an illustrated step-by-step tutorial for it?[/color]

What confused me was that it seemed you were saying my img was "not" in the
correct container, but I didn't know what the correct container was. I see
now you're saying to put the img in the same div as the text and to style it
float: right; but I didn't get that from your original message. Thanks for
clarifying.

No need for a step-by-step tutorial. However, if anyone knows of good
resources dealing specifically with positioning and layout in CSS, I'd love
to see them, as that aspect of CSS is the hardest for me to grasp.

[Neal]

Re: Text and Pic

Update: I attempted setting the img tag as float: right; within the same
<div> as the text. Result was the pic was to the right and the text was
after the pic. Attempts to put text and img in separate containers seems to
always result in text over the pic, and never in text wrapping before the
pic, which is desired.

So that I can move onto other challenges, I've changed the design of that
page to something less ideal that will work. If anyone has other ideas on
how to format the text so I can get the desired effect, I'd appreciate it.
Apologies if I seem a pain in the butt - as said, the positioning aspect of
CSS I don't quite fully grasp yet.

Thanks for the time.

[Christoph Paeper]

Re: Text and Pic

*Neal* <neal@spamrcn.c om>:[color=blue]
>
> Update: I attempted setting the img tag as float: right; within the same
> <div> as the text. Result was the pic was to the right and the text was
> after the pic. Attempts to put text and img in separate containers seems to
> always result in text over the pic, and never in text wrapping before the
> pic, which is desired.[/color]

AFAICS you're trying to mix "position: absolute" with "float: right", which
won't lead to success. Do only either one.

<div class="pcontent leftofpic">
<img class="photorig ht" src="pics/nealsmal.jpg" ... />
<h1>About the Conductor</h1>

.photoright {
margin-top: 100px;
float: right;
padding: 1em;
width: 250px;
}

--
To be or not to be -- that's no question, it's a decision.

[Neal]

Re: Text and Pic


"Christoph Paeper" <crissov2003Q4@ gmx.net> wrote in message
news:bpgjkj$1ki 5$1@ariadne.rz. tu-clausthal.de...[color=blue]
> AFAICS you're trying to mix "position: absolute" with "float: right",[/color]
which[color=blue]
> won't lead to success. Do only either one.[/color]

I got it there! Thanks a heap for your help. Check it out at

http://www.opro.org/newdesign/nsbio.html

Here's what it took.

html --

<div class="pcontent ">
<h1>Heading</h1>
<div class="leftofpi c">
<img class="rightoft ext" />
<p>text here</p>
</div></div>

css --

div.pcontent {
position: absolute;
top: 200px;
left: 20%;
width: 75%;
padding: 0;
margin: 1em;
}

img.rightoftext {
float: right;
padding: 1em;
width: 250px;
margin: 0;
margin-left: 1em;

}

div.leftofpic {
float: left;
margin-top: 200px;
width: 90%;
margin: 1em;
}

[Ole Kristian Bangås]

Re: Text and Pic

On Wed, 19 Nov 2003 18:23:10 -0500, Neal <neal@spamrcn.c om> wrote:
[color=blue]
> I got it there! Thanks a heap for your help. Check it out at
> http://www.opro.org/newdesign/nsbio.html[/color]

Just a few friendly comments:

- The edge of the text "The Old Post Road Orchestra" is not too
pretty to look at, possibly due to a ressizing of an image.

- You have a problem with the menu when you resize the browser
window (making it narrow). This is visible in both IE, Opera
and Mozilla, but best in the latter two.

- In Opera there is no space (and in IE just a little) below
last paragraph. You might want to add a little more space here,
to make the end of your page look prettier.

--
Ole Kristian Bangås

[Neal]

Re: Text and Pic


"Ole Kristian Bangås" <ole.news@netco nnect.no> wrote in message
news:oprywrzcpx bx7foi@news.ind ividual.net...[color=blue]
> - The edge of the text "The Old Post Road Orchestra" is not too
> pretty to look at, possibly due to a ressizing of an image.[/color]

The gif? I agree. The graphic person's coming up with a new one at-size.
This is tweaked as best as I can for now.
[color=blue]
> - You have a problem with the menu when you resize the browser
> window (making it narrow). This is visible in both IE, Opera
> and Mozilla, but best in the latter two.[/color]

I'm going for good layout at 800x600 and up. I see the problem, probably due
to using % instead of ems. I'd think using % would not stick content behind
the nav bar, but it seems to.

[color=blue]
> - In Opera there is no space (and in IE just a little) below
> last paragraph. You might want to add a little more space here,
> to make the end of your page look prettier.[/color]

That is bothering me as well. I've tried upping the margin on that div,
still cuts off. That border hits the lower edge of the browser everytime.
What'll work here?