...

View Full Version : Baffled with CSS - NOT working in webpage



powell1294
10-26-2009, 04:37 PM
I'm sure that the code is the culprit as I am far from "literate" with CSS. I just needed to simplify as I have to change things and it is a pain to change manually on all of the pages.

I tried a css document named mystyle.css and tried to put it into a trial page of abc.html (website is thebuttercupbowtique.com) I only get the background color coming up and nothing else.

I am hopeful that someone can help me out. Thanks in advance.
Michelle

VIPStephan
10-26-2009, 04:46 PM
Your CSS file has all the HTML from the page in it. A CSS file must only contain CSS, though. This means only:


@charset "utf-8";

select {
background-color : #fff0f0;
color : #9c7289;
}
body {
background-image : url(purplemottle.jpg);
font-family : verdana;
color : #664e5e;
}
.header {
float : left;
background-image : url(paint.jpg);
background-repeat : no-repeat;
position : relative;
width : 970px;
height : 286px;
}
#list-menu {
position : relative;
float : left;
margin-top : -266px;
margin-left : 750px;
padding : 0;
width : 152px;
}
#list-menu ul {
margin : 0;
padding : 0;
list-style-type : none;
font-family : tahoma;
font-size : 14px;
font-weight : 700;
}
#list-menu li {
margin : 5px;
}
#list-menu a {
display : block;
width : 120px;
padding : 2px 2px 2px 10px;
padding-top : 2px;
padding-left : 2px;
padding-right : 2px;
padding-bottom : 10px;
border-width : 2px;
border-color : #664e5e;
border-style : solid;
}
a:visited {
color : #ffeaff;
text-decoration : none;
}
a:hover {
color : #ffffff;
text-decoration : underline;
}
a:active {
color : #ff00ff;
text-decoration : underline;
}
#topmiddle {
float : right;
clear : right;
text-align : center;
position : relative;
margin-top : -146px;
margin-right : 85px;
width : 158px;
background-color : #d8bfd8;
}
#leftside {
float : left;
clear : left;
margin-top : 8px;
margin-bottom : 10px;
position : relative;
font-family : tahoma;
font-size : 18px;
left : 0;
width : 205px;
height : 860px;
font-family : tahoma;
font-size : 12px;
text-align : center;
background-image : url(paint.jpg);
background-repeat : repeat;
overflow : hidden;
padding-right : 10px;
padding-left : 10px;
padding-top : 10px;
padding-bottom : 40px;
}
#leftside ul {
display : block;
list-style : none;
text-align : left;
}
#lefside ul li {
display : block;
float : left;
list-style : none;
text-indent : 5em;
width : 10em;
}
#container {
float : right;
clear : right;
position : relative;
margin-top : 8px;
margin-bottom : 10px;
margin-left : 0;
margin-right : 7px;
width : 638px;
text-align : justify;
height : 860px;
font-size : 16px;
font-family : tahoma;
background-color : #e8dad9;
background-image : url("");
background-repeat : no-repeat;
padding-right : 40px;
padding-left : 40px;
padding-top : 10px;
padding-bottom : 40px;
}
#footer {
float : left;
margin-top : 8px;
background-image : url(paint.jpg);
position : relative;
width : 970px;
height : 160px;
font-family : tahoma;
font-size : 18px;
font-weight : 700;
text-align : center;
margin : 0;
padding-top : 5px;
padding-bottom : 5px;
}

belongs into mystyle.css, the rest is not allowed/valid.

Also in your abc.html file you should validate your code (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fthebuttercupbowtique.com%2Fabc.html). <container> is not a valid HTML element, even if you put any doctype (http://alistapart.com/articles/doctype/) (which you also forgot – I suggest HTML strict).

mapleleaf
10-26-2009, 04:47 PM
Take the html tags out of your css file.

powell1294
10-26-2009, 05:27 PM
I altered both files -- could you please take another look and let me know what is wrong? Also, how do I get the menus and listings from main page bowsforgirls.com to be in the css document. I don't want to have to go and change all of the pages to make adjustments to the menu, links/buttons and footer information on all pages.

Thanks for your help thus far...I know I am a css idiot...just trying to get it fixed.

Michelle

VIPStephan
10-26-2009, 05:58 PM
OK, let’s keep it in the public forum because other people might learn from it as well and/or have some helpful additions to make.

Rule #1: CSS is only supposed and able to change the look of (already existing) HTML, not to include HTML or a menu structure in other documents.

What you want is the typical case of including the menu in all pages from an external file so you don’t have to edit every HTML file to change the menu. However, as I said, CSS isn’t made to do this, what you need is a server side script such as PHP or Server Side Includes (http://en.wikipedia.org/wiki/Server_Side_Includes). It’s pretty easy to do this but you should make sure that your server supports any of these scripting languages. You’ll know by trying:

The SSI way:

Name your main page abc.shtml
Cut out the HTML of the menu
Create a new file called menu.html, for example.
In your main file put <!--#include file="menu.html" --> where the menu used to be.
Repeat step 4 in every HTML file where the menu is supposed to appear
Upload the files (main and include files) to the server and call abc.shtml – you’ll see your page as if it was one HTML document if SSI is supported. If not you’ll probably see the raw HTML code (or nothing at all).


The PHP way:

Name your main page abc.php
Cut out the HTML of the menu.
Create a new file called menu.html, for example.
In your main file put <?php include 'menu.html'; ?> where the menu used to be.
Repeat step 4 in every HTML file where the menu is supposed to appear
Upload the files (main and include files) to the server and call abc.php – same as the SSI way.


Now, what this does is include the file menu.html in abc.shtml (or abc.php, depending on the method used) and whenever you change the menu.html file it’s changed automatically on all pages where you include this.

Note that these are server side scripts that cannot be executed or viewed on your local machine by just opening the files in the browser, it must happen on the server (where your website is stored for online access). If your server doesn’t support any of these scripting languages then there’s no way around changing it manually. However there are some pretty good programs with which you can do a multi-file search and replace so doing this is just as quick as with server side scripts.

powell1294
10-26-2009, 06:39 PM
ok...thanks much for your time.

I changed the index.html to index.php and made the menu.html and replaced the menu information in the index file -- works fine.

However, should all of the .html files that get the menu replacement be changed to php files?

I'm sorry for the trouble -- just want to make sure that I am doing this correctly.

Thanks again...I'll await your reply.

Michelle

VIPStephan
10-26-2009, 11:08 PM
However, should all of the .html files that get the menu replacement be changed to php files?

Yes. In order for the server to know what to do with the PHP code in the files, they must be named “.php”, otherwise the PHP isn’t executed but displayed as plain text.

By the way: You can also include other contents, not only the menu. For example you can replace the header or footer code with an include statement and put the code in external files which you also include in the main page(s). Then you only need to change the header/footer include file once and it’s changed on all pages.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum