CSS not linking with DIV?

MagSafe

MagSafe

MagSafe

Associate
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
Hey,

For some weird reason, and I can't figure out why, my div's that I've created within the index file aren't linking to the css sheet? I've looked for any tags I haven't closed within the documents but can't see anything that's making them not show up :confused:

It's the 2 menu's, menu-left and menu-right that are refusing to be recognised, could someone have a quick look and see if theres anything I've not noticed?

Thanks :)

Website: http://www.smclintock.co.uk/test

Index File
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>
		<title>Baboski - Computer Systems & Technical Support</title>
  		<link type="text/css" rel="stylesheet" href="styles.css" />
		<link rel="shortcut icon" href="images/favicon.ico" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
	</head>
	
	<body>
		<div id="container">
			<div id="topbar">
				<div id="topbar-top">
					<div class="curve-left"></div>
					<a title="Baboski" href="http://www.baboski.co.uk/"><img style="position: relative; left: 15px; bottom: 5px; border: 0px;" width="166px" height="70px" alt="Baboski" src="images/logo.jpg" /></a>
				</div>
				<div id="topbar-bottom"></div>
			</div>
			<div id="menu-left">Menu Left Test</div>
			<div id="menu-right">Menu Right Test</div>
		</div>
	</body>

</html>

CSS Document
Code: 
/*======= Body =======*/
/*====================*/

body
{ 
	background-color: #FFFFFF;
	font-family: arial, helvetica; 
	font-size: 10pt;
	color: #B2C6FF;
}

#container
{
	background-color: #FFFFFF;
	margin: auto;
	padding: 5px;
	color: #B2C6FF;
}

/*====== Topbar ======*/
/*====================*/

#topbar
{
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

#topbar-top
{
	background: #F3F3F3 url('images/curve-right.jpg') top right no-repeat;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 90px;
}

.curve-left
{ 
	background: url('images/curve-left.jpg') top left no-repeat;
	width: 15px;
	height: 15px;
	z-index: -1;
}

#topbar-bottom
{
	background-color: #B2C6FF;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 15px;
}

/*======= Menu =======*/
/*====================*/

#menu-left
{	
	background-color: #F3F3F3;
	margin: 0px;
	padding: 5px;
	width: 90px;
	height: 50px;
	position: relative;
	top: 130px;
	left: 0px;
	font-family: arial, helvetica;
	font-size: 10pt;
	color: #5395E0;
}

#menu-right
{	
	background-color: #F3F3F3;
	margin: 0px;
	padding: 5px;
	width: 90px;
	height: 50px;
	position: relative;
	top: 130px;
	right: 0px;
	font-family: arial, helvetica;
	font-size: 10pt;
	color: #5395E0;
}
 
:confused:

If you go to http://www.smclintock.co.uk/test there should the topbar which looks fine and then underneath it text that says "Menu Left Test" and "Menu Right Test", which is all the index file is telling it to do.

In the CSS file both width and height are set, padding is set, a background colour is set and positioning is set, so one should be at the left and the other on the right.

Edit: included a screenshot, for what it looks like for me.

screenie1.png


As you can see from the CSS there should be 2 grey boxes with the text in them, on either side of the topbar.
 
Last edited:
ok i think i know what you mean now - you want the left and right nav to appear on either side of the screen, is that in the topbar or underneath it? it seems that you're after the classic 3 column layout with a fluid middle - is this right?
Click to expand...

Yeah, thats what I'm wanting.

the issue atm i think is the positioning, relative as opposed to floats. whenever i've tried to position stuff from the right it screws up and i've had to go about it a different way. try this link http://www.cssplay.co.uk/layouts/3cols.html and see if you can adapt it to what you're after.
Click to expand...

Well, yeah, it is the positioning in a way but as there is no background or font colour being applied either it kind of implies that the entire DIV isn't being recognised.

I've looked at other CSS websites for the layout, but no matter what I do now on other DIV's are being recognised.
 
Hi Augmented, thanks for that.

I was actually reading up positioning there before reading your post, and have now changed the positioning around, but the css file is still refusing to acknowledge there is any div's that i needs to apply styling to. It just doesn't want to work :(

Thanks for the reply though :)

New code is as follows:

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>
		<title>Baboski - Computer Systems & Technical Support</title>
  		<link type="text/css" rel="stylesheet" href="styles.css" />
		<link rel="shortcut icon" href="images/favicon.ico" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
	</head>
	
	<body>
		<div id="container">
			<div id="topbar">
				<div id="topbar-top">
					<div class="curve-left">&nbsp;</div>
					<a title="Baboski" href="http://www.baboski.co.uk/"><img style="position: relative; left: 15px; bottom: 5px; 
					border: 0px;" width="166px" height="70px" alt="Baboski" src="images/logo.jpg" /></a>
				</div>
				<div id="topbar-bottom">&nbsp;</div>
			</div>
			<div id="menu-left">Menu Left Test</div>
			<div id="menu-right">Menu Right Test</div>
		</div>
	</body>

</html>

Code: 
/*======= Body =======*/
/*====================*/

body
{ 
	background-color: #FFFFFF;
	font-family: arial, helvetica; 
	font-size: 10pt;
	color: #B2C6FF;
}

#container
{
	background-color: #FFFFFF;
	margin: auto;
	padding: 5px;
	position: relative;
	color: #B2C6FF;
}

/*====== Topbar ======*/
/*====================*/

#topbar
{
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	width: 100%;
	position: absolute;
}

#topbar-top
{
	background: #F3F3F3 url('images/curve-right.jpg') top right no-repeat;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 90px;
}

.curve-left
{
	background: url('images/curve-left.jpg') top left no-repeat;
	width: 15px;
	height: 15px;
	z-index: -1;
}

#topbar-bottom
{
	background-color: #B2C6FF;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 15px;
}

/*======= Menu =======*/
/*====================*/

#menu-left
{	
	background-color: #F3F3F3;
	margin: 0px;
	padding: 5px;
	width: 90px;
	height: 50px;
	position: absolute;
	top: 130px;
	left: 0px;
	font-family: arial, helvetica;
	font-size: 10pt;
	color: #5395E0;
}

#menu-right
{	
	background-color: #F3F3F3;
	margin: 0px;
	padding: 5px;
	width: 90px;
	height: 50px;
	position: absolute;
	top: 130px;
	right: 0px;
	font-family: arial, helvetica;
	font-size: 10pt;
	color: #5395E0;
}
 
You must log in or register to reply here.
Back
Top Bottom