SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    links not working

    Hi

    Here is the header code.

    Code HTML4Strict:
    <!-- ----------- HEADER ---------- -->
    	<div id="header">
     
    		<!-- Logo Start -->
    		<div class="logo"><img src="images/logo.png" border="0" width="288" height="48" />
    			<h1 class="tag_line">Tag Line Goes Under Here</h1>
    		</div>
    		<!-- Logo End -->
     
     
     
    		<!-- Shopping Cart Start -->
    		<div id="cart">
    			<div class="cart_bg_top"></div>
    			<div class="cart">
    				<img src="images/shopping_cart.jpg" border="0" width="57" height="51" class="shopping_cart"  />
    				<div class="cart_text">Cart:<a href="#">2 items</a></div>
    				<div class="cart_text">Cart:<a href="#">2 items</a></div>
    				<!--<div class="cart_text">Total:<a href="#">$200.00</a></div>-->
     
    				<div id="cart_buttons">
    					<a href="#" class="cart_button">View Cart</a>
    					<a href="#" class="cart_button">Checkout</a>
    				</div>
    			</div>
    			<div class="cart_bg_bottom"></div>
    		</div>
    		<!-- Shopping Cart End -->
     
    	</div>
    <!-- ----------- HEADER END---------- -->

    Look quite messy here. But is not so in dreamweaver. Here is the css:

    Code CSS:
    /*=========== HEADER =========*/
    #header {
    width:100%;
    position:relative;
    margin:10px auto 0 auto;
    background:red;
    }
     
    .logo {
    margin:20px 0 0 20px;
    float:left;
    }
     
    .tag_line {
    color:#FFFFFF;
    font-weight:normal;
    font-size:1.2em;
    text-align:right;
    }
     
    #cart {
    position:relative;
    float:right;
    width:205px;
    background: green;
    overflow:hidden;
    }
     
    .cart {
    background:url(../images/cart_bg.png) 0 0 repeat-y;
    width:205px;
    overflow:hidden;
    }
     
    .cart_bg_top, .cart_bg_bottom {
    background:url(../images/cart_bg_top.png) 0 0 no-repeat;
    height:8px;
    width:205px;
    }
     
    .cart_bg_bottom {
    background:url(../images/cart_bg_bottom.png) 0 0 no-repeat;
    }
     
    .shopping_cart {
    margin:0 0.7em 0 1.7em;
    float:left;
    }
     
    .cart_text {
    color:#a7540a;
    font-size:1.2em;
    }
     
    .cart_text a:link {
    color:#FFFFFF;
    text-decoration:none;
    font-size:1em;
    padding-left:0.5em;
    }
     
     
    .cart_text a:visited {
    color:#FFFFFF;
    text-decoration:none;
    font-size:1em;
    padding-left:0.5em;
    }
     
    .cart_text a:hover {
    color:#FFFFFF;
    text-decoration:none;
    font-size:1em;
    padding-left:0.5em;
    }
     
    .cart_text a:active {
    color:#FFFFFF;
    text-decoration:none;
    font-size:1em;
    padding-left:0.5em;
    }
     
    #cart_buttons {
    clear:both; 
    padding:0.5em 0 0 0;
    }
     
     
     
     
     
    a.cart_button {
    background:url(../images/cart_button.png) 0 0 no-repeat;
    width:86px;
    height:22px;
    float:left;
    text-align:center;
    color:#FFFFFF;
    text-decoration:underline;
    font-variant:small-caps;
    font-size:1em;
    font-weight:bold;
    margin-left:1em;
    }
     
    a.cart_button:visited {color:#00FF00;}  /* visited link */
    a.cart_button:hover {color:#FF00FF;}  /* mouse over link */
    a.cart_button:active {color:#0000FF;}  /* selected link */
     
     
     
    /*
    a.cart_button:hover {
    color:#000000;
    text-decoration:none;
    }*/

    The problem is that the "view cart" and "checkout" buttons are not acting as links. Although I have inserted them as links.

    Why is this so, please?

  2. #2
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are they acting like?

  3. #3
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    like a simple image. When I hover my mouse over them, the arrow does not change into a hand.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I can't see any reason for them not working, from the snippet you've given us. Can you give us a link to an actual live page, so we can see if there's anything else that could be interfering?

  5. #5
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the link:
    test site

  6. #6
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think there must be something else in your code that you haven't posted that is causing the problem. I copied and pasted your posted html and css into a html file and the links work ok in my IE8 - the cursor changes to a hand when I hover over the links.

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Get rid of the adjacent hyphens strings --- within the HTML comments it is NOT a sensible idea. If you have to have use decoration with HTML comments then choose <!-- == --> so not to screw the browsers up as the amount of hyphens will trigger on/off states.

    They are acting like links from the example you gave us. However, without the rest of the page and images or noting the browser you are having the issue with. It's too hard to replicate your problem. I would suspect it is an overlapped item though in the full page.

    Edit: I see you have now given a page that is displaying the issues. I might come back later if I have time and look further at the problem.

  8. #8
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page has been done only so far. The rest has not been done yet.
    The comments were for the client who will to understand the code and change accordingly.

    I'll check the page again with hyphens removed.

    Thanx

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    At the moment your #top_menu is overlapping the hyperlinks and most of the cart you can see if you give it a background colour; it stretches the full page width.

    Perhaps if you give the: #cart a z-index of something like 2 it will appear in front of the #top_menu allowing you to fully access the hyperlinks.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mistaya123 View Post
    But is not so in dreamweaver
    <mythbusters>Well there's your problem...</mythbusters>

    Taking a closer look at your 'test site' there are a LOT of problems with the code -- that you are using dreamweaver is probably a contributing factor to those problems; as Dan used to say the only thing about Dreamweaver than can be considered professional grade tools are the people promoting it's use.

    From the top of the markup...

    1) <broken record>Is this a NEW page? If so why is it pre-op? Transitional is for supporting old/outdated coding techniques, NOT for building new websites!</broken record>

    2) No media types on your CSS LINK tags

    3) You do NOT have complex enough a layout to be needing IE conditional nonsense, and that you are targeting MULTIPLE versions just further compounds the difficulty in maintaining such a page...

    4) Your comment placement runs the risk of tripping rendering bugs in both IE and FF.

    5) Ease up on the DIV -- you've got about a dozen classed DIV for NOTHING in there. Likewise you are saying the tagline is the parent heading for all content on the page? That seems a little off...

    6) You have NOTHING on the page that should be warranting the use of alpha .png, so get rid of that bloat.

    7) you fail to close HEAD

    Moving on to the CSS

    1) That is a ridiculous reset -- if it starts messing with anything more than padding/margins and border on two elements, it's probably too big to bother with.

    2) 85% of 85% font? No wonder the sizing is so wierd.

    3) generated content for WHAT? Some crappy broken float clearing method? One step removed from that clearfix nonsense...

    4) presentational classes of .left and .right have no real place if practicing separation of presentation from content. Say what things ARE not how they appear. AT that point you might as well go back to using HTML 3.2

    5) font-size changes without re-declaring line-height is the fast track to broken layouts cross browser...

    I could go on for a while, so I'll stop here. In any case as I often say CSS is only as good as the markup it is applied to -- and the markup you have is problematic.

    The code should probably look a little more like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Lorem Ipsum Title
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Company Logo<br />
    		<small>Tag Line Goes Here</small>
    		<span><!-- image replacement --></span>
    	</h1>
    	
    	<div id="cart">
    		<div><div><!-- image sandbag --></div>
    			Cart:<a href="#">2 items</a><br />
    			Cart:<a href="#">2 items</a>
    		</div>
    		<a href="#">View Cart</a>
    		<a href="#">Checkout</a>
    	<!-- #cart --></div>
    	
    	<ul id="mainMenu">
    		<li><a href="#">Home</a></li>
    		<li><a href="#">About Us</a></li>
    		<li><a href="#">Contact Us</a></li>
    		<li><a href="#">Blog</a></li>
    	</ul>
    	
    	<form id="searchBar" action="#" method="post">
    		<fieldset>
    			<div class="searchLabelStack">
    				<label>Search...</label>
    				<input
    					type="text"
    					class="search"
    					value="Search..."
    				/>
    			</div>
    			<input
    				type="image"
    				src="images/searchbutton.png"
    				alt="Go"
    				class="submit"
    			/>
    		</fieldset>
    	</form>
    			
    	<ul id="login">
    		<li><a href="#" class="login">Login</a></li>
    		<li class="last"><a href="#" class="register">Register</a></li>	
    	</ul>
    	
    	<div id="specialOffers">
    		<h2>Special Offers:</h2>
    		<ul>
    			<li><a href="#">Vivamus ac risus felis, sit amet eleifend enim.</a></li>
    			<li><a href="#">Mauris ante dolor, porta sed euismod vel, ultricies placerat diam.</a></li>
    			<li><a href="#">Curabitur a quam quis au</a></li>
    		</ul>
    	<!-- #specialOffers --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Which would/should provide all the hooks needed for what you have for a layout so far. I have time later I'll toss together some example CSS for that. (No promises on that today, I've got a full plate of work ahead of me)

    You should REALLY consider kicking Dreamweaver to the curb.

  11. #11
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what do you use in place of dreamweaver? I thought it was the easiest to handle.

  12. #12
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mistaya123 View Post
    what do you use in place of dreamweaver? I thought it was the easiest to handle.
    Notepad++

    Any text editor will do the job perfectly well, but some offer more features that will help you manage HTML files.

  13. #13
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stevie D: Ic. Thanx. I'll try notepad from now on.

    @deathshadows60: thanx for all the trouble of writing the code. Im trying to correct my code according to your points.

    I have put in a horizontal drop downmenu for the left side categories. I have not used used javascript for it except for a little script in the html. (you can ignore the javascript files in js folder. I'll delete them later)

    The sub menu appears to be working fine in other browsers. but in ie, once i hover my mouse over the link, the sub menu is displayed, and it stays displayed. it does not disappear when i move the mouse away from the link.

    Could you please tell me how I can correct whatever problem it is?

  14. #14
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. the link is: test site

  15. #15
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok dont bother.
    I have changed the menu.


Bookmarks

Posting Permissions

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