homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Title image and other CSS issues- please help
It seems this should be an easy problem...
Todmeister




msg:3879191
 12:20 pm on Mar 26, 2009 (gmt 0)

Hi everyone,

New to this forum, fairly new to HTML, and very new to CSS.

Just inherited a fairly poor website, based of divs, with the job of sprucing it up. I've introduced stylesheets, and made it look nicer, but I'm trying to make the whole thing run a lot more smoothly from a coding point of view.

Currently, there are three divs, mainimage, right, and left. Mainimage is the site logo, left is the table of links to navigate the website, and right is the main content. At the moment, you go to the main site, and click on a link from the table, and the content of that page is loaded up in the right div (i.e. without changing the url).

I have initialised the divs in the CSS, but the content for mainimage and left (which never change) are defined in index.html. I'd like the move the code for these into the CSS just to tidy things up, but it doesn't seem to be working, no matter how I try it.

At the moment, I'm just trying mainimage, which will be simpler as it's just a static image. Here's the CSS at the mo:

<style type="text/css">

A:link {color:black; text-decoration: none; font-weight:underlineone; }
A:visited {color:black; text-decoration: none; font-weight:none; }
A:active {color:black; text-decoration: none; font-weight:none; }
A:hover {color:white; background:black; }

body
{
font-family: tahoma;
color: black;
font-size: 12px;
background-color:white;

scrollbar-face-color: black;
scrollbar-3dlight-color: black;
scrollbar-highlight-color: white;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: white;
scrollbar-arrow-color: white;
scrollbar-track-color: white;}

.mainimage
{ position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/ccpheader.jpg);
}

.leftframe
{ background-color: transparent;
position: absolute;
top: 150px;
left: 20px;}

.rightframe
{ background-color: transparent;
position: absolute;
top: 150px;
left: 190px;}

</style>

Can anyone tell me why this isn't working? [This would be a lot easier if links were allowed XD]

 

PSWorx




msg:3879260
 2:03 pm on Mar 26, 2009 (gmt 0)

Any CSS embedded into the HTML will override anything in your CSS files/style block, i'm assuming this is your scenario.

Firstly i would strip out all embedded CSS from your HTML tags and work with a 'clean' sheet so to speak, then try including your CSS file and see if the styles are being picked up as required.

A snippet of the HTML code would help here.

Todmeister




msg:3879301
 2:55 pm on Mar 26, 2009 (gmt 0)

I can't find any CSS in the HTML (it's hard to get a snippet, as I'm trying lots of things at once XD), but I'm definite that <div class=mainimage> is never referenced. Would this be a reason for it not appearing?

rocknbil




msg:3879332
 3:23 pm on Mar 26, 2009 (gmt 0)

A:link {color:black; text-decoration: none; font-weight:underlineone; }

I'm no CSS "guru," but first off what is underlineone? Valid font weights are numeric or "bold, normal," etc.

An invalid selector can sometimes bork the whole style sheet, may not be the case but when in doubt:

Validate the page [validator.w3.org]
Validate the CSS [jigsaw.w3.org]

Note that this requires a valid full doctype [webmasterworld.com]. Validation IMO is the first step to cross browser compatibility, a benchmark by which you can determine that it's not something invalid in your code breaking the layout.

The next thing that catches my eye:

<div class=mainimage>

Validation will (most likely?) warn you that these attributes need to be quoted:

<div class="mainimage">

Depending whether you are rendering in Quirks or Standards mode can determine whether your selectors will or will not apply (in some cases, not all. I think that's one of the reasons they call it "Quirks mode.")

Last,


.mainimage
{ position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/ccpheader.jpg);
}

the bolded infers you have a structure like this:

mypage.html
some-directory/mycss.css

so your link in the head should be

<link rel="stylesheet" type="text/css" href="some-directory/mycss.css">

Just verify this is the case.

As PSWorx requested: the relevant HTML may be the problem, so you might post a snippet of that to see how it's being referenced.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved