|
| |
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
 |
CSS - 9/14/2004 6:57:28
Hi guys, I'm getting to grips with CSS, finally!
I have an external CSS file with my text declared, but if I try to put a background image in a cell it overwrites the H1 part....
I have since gone into the code and declared the class of the td to be what I called it, then I can do what I like in the front!
What I'm wondering about though is; should I still do a header, navigation and footer as includes with them reading from the css or should I do a CSS td.HeaderCellTop and td.HeaderCellLeft and td.HeaderCellBottom or whatever and control everything from there? To be honest for some of my headers I really only want images but not set as backgrounds!
I also want to set the background properties for my nav bar in the cell background and have FP do the navigation for me, is this the best way to do it?
thanking you!
_____________________________
I Lost My Stuff - If you lost it, someone found it!
|
|
|
|
Giomanach
Posts: 6130
Joined: 11/19/2003
From: England
Status: offline
|
RE: CSS - 9/14/2004 7:07:41
Stephen
The CSS will format the web page fonts etc based on the HTML document sent to the user. So if you use includes, it won't matter.
Here is a web page I wrote using PHP includes and one stylesheet applied to the HTML document...no different to what I could have done without the includes.
As for the FP nav, that's all done with FPE and JavaScript...of which I think would override the CSS until you removed the theme.
Post your current CSS stylesheet, and I'll take a look at it for you.
Dan
_____________________________
| |
|
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
|
RE: CSS - 9/14/2004 7:12:32
Hi dan...
I'm just playing around at the moment trying to get to grips with it
BODY {Margin: 0px; text-align: top; background-color:tan; text-align: center;}
P {font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: red; font-size: 12px;}
H1 {font-family: Verdana, Helvetica, sans-serif; font-weight: bold; color: white; background-color: blue;}
H2 {font-family: Verdana, Helvetica, sans-serif; font-weight: bold; color: red;}
H3 {font-family: Verdana, Helvetica, sans-serif; font-weight: bold; color: #CC0099;}
H3.two {font-family: Verdana, Helvetica, sans-serif; font-weight: bold; color: yellow;}
A:link {text-decoration: underline; color: blue;}
A:hover {text-decoration: none; color: green;}
A:visited {text-decoration: underline; color: red;}
td.Header{ background-color: blue; text-align: right;}
.TableTopImage { background-image: url('box-top.gif'); background-repeat: repeat-y; background-position: right; background-color: #fff; color: #000;}
.TableBottomImage { background-image: url('box-bottom.gif'); background-repeat: no-repeat; background-position: top; background-color: #fff; color: #000; }
.TableMiddleImage { background-image: url('box-main.gif'); background-repeat: repeat-y; background-position: top; background-color: #fff; color: #000; padding: 20px; text-align: top;}
The text align stuff to the top doesn't work, I'm presuming that I have to declare each cell to align to the top individually as I did before? Or is there a way to class each table as align: top?
Also, I was wondering, what would there be to stop someone from declaring H2 and normal as the same size but having the first paragraph which has a lot of keywords as H2 and the rest as normal so the user is none the wiser but the search engines see the first paragraph as H2? Or is this underhand and could get you banned?
EDIT: Just to let you know, there seems to be a problem with your Office Tutorials Area...
_____________________________
I Lost My Stuff - If you lost it, someone found it!
| |
|
|
|
Giomanach
Posts: 6130
Joined: 11/19/2003
From: England
Status: offline
|
RE: CSS - 9/14/2004 7:25:37
Most of what I'm bout to say is of preference:
1. Make the coding, except font names, lower case.
2. Use Hex or RGB for colors rather than names, and as I got so profoundly scourned for...use three character hex where-ever possible
3. When setting background color, you can knock it down to just background rather than background-color
4. when defining classes, only use td.header if you want it to apply to table cells only etc, otherwise, you can just use .header. As long as you define the class correctly, you shouldn't have any problems.
quote:
The text align stuff to the top doesn't work,
That's because the text-align attribute only works on a horizontal basis (left, center, right), for vertical alignment, use vertical-align with the attributes top, middle, bottom
quote:
Also, I was wondering, what would there be to stop someone from declaring H2 and normal as the same size but having the first paragraph which has a lot of keywords as H2 and the rest as normal so the user is none the wiser but the search engines see the first paragraph as H2?
I don't see why not, just ensure the padding is set to zero and the line height is set to 1em...
quote:
Or is this underhand and could get you banned?
Wouldn't know
quote:
EDIT: Just to let you know, there seems to be a problem with your Office Tutorials Area...
Yeah, it doesn't exist, none of them do yet....it's going through another revamp....just waiting on Lori to get back to me with her ideas etc...then redesign...then get tutorials published
Dan
< Message edited by Giomanach -- 9/14/2004 7:42:06 >
_____________________________
| |
|
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
|
RE: CSS - 9/14/2004 7:47:00
This is slowly but surely sinking in....
Tried the Vertical Align and it works! yay!
Is there anyway I can have this as a standard for the pages? In the body code for example? Or do I have to class each td in turn with the relevant .extention for vertical-align: top?
Padding set to 0? Line Height? You are speaking double dutch to me now....
I've also seen buttons on sites where people can change the colours of the site to suit themselves, is this database driven or is there a way to just change the css used?
_____________________________
I Lost My Stuff - If you lost it, someone found it!
| |
|
|
|
d a v e
Posts: 4179
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online
|
RE: CSS - 9/14/2004 7:57:59
to answer the first question:
td, div {
vertical-align: top;
}
you can do what you want with your h2,s but people with screen readers will see it as a heading and really h2 should be used as what it is: as a second level heading. but it depends on how strict you want to be with yourself! ;)
if so you can use
h2 {
padding:0;
line-height: 1em;
}
or a class like
.keywords {
padding:0;
line-height: 1em;
}
then use <h2 class="keywords"> keywords and stuff in here</h2>
_____________________________
David Prescott
Gekko web design
| |
|
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
|
RE: CSS - 9/14/2004 9:49:02
AHA!!!! Hurrah for science!
Right, I think I've got most of it worked out! I can even specify that
td {vertical-align: top; background: white (#000000); text-align: left; padding: 5px}
and then when I need to put a drop shadow on the left of the left column, then I can have as
td.leftshadow {text-align: center; background-image: url ("left-shadow.gif"); background-position: left; background-repeat: repeat-y;}
and right would be
td.rightshadow {background-image: url ("right-shadow.gif"); background-position: right; background-repeat: repeat-y;}
as I don't want to change the text orientation of the main (right cell)
Am I gettin it?
< Message edited by CelticDragon -- 9/14/2004 10:54:54 >
_____________________________
I Lost My Stuff - If you lost it, someone found it!
| |
|
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
|
RE: CSS - 9/14/2004 10:55:22
Sorry for posting in the wrong place.... I was also wondering why something strange is happening? If I make a change to the class of a table row, which just involves typing in class="classname" into the relevant part seems to knock off the first <p> after it until I press enter and then delete back to the origional position.... is this just something that happens? This includes when I make changes to the .css file by the way....
The more I read about CSS the more I wonder if Frontpage might be obsolete if you can define tables with it.... should I be using tables at all? Or using tables as I ususally used them with the themes from FrontPage and have just the text as a CSS.... or how would I do the same kind of pill buttons with CSS?
< Message edited by CelticDragon -- 9/14/2004 11:01:58 >
_____________________________
I Lost My Stuff - If you lost it, someone found it!
| |
|
|
|
Giomanach
Posts: 6130
Joined: 11/19/2003
From: England
Status: offline
|
RE: CSS - 9/14/2004 11:22:30
FP as a program is not obsolete, it just doesn't use CSS to the full extent.
As to using tables or not, that's all down to what you find easiest to create pages with. Pure CSS layouts can be done, but can also be a PITA to get right in all browsers. I seem to have pretty much got it down to a T, but I always run across a few problems.
Relying on CSS more, also means you will need more knowledge of HTML etc, but not that much more though.
Buttons with CSS, with or without graphics?
Dan
_____________________________
| |
|
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
|
RE: CSS - 9/15/2004 5:31:43
Buttons with images, like the pill buttons you see on the side of many sites.... I was thinking about this last night and I think it should be possible, but I'd have to hard link each part to the site, rather than have FP do the links for me automatically and include that page....
_____________________________
I Lost My Stuff - If you lost it, someone found it!
| |
|
|
|
Giomanach
Posts: 6130
Joined: 11/19/2003
From: England
Status: offline
|
RE: CSS - 9/15/2004 7:17:13
You mean like the nav here:
http://www.lakewallenpaupackproperties.com/ - From Karens Portfolio
If so, then yes, can be done very easily.
As for includes, depends on server type and how prepared you are to change file extensions
Dan
_____________________________
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
