113 replies [Last post]
cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I really need help with this. I am an old tables user who is trying to jump on the CSS bandwagon and am completely stuck. I have done a tutorial I found on how to slice a Fireworks page and convert it to CSS and it worked well. Now I am trying to do my own layout and am having problems galore. Here is the layout I came up with. Could someone give me some pointers as to how to slice this up and get the CSS to work?

http://foxdenwebsolutions.com/images/foxdencreationsc.png

The logo, jewelry, buttons, welcome text, and copyright text are all separate images as well as the header area, content area, and footer area. I also have the background area as an image.

Am I just beating my head against a wall for nothing or can this be successfully done? I know that I need to slice it all up and then go to DW to do the markup before doing the CSS. The tutorials I seem to find are all based on really simple layouts but don't go into how to do a more difficult layout. Any help would be greatly appreciated. Thanks.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

cgacfox wrote:I know that I

cgacfox wrote:
I know that I need to slice it all up and then go to DW to do the markup before doing the CSS.

Kind of, but no.

You need to do the HTML markup before slicing it up. Ignore design and images, and markup the content for what it actually is.

Your title? That's a <h1>. Your navigation? An unordered list.

Get some semantic HTML marked up first and then we'll give you a hand using the image you've designed - it can easily be done, but you have to understand about underlying markup first.

For a rather basic example check out my layout here:

http://www.thepineapplehead.co.uk/tds/roster/

and view the HTML source, that's what you're aiming for.

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Thank you, pineapple. I will

Thank you, pineapple. I will go ahead and do the HTML first. I need to keep in mind that I am not using tables...that will be difficult for me! Wink So instead of I will use the div property to mark my different areas of the page, such as #header, #content, #nav, etc...right? Some tutorials and books that I have read say to use a container div to start out...#container...then put the other elements in that. Is that correct? I think I want a 3 column layout. The image that I posted will have photos of my beaded works on the right hand side of the content area. I believe that would require a 3 column layout. Left for the nav, center for the text, and right for the photos. Please tell me if I am incorrect with this thought process.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Have a read of this one

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Good thread and very useful

