|
| |
|
|
Lazykatz
Posts: 159
Joined: 1/12/2005
Status: offline
 |
help.. stylesheet coding - 1/17/2005 18:51:01
Hi all,
I'm listening to the replies of my previous posts to use CSS
in the reconstruction of my mess of a site, making it browser
compatable, and get rid of the iframes.
I have created a page template, validated with no errors
(woohoo.. beats over 100). I figure with getting as much of the
content/files into the stylesheet, the less problems FP can create.
My questions..
Can I somehow add into the stylesheet a container or block with
a desinated url for the content. Specifically an ad banner that
is going on every page. (currently in an iframe)
div#adrotator
{
display: block;
content: url ('adrot.htm');
width: 130px;
hieght: 70px;
margin-top: 5;
color: #fff;
padding: .2em;
background-image: url('bg.gif');
background-position: right 50%;
background-repeat: repeat-y
}
I am getting rid of the CSIMX and javascript navigation and replacing
it with css. I have created a new css navigation (it even works..lol),
can it also be added to the stylesheet.
div#navigation
{
display: block;
content: ('menu.css');
float: left;
width: 120px;
hieght: 250px;
padding-top: 2em;
}
Or, should I just take the new css menu and add the entire script/code
to the stylesheet.
I tried several changes with the codings above, have both files in the
same folder with stylesheet, and nothing seems to work.
Thanks in Advance,
Grizz 
_____________________________
http://lazykatz.com
|
|
|
|
Lazykatz
Posts: 159
Joined: 1/12/2005
Status: offline
|
RE: help.. stylesheet coding - 1/18/2005 2:23:55
Thanks c1sissy,
I am also tired..lol of finally trying to reconstruct a web site that
started as a simple something to when bored, into a massive migraine
that will not go away anytime soon.
I currently do not have a page online, but I can tell/show you what
I am working with, I think I found it with one of your post here in
CSS forum looking for tutorials and or template of CSS/stylesheets.
http://css.maxdesign.com.au/selectutorial/steps/step22.htm
I have managed to get most of the colors, fonts, background images
and layout (similar to above with colors of existing site), and now
I'm trying to go outside my little experience with css and accomplish
the rest. BTW, I have used alot of your links here for help.. TY
I've also been visiting http://positioniseverything.net/ and
http://www.csscreator.com/ along with a few other links from here.
The only thing I did change is dropped everything into a table of 780px
I did this, looked at it in all browsers, except Opera, at different res's
and so far, the template is validated with no errors in HTML-Kit with
using HTML-tidy, and it looks good in everything, but one flaw in explorer
that doesn't concern me. I have a line on my site best viewed w/explore,
I'll put a strike thru that when I'm done..lol
I will post a page sometime in the very near future, here is a copy of code
that I've been working with. body
{
margin: 0;
padding: 0;
font-size: 95%;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #fff;
}
a:link { color: #036; }
a:visited { color: #066; }
a:hover, a:active
{
color: #fff;
background-color: #036;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
div#container
{
background-image: url(nav_col_base.jpg);
background-repeat: repeat-y;
}
div#container2
{
background-image: url(more_col_base.jpg);
background-repeat: repeat-y;
background-position: right;
}
div#navigation
{
float: left;
width: 150px;
padding-top: 2em;
}
div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
div#navigation ul li { margin-top: 4px; }
#navigation ul li a
{
display: block;
width: 135px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: #000;
background-image: url(nav_base.jpg);
background-repeat: repeat-y;
}
#navigation ul li a:hover
{
color: #fff;
background-color: #ccc;
background-image: url(nav_base2.jpg);
background-repeat: repeat-y;
}
div#more
{
float: right;
width: 160px;
margin: 0;
padding: 2em 10px 0 0;
color: #fff;
}
div#more h3
{
margin-top: 0;
color: #fff;
padding: .2em;
background-image: url(more_base.jpg);
background-position: right;
background-repeat: repeat-y;
}
div#content
{
margin-left: 190px;
margin-right: 200px;
}
div#content h2
{
font-size: 2em;
color: #036;
margin: 0;
padding-top: 1em;
font-weight: normal;
}
div#content { line-height: 150%; }
#cleardiv
{
clear: both;
height: 1em;
}
div#footer
{
clear: both;
padding: .5em 1em;
border-top: 1px solid #999;
text-align: right;
}
div#footer ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
div#footer li
{
display: inline;
margin-right: 1em;
}
Like I said above, this is a long overdue reconstruction of a mess.
The reason I want to use div#, block, or now includes, is I have
iframes to get rid of, one is for random quote, and it has over 400
lines of text and script, don't want it in html of every page.
If you view my site, there is 6 iframes on homepage, 5 on links pages
that I want to eliminate, I plan to keep the top frame, there is 4 subwebs,
2 new subwebs coming, and I'm combining everything into one site, hopefully
close to what it looks like now, but purrrrrfect.
YES I'm nutz, new site on paper is around 700 pages(so far), the more I can
get into the stylesheet(s), less I'll need to do per page. One fallback I
do have, I can't use ASP, I'm on Linux.
Now that you said I may be asking how to use includes, it tells me to
start looking for tutorials.. etc.
So I plan to keep coming here, using search of forums, asking minimum
questions to the FP masters, I hope, to accomplish this.
Thanks Again,
Grizz
P.S I know I'm tired, look at this novel I just scratched out of the hole in my head.
_____________________________
http://lazykatz.com
| |
|
|
|
c1sissy
Posts: 5084
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: help.. stylesheet coding - 1/18/2005 7:49:46
Hi Lazykatz
One suggestion, due to browsers and how they handle things, do this,
html, body
{
margin: 0;
padding: 0;
font-size: 95%;
font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #fff;
}
On your headings its a good idea to zero out the padding and the margins and add them in the divs as you did already in the banner div.
This is how you have it.
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
Try this one
div#banner h1 {
margin: 0px;
padding: 0px;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
Another thing, your clearing div, you don't need to put anything except for clear with in that style. below you will see an example of how to do this.
#cleardiv
{
clear: both;
}
Now, I have another question for you. Is this a fixed page, or are you doing a fluid layout? And are you doing this in frontpage?
I"m more familar with the fluid layouts. My pages that I am working on right now that are just templates, are all done with percentages and resize with the browser.
Also, if you are intersted in some courses that are really reasonable, pm me, and I'll give the information to you for the classes. They run 6 weeks, and are pretty good when combined with the links in the css links thread.
Also, on the homework thread in here, feel free to take the code and use it. Play with it and try out different things with it. Post any questions in here along with the link to the one that you are playing with. This is why I posted the homework so that others could also see what was being done and could play along with the code that is on them.
And there are others that visit here ocasionally that have way more experience then I do, and I"m sure that when they arrive they will also post information that will help you out. I can see that you really wish to learn this the proper way. So I know that you will get the help that you need along the way. And where front page issues are concerned, I'll leave those to the ones that use frontpage to do their designs as I am only hand coding right now what I do.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Lazykatz
Posts: 159
Joined: 1/12/2005
Status: offline
|
RE: help.. stylesheet coding - 1/18/2005 17:44:30
Hi c3Ksissy,
Thanks for the codes, I copied them, looked at my current stylesheet
that I am working with, and noticed I had already changed most to
no padding, including border-bottom: 1px solid #000; of the 3rd code
above.
quote:
Is this a fixed page, or are you doing a fluid layout?
Currently it is fix, I would go flied if/when I learn how to get everything
to stay in place without stretching across a maximized browser screen
in larger resolutions.
quote:
Also, on the homework thread in here,
I looked here in forum for homework page, I guess you mean on your site,
I'll look there in a minute.
quote:
And where front page issues are concerned, I'll leave those to the ones that use frontpage to do their designs
When I started with this little hobby, I went with FP, over the years I
have learned it is basically good for starting out. I do have Crimson, and
HTML-Kit editors to hand code if need be. In fact, most of my editing
is done in these. I also use smartftp now instead of FP's ftp because
it works more efficiently when publishing, and I get less FP server problems
as well. My next venture is Dreamweaver when the finances get better.
I am searching out information about "includes" to see if that is what
I need to get rid of the iframes. Any help with this is greatly appriciated.
Right before I came here, I set up a sub-domain to post my work of the
new site construction. It will be up as soon as it gets threw the system.
That way everyone can give there input, suggestions, and criticize about
everything. http://fpwm.lazykatz.com
I'm off to dinner, then to desert called messopolous that should be a
universe worth exploring..lol
Thanks again Deb,
Grizz
_____________________________
http://lazykatz.com
| |
|
|
|
Lazykatz
Posts: 159
Joined: 1/12/2005
Status: offline
|
RE: help.. stylesheet coding - 1/19/2005 3:49:58
Hi Kitka,
Thanks for the input.
We're following each other around tonight, I just left Bobby's template review.. lol
There is a DOC on content frame, not in top.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Yes... padding needed for "more" cell, I know, I'm try to figure out how to add other
cells under that one, and I'll pad them all.
Here is the current code of navigation, it is set as above I think.div#navigation
{
float: left;
width: 90px;
padding-top: none;
}
div#navigation ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
div#navigation ul li { margin-top: 4px; }
#navigation ul li a
{
display: block;
width: 90px;
text-decoration: none;
color: #ff3;
background-image: url('z000cbm.gif');
background-repeat: repeat-y; padding-left:2px; padding-right:2px; padding-top:0px; padding-bottom:0px
}
I use the frame because of the flash, it takes to long to load on homepage
with all of its content, starts over everytime someone returns to home, and it's
how do I say, a sentimental reminder of a lost friend who helped with site
until she was killed by a drunk driver. I'm sure at a later date, that frame will
rest in peace as well.
Again.. thanks for your input,
Grizz
_____________________________
http://lazykatz.com
| |
|
|
|
Kitka
Posts: 2520
Joined: 1/31/2002
From: Australia
Status: offline
|
RE: help.. stylesheet coding - 1/19/2005 4:16:15
quote:
I use the frame because of the flash, it takes to long to load on homepage with all of its content, starts over everytime someone returns to home, and it's how do I say, a sentimental reminder of a lost friend who helped with site until she was killed by a drunk driver. I'm sure at a later date, that frame will rest in peace as well.
Deeply sorry to hear of your significant loss.
However, I feel that the frame could easily be converted to an FP include with no loss of integrity/identity but have a net gain in functionality and accessibility. I'm not certain of download times though.
_____________________________
Kitka
**It is impossible to make anything foolproof because fools are so ingenious.**
| |
|
|
|
Lazykatz
Posts: 159
Joined: 1/12/2005
Status: offline
|
RE: help.. stylesheet coding - 1/21/2005 20:54:09
Hi all,
I have listened to all about losing the frames and browser
compatibility of current site. But with having such a large site,
and nearly reconstructed, I'm going finish it as is. It doesn't
look to bad in MSE or FF, OP and NS is bad of coarse.
I plan to continue with another reconstruction using alot more CSS,
probably some javascript, and I know as I learn CSS along with the
help of this forum, it's only a matter of time for the launch of
the purrrrrrfect site.
Enough of the talk...
Here is my problem of the day.. lol
I have a template to start off, but somewhere I have the html code,
a div, wrong or in the wrong place.
I need to get navigation in left cell.. actually need to get rid of
left cell and add navigation in its place.
In Firefox.. it actually showed content were everything is suppose to be,
but I know it is still wrong because Ex-plorer,Opera and Netscape is wrong too.
The actual flaw is (do I dare..) best viewed in EX-plorer.
Please view to see if you can help.
Thanks in Advance,
Grizz
_____________________________
http://lazykatz.com
| |
|
 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 
. 
) 
