Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Need help with putting pictures and text on the same line...

Posted by: HungryWolf Oct 7 2006, 08:47 PM

I don't know why this is happening, but because I'm a noob when it comes to coding of any sort, I thought it would be easier to just ask here.

Here's my HTML: http://www.freewebs.com/hungrywolf/code.html

If someone could check that out and see why it's happening, I would be extremely grateful.

Posted by: pandy Oct 8 2006, 12:16 AM

QUOTE(HungryWolf @ Oct 8 2006, 03:47 AM) *

If someone could check that out and see why it's happening, I would be extremely grateful.

What's "this" that you don't want to happen?

Posted by: HungryWolf Oct 8 2006, 10:24 AM

I need help putting pictures and text on the same line. I don't understand why it's not working, but it's not.

Posted by: Darin McGrew Oct 8 2006, 10:39 AM

A page displaying the HTML source isn't very useful. An HTML page using that source would be more useful. But with that said...

What image are you trying to put on the same line as what text? I didn't see anywhere that you had tried to do this.

Posted by: HungryWolf Oct 8 2006, 07:36 PM

QUOTE(Darin McGrew @ Oct 8 2006, 11:39 AM) *

A page displaying the HTML source isn't very useful. An HTML page using that source would be more useful. But with that said...

What image are you trying to put on the same line as what text? I didn't see anywhere that you had tried to do this.


I don't understand why that would be more useful, but:

http://www.freewebs.com/oddducks/help.html

Posted by: Peter1968 Oct 9 2006, 03:43 AM

The whole thing is arranged as a weird table, rows, cells and all. Not sure if you're doing that or the freewebs page creator is.

But, you have the text and the image separated by paragraph tags. Get rid of them and the text and image should be on the same line.

CODE
<div style="overflow: auto; width: 770px; height: 315px">
        <p>This is what it's doing.</p>
        <p>I have text and when I try to put a picture next to it, it automatically goes to the line downwards from it.</p>
        <p>Example<img src="images/katamariballfull.gif" width="24" height="23"></p>
      </div>

Posted by: pandy Oct 9 2006, 03:58 AM

QUOTE(HungryWolf @ Oct 9 2006, 02:36 AM) *

I don't understand why that would be more useful, but:

Because you had about 10 images in the page you posted the code of and you didn't tell us which one you had problems with. There wasn't text close to any of them, so rather hard to guess. Also because everyone had to copy-paste the code to be able to see the page in a browser. We can use View Source to see the coding.

QUOTE
http://www.freewebs.com/oddducks/help.html

Much more useful. smile.gif
Peter1968 provided the answer. But don't get rid of all paras. Put the image inside the para with the text you want it next to.

Posted by: HungryWolf Oct 11 2006, 10:05 PM

That's no help, unless I'm not understanding what you're telling me. The text and the picture are both in the same paragraph yet they're still doing this. 'Example' stands for text that should be next to the picture, but instead for some reason ends up above it. Is there something in the script that might be doing this?

Posted by: Darin McGrew Oct 11 2006, 11:39 PM

Your style sheet is using "display : block" for the image, so the browser is displaying the image as a block-level element.

Posted by: HungryWolf Oct 12 2006, 02:24 PM

QUOTE(Darin McGrew @ Oct 12 2006, 12:39 AM) *

Your style sheet is using "display : block" for the image, so the browser is displaying the image as a block-level element.


What would I have to change to make it not do that?

Posted by: jimlongo Oct 12 2006, 02:39 PM

QUOTE(HungryWolf @ Oct 12 2006, 03:24 PM) *

QUOTE(Darin McGrew @ Oct 12 2006, 12:39 AM) *

Your style sheet is using "display : block" for the image, so the browser is displaying the image as a block-level element.


What would I have to change to make it not do that?



remove img from the in-line style declaration in your html
change
CODE
<style type="text/css">td img {display: block;}</style>

to
CODE
<style type="text/css">td {display: block;}</style>

Posted by: HungryWolf Oct 12 2006, 09:01 PM

Ah, that works but it completely screws up my template.

Oh well, I'll either suffer or find a new template.

Thanks.

Posted by: HungryWolf Oct 20 2006, 10:02 AM

I was wondering; would I be able to put that script before where I put the pictures in my divider and end it after I put the pictures in my divider, so I can have it how I want: the pictures sitting next to the text instead of under it, and also keep the template from screwing up? If it's possible at all, it shouldn't be too hard considering this is all in a <div> and shouldn't affect the whole thing.

Posted by: Darin McGrew Oct 20 2006, 10:57 AM

If I understand the question correctly, then no, you can't put a style element inside a div element. The style element goes inside the head element.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)