Movable Type Community Forum

Movable Type Community Forum > Additional Resources > Tips and Tricks

valleysoapbox

Feb 2 2004, 06:40 AM

I'd like a static image on the top of my pages.

I placed a base code to point to where to find the image folder. is there a tag I use to call the image?

imabug

Feb 2 2004, 06:50 AM

The IMG tag is the usual one for showing images

CODE

valleysoapbox

Feb 2 2004, 03:01 PM

Two things,

does it require a base code, like I mentioned before?

and with "path to image", do I

QUOTE

[img]http://www.valleysoapbox.com/CGI-BIN/MT/mt-static/mascot3.gif[/img]

or should I place my images outside my cgi-bin?

valleysoapbox

Feb 2 2004, 03:01 PM

Two things,

does it require a base code, like I mentioned before?

and with "path to image", do I

CODE

[IMG]http://www.valleysoapbox.com/CGI-BIN/MT/mt-static/mascot3.gif[/IMG]

or should I place my images outside my cgi-bin?

LisaJill

Feb 2 2004, 03:31 PM

You place images outside the cgi-bin, and it does not require a base url, if you mean what I think you do. =)

valleysoapbox

Feb 2 2004, 04:05 PM

okay....

then what I did was...

CODE

my blog resides in www.valleysoapbox.com/blog

my image resides in www.valleysoapbox.com/blog/soapbox_images/mascot3.gif

am I missing something, because I have it set as I do above, and I'm unable to see it

here's my placement code:

CODE

<div id="banner"><h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1><img src="/blog/soapbox_images/mascot3.gif" width="img_width" height="img_height" alt="image description" />
<span class="description"><$MTBlogDescription$></span>
</div>

LisaJill

Feb 2 2004, 04:08 PM

It's showing in firebird, but not ie.

You need to replace img_height and img_width with numbers, the actual numbers that correleate to the images height and width - or remove the width="" and height="" statements. Those are probably throwing IE off. The alt="img_description" you shoudl replace with something meaningful as well, a plain text description of the image like alt="header image"

do that and see if that fixes ie =)

valleysoapbox

Feb 2 2004, 04:15 PM

that did it, I think.

my next is to wrap it somehow.

www.valleysoapbox.com

is the way I want it to look

Thanks LisaJill

LisaJill

Feb 2 2004, 04:37 PM

add this to your stylesheet:

CODE

/* make images float left or right, use img class="floatpic" src... /> in post */
.floatpicleft {
float: left;
margin-top: 10px;
margin-right: 10px;
margin-bottom:10px;
}

.floatpicright {
float: right;
margin-top: 10px;
margin-left: 10px;
margin-bottom:10px;
}

then if you want it to float left, use this:

CODE

you dn't need right if you don't want, but i left it there in caes you want it for posts etc.

does that help?

valleysoapbox

Feb 2 2004, 05:02 PM

I'm allllllmost there.

You've really helped me with that one.

Now, for some reason, my #content section has overlapped.

LisaJill

Feb 2 2004, 05:04 PM

You could try increasing the padding on the banner, or the margin-bottom on the floatpic left, or adding a margin-top to your #content....

play around with it =)

valleysoapbox

Feb 2 2004, 05:21 PM

fixed the banner problem
but now the #content is in the middle and the #links column have moved

valleysoapbox

Feb 2 2004, 05:45 PM

CODE

    #banner {
font-family:georgia, verdana, arial, sans-serif;
color:#FFF;
font-size:x-large;
font-weight:bold;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
     background:#FFFFFF;
padding:15px;
}

    #content {
float:left;
width:75%;
position:absolute;
background:#FFF;
margin-bottom:20px;
border:1px solid #CCCCCC;
}

    #links {
position:right;
background:#999;
padding:15px;
border:1px solid #CCCCCC;
}
.... [snipped to relevant portion: people can view the source on your page and see the URL of the stylesheet to see the most up to date version.] .....

kadyellebee

Feb 2 2004, 06:20 PM

You are mixing positioning types in your #content and #links sections. Something like this might help:

CODE

    #content {
float:left;
width: 65%;
background:#FFF;
margin:10px;
border:1px solid #CCCCCC;
}
    #links {
background:#999;
padding:0px;
margin: 15px;
border:1px solid #CCCCCC;
}

But I'm not sure if that reverses any of the advise in your other open threads about css.

Kristine

valleysoapbox

Feb 2 2004, 06:55 PM

I tried that and ended up with overlap elsewhere.

I did find a workaround:

CODE

#content {
float:left;
width:65%;
background:#FFF;
margin-right:15px;
margin-bottom:20px;
border:1px solid #CCCCCC;
}


    #links {
background:#999;
padding:0px;
border:1px solid #CCCCCC;
}

Boy, I had to do a LOT of dorking around to get there.

*sigh* Thanks for helping me work out this problem.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.