Thank you for pointing me to that thread and your article on using too many div tags. I guess a lot of the tutorials that I have read get div happy when there is no need. Here is what I have come up with after reading the thread and your article. Now I know you have seen the layout that I came up with and realize that there are a lot of images that I will be working with. It will be interesting to see how this all comes out. If I catch on to what I am doing, then I can get away from tables and start using CSS with every site that I build. I can be more complex with the images than I have been before. I have several clients that I can redo their sites in CSS and have a much better looking site for them (I won't charge for the redo on the sites since this is my idea to change them from tables to CSS layouts).

Please let me know if I am heading in the right direction and what I should change about the code below. Thanks very much for your help. Just to let you know, the welcome text is an image because I wanted to use Park Avenue font on the home page. Any other page will have Arial text used so an image will not be necessary. Or...should I get rid of the Park Avenue text completely and stick with Arial throughout the site?

Foxden Creations

Foxden Creations and jewelry image


  • Home

  • About Us

  • Necklaces

  • Earrings

  • Bracelets

  • Lanyards

  • Bookmarks

  • By Special Request

Content for id "content" Goes Here

Welcome to Foxden Creations

images to here

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Looks fantastically simple

Looks fantastically simple to me, great job, you've certainly picked that up quick!

I'd go for a simple font on the website and not the park avenue - it's a little hard to read anyway Wink Use it for the logo, nav items, etc, things that add flourish, but not for the main body of text.

Now have you got any ideas about starting the CSS or would you like some guidance?

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Hold my hand please!!

Thank you for the feedback. I will change to a simple but readable font. I like Arial the best because it is easy for me to read.

I really would like some major hand-holding for this first site of mine. Once I get the hang of it, I should be able to accomplish what I need on my own (unless I run into snags then I will come back here for help).

The one problem that I forsee is using the backgrounds that I have chosen for the layout of my site. I really want to keep them and have seen other sites that use textured backgrounds that work great. Attached is the image that I used in Fireworks for the background of the various sections. Just the color is changed. From the various tutorials I have read about slicing, this could be a problem getting this to work correctly.

AttachmentSize
24glg1w.gif 14 KB

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Is the image tileable?

Is the image tileable? Shouldn't be a problem Wink

Set the dark blue colour as the HTML background colour, the pale blue pattern as the body background image, the pale yellow pattern as the container image and you're halfway there.

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Am I starting my CSS page now?

Yes the image is tileable. That is how I did it in Fireworks.

Am I starting the CSS page now? This is where I need the hand-holding. I use Dreamweaver MX 2004 as my HTML tool. Should I go ahead and open up a new CSS page and do the things you mentioned above? Remember I am completely new to this and need major guidance.

Also another snag might be the drop shadow effect I have on the header,content,footer of the page. I have read where one can do this with an image but not sure how exactly to accomplish this.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

The image you have at the

The image you have at the top right, is this going to change or be the same on all pages?

And if it's the same, do you have it as a separate image with a transparent background?

Third question; could you post the different colour variants of that image as attachments so I can make a start on the CSS page for you Wink

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

The image at the top right

The image at the top right was going to be for all pages but now that I think about it, it might not work best that way. Each page will have images of my beaded jewelry and shopping cart info on it, so since it hangs so low, I might only keep it on the home page. I do have it as a separate image though.

The third question has me confused...are you talking about the site as a whole or the jewelry image? If it is the site then I will post the colors that I used. I am not sure what you mean by attachments either. If you want me to do slices, then I can.

Background (not the canvas color) - #243346

header with logo and jewelry - #394350

content - #DD955F

footer - #823202

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Basically I meant - you know

Basically I meant - you know you posted that original pattern image? Do you have different colour variations of it?

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

No I don't. What I did was

No I don't. What I did was make the rectangles and chose the colors I wanted to use in Fireworks. Then I added the texture using the image that I attached earlier. It gives the same pattern but uses the colors that I chose. I could see if I could take the image and just change the color of it. Will that work?

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I think this is what you wanted...

I think this is what you asked me to do.

AttachmentSize
background.png 78.89 KB
content.png 64.12 KB
footer.png 64.46 KB
header.png 64.27 KB

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Here's a start: <!DOCTYPE

Here's a start:


Foxden Creations

html {background: #2F3E52;}
body {background: #495565 url(background.png); width: 860px; margin: 0 auto; overflow: auto;}
#container {background: url(content.png) 56.3% 23%; margin: 30px; margin-bottom: 0; overflow: auto;}
ul {float: left; width: 175px; margin: 0; padding: 0; list-style: none;}
#sidebar {float: right; width: 150px;}
#footer {clear: both; background: url(footer.png); margin: 0 30px;}
#footer p {margin: 0;}
#content {margin: 0 150px 0 175px;}

Foxden Creations and Jewellery

  • Home
  • About Us
  • Necklaces
  • Earrings
  • Bracelets
  • Lanyards
  • Bookmarks
  • By Special Request

Welcome to Foxden Creations

Here you will find unique, hand-crafted beaded jewellery that will set you apart from the crowd.

Please come in and look around, I am sure ther is something that will catch your eye.

I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.

It's a bit messy but have a look at it and dissect it, see if you can improve up on it further or want me to do a little more Wink

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Thanks for the code....

I am picking it apart now. I do have one question....why do you do everything in HTML first? The tutorials that I have read have you do your markup in HTML and then switch to CSS to do the stylizing. I just want to make sure that I am grasping what you are teaching me.

Also I realize that it is getting very late in the UK so if you need to get some sleep, we can pick this up tomorrow. I will be on at the same time that I first logged on today.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Aw you're so thoughtful I'd

Aw you're so thoughtful Laughing out loud I'd stay up into the wee hours of the morning playing BF2 and surfing the net but it's not good for my eyes Tongue

I'm back to work tomorrow but have a quick surf in my lunch break (being the ICT technician helps Laughing out loud).

As to why HTML first? Well, people come to your site for content. If the site is ugly they will put up with it as long as it contains what they want.

Because of this, you use HTML to markup your content semantically. This is so it works with images and styles disabled, and JS disabled - so it can be accessed by people with poor vision, screen readers, and mobile clients (eg phones). You want to make your site available to as many people as possible.

Once you've got the HTML structure in place you can make it look like whatever you want Wink

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 19 hours 18 min ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3569
Points: 674

cgacfox wrote:I do have one

cgacfox wrote:
I do have one question....why do you do everything in HTML first? The tutorials that I have read have you do your markup in HTML and then switch to CSS to do the stylizing.

Well, one might as well ask "why do you build the fondations of the house before putting up the walls". Put that way, a silly question, right?

Valid and semantically correct html is the foundation of web design with CSS and should be done first for the same reason that the foundation of the house is built first. The definition of CSS assumes valid html. For invalid html there is no standard, only for valid html.

So if you want to hold a browser responsible for how it renders your page you have to give it standard html, which is valid. If you feed it invalid html you have no basis to complain about how the broswer renders it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Question about where header info goes...

I have looked over the code and understand for the most part what you are doing. However, I was wondering how the header info (i.e. logo, jewelry, and the background) fits in. From looking at this, I think it would go above the #container area. I realize that I made it h1 so I would guess that the images would go there. Would I use float for the left and right images? Also I noticed that you have the width of the page at 860px. What about people that still use 800x600 resolution? Wouldn't this cause them to have to scroll left and right?

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Played around some....

Well I played around some with the code and got the header area to work with the logo as h1. Then I changed the width of the text because of the images that need to go in the sidebar area. They are 120px in width and 120px in height. Here is a mockup with where the images would go. Also I took one of the buttons I created and added it to the code. I am not sure how to get a space at the top so the button is not sitting at the very top of container area.



Foxden Creations

html {background: #2F3E52;}
body {background: #495565 url(images/background.png); width: 860px; margin: 0 auto; overflow: auto;}
h1 {background: url(images/header.png); margin: 0 0px;}
#container {background: url(images/content.png) 56.3% 23%; margin: 30px; margin-bottom: 0; overflow: auto;}
ul {float: left; width: 175px; margin: 0; padding: 0; list-style: none;}
#sidebar {float: right; width: 240px;}
#footer {clear: both; background: url(images/footer.png); margin: 0 30px;}
#footer p {margin: 0;}
#content {margin: 0 250px 0 175px;}








  • About Us

  • Necklaces

  • Earrings

  • Bracelets

  • Lanyards

  • Bookmarks

  • By Special Request



Welcome to Foxden Creations


Here you will find unique, hand-crafted beaded jewelery that will set you apart from the crowd.


Please come in and look around, I am sure there is something that will catch your eye.


I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.








AttachmentSize
foxdencreationsd.png 355.85 KB

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

I'll have a look when I get

I'll have a look when I get home tonight Wink

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I changed the images so here are the new ones...

I was looking at what I had so far today and decided to change the images used in the background areas. Here are the new backgrounds. I was also playing around with trying to figure out how to get the jewelry image to the right on the header area. Didn't have any luck there. I believe that it will have something to do with positioning but I don't know enough yet to figure it out on my own.

I also want a shadow effect all around the main background and the header,content,footer sections. What I did in Fireworks was to take the 3 rectangles that I made and I flattened them into one image then added the shadow effect. Since the image is flattened, maybe I should take a slice of the flattened image to use. However I think if I do that then it will tile all the way across the page, which I don't want to happen.

AttachmentSize
background.png 29.79 KB
content.png 30.44 KB
footer.png 30.41 KB
foxdencreationsc.gif 141.81 KB

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

You can still use your new

You can still use your new images with my code/your code, you may just need to play around with the tiling percentages.

Do you have the necklace image as a separate transparent PNG you could attach?

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Here you go

Here is the necklace image.

AttachmentSize
jewelry.png 95.06 KB

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Turning off styles

I have heard you and others talk about turning off styles in the browser to make sure that the HTML code is semantically correct. How does one do that? I test in IE 7, Netscape 7, and Firefox. How is this done in each?

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

No idea about IE and Opera,

No idea about IE and Opera, but Fox has two ways.

View > Page Style > No Style

alternatively install the Web Developer extension and use <ctrl><shift><s>

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Okay, here is a revised

Okay, here is a revised page.


Foxden Creations

html {background: #2F3E52;}
body {background: #495565 url(background.png); width: 860px; margin: 0 auto; overflow: auto; position: relative; border: 6px solid #000;}
#container {background: url(content.png) 56.3% 23%; overflow: auto;}
ul {float: left; width: 175px; margin: 0; padding: 0; list-style: none; text-align: center;}
ul li {background: #000; color: #fff; width: 85%; margin: 1em auto; }
h1 {height: 130px; background: url(logo.png) no-repeat top left; text-indent: -9999em;}
#sidebar {float: right; width: 250px; background: #ccc;}
#footer {clear: both; background: url(footer.png); text-align: right; color: #fff; font-weight: bold;}
#footer p {margin: 0;}
#content {margin: 0 250px 0 175px;}
#necklace {position: absolute; top: 0; right: -.5em; background: transparent url(jewelry.png) no-repeat; height: 324px; width: 158px;}

Foxden Creations and Jewellery

  • Home
  • About Us
  • Necklaces
  • Earrings
  • Bracelets
  • Lanyards
  • Bookmarks
  • By Special Request

Welcome to Foxden Creations

Here you will find unique, hand-crafted beaded jewellery that will set you apart from the crowd.

Please come in and look around, I am sure ther is something that will catch your eye.

I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.

 

I've guessed at some dimensions but compare it with my earlier code and view it in a browser, see how it's shaping up.

Could you also attach your main logo image?

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Main logo image attached

Here it is.

AttachmentSize
foxden_creations_logo.png 156.81 KB

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Cool!

I see what you are doing. I was right about the jewelry being positoned absolute. It is interesting seeing how things are shaping up without the use of tables even though the actual CSS page hasn't been started yet. I may need to do some more intensive reading on the CSS code that you are using.

I know that I am probably jumping the gun, but how do I get the double layered effect. If you look at the mockup that I did, I do want that effect, which will probably have to be done with images.

Also I was taught that hexadecimal colors are #******, yet you have some with only #***. Is this because all the letters or numbers are the same and the browser can read it just fine? I am just curious.

Could you comment certain areas so that I know what you are doing and why? This will also help me understand what is going on. Or maybe we can leave that for the final CSS page.

Because I am the MOM, that's why!!!

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 51 weeks 5 days ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

cgacfox - thats the

cgacfox - thats the shorthand color codes.

http://www.seoconsultants.com/css/colors/web/safe/

the left column is the shorthand and the hex is what you are used to using

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

All I've been doing with the

All I've been doing with the CSS is putting it in the head section of the HTML page so it's all together, once we get it finishes we'll separate it into a separate .css file Wink

I'm at work again now so I'll have another look tonight.

Could you possibly email me the separate link images for the left column? If you add them all to a .zip or .rar and email thepineapplehead at gmail dot com

also, do your left links have a rollover effect?

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Its in the mail! ;)

I will send you the images of my links. They do not have a rollover effect. I just made the one image for each link. Didn't feel like doing a rollover effect with a second image on them. I could down the road though once I figure out what I am doing.

After the home page is completed, the next challenge will be the individual pages with the shopping cart info on them. I made a mockup of the necklaces page. I have a simple extension for DW from Web Assist for eCart. However, I am considering purchasing the full-blown version of it. I was stearing away for quite a while because it is CSS-based, but now that I am learning how to create the look and feel for my pages using CSS, I just might purchase it. The "add to cart" buttons will link with Paypal.

I am also in the process of learning ASP, ASP.NET, PHP, and CF. That way I am a more rounded designer with development skills as well. So far none of my clients have needed any of these but if I am to expand my client base, I need to be ready for anything they are looking for. Flash is another thing that I have been playing with and trying to learn.

I want to let you know I really appreciate all your help with my learning. This is a lot more than what I have received on other CSS forum sites. You are fantastic!!! I hope that with the skills I learn here, I can contribute back to the forum with help for others.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Getting there! The next

Getting there!

The next thing I need is the border image split into three parts, but full size, whatever width you want the site to be, with clear center - like this:

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Split into four parts

I split it into four parts because the pattern on the left middle looks different than on the right and I wanted to make sure it lined up correctly. If this won't work, then I will re-slice the middle image as one image. I want the site 750 in width so that people still using 800x600 won't have to scroll left and right.

AttachmentSize
top.png 46.26 KB
left.png 32.43 KB
right.png 31.96 KB
bottom.png 44.28 KB

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Studying the code...

I have been looking over the code that thepineapplehead has posted for me so far and I have a few questions. I have a CSS editor called Stylemaster and have done the tutorial that comes with it. I have also read numerous tutorials and am currently reading "HTML Utopia: Designing Without Tables Using CSS" from the Sitepoint web site.
body {background: #495565 url(images/header.png); width: 860px; margin: 0 auto; overflow: auto; position: relative; border:10px solid #000;} .
In this line of CSS I for the body I am not sure what the overflow: auto means. Also why is the position set to relative? If I want the body of the page to be no more say 800px shouldn't I change the width from 860px to 800px or maybe less for those that use 800x600 resolution so left/right scrolling is not needed? I am also not sure why he created a border on this? Will it be replaced by the images that I posted for the top, left, right, and bottom portions of the page? But then again the middle section should be able to expand depending on the amount of content without any problems so I would think that the middle images would not go into the body part of the code.

In this part #content {margin: 0 250px 0 175px;} am I correct that the top margin is set to 0, right is 250px, bottom is 0px and left is 175px?

I found where I can control the size of the font for the footer area, but am confused as to why it is in the #footer area and the not #footer p area.

If I want a background in the HTML section, would I add am image there as well as the background color?

Where exactly am I going to place the background images for the top, left, right, and bottom that TPH asked me for?

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I just answered the HTML

I just answered the HTML background image part. I would add the background image I want on that line.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Here we go! cgacfox wrote:

Here we go!

cgacfox wrote:

body {background: #495565 url(images/header.png); width: 860px; margin: 0 auto; overflow: auto; position: relative; border:10px solid #000;} .
In this line of CSS I for the body I am not sure what the overflow: auto means.

It's to enclose the floated content.

Quote:
Also why is the position set to relative?

So the absolutely positioned #necklace div knows where to take it's positioning from.

Quote:
If I want the body of the page to be no more say 800px shouldn't I change the width from 860px to 800px or maybe less for those that use 800x600 resolution so left/right scrolling is not needed?

If you're supporting 800x600 then you should use 760px as a width; however your border images were 860px wide, that's why I used it Wink

Quote:
I am also not sure why he created a border on this? Will it be replaced by the images that I posted for the top, left, right, and bottom portions of the page?

Yes. I haven't got round to posting the new bit yet.

Quote:
But then again the middle section should be able to expand depending on the amount of content without any problems so I would think that the middle images would not go into the body part of the code.

It won't, it will be a tiled background of the middle content.

Quote:
In this part #content {margin: 0 250px 0 175px;} am I correct that the top margin is set to 0, right is 250px, bottom is 0px and left is 175px?

Yes. The specified units correspond to the width of the left and right columns. Change them, you'll see what happens Laughing out loud

Quote:
I found where I can control the size of the font for the footer area, but am confused as to why it is in the #footer area and the not #footer p area.

#footer will affect anything inside footer whereas #footer p will only target paragraph elements. It's not a big deal, you could use either, but #footer on it's own is less code Wink

Quote:
If I want a background in the HTML section, would I add am image there as well as the background color?

Yes.

Quote:
Where exactly am I going to place the background images for the top, left, right, and bottom that TPH asked me for?

The left and right will be combined into a middle image, and I'm adding in a few extra divs for the top and bottom.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Here's my latest HTML

Here's my latest HTML code:



Foxden Creations

Foxden Creations and Jewellery

Welcome to Foxden Creations

Here you will find unique, hand-crafted beaded jewellery that will set you apart from the crowd.

Please come in and look around, I am sure ther is something that will catch your eye.

I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.

 

and corresponding CSS:

html {background: #2F3E52;}

body {
width: 770px;
margin: 2em auto;
overflow: auto;
position: relative;
background: #495565 url(img/border/middle .png);
}

#container {
background: #495565 url(img/border/middle.png);
overflow: auto;
padding: 0 1.4em;
}

h1 {
height: 149px;
background: url(img/foxden_creations_logo.png) no-repeat top left;
text-indent: -9999em;
}

#sidebar {
float: right;
width: 250px;
background: #ccc;
}

#footer {
margin: 0 1.4em;
clear: both;
background: url(img/footer.png);
text-align: right;
color: #fff;
font-weight: bold;
}

#footer p {margin: 0;}

#content {margin: 0 250px 0 175px;}

/* Let's get some images on the nav buttons! */

ul {
float: left;
width: 175px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}

ul li {
width: 85%;
margin: 1em auto;
}

ul li a {
display: block;
width: 151px;
height: 39px;
text-indent: -999em;
}

ul li#nav-home a {background: url(img/buttons/home.png);}
ul li#nav-about a {background: url(img/buttons/aboutus.png);}
ul li#nav-necklaces a {background: url(img/buttons/necklaces.png);}
ul li#nav-earrings a {background: url(img/buttons/earrings.png);}
ul li#nav-bracelets a {background: url(img/buttons/bracelets.png);}
ul li#nav-lanyards a {background: url(img/buttons/lanyards.png);}
ul li#nav-bookmarks a {background: url(img/buttons/bookmarks.png);}
ul li#nav-request a {background: url(img/buttons/request.png);}

#necklace {
position: absolute;
top: 1.6em;
right: 1em;
background: transparent url(img/jewelry.png) no-repeat;
height: 324px;
width: 158px;
}

#border-top {background: url(img/border/top.png); height: 31px;}
#border-bottom {background: url(img/border/bottom.png); height: 31px;}

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

It's getting there...

Wow! I can't believe it. It is really coming together now. However, the left and right border images are not looking too good. I removed them for now from the code. Maybe I didn't slice them correctly. I will have to see what you come with when you post more code.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Thanks for answering my questions.

Thanks for answering the questions that I posted. This way I can keep track of what is going on and understand the code better.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

It's the shadow that hasn't

It's the shadow that hasn't come out quite right on the left and right images, that's why it looks kind of odd Wink

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I sent the whole page image in full size

I went ahead and re-sized the page image and emailed it to you. You might still have to tweak it a bit. The blue outer border I adjusted to 745px and the inner image I adjusted to 711px. Having the whole image should help you with the slicing better. I am now working to figure the slicing better myself and incorporating it into the code that you have already posted. Let me know if you need anything else. Wink

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Re-sliced images

Ok I went ahead and re-sliced the top, middle, and bottom images. Hopefully these will work better. I will try them in the code that was posted.

I have been playing with them and I am getting a weird shadow effect. The shadow is coming out a light color instead of a dark color. I think I need to slice more off. I will check this out. If it is true, then I will send new slices.

AttachmentSize
bottom.png 39.23 KB
middle.png 102.52 KB
top.png 38.29 KB

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Oops!!

I saw what I did incorrectly. I got rid of the canvas color and that is why it was looking so weird. I added the canvas color back and now the shadow effect is looking much better. Still playing with the code to get the middle border in place and then seeing if I can get the header, content and footer images to show correctly.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Getting there...

I am getting there with the look of this. There are still some areas that are not coming together very well. The inside background image should have rounded corners but they are not coming out correctly using the images as I have sliced them. The background image for the container is square. Should I round the corners of the images for header, content, and footer so that the sides show curved? Also the middle border image looks odd. As you can see from the attached image of the page, it is not tiling correctly, which is probably due to the way I sliced it?

AttachmentSize
foxdencreations1.gif 146.74 KB

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

I'll have a look tomorrow

I'll have a look tomorrow when my brain is less swimming with CS:S and more with CSS Tongue

In case that made no sense I've been working on this:

http://en.wikipedia.org/wiki/CS_Source

all afternoon and evening Tongue

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I know this game!

One of my husband's friends plays this game so I do know it.

I have playing around with my slices and it is starting to look much better. I have these slices now - top, header, middle, footer, & bottom. That may be too many slices but the corners are looking more rounded now. Somehow the header slice looks weird so I will continue to work on that one.

You play and I will play as well. I am getting all this now. It is finally coming together as I play with the images and the code. I am seeing the light!!! Wink

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Better but...

My logo and the jewelry image seem to be off. Here is my code so far that I have tweaked from TPH's code.


Foxden Creations

Welcome to Foxden Creations

Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.

Please come in and look around, I am sure there is something that will catch your eye.

I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.

Here is the CSS:

/* CSS Document */ html { background: #18222E; } body { width: 767px; margin: 2em auto; overflow: auto; position: relative; } #container { overflow: auto; width: 767px; } #header { overflow:auto; background: url(images/border/header.gif); } h1 { height: 147px; background: url(images/foxden_creations_logo.png) no-repeat top left; text-indent: -9999em; } #middle { background: url(images/border/middle.gif); } #sidebar { float: right; width: 250px; } #footer { clear: both; background: url(images/border/footer.gif); margin: 0 0px; font-family: Arial, Helvetica, sans-serif; font-size: xx-small; font-weight: bold; color: #FFFFFF; text-align: center; } #footer p { margin: 0; } #content { margin: 0 250px 0 175px; } /* Let's get some images on the nav buttons! */ ul { float: left; width: 175px; margin: 1.2em; padding: 0; list-style: none; text-align: center; } ul li { width: 85%; margin: 1em auto; } ul li a { display: block; width: 151px; height: 39px; text-indent: -999em; } ul li#nav-home a { background: url(images/buttons/home.png); } ul li#nav-about a { background: url(images/buttons/aboutus.png); } ul li#nav-necklaces a { background: url(images/buttons/necklaces.png); } ul li#nav-earrings a { background: url(images/buttons/earrings.png); } ul li#nav-bracelets a { background: url(images/buttons/bracelets.png); } ul li#nav-lanyards a { background: url(images/buttons/lanyards.png); } ul li#nav-bookmarks a { background: url(images/buttons/bookmarks.png); } ul li#nav-request a { background: url(images/buttons/request.png); } #necklace { position: absolute; top: 35px; right: 1em; background: transparent url(images/jewelry.png) no-repeat; height: 324px; width: 158px; left: 574px; } #border-top { background: url(images/border/top.gif); height: 41px; } #border-bottom { background: url(images/border/bottom.gif); height: 39px; }

AttachmentSize
foxdencreations2.gif 162.36 KB

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 15 weeks 2 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

#necklace {position:

#necklace { position: absolute; top: 35px; right: 1em; background: transparent url(images/jewelry.png) no-repeat; height: 324px; width: 158px; left: 574px; }

you don't need all that positioning, just use TOP and RIGHT to specify how far away from the top and right you want the image, and remove the LEFT one.

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Absolute positioning not working

When I try to use absolute positioning with the logo it is not working. The header slice goes completely away.

h1 { position: absolute; top: 35px; right: 325px; background: transparent url(images/foxden_creations_logo.png) no-repeat; height:147px; width: 389px; text-indent: -9999px; }

I just duplicated the #necklace code taking the left part out. This is confusing because when I don't mess with the logo code the necklace code works just fine by showing the header slice.

Absolute positioning seems confusing. I still need to get the images of my product in the sidebar area and they will also have to use absolute positioning if you look at the image of the page that I posted. I am now wondering if that will mess up the middle slice that I have. I ended up doing the slices differently than what was originally asked of me. Maybe that messed things up. Do I need to go back to square one or two and do the slicing as was originally shown to me?

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 4 years 16 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Interesting...

I just changed position: absolute to position: relative and it works....at least on my laptop screen (which is a Dell 600M with a small LCD) viewing it locally at 1024x768. When I change the size of the browser window it stays in the same place. This could be the correct code now. I will try to change my resolution to 800x600 and see if that changes anything.

Because I am the MOM, that's why!!!