help.. stylesheet coding (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Lazykatz -> 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 [8D]



c1sissy -> RE: help.. stylesheet coding (1/17/2005 22:29:04)

Hi Grizz, would you happen to have a url? Would help to see what you have going. And it always helps to view all your code to see that you have your navigations set up correctly. If I understand you, your navigation isn't working?

You can put anything that you style into a style sheet. Even the banner,which would be most likely in a div, but I think from what you are asking, you might wish to use an includes file?, which can still be used with css. I hope I'm making sense as I am so tired right now, lol [;)].

Post the url so that we can see what you have going. At least it helps me to see the page and to see how you have things going with your html/xhtml and css.



Lazykatz -> 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 [8D]

P.S I know I'm tired, look at this novel I just scratched out of the hole in my head.



Giomanach -> RE: help.. stylesheet coding (1/18/2005 3:19:41)

quote:

content: ('menu.css');


Won't work in IE:

http://www.quirksmode.org/css/content.html
http://www.stunicholls.myby.co.uk/mozilla/content.html



c1sissy -> 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.



Lazykatz -> 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 [8D]



Lazykatz -> RE: help.. stylesheet coding (1/19/2005 2:40:53)

Hi all,

Sorry for taking so long to get a url up, had a 5hr power outage.

The start of my reconstruction can be found @ http://fpwm.lazykatz.com

I posted some of the things I might need help with there as well.

I did find the cause for looking different in explorer, an extra div tag.

Take a look, I welcome all suggestions, help, comments, and critcizism.

Thanks All,
Grizz [8D]



Kitka -> RE: help.. stylesheet coding (1/19/2005 3:05:40)

Hi Grizz,

A few suggestions for you:

To get rid of list bullets, apply a class like the following example in your external CSS:

ul.none {list-style-type: none}

Change your body font to a sans-serif one. Keep the serif fonts (such as Georgia and Times New Roman) for headings. Use Arial or Verdana etc - it is much easier to read on a screen.

Re adding the Google search - you need to choose a DOCTYPE to apply for your page. I'd suggest Transitional 4.01 - and when you have applied it, validate, validate validate! (Did I say that enough times? [:)] )

Your div id="more" needs some padding on the left. The text is currently hard up against the left margin.

Also - I am wondering why you are using frames? They are very passe (for good reason rather than "fashion") and have a number of drawbacks.



Lazykatz -> 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[8D]



Kitka -> RE: help.. stylesheet coding (1/19/2005 4:05:35)

quote:

Sorry for taking so long to get a url up, had a 5hr power outage.


Commiserations on the power outage - they are happening more and more often around here. Besides a basic ongoing lack of maintenance and primary cyclical replacement of essential components in order to remain up-to-date, we get blackouts now, which are due to too many people in "other" large urbanised areas turning on their new air conditioners on hot days. When this overload happens, the "powers that be" decide (with no warning whatsoever) to shut down all electricity for the south coast of NSW! [:o] [:@]

Never mind about the paper mill or the starch factory (major businesses in this area) and never mind any small businesses who sustain huge losses, just so some Sydneysiders can continue to run their massive air-conditioners on a very hot day....



Kitka -> 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.



Lazykatz -> 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 [8D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375