Lunarpages Web Hosting Forum

Author Topic: Need advice with site re-design:  (Read 20076 times)

Offline RAT

  • Wizard of Telecastria
  • Senior Moderator
  • Über Jedi
  • *****
  • Posts: 2792
  • HAIRNT !
    • RATtreks.com
Re: Need advice with site re-design:
« Reply #15 on: May 09, 2006, 10:10:24 AM »
Quote
The serif font is a huge improvement.  Another idea I had?  Move the margins in on all sides of your paragraphs by quite a bit, just to create some space in there.  As it is, you're going almost all the way to the edges.  Experiment with different margin sizes to see what looks good.

I am not sure exactly where in which .css to do that in ??   :?

RAT

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #16 on: May 09, 2006, 02:30:18 PM »
Since that paragraph is in your id called "cright", you might want to try something like this in "document.css" :

Code: [Select]
#cright p{
font-family: Verdana,arial,sans-serif;
font-size: 11px;
margin-left: 2em;
margin-right: 2em;
margin-top:  1.6em;
line-height: 1.7;
}

Expanding the line-height value might make it a little easier to read by creating some space in there.  Visually, the reader can follow it with their eyes a little more easily.  Play around with all of the values in there until you get something you like. 
« Last Edit: May 09, 2006, 02:32:27 PM by EOBeav »
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.

Offline RAT

  • Wizard of Telecastria
  • Senior Moderator
  • Über Jedi
  • *****
  • Posts: 2792
  • HAIRNT !
    • RATtreks.com
Re: Need advice with site re-design:
« Reply #17 on: May 09, 2006, 02:42:40 PM »
Would that interfere with any of the other stuff that's in there ??

Code: [Select]
#cright
{
float: right;
width: 610px;
height: auto;
color: #87CEEB;
background: #2D4E7B;
border: 1px solid #213858;
}

 :?

Offline TeraHz

  • Spaceship Navigator
  • *****
  • Posts: 96
    • Georgi's Place
Re: Need advice with site re-design:
« Reply #18 on: May 09, 2006, 04:10:34 PM »
no
it will apply only to <p> tags in the cright <div>
-
?? ??? ?? ????????!

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #19 on: May 09, 2006, 06:06:01 PM »
"#cright p" means "any paragraph that is within an id named cright". 

Basically, "#cright p" would override any properties it had in common with "#cright", as long as "#cright p" was placed after "#cright" in the style sheet.  However, in this case, there are no common properties in either of these declarations. 

Example:  In this case, if you put "color: #c0c0c0;" in the "#cright p" selector, it would override your "color: #87CEEB;" in the "#cright" selector if (and only if) it were placed after "#cright" in the style sheet. 

I've probably confused you, though.  Try it out and let us know what it looks like!
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #20 on: May 09, 2006, 06:14:54 PM »
Something else, RAT...How about floating the image of you over to the right?  It might balance things out a bit...Just a suggestion, and you've probably put it back and forth 100 times or so already.  Ok, I'll shut up now.
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.

Offline RAT

  • Wizard of Telecastria
  • Senior Moderator
  • Über Jedi
  • *****
  • Posts: 2792
  • HAIRNT !
    • RATtreks.com
Re: Need advice with site re-design:
« Reply #21 on: May 09, 2006, 07:23:47 PM »
Quote
I've probably confused you, though.

Yes, thoroughly confused now !

OK, I have this:

Code: [Select]
#cright
{
float: right;
width: 610px;
height: auto;
color: #87CEEB;
background: #2D4E7B;
border: 1px solid #213858;
}

And you want me to have this:

Code: [Select]
#cright
{
float: right;
width: 610px;
height: auto;
color: #87CEEB;
background: #2D4E7B;
border: 1px solid #213858;
                font-family: Verdana,arial,sans-serif;
                font-size: 11px;
                margin-left: 2em;
                margin-right: 2em;
                margin-top:  1.6em;
                line-height: 1.7;

}

Something tells me that wont work,,,,,,????

As for
floating the image of me to the right a little, how would I go about that ? And how much to the right ? Not enough to have text on both sides right ?? Remember you are dealing with RAT here,,, lol,,,I am ignorant at times but once I get it, I have it !!

Thanks for the help ya`ll,  bedtime now, g/f  is fussing,,, geez,,,,sigh,,,,

RAT

PS (oyeah what about the centering problem in FF ???)

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #22 on: May 09, 2006, 07:53:58 PM »
NO no no no no no no no no!


In your style sheet, put the two different selectors like this, in this order:

Code: [Select]
#cright {

(information in your style sheet)

{

Followed by this:

Code: [Select]
#cright p{

(this is the code I made for you)

}

Leave your first #cright the way it is.  Just add the one I had for you right after it. 
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.

Offline RAT

  • Wizard of Telecastria
  • Senior Moderator
  • Über Jedi
  • *****
  • Posts: 2792
  • HAIRNT !
    • RATtreks.com
Re: Need advice with site re-design:
« Reply #23 on: May 10, 2006, 03:10:48 AM »
 :thumb:  I see. 

I feel really stupid sometimes !!   :o

RAT

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #24 on: May 10, 2006, 05:13:36 AM »
:thumb:  I see. 

I feel really stupid sometimes !!   :o

RAT

Don't!  We've all been there, it's really just a part of the learning process. I had somebody else explain this stuff to me in the past as well.
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.

Offline RAT

  • Wizard of Telecastria
  • Senior Moderator
  • Über Jedi
  • *****
  • Posts: 2792
  • HAIRNT !
    • RATtreks.com
Re: Need advice with site re-design:
« Reply #25 on: May 10, 2006, 06:47:07 AM »
OK, did it, I think IT looks better. What do ya`ll think ??

Also notice my FF centering problem went away   :? ,,, this is strange as I know that the above code didnt fix that,, and the changes I made yesterday were working but was still off center to left,  :? but today everything is ok.   :? I think there is a ghost in here somewhere,,,,   :o  Oh well, I am just glad its working finally in both browsers.   :yey:

