Inline Styles - Img Height, Width, Align?

S

simonkey88

Hello,

My knowledge of CSS is very limited. I'm attempting to create a
fundraising web page on the Active.com web site. Unfortunately, they
have a very rigid template that appears to be defined by a style
sheet. I simply want to add an image to my page with the following
code:

<img src="myimage.jpg" height="400" width="300" align="center">

However, when I add this code my image shows up aligned right and is
squished into a size that might be 200x100. So it seems the site has
set the style of all images to a certain size. Can I override this
style? Is it possible to use an inline style? Or other methods?

Any help would be greatly appreciated. Example code would be even
better.

Thank you,

-daniel
 
J

Jonathan N. Little

Hello,

My knowledge of CSS is very limited. I'm attempting to create a
fundraising web page on the Active.com web site. Unfortunately, they
have a very rigid template that appears to be defined by a style
sheet. I simply want to add an image to my page with the following
code:

<img src="myimage.jpg" height="400" width="300" align="center">

However, when I add this code my image shows up aligned right and is
squished into a size that might be 200x100. So it seems the site has
set the style of all images to a certain size.
Click to expand...


Not according to the stylesheet for Active.com, they are not styling IMG
at all. How about a URL to the actual page your are struggling with and
we can see what is going on specifically with that page.

BTW: IMGs are inline elements by default there is no attribute
'align="center"' for IMGs.
 
S

simonkey88

Not according to the stylesheet for Active.com, they are not styling IMG
at all. How about a URL to the actual page your are struggling with and
we can see what is going on specifically with that page.

BTW: IMGs are inline elements by default there is no attribute
'align="center"' for IMGs.
Click to expand...

Well I seem to be getting closer to my goal. You can see the page at:

http://www.active.com/donate/tntnyc/dhuggard/

I used the following for the images:

<IMG STYLE="float:left; WIDTH:400px; HEIGHT:300px"
SRC="MYIMAGE.jpg">

However, now I'm having a tough time getting the photo caption aligned
under each picture. The text wants to wrap on the right. What code
would be best or most elegent for displaying the images and having a
text caption centered under each one?

Again, greatly apprecaited.

-daniel
 
S

simonkey88

Nope, I see the problem. I shouldn't have added the extra forward
slash at the end of the URL. The correct address is:

http://www.active.com/donate/tntnyc/dhuggard- Hide quoted text -

- Show quoted text -
Click to expand...

Well I'm slowly educating myself through this trial and error
process. Active.com has a very simple web interface that allows you
to change the content of your fundraising page. So there is *no*
ability to change the external style sheet or internal style sheet
(i.e. inside <head> tag). Thus you are left with Inline style.
Unfortunately, I don't have a very good grasp of CSS and have been
hunting around the net to find a simple Inline example that would let
me display my photos and have a text caption centered under each one.

Hope the URL and explination makes sense. Please let me know if I can
provide further clarifcation.

Thank you,

-daniel
 
J

Jonathan N. Little

Sorry, it seems that the site is taken offline while I'm in the edit
function of the template. Please try now:

http://www.active.com/donate/tntnyc/dhuggard
Click to expand...

What is bad to me is in their stylesheet:

#content {
text-align:left;
font-size:14px;
width:570px;
align:left;
border:1px solid #666666;
float:left;
margin:8px 4px 8px 2px;
}

sizing in pixels instead of em's and worst that your are stuffed into a
"width:570px;" narrow box!

Try adding to your stylesheet:

#content {
width: auto !important;
}
 
S

simonkey88

What is bad to me is in their stylesheet:

#content {
text-align:left;
font-size:14px;
width:570px;
align:left;
border:1px solid #666666;
float:left;
margin:8px 4px 8px 2px;

}

sizing in pixels instead of em's and worst that your are stuffed into a
"width:570px;" narrow box!

Try adding to your stylesheet:

#content {
width: auto !important;

}
Click to expand...

Eurka! My coding is probably horrendous, but I got sort of what I
wanted to appear in IE, with the following:

<IMG STYLE="float:left; WIDTH:400px; HEIGHT:300px"
SRC="MY_IMAGE.jpg"><br clear=all>
<p style="font-size: 10px; font-family: Arial, sans-serif; color:
#000000">TITLE OF MY IMAGE</p>

-daniel
 
J

J.O. Aho

Well I'm slowly educating myself through this trial and error
process. Active.com has a very simple web interface that allows you
to change the content of your fundraising page. So there is *no*
ability to change the external style sheet or internal style sheet
(i.e. inside <head> tag). Thus you are left with Inline style.
Click to expand...

I think you can import CSS outside the header too, but of course the page
won't be validated by the w3c validator that way.

> Unfortunately, I don't have a very good grasp of CSS and have been
> hunting around the net to find a simple Inline example that would let
> me display my photos and have a text caption centered under each one.
Click to expand...

After this you will be an expert ;)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align img inside nav tabs section 5
Responsive width SVG image with fixed height rectangle at left and bottom - see my pen 0
Can anyone please help? HTML - two tables applying different styles 4
Help with code 0
I am trying to detect Which image id="" was clicked ? 22
Aligned to the left 3
Help with Visual Lightbox: Scripts 2
HTML Aligning social media icons 2

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 202

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top