Page 1 of 2

refreshing site

PostPosted: Mon Nov 19, 2012 6:43 pm
by charlotteda
After checking out all the considerations, looks like I will "back up and punt".. I am going to try to construct a single page store to add to my existing site. Using only html and css and the table tag.

Trouble is I find that after not doing any css for a couple of years... I am having trouble remembering what all the code in my stylesheet does.. :oops: .LOL I must learn how to make better notes....


Charlotte

carolinahoneybees.com

Re: refreshing site

PostPosted: Mon Nov 19, 2012 8:13 pm
by agsone
You can figure out a fair bit of CSS by tweaking the code using a browser extension. There's a style editor (Tools -> Web Developer -> Style Editor) as part of the current version of firefox although I prefer the Web Developer Extension (which you have to install and is different to - and older than - the Web Developer tools option, yes that all got a bit confusing). Using one of those you can change "color" and "background" properties in the style sheet using values such as red or purple and see what changes on the page.

Don't forget not to save afterwards!

Re: refreshing site

PostPosted: Tue Nov 20, 2012 8:30 am
by charlescooke
charlotteda wrote:Trouble is I find that after not doing any css for a couple of years... I am having trouble remembering what all the code in my stylesheet does.. :oops: .LOL I must learn how to make better notes....

Possibly my introduction athttp://www.charlescooke.me.uk/web/intros/css_intro.html might help.

Re: refreshing site

PostPosted: Tue Nov 20, 2012 12:30 pm
by charlotteda
Thank you, I will review that. I remember most of the basics but I added wrappers etc to do specific things and now I cant remember what they did...what a mess...LOL

Re: refreshing site

PostPosted: Tue Nov 20, 2012 2:23 pm
by gregtutor
A wrapper is typically used to fixed the width of the main body of the page and centre it. (but I'm sure you remember that now! :-) )

Re: refreshing site

PostPosted: Tue Nov 20, 2012 3:16 pm
by charlotteda
Hi Greg, I think you helped me in the beginning.

I think my wrapper must be what gave my pages the white background to "write" upon i.e. #wrapper #wrapperstore(under construction)

Re: refreshing site

PostPosted: Tue Nov 20, 2012 3:19 pm
by charlotteda
if you have time to look......carolinahoneybees.com/styles.css

My logo info is my banner or top of each page but I cant understand what my

#logo-wrap does..

and why I did this,,,it seems repetative - I promise I am taking better notes this time

#logo h1, #logo h2 {
float: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;}

#logo h1 {
padding-top: 120px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:32px;
font-style: italic;}

#logo h1 {
text-decoration: none;
color: #FFFFFF; }



#logo h2 {
padding: 165px 0 0 45px;
padding-top: 125px;
font: italic 18px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;}

#logo p a {
text-decoration: none;
color: #B6ACA2;}

#logo p a:hover { text-decoration: underline; }

Re: refreshing site

PostPosted: Tue Nov 20, 2012 5:44 pm
by gregtutor
You seem to have deleted "styles.css". Certainly, it is not where it should be.

Re: refreshing site

PostPosted: Tue Nov 20, 2012 6:19 pm
by charlotteda
sorry Greg,

My domain is from go daddy but my files are on my internet provider...

try this

http://webpages.charter.net/charlotteda/styles.css

Re: refreshing site

PostPosted: Tue Nov 20, 2012 6:53 pm
by gregtutor
charlotteda wrote:if you have time to look......carolinahoneybees.com/styles.css

My logo info is my banner or top of each page but I cant understand what my
#logo-wrap does..
The code is:
Code: Select all
#logo-wrap {
   width: 900px;
   margin: 0 auto;}
which says make the #logo-wrap block 900px wide and make sure it is centered. However, as the whole page is set to that width. See:
Code: Select all
body {margin: auto;
text-align:left;
width: 900px;}
it appears to be entirely redundant.
and why I did this,,,it seems repetative
I can't be entirely sure.

There's nothing wrong with having this block:
#logo h1, #logo h2 {
float: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;}

but the following could be placed in a single rule:
#logo h1 {
padding-top: 120px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:32px;
font-style: italic;}

#logo h1 {
text-decoration: none;
color: #FFFFFF; }

while the second and third stab at padding for h2 here:
#logo h2 {
padding: 165px 0 0 45px;
padding-top: 125px;
font: italic 18px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;}

simply overrides the earlier rule (and I wonder why you didn't set the font and colour for both h1 and h2 in the original joint rule, since you end up having them the same).

And there doesn't seem to be any paragraphs within the logo block, so this code:
#logo p a {
text-decoration: none;
color: #B6ACA2;}

#logo p a:hover { text-decoration: underline; }

would appear to be redundant too.

So, in short, it would appear that you are on the right track in saying you don't know what some of the code is intended to do. :-)

Re: refreshing site

PostPosted: Tue Nov 20, 2012 8:45 pm
by charlotteda
thank you for your assistance Greg. When I get time tomorrow I will work on trying to clean that up. I think what happened was a re-do of an existing style page, I accidentally kept some of the elements of an old menu..but too many times in the computer world I have erased something that I shouldnt..so I end up with too much junk... :) I want to add a page with a few items and some paypal buy and cart buttons but I wanted to clean up some of the code first.

Re: refreshing site

PostPosted: Sat Nov 24, 2012 8:57 pm
by charlotteda
Thank you Greg, I think I have cleared that up on my working copy. I just need to finish some work on my "store page" with paypal buttons and add it the live site.

Re: refreshing site

PostPosted: Sun Nov 25, 2012 1:12 am
by charlotteda
well, I guess my html code (nesting must be mixed up)...

I have screwed up something...now my background on my index page (the bluegradient.jpg noted in the wall tag of the style sheet..doesnt go to the bottom of the page. :oops: I dont remember changing any of the html..would you please look at it.

Re: refreshing site

PostPosted: Sun Nov 25, 2012 1:12 am
by charlotteda
well, I guess my html code (nesting must be mixed up)...

I have screwed up something...now my background on my index page (the bluegradient.jpg noted in the wall tag of the style sheet..doesnt go to the bottom of the page. :oops: I dont remember changing any of the html..would you please look at it.

Re: refreshing site

PostPosted: Sun Nov 25, 2012 1:26 pm
by BobCP
Your bluegrade.jpg image is too small to cover the entire vertical page. You can either resize it or tile it (which will start the darker area again directly below the lighter area). Alternately, keep the original image un-tiled and add a background color that matches the color at the bottom of your gradient.