refreshing site

HTML Source, Tables, CSS, JavaScript, and Embed/Object.

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

refreshing site

Postby charlotteda on Mon Nov 19, 2012 6:43 pm

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
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby agsone on Mon Nov 19, 2012 8:13 pm

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!
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Re: refreshing site

Postby charlescooke on Tue Nov 20, 2012 8:30 am

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.
Charles
charlescooke
 
Posts: 765
Joined: Fri Jun 08, 2007 12:22 pm
Location: Surrey
Country: United Kingdom (uk)

Re: refreshing site

Postby charlotteda on Tue Nov 20, 2012 12:30 pm

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
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby gregtutor on Tue Nov 20, 2012 2:23 pm

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! :-) )
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3783
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: refreshing site

Postby charlotteda on Tue Nov 20, 2012 3:16 pm

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)
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby charlotteda on Tue Nov 20, 2012 3:19 pm

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; }
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby gregtutor on Tue Nov 20, 2012 5:44 pm

You seem to have deleted "styles.css". Certainly, it is not where it should be.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3783
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: refreshing site

Postby charlotteda on Tue Nov 20, 2012 6:19 pm

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
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby gregtutor on Tue Nov 20, 2012 6:53 pm

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. :-)
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3783
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: refreshing site

Postby charlotteda on Tue Nov 20, 2012 8:45 pm

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.
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby charlotteda on Sat Nov 24, 2012 8:57 pm

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.
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby charlotteda on Sun Nov 25, 2012 1:12 am

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.
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby charlotteda on Sun Nov 25, 2012 1:12 am

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.
charlotteda
 
Posts: 212
Joined: Wed Aug 15, 2007 8:29 pm

Re: refreshing site

Postby BobCP on Sun Nov 25, 2012 1:26 pm

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.
BobCP
Moderator
 
Posts: 1458
Joined: Sat May 26, 2007 10:03 am
Location: Connecticut

Next

Return to Advanced Design Q & A


Who is online

Users browsing this forum: No registered users and 1 guest