Website help...

LearningToProgram · #1 Jun 16th, 2006, 23:43

Ok, here is the website www.jtyransalonandspa.com/welcome.htm and here is the problem. The client wants it to look like this and no different, but I don't know enough about CSS yet to do positioning this way. Can anyone give me some tips on how I can use CSS instead of tables to create this site?

jpmitchell · #2 Jun 17th, 2006, 04:25

Yes.

#0 Set up a container (with the full width of the site and place #1,#2,& #3 in it)
#1 Set up the header image in a header divides (DIV)
#2 Set up the menu in a unordered list (UL)
#3 Set up the content in a content divides (DIV)

When you have those three things ready it'll be easy for you to add the header image, add each menu item as a seperate List Item (LI), and then add the content in paragraphs (P). Styling from that point wont be too bad.

LearningToProgram · #3 Jun 17th, 2006, 04:54

Thanks for the reply, I'm going to work on this. I'll repost if I have any questions or if I believe I got it right. Thanks.

masonbarge · #4 Jun 17th, 2006, 12:15

You might point out to your client what happens to that nice background pattern when you scroll.

spinal007 · #5 Jun 17th, 2006, 12:26

Quote:

Originally Posted by masonbarge

You might point out to your client what happens to that nice background pattern when you scroll.

Makes me sick....

LearningToProgram · #6 Jun 17th, 2006, 16:41

What happens to the background pattern? I've checked it on Opera, Firefox, Netscape, and IE6/7 and nothing happens for me on either of my 3 machines...

Are are you talking about having to see the ugly site? Because this is the last email she wrote me...

Quote:

Changes to Make:
1) Can you please change the homepage text to be in all Itallics with a black background and a lime green text.
2) I want the Contact page to have a red background with yellow text, and would like an animated picture of a mailbox opening and closing.
3) On the services page, I would like that background to be yellow instead of that blue.

As you can see, I won't be doing those changes... I'm already disguisted with the site, but I figure I might as well try and get it validated and use the coding as a reference... Just hope no one sees the site... lol

spinal007 · #7 Jun 17th, 2006, 18:16

Quote:

Changes to Make:
1) Can you please change the homepage text to be in all Itallics with a black background and a lime green text.
2) I want the Contact page to have a red background with yellow text, and would like an animated picture of a mailbox opening and closing.
3) On the services page, I would like that background to be yellow instead of that blue.

That is the recipe for our "Worst Websites Archive"

The background flickers.....

LearningToProgram · #8 Jun 17th, 2006, 19:11

Really? What causes that? I'm on Firefox now on my laptop and it does it there, but my other 3 pc's even with firefox I don't have this issue. Any ideas?

Also, how do I get the entire site to center with CSS? As far as I know there is no way to do this, I've been trying to do a margin % but with no luck.

spinal007 · #9 Jun 17th, 2006, 19:41

Background flickers when you scroll....

To center in CSS:

CSS:

Code: Select all

 
div.c{
 width:780px; /* or whatever width you want */
 margin:auto;
}

HTML:

Code: Select all

 
<body>
<div class="c">
 YOUR PAGE
</div>
</body>

LearningToProgram · #10 Jun 18th, 2006, 03:07

Where am I going wrong? I'm having problems making a horizontal Unordered list for my navigation... Here is the code:

Code: Select all

#menu li {display: inline; float: left;}

Code: Select all

    <div id="menu">
  <UL> 
    <li> <IMG SRC="http://www.webforumz.com/images/LTabSpace.png" WIDTH=43 HEIGHT=27 ALT=""></li>
    <li> <a href="welcome.htm"><IMG SRC="http://www.webforumz.com/images/WelcomeA.png" ALT="" WIDTH=111 HEIGHT=27 border="0"></a></li>
    <li> <a href="appointment.htm"><IMG SRC="http://www.webforumz.com/images/Appointment.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="employees.htm"><IMG SRC="http://www.webforumz.com/images/Employees.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="location.htm"><IMG SRC="http://www.webforumz.com/images/Location.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="services.htm"><IMG SRC="http://www.webforumz.com/images/Services.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="contact.htm"><IMG SRC="http://www.webforumz.com/images/ContactUs.png" ALT="" WIDTH=115 HEIGHT=27 border="0"></a></li>
    <li> <IMG SRC="http://www.webforumz.com/images/RTabSpace.png" WIDTH=39 HEIGHT=27 ALT=""></li>
  </UL>
    </div>

The problem is that the links aren't all going on one line, they are breaking into two... how do I fix this?

masonbarge · #11 Jun 18th, 2006, 15:12

Size them so they fit?

theboy · #12 Jun 24th, 2006, 09:57

Hehehe, one of "Those" Clients...

I Recently had one, I did her a very tidy personal portfolio website and she decided she didnt want ANYTHING to have a border! This left bit and bobs lying all over the place! Definately not a peice of work ill be putting my name too!

My advice for Your background would be to change it. Explain to the client what is happening and give her some more possibilities

moojoo · #13 Jun 27th, 2006, 21:55

Should also probably note that in IE 5.x margin:0 auto; doesn't work. So you need to text-align:center; your container and such. Just a thought since IE 5.x is still widely used unfortunately.

moojoo · #14 Jun 27th, 2006, 21:58

If you are doing display:inline; no need for a float. If you do display:block; which is very common for horizontal nav lists then you would. This article will really help you out especially since you have rounded tabs. It will walk you through step by step on how to do it correctly. Cheers!

http://www.alistapart.com/articles/slidingdoors/

Quote:

Originally Posted by LearningToProgram

Where am I going wrong? I'm having problems making a horizontal Unordered list for my navigation... Here is the code:

Code: Select all

#menu li {display: inline; float: left;}

Code: Select all

    <div id="menu">
  <UL> 
    <li> <IMG SRC="http://www.webforumz.com/images/LTabSpace.png" WIDTH=43 HEIGHT=27 ALT=""></li>
    <li> <a href="welcome.htm"><IMG SRC="http://www.webforumz.com/images/WelcomeA.png" ALT="" WIDTH=111 HEIGHT=27 border="0"></a></li>
    <li> <a href="appointment.htm"><IMG SRC="http://www.webforumz.com/images/Appointment.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="employees.htm"><IMG SRC="http://www.webforumz.com/images/Employees.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="location.htm"><IMG SRC="http://www.webforumz.com/images/Location.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="services.htm"><IMG SRC="http://www.webforumz.com/images/Services.png" ALT="" WIDTH=113 HEIGHT=27 border="0"></a></li>
    <li> <a href="contact.htm"><IMG SRC="http://www.webforumz.com/images/ContactUs.png" ALT="" WIDTH=115 HEIGHT=27 border="0"></a></li>
    <li> <IMG SRC="http://www.webforumz.com/images/RTabSpace.png" WIDTH=39 HEIGHT=27 ALT=""></li>
  </UL>
    </div>

The problem is that the links aren't all going on one line, they are breaking into two... how do I fix this?

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Website help...