9 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 2 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

I'm using an HTML template which I generated a while ago here on the css-layout-generator (not the original generator). I have an image inside of my <div class="contentHead"> and, from what i can tell, there's nothing wrong with it, but i wanted to put my site navigation directly under that image, and before the "maincol", "content" area.

doing so results in styled text, but they aren't acting as <a href> elements. i click and hover all over 'em, but nothing happens. Is it illegal to try to stick navigation there? if not, then any idea what is going wrong?

thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

Tut tut Jeff Smile you should realise that we need a little more to go on than that; we can't guess at why things may not work. You have given us absolutely no information to go on. What are the rules in use what is the markup structure like etc .

Code please Jeff, and we can hopefully answer the question.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

Its tough, but I'll take a guess anyway.

There is a layering issue. The links probably exist in the padding area of another element which is rendered in front - for which the background is transparent. The problem is you are hovering over the padding of the other element not the links.

Easiest way to verify this is to open the page in FireFox and using the WebDev, CSS, View Style Information cursor, hover over the links and check the status bar to see what element is being hovered over. If its not the link, you have your culprit.

Solution for this.... I can't recall the exact details. A forum search might show up something.

I would guess, either use z-index or position relative to ensure the link container is rendered in front of the current in front element. Perhaps change padding to margins, or alter source order.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 2 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

oops... sorry... for some reason i thought that all of the layouts "generated" by the layout generator were basically the same, so that's why i thought you'd know exactly what i meant.

although i found a "fix", here's the code i was using which caused the "error":

<body>

 <!-- MAKE THE HEADER -->

<div id="pagewidth" >
	<div id="header" >

 		<div class="contentHead" align="left">

         <img src="images/nittany_research_200pxHigh.jpg" width="490" height="200" />
		 <br /><a href="index.htm" class="nav">Home</a>
		   <a class="nav" href="webdev.htm">Web Development</a>
		    <a class="nav" href="ecommerce.htm">e-Commerce</a>
			 <a class="nav" href="otherservices.htm">Other Services</a>
			  <a class="nav" href="about.htm">About</a>
			   <a class="nav" href="contact.htm">Contact</a>
		
		
		<!-- CLOSE div class= contentHEAD -->  
 		</div>

	<!-- CLOSE HEADER div -->
	</div> 
	<div id="outer" >

i hope that's enough to go on. my href's work when i put 'em any where after the <!-- close header div --></div> and also before <div class="contentHead">, but anywhere in between there, and they do nothing other than sit there and be normal text (w/ my little ridge border i have around my .nav class)

edit:
p.s. it sure is a bummer that my little ridge borders don't display properly in IE. the "top" is missing! ...sniff..sniff...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

You need to show the whole page and the styles. There doesn't appear to be anything wrong with that code snippet - which you confirm - but obviously there is a problem with the way it interacts with the rest of your page.

Did you do the test I outlined in my post above - to see if another element is being rendered above the links?

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 2 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

chris, i beg your pardon, but i didn't do the test as you suggested. i guess i got carried away w/ trying to stuff some content in there before i ran out of steam. the pupose for this particular pulication was to show someone a basic layout and content idea by this morning, so i was in a bit of a hurry.

yet another case of haste making waste! i should have taken the time to learn what you were trying to teach me.

by the way, the complete page code is available in another thread here.

hugo addressed and fixed the problem for me. i've been following up on several dicsussion topic threads, so i really haven't gotten the chance to examine what Hugo offered yet. I'm confident that his demonstrative style of examination and proposal will yeild something learned.

Edit:
oh, and Chris S, i do intend to try your suggestion. it sounded like an excellent way to narrow it down and find the culpret. thanks for that.

Edit2:
wait a minute... do i need to enable something in fireFox? i forget how to access the "developer" stuff... maybe i need to reinstall, enabling that option? or is it an extension? i think i used to have it set up that way on some other intallation, and different OS/ HDD.

I'll take a look at http://www.mozilla.org , but i would very much appreciate your explanation of how the FireFox features might best be used in the context of CSS development. thanks... again!
Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

Jeff webdev is an extension that neds to be downloaded and installed if you go to 'Tools > Extensions' on the menu you should see it listed if it is instaled and if you right click on the menu bar and select customize you should be able to drag it onto the menu bar from there.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 2 years 27 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

don't have it. i had better get it then. all i have is deskCut and DictionarySearch. recommendations? should i be fine w/ just webdev? i'm not looking for pop-up blockers and all that, just developer tools. thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 1 week 1 day ago
London
Timezone: GMT+1
Joined: 2004-06-06
Posts: 15664
Points: 2802

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

there are heaps of productive extensions just choose the ones you want, the webdev is just for web development and if thats all you want thats fine.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 5 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;a href&gt; in &lt;div class=&quot;contentHead&quot;&gt;

Off topic forum has a thread on useful Firefox extensions.