Help - Search - Members - Calendar
Full Version: Need help with putting pictures and text on the same line...
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
HungryWolf
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.
pandy
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?
HungryWolf
I need help putting pictures and text on the same line. I don't understand why it's not working, but it's not.
Darin McGrew
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.
HungryWolf
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
Peter1968
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>
pandy
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

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.
HungryWolf
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?
Darin McGrew
Your style sheet is using "display : block" for the image, so the browser is displaying the image as a block-level element.
HungryWolf
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?
jimlongo
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>
HungryWolf
Ah, that works but it completely screws up my template.

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

Thanks.
HungryWolf
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.
Darin McGrew
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.