What would be the code I need here

[eCoverDesigner]

Hi Guys,

CSS is relatively new for me.

I know how to do this on html but I´m trying to move to CSS but
it´s not easy and I was wondering if you could help.

I just designed a new template and I need to have a login area
at the right hand top.

http://www.pro-ecovers.com/NQ/index.html (http://www.pro-ecovers.com/AdamShort/NicheQuake/index.html)

What would be the code to have that area as hotspot?

Is it possible? I´d prefer to keep the "member login" as
it is, if at all possible.

Thanks for reading this message and look forward
with antecipation for your support.

Have a FUNtastic day!

[tZ]

This has nothing to do with CSS but html and knowing your tags ;)

[shalom_m]

If you insist to use tables, replace the first row in your code with:

<tr>
<td colspan="3" valign="top" class="header_cell"> <img src="blank.gif" width="745" height="25" border="0" usemap="#m_l_line" alt="Image Map">
<map name="m_l_line">
<area shape="rect" coords="628,0,743,25" href="whatever.htm">
</map> </td>
</tr>
Be sure to create a blank (transparent) gif file 745x25 pixels.

[eCoverDesigner]

Actually I´d prefer to have it in CSS.

But I´d like to keep that member login graphic.

What would be the CSS code?

Thanks.

[katgal]

That login button should be a separate image, not part of the header background. Then, you can just link it to your login page.

[eCoverDesigner]

Hi Katgal,

Thanks for your input.

Could you point me what the code should look like...

With that I slice the header graphic and create
a separate member login graphic.

Thanks guys for your support.

[DesignVHL]

eCover - you should not be slicing anything. You need to take the time to learn how to code by hand...its really the best way to understand all this. You need to get a fulll and better understanding of HTML and CSS - and how to take your design concept and code it -without any slicing. Yes, you cut your graphics up, but not automatically. Drawing guides, flatten and crop, and save for web....

Its going to be VERY hard to help you if you do not read and learn more about this. As tZ said, you need to learn the tags!

So while we do understand this is new territory for you. Regardless of what you used to do - possibly design in photoshop or whatever, and cut it up automatically, you need to break this habit. If I'm wrong on this, my apologies! But it is very important for you to understand this. We're here to help! :)

www.w3schools.com (http://www.w3schools.com) would be a good place to start.

[katgal]

Some designers just decide that they can't (or don't want) to code and outsource that part of it. That's always an option. I do coding for a few other designers. They send me their layered psds, and I convert them to css/html.

I'm not suggesting you hire ME, you should just consider outsourcing the coding, even if it's just temporarily, while you build your skills.

[tZ]

The thing you need to grasp is that CSS handles presentation and html structure. The change your trying to accomplish is(for the most part) a structural one. Therefore, you need to setup the html to reflect this change than worry about the direct presentation of it.

In thoery this is really all you need:

HTML:
<a id="member-login" href="link.html" >Member area</a>

CSS:
#member-login {
display: block;
width: img width;
height: img height;
text-indent: -10000px;
background: transparent url(images/image.png) no-repeat top left;
}

[katgal]

tZ, hat's a rather complicated way to accomplish something rather simple. Just have the button as a separate image.

http://clients.bkbdesigngroup.com/niche/

And don't forget, ie6 can't handle pngs without some help.

[shalom_m]

tZ,

I see you could not resist the temptation.

(http://www.graphicdesignforum.com/forum/member.php?u=5130)

[bazman]

Hi Ecover

Personally I don't see anything wrong with slicing up an image, as long as you combine it with good css and html.

When designing for clients I will layout in PS then slice the image up and code by hand.

Here is my two pennies worth!

http://www.realflairdesign.co.uk/ecover

Other may disagree with my coding, but I don't care! It's late and I have to feed my 4 month old twins!

[tZ]

Actually, IE6 can handle pngs – any browser can its just transparency you need to worry about.

The reason I used image replacement was so that the data would be available to screen-reader and if the image doesn't show. I find it to be a bit more semantic approach than just placing the image inline because in theory the image isn't the anchor – the content within it is.

[bazman]

Actually, IE6 can handle pngs – any browser can its just transparency you need to worry about.

The reason I used image replacement was so that the data would be available to screen-reader and if the image doesn't show. I find it to be a bit more semantic approach than just placing the image inline because in theory the image isn't the anchor – the content within it is.

One other point tz is that your code will actually validate :)

[tZ]

Yeah… I'm a big proponent of validation and web standards.

[katgal]

My comment about it being complicated wasn't intended to be a critique of the image-replacement technique. Just that it's a bit advanced for someone without even a basic grasp of css.

[tZ]

Thats probably true… sometimes I forget these things,lol

[bazman]

ecover..... now you've gone and started an argument.... I hope you're happy with yourself! :)

[DesignVHL]

complexity happens; simplicity, you have to strive for – Peter Elst

;)