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 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Angry CSS, Div,Linking

    I am doing a site with CSS and when I link a css stlye with another stlye it will still link to the first one.

    You can see the site at http://jamesjobs.co.uk/winheist/

    The CSS:

    Code:
    #banner {
    	background: #ff84ff url(nano1.png) 0;
    	height: 350px;
    	position: absolute;
    	top: 100px;
    	width: 780px;
    }
    
    .briefings {
    	height: 75px;
    	width: 237px;
    	background-image: url(briefings.png);
    	z-index: 7;
    	position: relative;
    	left: 250px;
    	top: -70px;
    	
    }
    
    #loot {
    	height: 75px;
    	width: 237px;
    	background-image: url(loot.png);
    	z-index: 6;
    	position: relative;
    	left: 250px;
    	top: -100px;
    }
    
    #logo {
    	height: 75px;
    	width: 237px;
    	background-image: url(logo.png);
    	z-index: 2;
    	position: relative;
    	left: 12px;
    }
    
    h#shadowh {
    	width: 856px;
    	height: 850px;
    	z-index: -1;
    	position: relative;
    	left: 0;
    	right: 0;
    	background: url(bg.png) no-repeat -37px;
    	display: compact;
    	float: none;
    	clear: none;
    }
    
    #tbar {
    	width: 806px;
    	height: 75px;
    	right: 0;
    	position: absolute;
    	display: compact;
    	float: none;
    	clear: none;
    	z-index: 0;
    	background: #fff7ff url(tbar.png) scroll;
    }
    
    * {
    	background-image: url(png);
    }
    The HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    
    <body>
    <div style="height:800px ; width:806px ; position:relative; float:none; left:0px; top:0px; background-image:url(bg.png); background-repeat:; background-position:; background-color:transparent; opacity:100; filter:alpha(opacity=100); margin:26px auto 0px auto ; " flux:locked="true" > 
    
    <div id="tbar">
    
    <div id="logo" onClick="window.location.href = 'http://jamesjggobs.co.uk/winheist/'" title="Home">
    
    <div id="shadow">
    
    <div id="banner" onClick="window.location.href = 'http://jamesjobs.co.uk.com/winheist/briefings/'" title="Banner"> <div id="loot" onClick="window.location.href = 'http://jamesjobs.co.uk.com/winheist/loot/'" title="Loot">
    
    <div id="loot" onClick="window.location.href = 'http://jamesjobs.co.uk.com/winheist/loot/'" title="Loot">
    </div>
    <div class="briefings" onclick="window.location.href = 'http://jamesjobs.co.uk.com/winheist/briefings/'" title="Briefings">
    </div>
    </body>
    </html>
    Last edited by James Jobs; 02-16-2009 at 03:33 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I am doing a site with CSS and when I link a css stlye with another stlye it will still link to the first one.
    Sorry, it's not clear! Could you explain a little more?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Can you be more specific about which styles are conflicting?
    matt | design | blog

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Well I have linked the style logo to jamesjobs.co.uk/winheist and I have the style loot linking to jamesjobs.co.uk/winheist/loot and the style briefings linking to jamesjobs.co.uk/winheist/briefings but they all are linking to jamesjobs.co.uk/winheist. I think it is because the logo style is over the other links but i have no idea on how to resolve this. You can see what I mean by going to jamesjobs.co.uk/winheist and trying to click on the loot and briefing links.

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    The easiest way is just to put all your images files in one folder. For simple sites I organize things like this:

    Code:
    - Base folder with HTML/PHP files
      - CSS folder with stylesheets
      - Image folder
      - JavaScript folder
      - PDF folder (if needed)
    That way all the images are in one place and it simplifies filepaths.

    To specify a filepath other than the folder the stylesheet is in, go like this. To go up one level:

    Code:
    background-image:url("images/image1.jpg");
    To go down one level:

    Code:
    background-image:url("../image1.jpg");
    To go down two levels:

    Code:
    background-image:url("../../image1.jpg");
    To go down one level and then back up one level (into the folder "images"):

    Code:
    background-image:url("../images/image1.jpg");
    It's complicated I know. If all else fails you can always specify the full filepath:

    Code:
    background-image:url("http://www.yoursite.com/site/images/image1.jpg");
    Last edited by BoldUlysses; 02-16-2009 at 04:44 PM.
    matt | design | blog

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Sorry, But how does that help?

  • #7
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Sorry, I misunderstood your question. I think I see what you're after now.

    First things first, though: Validate your markup (this might even fix your problem all by itself). The main issue with your HTML is that your divs aren't closed; they all need closing tags like this:

    Code:
    <div></div>
    Also, the proper way to make one page link to another is by using anchor tags, like so:

    Code:
    <a href="http://www.addressforthelinkedpage.com">Here is the link content.</a>
    Last edited by BoldUlysses; 02-16-2009 at 06:28 PM.
    matt | design | blog

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks I will try it.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    - Base folder with HTML/PHP files
      - CSS folder with stylesheets
      - Image folder
      - JavaScript folder
      - PDF folder (if needed)
    It's complicated I know. If all else fails you can always specify the full filepath:
    I prefer the use of absolute paths starting with /, whenever I need to refer any element from the client side code.

    eg:
    html
    Code:
    <img src="/images/header.png">
    css
    Code:
    #header{
    background:url(/images/header_bg.gif);
    }
    * html #logo{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/logo.png");
    }
    (It's same for inline,external, internal style)

    link tag
    Code:
    <link rel="stylesheet" href="/css/style.css" media="all"/>
    anchor
    Code:
    <a href="/about">About</a>
    javascript
    Code:
    <script src="/scripts/common.js" type="text/javascript" ></script>
    Code:
    img[0].src='/images/another_image.gif';
    etc.

    Path doesn't matter at all!
    Last edited by abduraooft; 02-20-2009 at 01:44 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    BoldUlysses (02-20-2009)

  • #10
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Brilliant. Thanks abduraooft. I don't know why that didn't occur to me--I use that syntax all the time at the command line.
    matt | design | blog


  •  

    Tags for this Thread

    Posting Permissions

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