Widget in Header Appears Below Header Instead of Next to It

[aagblog]

I'm trying to put a small graphic in the header area. It's meant to look like a post-it that the user can click on to be taken to a page for new members. I'd like the clickable graphic to be *on the same line* as the site logo -- NOT below the logo.

The header background right now consists of a repeating image that looks like textured paper (as wide as the browser window); the foreground image is the green logo (aligned with the main wrapper).

I'm sorry that I have to screenshot it instead of showing it live, but the site is behind a "coming soon" wall at the moment.



THANK YOU x 1000000 for the help!

[aagblog]

I think I should have mentioned that I'm trying to put this into "Header Widgets".

[drake]

It's ok to use header widgets area, but without url we can't test a solution in Firebug. How large is your header image? Because your picture look like the logo take all the header container room and force header widget area to float below.

Try to add at Suffusion Option -> Backend -> Custom Includes -> Custom Styles:

Code: Select all

#header {width:400px;}

or

Code: Select all

#header-widgets {margin-top:-30px;}

(adjust the negative margin until your postit become aligned)

or both definitions from above.

For this kind of adjustements is really helpful an url.

[aagblog]

Well, your solution to the margin issue worked. Thank you!

But now no matter what I try I cannot make the background of the widget transparent. This doesn't work:

Code: Select all

#header-widgets {
margin-top:15px;
background-color:transparent;
}

This also doesn't work:

Code: Select all

background:transparent;

Adding !important does nothing.

Weird?

[aagblog]

I fixed it, and now I feel like a freakin' GENIUS:

Code: Select all

.suf-widget {
background-color:transparent;
}