CSS, Div,Linking

James Jobs · 02-16-2009, 03:31 PM

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>

abduraooft · 02-16-2009, 03:36 PM

Quote:

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?

BoldUlysses · 02-16-2009, 03:36 PM

Can you be more specific about which styles are conflicting?

James Jobs · 02-16-2009, 04:31 PM

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.

BoldUlysses · 02-16-2009, 04:41 PM

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");

James Jobs · 02-16-2009, 06:07 PM

Sorry, But how does that help?

BoldUlysses · 02-16-2009, 06:24 PM

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>

James Jobs · 02-16-2009, 07:30 PM

Thanks I will try it.

abduraooft · 02-20-2009, 01:42 PM

Quote:

Code:

- Base folder with HTML/PHP files
  - CSS folder with stylesheets
  - Image folder
  - JavaScript folder
  - PDF folder (if needed)

Quote:

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!

BoldUlysses · 02-20-2009, 02:43 PM

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.