Need help? Check out our Support site, then


Header -> Link to Main page using Widget and CSS

  1. 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.

  2. great.. the forum support a few codes...

    1- Created a widget (text/html)with this inside:
    <br /> <a title='Página Inicial' href='http://batutaebiruta.wordpress.com'><br /> <span>« Página Inicial</span><br /> </a><br />

    btw where's the edit button ?

  3. 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).

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

  5. 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;
    }
  6. 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'
    <br /> &lta title='Página Inicial' href='http://batutaebiruta.wordpress.com'><br /> <span>« Página Inicial&lta/span></p> <p>

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

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

  8. 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

  9. my bad the span is there because If I don't use the:

    <br /> #text-5 a span {<br /> display:none;<br /> }<br />

    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:
    <br /> #text-5 a {<br /> height:110px;<br /> position:fixed;<br /> top:56px;<br /> width:902px;<br /> z-index:20;<br /> margin:0 0 0 -21px;<br /> }<br />
    "

    exactly but that 'tag' is connected to the 'href='http://batutaebiruta.wordpress.com' located at that 'invisible' html widget on my sidebar 1:
    <br /> <pre><code><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.

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

  11. 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

  12. 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.

Topic Closed

This topic has been closed to new replies.

About this Topic