Now I have my next quest: The footer (menu, copyright, etc)  (for all pages). I can either make hand coded ones like theold site OR I could use the code for the TOP MENU of the NEW site and put it at the bottom (altho I cant get it to be in the right place inside the blue,, grrr,, lol, I am open for suggestions and need to know the proper code for it as my old coding wont work in xhtml strict.

Quote
That leads to another thing that has to be done on the "About Guitar" pages. Notice the links underneath on this page of the old site  EX: "home", "Back to About Guitars", "Next page", 2,3,4,5,6,Next,  etc, etc,,,, Those need to be there on all those pages and I dont think my current code will work in xhtml strict either so any help with that would greatly appreciated. My biggest problem right now is figuring out how to use the </div>`s to put things precisely where I want them on a page.

OK, I have managed to create the above to my liking as seen HERE but it lacks one thing to validate:

Quote
Error Line 91 column 9: ID "cright" already defined.
<div id="cright">
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Info Line 84 column 9: ID "cright" first defined here.
<div id="cright">
 

Here is the code:

Code: [Select]
<!-- RIGHT CONTENT BLOCK STARTS HERE -->
<div style=
"color:#87CEEB; font:Arial, Helvetica, sans-serif; font-size:14px">
<div style="text-align:center;">
<h1>First Guitar</h1>
</div>
<br />
<p>Trying to decide which type of "beginner" guitar to learn with
can be very confusing so it is best to first understand some basics
about each. So which is better, acoustic or electric ? The answer
depends upon who you ask. Some will say acoustic is best, others
will say electric. I recommend learning some about both and what
makes them different.</p>
<div id="cright">
<div style="text-align:center"><img style=
"width: 500px; height: 300px" src=
"http://www.guitar-antics.com/images/stories/e_or_g.jpg" width=
"500px" height="300px" alt="image" /></div>
</div>
</div>
<div id="cright">
<div style="text-align:center">
<p><a href=
"http://www.guitar-antics.com/site2/">Home</a>&#160;&#160;&#160;<a href="http://www.guitar-antics.com/site2/">Back
to:About Guitars</a>&#160;&#160;<b>Next page</b> &gt; <a href=
"http://www.guitar-antics.com/site2/acoustic.html">Acoustic
Guitar</a> &gt; Page 1, <a href=
"http://www.guitar-antics.com/site2/acoustic.html">2</a>, <a href=
"http://www.guitar-antics.com/site2/classical.html">3</a>, <a href=
"http://www.guitar-antics.com/site2/electric.html">4</a>, <a href=
"http://www.guitar-antics.com/site2/choosing.html">5</a></p>
</div>
</div>
</div>
</body>
</html>

I HAD to put the second "cright" in there to get the text to be the right size and in the right place but obviously there is a better way, "class" or something ? Can someone educate me on that ?


I really appreciate all the help, I am learning alot here and my site is improving with each step. I am sorry to be such a constant bother.

RAT
« Last Edit: May 10, 2006, 07:50:19 AM by RAT »

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #26 on: May 10, 2006, 08:20:34 AM »
Yeah, you can't use an id more than once.  Switch it to a class and you're good to go. 

Text is looking good, btw!  Maybe try a bigger font size?  Also, when you add more content, don't be afraid to space your paragraphs out. 
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.

Offline RAT

  • Wizard of Telecastria
  • Senior Moderator
  • Über Jedi
  • *****
  • Posts: 2792
  • HAIRNT !
    • RATtreks.com
Re: Need advice with site re-design:
« Reply #27 on: May 10, 2006, 08:30:35 AM »
Code: [Select]
<div style=
"color:#87CEEB; font:Arial, Helvetica, sans-serif; font-size:14px">

<div style="text-align:center"

The above code seems to work, now if it will validate LOL (should the text within the links be white or is the blue ok ?)

Quote
Text is looking good, btw!  Maybe try a bigger font size? 

 :thumb: good idea, looks better now.  :yey:

Thanks, Beav

RAT

edit:  it validated , (had to remove <p> tags) BUT in FF the template is gone crazy, any ideas ?
Page seen here.
I also think the left side of the paragraph background should NOT touch the left menu ???? How to fix ?  I am making a mess now !!!   Also, still cant get footer to be in right place,, grrr,,,,



PS: I am told NOT to use absolute links with this type of code. SO this is wrong?:
Code: [Select]
<div id="cright">
<div style="text-align:center">
<p><a href=
"http://www.guitar-antics.com/site2/">Home</a>&#160;&#160;&#160;<a href="http://www.guitar-antics.com/site2/">Back
to:About Guitars</a>&#160;&#160;<b>Next page</b> &gt; <a href=
"http://www.guitar-antics.com/site2/acoustic.html">Acoustic
Guitar</a> &gt; Page 1, <a href=
"http://www.guitar-antics.com/site2/acoustic.html">2</a>, <a href=
"http://www.guitar-antics.com/site2/classical.html">3</a>, <a href=
"http://www.guitar-antics.com/site2/electric.html">4</a>, <a href=
"http://www.guitar-antics.com/site2/choosing.html">5</a></p>
</div>
How would I make it right ?
« Last Edit: May 10, 2006, 10:51:09 AM by RAT »

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #28 on: May 10, 2006, 11:11:27 AM »
RAT, you shouldn't have to do a "<div style=...>" in that paragraph.  You're just repeating what's already in the style sheet.  Feel free to experiment with any of the values in the "#cright p" declaration part of your style sheet:  font-size, color, margins, line-height, etc...
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.

Offline EOBeav

  • LF Knothead of the year, 2005
  • Jedi
  • *****
  • Posts: 873
  • Gee, Wally, do you really think I can learn this php/MySQL stuff too?
    • Google Page
Re: Need advice with site re-design:
« Reply #29 on: May 10, 2006, 11:13:09 AM »
And who told you not to use absolute links?  Is that part of the validation?
If you can't design an attractive, standards-compliant website using nothing more than Notepad and a decent graphics editor, you need to rethink your approach to web design.