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;
}
 
seems ok to me, i added a border to show them up (and some random letters)



i can't see a problem? i get it sometimes where there is nothing in the div and there is no size applied (height and width), maybe it's that?

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

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.

sorry i can't be much more help

nin9abadga
 
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.
 
Change the position property for #menu-left and #menu-right to position: absolute; and then go read up on CSS positioning :).

Relative positioning is like nudging an element. It keeps the element where it should be in the document flow, but allows you to shift its position on the horizontal or vertical e.g position it 10px left from where it was.

Absolute positioning removes the element from the document flow, and allows you to position it relative to another ancestor element (the nearest positioned one) e.g. position it 10px left from the edge of its parent element.

So relative = positioned relative to itself, absolute = positioned relative to another element.
 
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;
}
 
Works for me, but I'm using Firefox. Is this only happening in Safari? Try Firefox/Camino/Omniweb. Have you hard-refreshed your browser cache?
 
You must log in or register to reply here.
Back
Top Bottom