Css Help

[ramone_kalsaw]

I want to redesign the "title" of my blog, and my CSS skills are quite limited at this point. Would you mind pointing out how I can adjust the style code below so that I'm able to:

 

-- take out the default text title; and,

-- replace it with the graphic I've uploaded?

 

(You can see what I'm trying to do at http://www.biom.net/dojo.php/teahouse/index/)

 

I appreciate your help!

 

------------------------------

From my style sheet

 

#blogtitle {

position: relative;

margin: 0;

padding: 0;

clear: both;

background: #FFFFCC;

color: #CCFF99;

width: 547px;

text-align: right;

}

 

#blogtitle h1 {

font: bold 40px arial, helvetica, lucida grande, verdana, sans-serif;

margin: 10;

padding: 10px;

background: transparent url(http://www.biom.net/images/uploads/teahouse_logo.gif)

[TCH-Rob]

I was just viewing the source and saw;

 

><div id="blogtitle"><h1>Lao Xian's Teahouse</h1></div>

 

I don't see that in the CSS snippet that you showed. I think it is elsewhere that the text is located. Remove it and your normal image should display without the Green over the top of it.

[natimage]

Honestly...I didn't study your code. But there are different ways of accomplishing what you want. Try THIS LINK for some info.

 

None of the image replacement methods are great for accessibility. I still like 'em though. Feel free to look at the html code on MY SITE. I use one form of image replacement throughout my site...the main header being one example.

 

For the header in particular, the css code looks like this:

>#pageheader h1 {
background: url(images/pageHeader1.gif) no-repeat top left;
margin: 0px 0px 0px 230px;
width: 467px;
height: 17px;
}
#pageheader h1 span {
display: none;
}

 

Good luck to ya!

[TCH-Rob]

I dont know CSS so I am grasping but the Image is showing under the blog titls isnt it? Wont removing the title give the intended results.

[ramone_kalsaw]

Rob,

 

When I remove

 

When I use xxxxxxx the "blog title" box disappears.

 

When I use xxxxxx it crunchded (see:

 

What do I need to add/change to the CSS(?) below?

 

Thanks.

 

#blogtitle {

position: relative;

margin: 0;

padding: 0;

clear: both;

background: #FFFFCC;

color: #CCFF99;

width: 547px;

text-align: right;

}

 

#blogtitle h1 {

font: bold 40px arial, helvetica, lucida grande, verdana, sans-serif;

margin: 10;

padding: 10px;

background: transparent url(http://www.biom.net/images/uploads/teahouse_logo.gif)

}

[TCH-Rob]

OK, I am stumped. We need Lisa, she knows Expression, or someone that has more knowledge than I do. Maybe Tracy's idea, heck my grandma is turning 102 next month and I bet she knows more about CSS than I do. Hang tight, we will get an answer for you.

[natimage]

Try adding the dimensions of the graphic to your css:

 

>#blogtitle h1 {
font: bold 40px arial, helvetica, lucida grande, verdana, sans-serif;
margin: 10;
padding: 10px;
background: transparent url(http://www.biom.net/images/uploads/teahouse_logo.gif);
width: 500px;
height: 77px;
}

 

...maybe...

[natimage]

Right now all I can find in your html is:

 

><div id="blogtitle"><h1></h2></div>

 

I assume you are in the middle of working on it...

[TCH-Dick]

I wouldn't use background: in your stylesheet. It's really a shourtcut attribute that is best used when creating inline css. I prefer to break down each attribute in a stylesheet, this makes it easier to read and edit.

Can someone explain to me the need of the

tag? I just don't see the purpose, this is all you should need.

>#blogtitle {
position: relative;
margin: 0;
padding: 0;
clear: both;
background-color: #FFFFCC;
background-image: url(teahouse_logo.gif);
background-repeat:no-repeat;
background-position:center;
width: 547px;
height: 77px;
}

><div id="blogtitle"></div>

[natimage]

Dick...if I'm understanding correctly, Ramone is trying to use CSS to do an image replacement. The theory being, the 'designer' gets to use the pretty graphics he/she prefers, while still maintaining the advantage of having text-based <h1> tag on the page.

 

I use it on my site. HTML looks like this:

 

><td height="30" colspan="2" id="pageheader">
<h1><span>Affordable, Professional Custom Web Design</span></h1></td>

 

CSS looks like this:

 

>#pageheader h1 {
background: url(images/pageHeader1.gif) no-repeat top left;
margin: 0px 0px 0px 230px;
width: 467px;
height: 17px;
}
#pageheader h1 span {
display: none;
}

 

There are definite accessibility issues one should consider before doing this, as this method is not friendly to some of the browsers for the blind or other text based browsers.

 

This is only one way to achieve this...there are many methods, each with their own drawbacks.

[ramone_kalsaw]

I used the CSS code Dick provided (below) -- in conjuction with this tag on my index template:

 

<div id="blogtitle"><h1></h1></div>

 

but my "blogtitlte" logo is still not displaying properly (see http://www.biom.net/dojo.php/teahouse/index/).

 

Can you see what I need to do to bring the .gif into focus?

 

Thanks!

 

---------------------

 

#blogtitle {

position: relative;

margin: 0;

padding: 0;

clear: both;

background-color: #FFFFCC;

background-image: url(teahouse_logo.gif);

background-repeat:no-repeat;

background-position:center;

width: 547px;

height: 77px;

}

[ramone_kalsaw]

BTW: Sorry about my earlier posting at "8:43" (above) -- that was an in-process set of incomplete notes that got posted by mistake. Sorry for the mess.

[ramone_kalsaw]

Here's where I stand:

 

-- I've gotten the "text" out of the "blogtitle" field, but the .gif is only partially showing. And this is using the tag -- <div id="blogtitle"><h1></h1></div> -- in the index

 

-- When I use -- <div id="blogtitle"></div> -- all traces of the .gif drop out to the title box at the top of the page.

 

Very frustrating.

 

Any other ideas?

 

Thanks!!!

[ramone_kalsaw]

Solved!

 

"I would suggest simply placing the image tag directly in the page. That's the most straightforward thing to do:

 

 

<div id="blogtitle">

<h1><img src="/images/uploads/teahouse_logo.gif" width="500" height="77" alt="Lao Xian's Teahouse at BIOM" /></h1>

</div>

 

 

You'll also want to remove the background URL bit from your stylesheet."

 

-----

 

THANKS EVERYONE FOR YOUR SUPPORT!!!

[TCH-Dick]

Glad you got it working. Thumbs Up

 

As for the background-image: url(teahouse_logo.gif);, it works for me, but use what is best for you.

Edited June 24, 2004 by TCH-Dick

[natimage]

Ramone...I don't understand why you want to place an image inside your <h1> tags??? I thought I understood what you were trying to do...maybe I had it all wrong?

 

<h1> tags are best used for text. The search engines see the information inside the <h1> tags as "special" and more relevant. The search engines can't read the text that's inside you image...all they see is the <img> tag and the name of the image. Anyway...that's why I don't understand why you put the image inside <h1> tags.