Repetive Background Theme

[tommer]

Here’s a link to a single (sub)page on my website,

http://www.tr-built.com/cherrykitchen.htm

I’m in the process of trying to straighten up my horrendous coding (sorry, I’m new at this), so I’m (hopefully) going to start by cutting down down on some heavy repitition.

I need to do at least a dozen other (5-picture) pages that look just about exactly the same as this one, just with different pictures and a different ‘titlebar’ each time (the navigation menu will stay the same each time).

Both the titlebar and the navbars provide links, – – with the navbar links (home and contact) remaining the same each time, but the title bar will have a different title and a different link each time, – – but the pictures will have the same layout and location and be the same size every time.

I don’t need any detailed code or anything, – – just an (even rough) idea of the best and most efficient way to tackle this using css and html.

Would I try to accomplish it by starting with it as a background image??

Or maybe do it with coding only and a separate style page??

If someone could lead me in the right general direction I promise to screw it up and be back with more fun questions!! LOL

Thanks in advance for any help.

[Bob]

Just what is your question really?

[virtual]

Well for one thing, most people expect to see the logo and header at the top of every page and the navigation immediately below or to one side. All your pages should have the header and navigation on them in the same place.

Definitely put all your styling in an external css file and link to it.

You don’t need javascript and flash for your navigation either, a simple rollover can be achieved with css and background images, this would also take all the coding off your html page.

Try Googling for photo galleries, you can find them already coded and you just have to tweak them a little to fit into your web page.

[tommer]

“Just what is your question really?”

Sorry for not making myself very clear, Bob, – – I guess what’ I’m asking is what’s the best way to handle (code) repetitive like-themed sub-pages.

[tommer]

Thanks Virtual, – – the header (titlebar) will be in the same place everytime, – – it will just have a different title.

And the nav-bar will be bottom-center everytime, – – maybe not quite standard, but still squarely visible and on a page that doesn’t need scrolling.

And I do appreciate your other advice on the rollovers and photo galleries, – – I will look into that more.

Now, as far as styling to an external file sheet, (which I am already doing), – – do you mean, then, – – on an ‘additional’ stylesheet, – – or on the main one I already have??

[Bob]

What he means, is probably this: in your code, you have both an external style sheet but also inline styling, like this:

You should put that background-color style in your stylesheet, like this:

#div305101 { background-color: #FFCC66; }

[tommer]

Thanks, Bob, – – not to get off subject, – – I’m having all kinds of computer problems, – – in fact, I just had to do a complete ‘recovery’.

I’ve been having major problems even before that, – – whenever I put any ‘styling’ in my stylesheet, – – it kicks the first item right off the page (or sometimes just into the top left corner), – – so I’m having to put (almost) all styling with the content right now, until I get that figured out.

In other words, – – I know the coding is (way) incorrect right now, – – but I do what I have to do to at least keep my site up and running, – – hence all the (knowingly wrong) styling within the HTML.

I’m new (and ‘rogue’, LOL) at this.

That may be one good reason I probably shouldn’t have given an actual link, – – because it just complicates the question (though understandably so) I’m really trying to ask.

I do appreciate your helpful suggestions, though, – – but am still unclear on the best overall way to accomplish multiple 5-pic matching subpage themes, – – where all I have to do is insert the 5 different pics and a different titlebar for each of the ‘templated’ (or should I say, ‘pre-backgrounded’) pages.

Is the idea of making (the basic template) an ‘image’, – – and then placing that image in the ‘body’ of each of those pages a crazy idea??

Or maybe a class in the body of each??

[tommer]

OK, – – I re-did the sample page again

http://www.tr-built.com/templafive.htm

This is the look I need on at least 12-15 sub-pages, – – all that will vary is the text-descriptions and the title-bar and the pictures each time.

I guess I’ve just got it in my head that I should somehow be able to start from this page-point every time, – – then just insert my title-bar, my text, and my 5-pics.

Here’s a look at a finished page with said theme, – – hopefully it makes it a little easier to understand what I’m trying to accomplish (repetitively) . . .

http://www.tr-built.com/mahoganybar.htm

[Bob]

You can just copy the code from the http://www.tr-built.com/templafive.htm page and then just use that for every other page you need right? Just edit the title bar, the text and the pictures, like you said. I’m sorry, maybe I don’t really understand what you’re trying to accomplish, but to me it seems copying the code from that templafive.htm page and then just edit the text/title/pictures would be the easiest.

[tommer]

OK, thanks Bob, – – I just thought there might be another way that would make it easier for browsers to sort through, rather than 15 pages of repetitive code, I guess.

I’m too new at this to really know what any set standards are, – – so I figured I’d ask.

Besides, I like to complicate things.

Or did you notice?? LOL

Thanks again . . .

[zackw]

a few things you can do to cleanup your code

1.Try to use CSS shorthand whenever possible, its less typing, memory usage and easier to read. An example in your code is when your declare your border properties:
border-color: #993300; border-style: solid; border-width: 4px;

Instead replace this snippet of css with

border:4px solid #993300;

your essentially declaring 3 things at once, the width, type of border and color.

there are also css shorthands for the background property, fonts and margining/padding (and probably more)

2. Use classes for similar styled elements: Your Markup (HTML) should be reserved purely for content and should not include any styling. By taking off all your inline styling and using an external stylesheet you will cut down lots of the extra characters in your markup. If your including the css property border:4px solid #993300 on all your images, u can instead declare in your CSS style sheet

img {
border:4px solid #993300;
}

that small line will in your css will eliminate lots of code coming from your HTML – if for instance you only want borders on a certain amount of images then you class those images.. an example in your HTML would be

then in your css you put

img.border {
border:4px solid #993300;
}

try to apply these practices and u will be on your way to cleaner better code

[tommer]

zackw,

That is some really USEFUL information!!

Thanks loads, – – that really is a big help!!

I’m having all kinds of problems with my site, – – but at least it’s up and running (even if it does load slowly).

I’m confident I’ll get it all worked out in due time, – – especially with all the great info around here.

Just a few weeks ago, – – I grabbed an additional domain, – – this way I can (hopefully) work out all the bugs on that one, – – while keeping my main site up and running (even if sloppily) in the meantime.

I’m just starting to re-vamp the site over there tonight, around my very busy (more-than-full-time) work schedule, – – I’ll start implementing (and look up more of) your shorthand suggestions right away.

Thanks again . . .

Oh, P.S. – – where you mentioned an example of my ‘html’ for an image above, – – for whatever reason, – – I’m just getting a ‘red x’ there.

I’d be interested in seeing what you’re trying to show me, – – thanks.

[zackw]

sorry ya i’m re-reading that and i see it doesnt make much sense
for the html it would be

the src is just the same path u are using (where your images are located)
and the css would be

img.border {
border:4px solid #993300;
}

that will put a 4px border of that color on all the images with the class of border, saving you lots of code – also im looking at your markup and i see you have a space between your

 and 

you probably want to get rid of the spaces, its not very valid and uses up extra characters

[tommer]

Thanks zack, I’ll try to implement all your great advice. I’ll post up a trial page when I get it done, hopefully pretty soon, and will look forward to learning from your (and others) critique on it.

As far as those spacing, – – yah, I wasn’t too sure, – – I’ve seen it both ways and wasn’t sure which was right.

Now I know, – – thanks . . .

[tommer]

OK, finally, – – here’s a lone page I did on an alternate site with it’s 5 pics and it’s titlebar already inserted, – – and I’ll post the CSS

Fire at will . . .

http://www.tr-build.com/

here’s the CSS . . .

* { margin: 0px; padding: 0px; }

div.pagewrap { position: relative; width: 1000px; margin: 0 auto }

body { background-color: #ffffcc }

img { border-style: none }

div.landscape

{ background-color: #ffcc66; padding: 2px; border: 4px solid #993300; width: 246px; height: 166px }

div.portrait

{ background-color: #ffcc66; padding: 2px; border: 4px solid #993300; width: 166px; height: 246px }

p.addtext

{ width: 210px; text-align: center; font-size: 13pt; color: #993300 }

#t5-tl { position: absolute; left: 62px; top: 56px }

#t5-l-text { position: absolute; left: 82px; top: 265px }

#t5-bl { position: absolute; left: 62px; top: 318px }

#t5-c { position: absolute; left: 410px; top: 102px }

#t5-tr { position: absolute; left: 677px; top: 56px }

#t5-r-text { position: absolute; left: 700px; top: 265px }

#t5-br { position: absolute; left: 677px; top: 318px }

P.S. I don’t know the proper way to treat those titlebar and subpage-navbar files without causing validation problems . . .

[Author]

Posts