How to "tile" a header?

[kittykaffeine]

I'm attempting to reconfigure a CSS stylesheet, and quite frankly, I'm flying by the seat of my pants on this one.

I've been altering the HTML on my site in an attempt to figure it out by process of elimination--with a hint of sheer luck.

I have a banner I have segmented horizontally into two .jpg files. I'd like to have the segments one on top the other. With 'logoa.jpg' on top and 'logob.jpg' on the bottom. The surrounding source looks like this:

<----- Begin Code---->

#logoWrapper{

background-image: url(../images/logoa.jpg);

background-repeat: repeat-x;

background-color: #ffffff;

height:175px;

<-----End code---->

I just need to figure out how I need to position the two on there with (1) an internal link attached to 'logoa.jpg' and (2) an external link attached to 'logob.jpg'

Can anyone help me please? I'm at a total loss here. :confused:

Thanks! ;)
Kitty

[Centauri]

What size are the two images (width and height), and are they to be positioned in the centre of the page horizontally, or within a coloured area etc? Being able to see the graphics and how they are positioned on the site, we can suggest the appropriate markup and style. At the moment, I would favour styling the two link elements as blocks the appropriate size, with each image applied as a background to the appropriate link - a wrapper element (div or whatever) may not even be required.

Cheers
Graeme

[kittykaffeine]

Graeme,

Well, in this case of the two images, the dimensions are the following:
'logoa.jpg' - 760w x 120h
'logob.jpg' - 760w x 75h

to get an idea as to how they are positioned, I'll just give you the link to the site I'm working on.. Just Click here (http://loreleinaturals.com/index.php?main_page=) to take a look.

That will give you an idea as to what I'm working with. The CSS templates are already premade, I'm just trying to change the content.

I'd appreciate any help you have to offer.

Thanks!
Kitty

[Centauri]

I really do think using a premade template and trying to fit your own stuff to it is more difficult than starting from scratch - so much unnecessary nested divs and that main stylesheet all on one row is a bit hard to debug....

There is no need for the #logo div, and, as they are not being used, the #taglineWrapper and #tagline divs can also go. The actual logo image does not need to be inserted in the html as it is already set as the background to the #logoWrapper div. All that is needed is two normal links - the whole "branding display" section of the html can be reduced to :<!--bof-branding display-->
<div id="logoWrapper">
<a href="http://loreleinaturals.com/" title="Over 40 Different Scents!" id="logolink">Lorelei Naturals - home</a>
<a href="http://soapmakers_guild_url.com/" title="Soapmakers' Guild website" id="soaplogo">Soapmakers' Guild</a>
</div>
<!--eof-branding display--> Note the links are textual for the benefit of non-visual browsers like screen readers and search engine spiders. The blue highlighted bit is to be changed to the actual link for the guild.

The css to style this is :#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
position: relative;
}
#logolink {
display: block;
height: 175px;
font-size: 1px;
color: #fff;
}
#soaplogo {
position: absolute;
width: 90px;
height: 65px;
right: 20px;
bottom: 0;
font-size: 1px;
color: #fff;
} Here I have retained the complete graphic as the #logoWrapper background, removed the set size from it and set it to relative positioning (so that any absolutely positioned object inside will be placed relative to #logoWrapper). The main logo link is styled as a block the full size of the graphic - the actual link text is made 1px high and coloured to hide it. The link to the guild site is given the right size to suit the guild logo paortion of the graphic, and is positioned absolutely over the logo. Again, the actual text is reduced and coloured to hide it.

Cheers
Graeme