header Widget Position

pending (23 posts) (3 voices)

  1. is there a way to position to contents of a widget? I have added a header widget and it is working well. The client decided they needed an image in there instead of the text we discussed and you helped me with. However this client wants the image in the header to be "centered between the burlap and the menu". I think the way to do this is to get the contents of the widget to justify bottom then just tweak the size of the header widget area so that it is centered where he wants it.

    The test site is at test.zhounder.com and the custom CSS i am using for the header (so far) is below.

    .header_widget_area {
    position: absolute;
    z-index: 9999;
    top: 15px;
    left: 220px;
    text-align: bottom !important;
    }
    .header_widget_area {
    font-size: 18px !important;

    }

    Any input is appreciated!

    Posted 4 years ago #
  2. nddiana
    Member

    @MichaelAlbany

    try this...
    header_widget_area {
    position: absolute;
    z-index: 9999;
    top: 30px;
    left: 285px;
    }

    Posted 4 years ago #
  3. Ack! Nope. Absolute opposite affect than what I need. That justified it top left and I just need it bottom.

    I don't really want to change the position of the widget, that is fine. I want to move the contents of the widget to the bottom of the widget area that is within the actual header. See attached graphic.

    I need everything else to stay exactly where they are relationally.

    Attachments

    1. header-1.jpg (70.1 KB, 1 downloads) 4 years old
    Posted 4 years ago #
  4. nddiana
    Member

    just add:
    height: 55px and then adjust the top margin...

    Posted 4 years ago #
  5. Ding! Ding! Ding!

    We have a winner!

    Thank you!

    Posted 4 years ago #
  6. Wait...

    Now my sub menu is not working under the first tab.

    Posted 4 years ago #
  7. Elliott
    Support

    It's working fine on my end. What browser / version are you using? Try clearing your browser cache.

    Posted 4 years ago #
  8. Its working in Firefox but not in IE9.

    Why oh why won't Microsoft just give up?

    Any suggestions?

    Posted 4 years ago #
  9. Elliott
    Support

    I'm not sure. It's disappearing each time you hover over one of the sub menu images. Try switching the images out with text to see if that makes a difference.

    Posted 4 years ago #
  10. Elliott,

    I changed it to text and I got a very similar result. Basically I went a little further down (a little past the 2nd sub menu option) but beyond that it disappears. Also you will have to take my word for it too because I have to change it back to images for the client. Hmmm. That gives me an idea. Hang on...

    OK! I narrowed it down a bit. I switched it to a text based menu that I had saved and its the same issue, scroll pas the second menu option and POOF! gone.

    So that means its not the image menu specifically. I think it has something to do with the code you suggested to tighten up the images. Anything we can do to tweak that a bit?

    In the following code you had me add to the CSS could it be that 14 should be one or 2 more than the image height? Trying it. I'll update you shortly.

    Posted 4 years ago #
  11. Nope. That didn't fix it. crap. Changed the 0 as well, no difference.

    OK I'm open.

    Posted 4 years ago #
  12. Elliott
    Support

    I don't know. Remove all of your customization and add it back in one by one to see which one is causing it.

    Posted 4 years ago #
  13. Elliott,

    I got this message via LinkedIn within minutes of you posting your remove/test suggestion (which i am doing now). It makes sense but I was wanting your input. My idea is to define a transparent png in the skin to see if it fixes it. After finishing your testing idea first.

    From LI:
    If I recall correctly this is because 'hidden' elements (in this case, menus) need to have a background defined. You can use an actual image or, as I did, a transparent 1x1 pixel gif or png and define it as the background for the element.
    you have to set the z-index for the element so it's on top of all other elements as well.

    IE is the bane of developers everywhere - all these 'special' things you need to do to make it work like every other browser. :(

    Posted 4 years ago #
  14. Ah Ha! by removing the code and testing i noticed that the issue was still there. I added the code back in and discovered that the issue is when the menu goes over the paragraph of text, which is an actual image, it disappears (the menu that is). Add to that what the guy on LinkedIn leads me to believe the issue is that the paragraph image is showing (to IE at least) that the image is over the menu rather than the menu being over the image.

    That image site in a table that has a background image with the paragraph.jpg in the first cell and the Nivo Slider in the second cell. Could it mean that IE can't define the difference between the background of the menu from the two stacked images in table?

    Posted 4 years ago #
  15. The LinkedIn Connection also suggested putting this: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > into the header file but there was no change.

    Posted 4 years ago #
  16. Update:

    I found that removing the images embedded in the table (not the background image) made no difference. However if I removed the table completely the menu functions fine. So i tried adding the table with background image to a separate page and using the display Additional Homepage text and the problem instantly returned.

    I tried reconstructing a table from scratch with no background at all and this also has the same issue at the same point into the table, about 225 pixels from the top of the browser window. The code in the custom CSS is below and it doesn't mention anything at that distance.

    Any thoughts?

    #header { height: 80px !important; }

    .jqueryslidemenu .sub-menu li:hover { color: #ffffff !important; }

    #primary_menu { position: absolute !important; top: 45px !important; left: 200px !important; }

    .header_widget_area {
    position: absolute;
    z-index: 9999;
    height: 55px;
    top: 35px;
    left: 220px;
    text-align: bottom !important;
    }
    .header_widget_area {
    font-size: 18px !important;

    }

    .jqueryslidemenu li li a { padding: 1px 14px !important; }

    Posted 4 years ago #
  17. Elliott
    Support

    Take a screenshot and send us a link to that page.

    Posted 4 years ago #
  18. Its still http://test.zhounder.com/

    The red line indicates where the mouse is when the menu fails in IE9.

    Attachments

    1. SS-1.jpg (99.3 KB, 0 downloads) 4 years old
    Posted 4 years ago #
  19. Elliott
    Support

    So that's the same issue as before? As I said I don't know what's causing it. You'll want to remove all of your customizations and then add them back in one by one to see which one is causing the problem.

    Posted 4 years ago #
  20. I did that. the table is causing the issue and it shouldn't. so now what? Any table does it, not just the table that is there now. If I create an entirely new table, same thing.

    Posted 4 years ago #
  21. Elliott
    Support

    Our menu uses a list, not a table. You'll want to hire a freelancer to help you out with these advanced customizations.

    Posted 4 years ago #
  22. Elliott,

    I am using the list menu but what I am saying is when it overlaps the table in the body of the page is when the problem arises. so the problem is in the menu.

    Posted 4 years ago #
  23. OK now I am totally confused. I took everything and moved it over to http://zhounder.com jsut to see what would break the site. Nothing broke. It works in IE9. wtf?

    The only thing I can think of that is really different other than color and actual content is http://TEST.zhounder.com is WP 3.5 and http://zhounder.com is WP 3.42.

    I even pulled the images from the sub-domain rather than upload new ones just to make sure everything is as close as possible.

    Could that be the issue?

    Posted 4 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme