Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Location
    London
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS <ul> image and text disappear if I take the "a href" away!

    Hi there, I'm completely new to this so I'm not sure what you need to help me, but I have an unordered list in a website I'm trying to design.

    If I want to remove the menu link if they're on that particular page (e.g. the Biog page) and want just the image and the text in its place without the "a href=" bit in, the whole thing disappears. I've tried altering the CSS but nothing works.


    Here's the HTML:

    <ul>
    <li id="menu1"><a href="http://www.nicework.com/"><span>Home</span></a></li>
    <li id="menu2"><a href="http://www.nicework.com/"><span>Biog</span></a></li>
    <li id="menu3"><a href="http://www.nicework.com/"><span>Gallery</span></a></li>
    <li id="menu4"><a href="http://www.nicework.com/"><span>Links</span></a></li>
    </ul>

    and here's the CSS which I think applies:

    #page_menu {
    padding: 15px 0px;
    width: 414px;
    background: url('images/background.gif') #0c070d repeat-x 0% 0%;
    color: #c2bebe;
    }

    #page_menu a {
    background-color: inherit;
    color: #c2bebe;
    text-decoration: none;
    }

    #page_menu a:hover {
    background-color: inherit;
    color: #b06433;
    }

    #page_menu li {
    padding: 0px 2px 2px;
    float: left;
    }

    #page_menu li a{
    display: block;
    width: 107px;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    }

    #page_menu li#menu1 a {
    margin-right: 7px;
    margin-left: 9px;
    width: 69px;
    }

    #page_menu li#menu4 a {
    margin-left: 9px;
    width: 69px;
    }

    #page_menu li a span {
    padding-top: 70px;
    display: block;
    }

    #menu1 a {
    background-image: url('images/menu_bg1.gif');
    }

    #menu2 a {
    background-image: url('images/menu_bg2.gif');
    }

    #menu3 a {
    background-image: url('images/menu_bg3.gif');
    }

    #menu4 a {
    background-image: url('images/menu_bg4.gif');
    }


    So what do I need to put to keep the image and the text visible, but not make it a clickable link?

    does any of this make sense?

    thanks in anticipation!

    Empress

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Code:
    <ul>
    <li id="menu1">Home</li>
    <li id="menu2">Biog</li>
    <li id="menu3">Gallery</li>
    <li id="menu4">Links</li>
    </ul>
    This will make the text stand there, without to be clickable.

    And I can see that you've defined a background-image in your CSS, however it should not be like this:
    Code:
    #menu4 a {
    background-image: url('images/menu_bg4.gif');
    }
    but like this (Without the " ' " marks):
    Code:
    #menu4 a {
    background-image:url(images/menu_bg4.gif);
    }
    Last edited by CaptainB; 10-12-2007 at 09:52 PM.

  • Users who have thanked CaptainB for this post:

    Empress (10-13-2007)

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Location
    London
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi CaptainB,

    Tried that, but the image disappears, and all that's left is the unformatted text!

    What I'm trying to achieve is to have the link for whichever page the user is on disabled, but the others would still be clickable so they could keep on navigating around the site - does that make sense?

    I'm not sure if I need to add something to the CSS, like a seperate class or different id as well as removing the "a href" tags in the HTML code for that particular page? because at the moment they're all clickable. I'm still learning and don't really know the syntax of identifying a different rule to one specific element in an unordered list!

    Talk about a can of worms!

    Oh, and thanks for spotting the error in my CSS! - I've corrected that too.

    Thanking you for your help.

    Empress
    Last edited by Empress; 10-13-2007 at 01:13 AM.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Ah okay, now I get it.

    See, the a href tags define a new link. That means, that if you don't want your text to be clickable, then remove all that's inside the < and > tags + the 2 tags. Also, remove the end tag for the link, </a>

    Example:

    We have this code, and it's clickable (a link):

    Code:
    <a href="http://www.somepage.com">Link 1</a>
    Then, if we remove everything inside the < and > tags, + the tags and the end tag, we'll end up with this:

    Code:
    Link 1
    And that's not clickable.

    That means, that you only need to remove the a href tags for the page you are on. So this would be the list for the GALLERY page:

    Code:
    <ul>
    <li id="menu1"><a href="http://www.nicework.com/">Home</a></li>
    <li id="menu2"><a href="http://www.nicework.com/">Biog</a></li>
    <li id="menu3">Gallery</li>
    <li id="menu4"><a href="http://www.nicework.com/">Links</a></li>
    </ul>
    ´

    Also, remove the <span> tags. you don't need em'.

    I don't know exactly what you meant with the images, but a link to your page would be good, if you keep having that problem.

  • #5
    New to the CF scene
    Join Date
    Oct 2007
    Location
    London
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi again!

    The HTML I understand, but it's what's happening with the CSS that's bugging me. At the moment, all the classes defined are for a:hover, a:visited etc. e.g

    Code:
    #page_menu a {
    	background-color: inherit;
    	color: #c2bebe;
    	text-decoration: none;
    }
    
    #page_menu a:hover {
    	background-color: inherit;
    	color: #b06433;
    }
    
    #page_menu li {
    	padding: 0px 2px 2px;
    	float: left;
    }

    where "a" defines what happens to the text if it's a link, am I right?

    So therefore, what do I need to add to the style sheet for elements within the unordered list that aren't clickable? so just ordinary text?

    And with the image, there's an image immediately above the text that also highlights when you hover your mouse over it, and that disappears, as in the portion of the style sheet I pasted into my original post.

    I've tried defining a new class, a new id for that particular line, but nothing seems to work.

    The <span> is for this part of my style sheet:

    Code:
    #page_menu li a span {
     padding-top: 70px;
     display: block;
    }

    sorry to be a pain, but I'm obsessed with it now!

    Empress

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    I usually replace non-clickable “links” with a span and style that span accordingly:

    Code:
    li * {font-weight: bold;}
    li a {color: green;}
    li a:hover, li span {color red;}
    Code:
    <ul>
      <li><a href="#">link</a>
      <li><span>link</span>
      <li><a href="#">link</a>
    </ul>
    Note my use of the universal selector which I use if styles apply to both, clickable and non-clickable links.

  • Users who have thanked VIPStephan for this post:

    Empress (10-19-2007)

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Empress View Post
    So what do I need to put to keep the image and the text visible, but not make it a clickable link?
    You can’t. You need to alter the HTML.

    The CSS3 Generated and Replaced Content module allows you to do this via the content property, but I don’t know of any Web browser that supports the CSS3 version of this property (there’s a CSS2.1 version too) and that specification is still in W3C Working Draft status besides. [1]

    Quote Originally Posted by CaptainB View Post
    And I can see that you've defined a background-image in your CSS, however it should not be like this:
    Code:
    #menu4 a {
    background-image: url('images/menu_bg4.gif');
    }
    but like this (Without the " ' " marks):
    Code:
    #menu4 a {
    background-image:url(images/menu_bg4.gif);
    }
    Empress’ syntax was correct. You can optionally delimit the URI by apostrophe (') or quotation mark (") characters.

    The delimiters are only problematic if support is desired for the officially discontinued Internet Explorer for Mac or the outdated Netscape 4. Internet Explorer for Mac only chokes on use of the apostrophes; the quotation marks do not cause issues in that line of browsers.

    Quote Originally Posted by Empress View Post
    where "a" defines what happens to the text if it's a link, am I right?
    No. a is an element selector that selects a elements so that you can change their presentation. It has nothing to do with whether or not it’s a hyperlink. To only select a elements that are hyperlinks, you would use an attribute selector (a[href]), :link pseudo‐class or :visited pseudo-class.

    However, the above won’t allow you to cancel to the hyperlink’s default action (hyperlinking behavior) without support for the previously mentioned CSS3 property. To cancel a hyperlink’s default action while maintaining the href attribute, you would use the ECMAScript (i.e., JavaScript) DOM2 Events preventDefault method. In Internet Explorer, you would use Microsoft’s returnValue property.

    Quote Originally Posted by Empress View Post
    I've tried defining a new class, a new id for that particular line, but nothing seems to work.
    Remove the href attribute, replace the a element with another element such as span, or use scripting to cancel the default action.

    Quote Originally Posted by VIPStephan View Post
    Code:
    <ul>
      <li><a href="#">link</a>
      <li><span>link</span>
      <li><a href="#">link</a>
    </ul>
    I wouldn’t use # as a value for href attributes since it’s not a valid URI. “/”, perhaps?

    1. http://www.w3.org/TR/css3-content/#inserting3
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Empress (10-19-2007)

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by Arbitrator View Post
    I wouldn’t use # as a value for href attributes since it’s not a valid URI. “/”, perhaps?

    1. http://www.w3.org/TR/css3-content/#inserting3
    Yeah, yeah, I wasn’t specifically adressing the URI issue, it was just to fill something in while I explained the other problem. I could have left that empty as well.

  • #9
    New to the CF scene
    Join Date
    Oct 2007
    Location
    London
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Guys, thanks so much, I'm still doing something wrong, but I've given up and left them all clickable!!!!

    I'm sure there's something fundamental I'm missing, but I'm getting more frustrated so I've left well alone!

    "if it aint broke, don't fix it" springs to mind, so before I go completely grey i'm admitting gracious defeat!

    When it's live, I'll let you know and you can have a look for yourself!

    Bestest regards, great forum and very helpful people. Many many thanks for trying to help me

    xxxxx

    Empress


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •