...

View Full Version : 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:


#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


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


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


background-image:url("images/image1.jpg");


To go down one level:


background-image:url("../image1.jpg");


To go down two levels:


background-image:url("../../image1.jpg");


To go down one level and then back up one level (into the folder "images"):


background-image:url("../images/image1.jpg");


It's complicated I know. If all else fails you can always specify the full filepath:


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 (http://validator.w3.org/check?uri=http%3A%2F%2Fjamesjobs.co.uk%2Fwinheist%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) (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:


<div></div>

Also, the proper way to make one page link to another is by using anchor tags (http://www.w3schools.com/tags/tag_a.asp), like so:


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

<img src="/images/header.png">

css

#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

<link rel="stylesheet" href="/css/style.css" media="all"/>

anchor

<a href="/about">About</a>

javascript

<script src="/scripts/common.js" type="text/javascript" ></script>

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum