...

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



Empress
10-12-2007, 09:33 PM
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

CaptainB
10-12-2007, 09:50 PM
<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:

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

but like this (Without the " ' " marks):

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

Empress
10-13-2007, 01:10 AM
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

CaptainB
10-13-2007, 09:23 AM
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):


<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:


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:


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

Empress
10-16-2007, 11:09 PM
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



#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:



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



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

Empress

VIPStephan
10-16-2007, 11:18 PM
I usually replace non-clickable “links” with a span and style that span accordingly:



li * {font-weight: bold;}
li a {color: green;}
li a:hover, li span {color red;}



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

Arbitrator
10-17-2007, 12:21 PM
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]


And I can see that you've defined a background-image in your CSS, however it should not be like this:

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

but like this (Without the " ' " marks):

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


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.


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.




<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?


http://www.w3.org/TR/css3-content/#inserting3

VIPStephan
10-17-2007, 02:58 PM
I wouldn’t use # as a value for href attributes since it’s not a valid URI. “/”, perhaps?


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.

Empress
10-19-2007, 12:40 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum