24 replies [Last post]
nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

To begin, I'm a complete novice when it comes to HTML/CSS, so I apologize in advance for my ignorance...

I've finished my design (at least close enough for now) in Photoshop and sliced it into a handful of images.
Design: http://www.jiggzy.com/newconcept/newconceptdesign.jpg
Slices: http://www.jiggzy.com/newconcept/csslayout.jpg

I sort of have an idea how to handle putting the page together in HTML/CSS, but I don't know how I should go about laying out the divs, and the rules and syntaxes are giving me some trouble, too. Should I, for example, have one large container div that will hold everything, including left/rightcontaineredge.png and also the header, links, etc? Or should I have a div that contains left/rightcontaineredge.png alone and inside of that another div to hold the header, links, main body, etc? And if the latter is the correct answer, then what about left/rightedge.png? Another nested div? I think the really confusing part for me is stretching the heights of left/rightcontaineredge.png and left/rightedge.png combined with left and right alignment. I've read a bit about floats, layers, z-indexes, and I'm a little overwhelmed...it seems like there could be several ways to do what I want, but I know so little that I don't know what direction is the right one for this example. If somebody could help me get started so that the heights stretch properly and the structure is on par with modern conventions, it would be an enormous help and I think it would give me enough understanding to move on from there.

Here is the code I have so far (not much, I know):

CSS
html, body
{
margin: 0;
padding: 0;
background-image: url("images/bgpattern.gif");
background-repeate: repeat;
}

div#bigContainer
{
margin: 0 auto;
width: 748px;
}

HTML
-!-- ^ all the standard tags ^ !---
-body-
-div id="bigContainer"-
-img src="images/leftcontaineredge.png" class="floatLeft"-
-img src="images/rightcontaineredge.png" class="floatRight"-
-img src="images/header.png">
-/div-
-/body-

And here's a link to that...
http://www.jiggzy.com/newconcept/home.html

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Oh Golly.

Oh Golly.

I remember, as a kid (40 ish years ago) a car stopped and an old gent asked me the way to a little village called Birdingbury.

Now, from where I was stood, I knew the way was across the fields, but for him he had to turn around and go back the way he came, or carry on and go via a series of complicated turns, but a much shorter journey.

'If I was you, I wouldn't start from here, says I.'

Oh what a wit I was at eight. My mate told him to turn round and go back the way he came. The driver thanked us and then drove on the way he had been going.

I understand that you wanted to get the 'design concept' done, but you need to write the html for the actual content in a semantic manner so that anyone with a text reader can understand it. Even if you use fake urls and lorem ipsum or whatever.

THEN add the css. It will make much more sense that way.

So, start off with a basic page and code the html.

Maybe start with this:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,fieldset,legend{
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
input,select,textarea{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p {
font-size:90%;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#page-container{
line-height:1.1em;
}

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Firstly, thanks for the fast

Firstly, thanks for the fast response, Treva.

A few questions/comments, though:

-I'm not 100% sure I grasp the point of the analogy - is it that in my trying to accomplish this as quickly/efficiently as possible, I'm going to have to deal with a pretty steep learning curve and some complex issues?

-At the beginning of the style info, there are quite a lot of declarations (sorry if that's the wrong terminology) going on, many of which I won't ever need to reference. Is this just a template you start off with when you typically begin developing a page to initialize everything to a desirable default? Furthermore, is it good practice to include or exclude seemingly unnecessary specifications? Is the point to eliminate the chance of strange interpretations by different browsers or just to cover all the bases when giving a beginner a sort of template to use?

-I don't really understand anything from ".floatcontainer:after{" to "/* End Hack */". How should this be implemented?

-There are two reasons I hadn't bothered with content quite yet and am more concerned with the design aspect:
----Having no experience, I assume that formatting the main body will be relatively simple...specify font, size, line spacing, etc. etc. etc., justify the text within a div that has a width of x pixels, maybe have a small struggle with a few strange, somewhat unfamiliar concepts like overflow text, but overall, I would think it would be, at least comparatively, easy.
----Secondly, to me it just seems like the most logical approach: The way I see it, the design is completely hierarchical in nature. Give the main container a set width (the width of the header + 2 * the width of the side shadow) and center it horizontally. From there, the next div would be contained inside, and its width/position would be relative to its parent. Then, the text/main body would go inside of that, once again the width and position being relative to its parent. From the way I'm looking at it, it just seems like the graphical/design aspects dictate how everything else works out. The width of the text is determined by the width of the the body containing it. Similarly, the y value of the text is assigned something relative to the graphical bodies around it. Am I thinking of this all wrong?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

nickcherryjiggz wrote:I'm

nickcherryjiggz wrote:
I'm not 100% sure I grasp the point of the analogy - is it that in my trying to accomplish this as quickly/efficiently as possible, I'm going to have to deal with a pretty steep learning curve and some complex issues?

I was saying that you need content before you can start to hang your style on it. AND. Given the simplicity of your design, the css required will be easy and the image doesn't need chopping up as much, unless you intend to make it variable width, which I am sure would look wrong. Whatever, the way you have done the header with the floating divs is wrong. I don't have time until later, but I will show you how. Once you see how to do it, you can do it over and over again.

Quote:
At the beginning of the style info, there are quite a lot of declarations (sorry if that's the wrong terminology) going on, many of which I won't ever need to reference. Is this just a template you start off with when you typically begin developing a page to initialize everything to a desirable default?

Yes, it gets all browsers singing the same tune. Sure, delete the ones you don't use after you are done (but be aware that if you change the page you may need to add them back.

Quote:
Furthermore, is it good practice to include or exclude seemingly unnecessary specifications? Is the point to eliminate the chance of strange interpretations by different browsers or just to cover all the bases when giving a beginner a sort of template to use?

Yes and yes.

Quote:
I don't really understand anything from ".floatcontainer:after{" to "/* End Hack */". How should this be implemented?

When you put a float inside another container, that container will most likely not accommodate the height of the float. Adding this class to the containing tag does this for you. IE6 has a fault in that it does this anyway without the extra class. The hack is to hide a bit of the code from IE Mac, which flips if it sees it.

Quote:
There are two reasons I hadn't bothered with content quite yet and am more concerned with the design aspect:
----Having no experience, I assume that formatting the main body will be relatively simple...specify font, size, line spacing, etc. etc. etc., justify the text within a div that has a width of x pixels, maybe have a small struggle with a few strange, somewhat unfamiliar concepts like overflow text, but overall, I would think it would be, at least comparatively, easy.

The web is a flexible media and you cannot specify font-sizes. The user does this. You have to design your page so that as the user changes the font-sizes, your page doesn't break. In any case, I wasn't referring to this aspect, as what you are talking about is style, not content.

Quote:
----Secondly, to me it just seems like the most logical approach: The way I see it, the design is completely hierarchical in nature. Give the main container a set width (the width of the header + 2 * the width of the side shadow) and center it horizontally. From there, the next div would be contained inside, and its width/position would be relative to its parent. Then, the text/main body would go inside of that, once again the width and position being relative to its parent. From the way I'm looking at it, it just seems like the graphical/design aspects dictate how everything else works out. The width of the text is determined by the width of the the body containing it. Similarly, the y value of the text is assigned something relative to the graphical bodies around it. Am I thinking of this all wrong?

Your though process is correct, but starts a bit down the road from where you should start. You have an obligation (and in most countries this is back by statute, as it is in the US, Canada, Europe, Australia and many more) to cater for visually impaired visitors (often those who browse the net with pictures and/or style sheets switched off).

Every time you use a picture for content (a button with text built in, for example), or a logo with the company name on, how is that visitor to see them? This is why the first step is to write the site as though it were a plain text page, but properly using html tags (so text reading browsers for blind users correctly describe things). If you get this right, you should have to make very few changer even to add your style (pictures, font styles, colors, etc).

What will Google's bot read to put in the results if it is all pictures?

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Ahhhh!

Thanks for clearing those things up, ClevaTreva. I had been completely oblivious to the whole accessibility issue, so I'm glad you brought that to my attention. I see why it is necessary to have text for things like the links, but is it possible to have the benefits of both? For instance, if I want to make a highly decorative set of links for the navigation (as images), is it possible to have the graphics visible to the typical user, but if a user has styles disabled, it appears as text? I think I remember seeing somewhere an alternative image option (I think used as a backup when the desired image is not available?), but is there a text equivalent? Also, good point with the "searchability" factor and the font size mistake I had made. Thanks again for all your help. I really appreciate it. Once I get this layout done (the right way), I think it will make the whole process much smoother in the future.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Have a google for 'image

Have a google for 'image replacement techniques' for solutions to replacing text with images in a acceptable manner.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yes indeed it is Go to the

Yes indeed it is

Go to the how to forum of this site and see the header image replacement technique I posted recently. It will work with a link as well as a header/link

BTW. Make sure your nav bar is an unordered list of links.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Here's an example of a

Here's an example of a vertical list that does this:

  • Photo Gallery
  • About Us
  • Contact Us
  • Contact Us

and css:

#leftcol ul { list-style: none; margin: 45px 0px 15px 12px; } * html #leftcol ul {margin-left:6px;} #leftcol ul li { display:block; height:142px; width:200px; margin: 3px 0px; overflow: hidden text-align:center; line-height:142px; vertical-align:middle; position:relative; } #leftcol ul li a em{ display:block; position: absolute; left:0; top:0; height: 142px; width: 200px; cursor:pointer; } #leftcol ul li#photogallery a em{background: url(../Images/PhotoGallery.png) no-repeat;} #leftcol ul li#aboutuslnk a em{background: url(../Images/AboutUs.png) no-repeat;} #leftcol ul li#serviceslnk a em{background: url(../Images/Services.png) no-repeat;} #leftcol ul li#contactus a em{background: url(../Images/ContactUs.png) no-repeat;} #leftcol ul li#photogallery a:focus em, #leftcol ul li#photogallery a:hover em, #leftcol ul li#photogallery a:active em, #leftcol ul li#aboutuslnk a:focus em, #leftcol ul li#aboutuslnk a:hover em, #leftcol ul li#aboutuslnk a:active em, #leftcol ul li#serviceslnk a:focus em, #leftcol ul li#serviceslnk a:hover em, #leftcol ul li#serviceslnk a:active em, #leftcol ul li#contactus a:focus em, #leftcol ul li#contactus a:hover em, #leftcol ul li#contactus a:active em {background-position: 0px -142px;}

It was in a leftcol div!

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

I tried out the example, and

I tried out the example, and had a little difficulty understanding exactly what was going on, so I did a google search and came across this, http://www.stopdesign.com/articles/replace_text/ which sort of goes through the evolution of fixes and offers a variety of techniques, all of which are explained pretty thoroughly. So thanks again for the heads up, guys. As for the layout of my example, do you think you could show me the proper way to slice up my design and reconstruct it using html and css?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Yep, no problem on the

Yep, no problem on the slicing bit. Can't tonight, should be able tomorrow.

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Alright, sounds great. 8^)

Alright, sounds great. 8^)

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

It's tomorrow (just)! This

It's tomorrow (just)!

This is how I would have done it:

http://www.siteunderconstruction.net/newconcept/

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Thank you so much!

Looks great! I really appreciate all your help, ClevaTreva. I just got home, so I haven't had much chance to look everything over yet, but as soon as I get a moment, I'll see if I can follow everything that's going on.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Nick I had got it

Hi Nick

I had got it working in FF and IE7, but have just now reposted it so it works in IE6, Opera, etc.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

BTW You need to edit the

BTW

You need to edit the link images to add a hover bit where I put yellow!

You may want to make the Home one not a link.

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Thanks for the update,

Thanks for the update, Treva. I'm still trying to navigate through the code and make sense of everything. Is there a way that I could see the way you sliced the original image up? When I try to view any of the images, I get an error telling me I don't have permission to access them.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

The images are attached. You

The images are attached. You could get them from the scrapbook addin for Firefox, if you have it.

AttachmentSize
bg.gif 818 bytes
bottomedge.jpg 3.48 KB
contact.jpg 8.89 KB
facility.jpg 8.87 KB
fileupload.jpg 9.3 KB
footer.jpg 8.94 KB
header.jpg 26.58 KB
home.jpg 8.5 KB
joblistings.jpg 9.29 KB
mainbg.jpg 8.96 KB
services.jpg 8.94 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

If you try the site in IE6,

If you try the site in IE6, there seems to be a problem with the rollovers sticking to hover state. I'll look at it later.

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Interesting...

Thanks for posting the images and working out the compatibility issues, Treva. I'm got to head out for a few hours, and I still haven't looked at the code as closely as I would like, but a lot of interesting things I've noticed... The main background image, for one...before, I was thinking that in web design, the color behind the main body text was typically solid so it could be treated like the background color of a table cell and then you wouldn't have to deal with having images behind text. Same goes with the navigation bar. But your way seems way better. I haven't found exactly where the order (of layers? or z-index?) is determined, but it's a great concept. Also, the way you did the hover buttons is really nifty. I noticed this line, "background-position: 0px -19px;", which I don't entirely understand how, syntactically, it's telling all the buttons to behave this way, but it seems like on mouseover/hover, the image just shifts up half its height to expose the active state. Really slick. 8^) I look forward to trying to grasp all of this later tonight.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Nick The hover thing is

Hi Nick

The hover thing is called sliding doors.

The background is called faux columns, although in your case it is just one column.

The IE6 hover problem requires a behavior file called hover.htc. I just uploaded a revised version of the css stylesheet which has the hover bit in the body css.

You can get the hover.htc file from here:

http://www.siteexperts.com/ie5/htc/ts03/page2.asp

You would need to edit the link images to add a rollover version of course!

I will (as usual) be out and about this weekend.

I hope you are learning from this exercise!

Note that I have just heavily compressed the stock photo to save bandwidth!

CT

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

And how are you getting on

And how are you getting on with this Nick?

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Hi Treva. Sorry I haven't

Hi Treva. Sorry I haven't responded sooner - I had to make an unexpected trip out of town that lasted a few days, and when I got back, I had to deal with a pretty urgent project.

But I have looked over the HTML/CSS some more, and things are starting to make a bit more sense. I think I'm seeing now how layers and such aren't really necessary, because the backgrounds (the scanlines and the white body behind the main text) are actually set to be backgrounds (go figure, right?) rather than treated like regular images that take up space. Also, I experimented with a few of the navigation link images and have a better understanding of the sliding door trick. I did some research on the display property and was surprised to see all the options available. I found this page, which seems to be rather useful for its compatibility table - http://www.quirksmode.org/css/display.html.

Overall, I think I'm understanding the concepts, but the syntax confuses me a little bit. I get overwhelmed running into things like "#nav ul li#homelink a:focus em, #nav ul li#homelink a:hover em, #nav ul li#homelink a:active em, etc.". So, one day when I have some spare time, I think I'm going to start from scratch and reference the code you showed me, but type it in line by line, perhaps rename a few things to make them more intuitive for me. When I'm first learning a language, I find it very beneficial to really stretch things out and use super descriptive names, and then once I actually grasp it well, I can start making things compact and more efficient.

You've given me a great head start, and I'm very thankful for all the time you've put into helping me with this project. 8^)

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

And...

I've downloaded the latest style.css file, and the htc behavior file from the link you provided. I tried it out in IE 6, and it took a second for the navigation images to load over the text, but seemed to be working fine.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 46 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Good. Those css lines are

Good.

Those css lines are using descendant selectors. So go google. There is a good article in this forum somewhere.

nickcherryjiggz
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-06-06
Posts: 11
Points: 0

Thanks again. 8^)

This cleared it up some: http://www.w3.org/TR/REC-CSS2/selector.html
The examples in the css file are a little more complicated, but I get the idea now.