Header -> Link to Main page using Widget and CSS

  • Author
    Posts
  • #384493

    gustavoclima
    Member

    Hi, not sure if I posted on the right section…

    well I tried to add a link in ‘my’ blog’s header using css + widget, It worked on chrome and firefox, but guess what? it doesn’t work on IE.. YAY!

    http://batutaebiruta.wordpress.com/

    what I’v done:

    1- Created a widget (text/html)with this:

    <span>« Main</span>

    2- add to CSS:
    #text-5 {
    background:none;
    }

    #text-5 h3,#text-1 h3.widgettitle {
    display:none;
    }

    #text-5 a {
    height:110px;
    position:fixed;
    top:56px;
    width:902px;
    z-index:20;
    margin:0 0 0 -21px;
    }

    #text-5 a span {
    display:none;
    }

    humm anything I’m missing ? or it just won’t work at IE at all :X?
    Thanks!

    The blog I need help with is batutaebiruta.wordpress.com.

    #384713

    gustavoclima
    Member

    great.. the forum support a few codes…

    1- Created a widget (text/html)with this inside:


    <span>« Página Inicial</span>

    btw where’s the edit button ?

    #384723

    To have code appear here in the forums, place it between backticks ( ` ) typically on the key to the left of the #1 (the one with the ~ on it).

    #384724

    There is no edit button in the forums. Staff said it had been abused so they took it out.

    #384732

    devblog
    Member

    humm anything I’m missing ?

    Well, assuming you have this:

    <a href="url"><span>« Página Inicial</span></a>

    You’re problem is right here:

    #text-5 a span {
    display:none;
    }
    #384755

    gustavoclima
    Member

    oh you can ignore those ‘<span>’ I’m not using them, that’s why it’s ‘invisible’ (display:none,)actually the css code opens a big retangle under the header and acts as a big link to the main page. if you open it using firefox / chrome you can see the area right clicking the header, if you open with IE it dissapears.

    test using ‘&lt’

    &lta title='Página Inicial' href='http://batutaebiruta.wordpress.com'>
    <span>« Página Inicial&lta/span>

    test using ‘

    '
    <span>« Página Inicial</span>
    '

    #384757

    gustavoclima
    Member

    *rages* ok give up. lol, ok i guess ‘ is not the same as ´

    #384769

    devblog
    Member

    But you ARE using the “span” tag. Your text link is inside it.

    When you setting the visibility property to none of the span tag, it and everything inside it will not display.

    If you don’t need the “span” tag, get rid of it and write your link code like this:

    <a href="url">« Página Inicial</a>

    In fact, if you write your link code like the example above, you don’t need the span definition at all.

    I don’t see the big rectangle you speak of, and I’m using Firefox. But if I picture what you’re saying right, the big rectangle is the “a” tag you’re styling here:

    #text-5 a {
    height:110px;
    position:fixed;
    top:56px;
    width:902px;
    z-index:20;
    margin:0 0 0 -21px;
    }

    All I see under the header is the Post RSS, Comments RSS and Search bar.

    HTH

    #384780

    gustavoclima
    Member

    my bad the span is there because If I don’t use the:


    #text-5 a span {
    display:none;
    }

    The role html widget with the “<< Página Inicial” would appear on the sidebar… and I don’t want that, it is supposed to stay on the sidebar but invisible.

    “if I picture what you’re saying right, the big rectangle is the “a” tag you’re styling here:

    #text-5 a {
    height:110px;
    position:fixed;
    top:56px;
    width:902px;
    z-index:20;
    margin:0 0 0 -21px;
    }

    exactly but that ‘tag’ is connected to the ‘href=’http://batutaebiruta.wordpress.com’ located at that ‘invisible’ html widget on my sidebar 1:

    <a title='Página Inicial' href='http://batutaebiruta.wordpress.com'>
    <span>« Página Inicial</span>

    btw you can see the ‘rectangle’, the hotspot area, if you right click anywhere near my blog’s header.
    as you can see in this SS: http://yfrog.com/57ssblogheaderp

    Not sure if it’s the esiest way but using both (widget + css) I could make a link on the header pointing to the blog’s main page, and every thing would be working like it should if it wasn’t some code incompatibility with IE ¬¬, sadly the ‘header hotspot’ dissapears in IE.

    #384782

    devblog
    Member

    Okay, at lunch time I’ll check this out in more detail. I’ll let you know my thoughts.

    #384785

    devblog
    Member

    I think I now understand what you’re trying to do better. You just want the header to be clickable to the main page, and you don’t care about displaying the “pagina inicial” text.

    Now, after looking in more detail to your CSS, IE doesn’t support the value “fixed” of the “position” property.

    Also, I noticed that in IE (I’m using IE6, btw), the search bar is placed way down the header and it’s being overlapped with the main content.

    Try changing your current definitions with these:

    #container {
    width:904px;
    margin:0 auto;
    padding:10px 0;
    clear: both;
    overflow: hidden;
    position: relative;
    }
    
    #text-5 a {
    height:110px;
    position:absolute;
    top:56px;
    width:902px;
    z-index:20;
    margin:0 0 0 -21px;
    display: block;
    }

    I don’t have a way to test this in IE, but hopefully it’ll fix you’re problem.

    One think I do to debug my CSS code and that helps me to know where every element is and how is being displayed, is to add the border property to the element’s definition. After you’ve managed to debug your CSS, then remove the border, of course.

    HTH

    #384921

    wweadam
    Member

    I’m having the same problem on WweAdam.Com , and your advice is not working for me. We’ll have to see if it is working for the other person.

The topic ‘Header -> Link to Main page using Widget and CSS’ is closed to new replies.