over-lapping title area and header widget

Community Forums Forums Design Tips and Tricks over-lapping title area and header widget

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  john gronley 1 year, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #32456

    john gronley
    Participant
    Post count: 124

    Hello;

    I have been able to get the title and description areas to overlap with the upper-right header widget area in the Enterprise theme by the use of z values. Here is one site that I use them on: http://dlund.com

    I am trying to get the title area and description area to overlap over the widget area in the agentpress theme but can’t seem to figure out how and where to assign the z values in this theme. Can someone help? Maybe there is a way to accomplish this other than z-values?

    Here is the site I am trying this on http://searchrealestatephoenix.com/

    Thanks,

    John

    #32458

    nciske
    Participant
    Post count: 55

    Well that’s one way to do it, I guess.

    The best practice way is to upload a custom image header (or set one via css) and use text-indent to push the title and description off screen.

    That keeps the text there for Google, without requiring negative margins and z-indexes.

    Here’s a tutorial:

    http://genesistutorials.com/how-to-add-a-logo-to-the-header/


    Nick Ciske | http://thoughtrefinery.com/ | @nciske
    Did I help you? Say thanks: http://bit.ly/1lahwy0

    #32459

    john gronley
    Participant
    Post count: 124

    Thanks nciske;

    In this case with the agentpress I want the title and description to display centered and overlap the image widget. The image widget will just be the fairhousing and realtor logos with the company logo and have these off to the right.

    #32461

    nciske
    Participant
    Post count: 55

    Why use an image widget?

    This is what CSS backgrounds (or custom image headers) are for — set that on the #header (or use the Genesis theme header option) and the text will automatically display on top.

    If you ‘pull’ an image widget from below the header over top of the header, it will always stack above the text unless you do some absolute positioning tricks to get the z-index to take effect (in the other site, I suspect z-indexing isn’t even active, just display order).


    Nick Ciske | http://thoughtrefinery.com/ | @nciske
    Did I help you? Say thanks: http://bit.ly/1lahwy0

    #32463

    john gronley
    Participant
    Post count: 124

    Thanks I will try this custom image header!

    #32511

    john gronley
    Participant
    Post count: 124

    Hey Nciske;

    The theme does have a place to upload the custom header; I supppose I will have to upload the logos and then go in and change the margins and padding until it is positioned where I want it? I think by default it is set to float left….

    Thanks,

    John

    #32512

    nciske
    Participant
    Post count: 55

    You’d put the logos into one image and upload that.


    Nick Ciske | http://thoughtrefinery.com/ | @nciske
    Did I help you? Say thanks: http://bit.ly/1lahwy0

    #32514

    john gronley
    Participant
    Post count: 124

    Got it and the settings:

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 125px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 400px;

    Would be tweaked until the image shows up to the lower right side?

    #32522

    john gronley
    Participant
    Post count: 124

    I think I can do the same with the image widget and just change the padding to 5px and then change the width of the title to 960px and it should tuck in nicely: I did this on http://johnstestsite.org/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.