So I've half made a website

I know I know, I see you shaking your head…

Anyway, as the title suggests I’ve compiled a bunch of code and stitched together something basic. Obviously I’ve not a clue regarding website creation, but through Dreamweaver CS6 and a smattering of youtube video’s I’ve managed to concoct something I could be reasonably proud of for a first effort - It’s not done though!

Because I DON’T actually know what I’m doing, I know for sure that what I have done is so unconventional that it’s likely I’ve painted myself into a corner. The basic layout is there (albeit an utter abortion of mishandled HTML/CSS)…
What’s left is formatting text and adding a couple pictures here and there.

If someone could take a look at this and tell me where I’m going with it?
The main problem Is formatting the text inside the table so it doesn’t affect the “box” underneath. If I use padding inside the table then the box loses shape and cuts bits off or adds bits on. I’ve worked out how to actually format the text but keeping the margins inside the grey box is confusing the hell out of me.

The look of the index page as it is now is basically suitable for me. The idea was to have that same layout on all 5 pages. So you’d click one of the buttons on the bottom and only the text and pictures inside the grey box would change - I’ve no idea how to do that either…

I’m sure it’s a relatively straight forward work around for someone experienced - I have searched but it’s a little fruitless because of the technique used to get to where I am at this stage?

1: So how do I keep both text and thumbnail images inside a margin of the grey box, without affecting the placement/layout of the grey box itself?
2: How do I limit a text/pic swap inside the grey box for the different pages I’ll make? Recreating that page for 5 pages or so seems overkill. The background image is quite large so I’d rather not…

If someone could help me out I’d be grateful, if you can manage that once you’re done pointing and laughing, here’s the URL anyway… www.inkredible.co.nz

I’m actually a Screen Printer by trade, I’m not unfamiliar with Illustrator or Photoshop - This whole website creation is a new gig and figured I’d take on the challenge. Now that I have done I really have to see it through! :lol:

Thanks,
Rod.

Hi sonic_attack, and welcome to the forums. :slight_smile:

Don’t worry - nobody’s going to laugh at you, because we all had to start somewhere. Some of us even remember how very confusing it all was. :wink: And many of us used tables to layout our first sites. Unfortunately, things have moved on, and that hasn’t been the right way to do things for many years. Rather than trying to find work arounds and fixes to make the table layout do what you want, I’d suggest you take the time now, at the beginning, to learn CSS. The basics are really not difficult to grasp and you’ll be so glad you did. It will give you a lot more flexibility with your layout - and if you want to change or update it in the future, it will be much easier if it’s built on CSS. :slight_smile:

You’ll find some good tutorials here: http://www.htmldog.com/guides/ and our sister site, Learnable, has a range of courses: https://learnable.com/topics/htmlcss

Anything you don’t understand, we’ll be happy to help you through.

So before we go any further, would you like to learn how to do this with CSS?

I agree with TechnoBear and you should look at css.

The idea was to have that same layout on all 5 pages.

I belive in Dreamweaver you have a page for each page similar to your current page and you just have different content; when you edit the layout on one page it will have no effect on the other pages - unless you are using css in Dreamweaver. So if you want to change a font for instance you will need to do it on all 5 pages. Dreamweaver also builds very large pages which mean slower to load. It does things like create a span around a space!!

With css the whole page layout can be stored in one file and if you want to change the font on all the pages you only need to do it in one place. You will still have 5 pages and you will need to change the content and links for each page. Again I belive this method can be used in Dreamweaver but you will still end up with a large bloated page.

I would search Google for “single column centred css layout header footer” and see how it is done. There are also layout generators like this one that are very helpful to get you started.

Guys,

Thanks. Just to be clear, is that file I’ve created so much a shambles that I really need to scrap it and start again?
Good links too, the internet really is awash with jargon and unnecessary fluff when it comes to making a website, it seems fairly easy to be lead on multiple paths.

Ta.

If you are happy with it carry on. But you already have a couple of problems and by the time you have sorted them out you could start from scratch using a css template. You already have an idea of what you want; have your graphics and can implement them into a css template.

Personally I would go the css route and forget about the tables.

If you save these three pieces of code you can see how a css version works - it needs a few tweeks but it will get you started.

reset.css


  /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://www.cssportal.com
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

layout.css


/*    Generated by http://www.cssportal.com    */

@import url("reset.css");

body {
	background-image:url('images/background.jpg');
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333
}

p {
    padding: 10px;
}

#wrapper {
    margin: 0 auto;
    width: 877px;
}

#header {
    float: left;
    height: 140px;
    width: 877px;
    background: none;
	text-align: center;
}

#content {
	background-image:url('images/text_block.png');
    float: left;
    width: 877;
	height: 415px;
	text-align: center;
}

#footer {
    height: 40px;
    width: 877px;
    background: none;
    clear: both;
	text-align: center;
	padding: 20px 0;
}


index.htm


<!DOCTYPE html>
<html>
<head>
<title>:::INKREDIBLE:::</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <img src="images/ink_logo.png" width="381" height="139" alt="inkredible design and print" >
        </div>
        <div id="content">
           <p>INKREDIBLE.CO.NZ IS UNDER CONSTRUCTION. CALL BACK SOON! BETTER YET - CALL OR E ROD PH: 0275 366468 |<a href="mailto:rod@inkredible.co.nz"> ROD@INKREDIBLE.CO.NZ</a></p>
       </div>
        <div id="footer">
    <img src="images/buttons/design.png" width="110" height="69" alt="graphic design logo " >
	<img src="images/buttons/textile.png" width="110" height="69" alt="screenprinting embroidery" >
	<img src="images/buttons/graphic.png" width="110" height="69" alt="stickers signs labels" >
	<img src="images/buttons/product.png" width="110" height="69" alt="garment suppliers" >
	<img src="images/buttons/contact.png" width="110" height="69" alt="inkredible design and print" >
	<br>
	<p>| INKREDIBLE DESIGN AND PRINT 2014 |</p>

        </div>
    </div>
</body>
</html>

NOTE: Your background is one big image which takes a long time to load - in this case use a small image and let it tile. I cropped a bit out of your background and called it ‘background.jpg’

Rubble,

Awesome. I’ll follow the CSS route. I’d been looking through the links posted already.

Will take your code and implement it in a new file. Thanks for your time and efforts! Much appreciated.

Obviously I’m struggling with a few things here, but one thing that particularly bugs me is screen resolutions - I run 1920X1080 on a 23" monitor. If webpages display too small for me I just ctrl+scroll on the mouse to bring it into something legible.
This page I created seems to display well enough down to 1280X1024. Does everyone struggle with this? Designing to accommodate multiple desktop monitors?

I’m understanding the Fluid Grid concept so there’s a couple of options between Desktop, Tablet, and cellphone screen res. I’m specifically more concerned with desktop resolution?

As it is now the buttons on the bottom of the page display off the edge when viewed in 1024X768. Is this something I seriously have to consider? Like should I place the buttons up top to account for folk stuck in the dark ages with their monitors/screen res?

Ta.

Design size is a problem; I am afraid my attitude is I design for a 960 width and that’s it. Most of my sites tend to scale well on mobile devices and I think that is because I do not do anything fancy.

I suppose the next step is to design using percents which will help to a certain extent and then have different style sheets for different devices.

I think your buttons look good at the bottom but it would be more practical to have them at the top. I tend to keep things simple and have the logo > buttons > content >footer. Even then I think it is a bit of a problem as logos take up quite a bit of vertical space but its good to have them.

I suppose the best thing to do is have a look around at other websites and get some ideas from them.

Thanks,

I actually had a look on my son’s monitor this morning and he has a dicey old square flat panel displaying at 1024X or so, displayed fine, well it was a little squashed but certainly not ridiculous. More importantly the buttons and whatnot were well within the browser frame.

I think the site I have in mind, or what I currently have will be simple enough to switch around or replicate once I learn the CSS way of stitching it all together.

Thanks for your thoughts.