I'm making a website using dreamweaver and when I view the page it is left aligned in the browser. How do i get it to sit in the center of the browser? Cheers rob. Written on crap phone.
I've not really used Dreamweaver but the way it should be done is to set left and right margins to auto on your main areas like header, content, etc.
Quote from: DEViANCE on June 21, 2011, 08:20:46 AM
I'm making a website using dreamweaver and when I view the page it is left aligned in the browser. How do i get it to sit in the center of the browser? Cheers rob. Written on crap phone.
All depends on the layout to be honest.
The basics for centring a site is:
HTML:
<div id="maincontainer>
SITE HTML HERE
</div>CSS:
#maincontainer { width:960px; margin:0 auto; }
The margin auto and width is the key. 960 is the width to consider most modern displays etc. 980px with 10 pixels left and right.
Personally I'd use 980px minimum as I bloody hate narrow sites unless its a really simple 'brochure' type site, when you work at 1920x1200 its a disgusting waste of space. At a stretch you can go to 1002px which will fill a 1024x768 display, really anyone that is using less than that these days is probably not worth worrying about.
Cheers for the advice. I'll try the auto margin thing. I set mine to 800px but now I think about it it is well to small ok for the 90's maybe. Sent from crap phone.
Quote from: Clock'd 0Ne on June 21, 2011, 10:06:36 AM
Personally I'd use 980px minimum as I bloody hate narrow sites unless its a really simple 'brochure' type site, when you work at 1920x1200 its a disgusting waste of space. At a stretch you can go to 1002px which will fill a 1024x768 display, really anyone that is using less than that these days is probably not worth worrying about.
960px is your 980 mate. Sites I show you do not look small do they? :P
960px with 10px either side is the 980px. 99% of your grid systems are 960px content. Some people who do not get it will do 960px and 10px either side to get 940px which is heading to small of course but I do not do that :)
Nah, it's sites with two sidebars that really suffer from it if not treated carefully.
Quote from: Clock'd 0Ne on June 21, 2011, 11:48:53 AM
Nah, it's sites with two sidebars that really suffer from it if not treated carefully.
Nothing is final bar say the logo and top bar, maybe video. Working on menu and content layout and more. Background may even change as this is all early days yet...
(http://dl.dropbox.com/u/2531450/Untitled-1.jpg)
I blanked out content as its a mess but it is all very spacious as that was one of the requirements. Two column overall and like home page 3 with two column inner content in the main content block. Done right its fine. A lot of the preview demos on the first page of 960 grid site as well show good spacious designs.
We have done 1000k on some sites and 980 on some etc but we have had complaints from people viewing still about them. With the google viewing window stats it is very much 960 by 700 pixels main viewing area. But yeah, nothing stopping you doing 980 as you said Nige.
If you're getting complaints about those sizes you just know its because its in NZ and they haven't heard of TFTs yet ;D ;)
Quote from: Clock'd 0Ne on June 21, 2011, 14:17:34 PM
If you're getting complaints about those sizes you just know its because its in NZ and they haven't heard of TFTs yet ;D ;)
LOL.
One was OZ so you can include them too then :P
can't find any where in dreamweaver to set the margin to auto, in the page properties they seem to need numbers.
I don't know where to put the code manually either. does it make any difference that I have made made a 3row table on the page?
I've uploaded it here if you need to see it to help me(i know it is crap it is a work in progress)
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
It's exactly the same process for tables, set the table properties to have "margin: 0 auto;" in the CSS/styles, I'd also set border="0" or border: 0; in the CSS unless you want the ugly 90's website look :)
NeXus will be along shortly to tell you not to use tables but I think you are struggling enough as is and if you're trying to get to grips just do it this way. In the source, it should look like:
<body>
<table width="806" height="690" border="1" style="margin: 0 auto;">
Thanks alot that has worked perfectly. I've also widened it to 980px and it does fill the screen much better, just need to adjust my header and footer now.
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
edit: header and footer done.
any tips on the page layout so far? (I know there isnt much to it at the mo)
The plan is to have the bullet points as links that take you to an almost completely different site that is taylored towards the type of customer I get for each type of work (domestic is very friendly, commercial/industrial abit more serious, CCTV very slick and sharp, energy efficency abit green and hippy esque etc), on those pages will be contact details, a form that they can enter their details and it emails me so I can call them, some pictures of my work and a bit of a write up.
IMO I'd try and keep it quite thematic and maybe just change the colour scheme depending on the section they arrive in? You don't want it to be too different or people are going to wonder what type of operation you are and whether they are getting a professional outfit or some kind of ad-hoc.
This is quite an old client site from a few years back so is a little outdated but its the same principles in operation for their three main sections: http://www.e-volution-training.co.uk/ (http://www.e-volution-training.co.uk/)
I'd steer away from the bullet points idea and have some proper tabs along the top or photo/image buttons that stand out quite clearly to show the different sections. People are going to land on the site and see quite a plain looking affair with just text and not instantly think that the bullet points are clickable (if you assume not everyone visiting will be web savvy).
That's my tuppence anyway :)
Quote from: Clock'd 0Ne on June 22, 2011, 00:24:00 AM
IMO I'd try and keep it quite thematic and maybe just change the colour scheme depending on the section they arrive in? You don't want it to be too different or people are going to wonder what type of operation you are and whether they are getting a professional outfit or some kind of ad-hoc.
This is quite an old client site from a few years back so is a little outdated but its the same principles in operation for their three main sections: http://www.e-volution-training.co.uk/ (http://www.e-volution-training.co.uk/)
I'd steer away from the bullet points idea and have some proper tabs along the top or photo/image buttons that stand out quite clearly to show the different sections. People are going to land on the site and see quite a plain looking affair with just text and not instantly think that the bullet points are clickable (if you assume not everyone visiting will be web savvy).
That's my tuppence anyway :)
good advice thanks, I like the idea of clickable images instead of the bullet points.
Tip: Dont use tables for site structure.
Better?
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
Looks much better! Please get rid of those table borders though, you're only letting yourself down :lol:
Quote from: Clock'd 0Ne on June 23, 2011, 21:32:32 PM
Looks much better! Please get rid of those table borders though, you're only letting yourself down :lol:
good call! done. thanks :ptu:
get ready for lots of other stupid questions. need to get myself on a html course at college.
while I'm here, how would I go about adding an input form to a page with Name, address, phone#, info. and then having that data emailed to me?
cheers
That's a bit more complicated, you need to see what services your hosting has or supports like CGI scripts, PHP, etc that you can use to do the legwork of sending form data via email. The form itself is just HTML, but the action part of the form relies on server side scripting.
cool thats the next thing I need to look into.
Any recomendations for hosting a basic site that this? I was thinking maybe hosting it myself if it isn't to complicated to setup a web server.
I know you won't be expecting much traffic but I would just find the cheapest host you can find and save yourself the hassle of setting up a web server and worrying if you will have the bandwidth to serve up the site at any reasonable speed. The advantage of cheap hosting most will have useful server side programs and scripting enabled, PHP & MySQL support in case you decide to go the CMS root in the end, easy ways for you to secure and manage your site. I've never tried setting up my own server and really don't see the point these days.
Quote from: DEViANCE on June 23, 2011, 21:37:57 PM
Quote from: Clock'd 0Ne on June 23, 2011, 21:32:32 PM
Looks much better! Please get rid of those table borders though, you're only letting yourself down :lol:
good call! done. thanks :ptu:
get ready for lots of other stupid questions. need to get myself on a html course at college.
while I'm here, how would I go about adding an input form to a page with Name, address, phone#, info. and then having that data emailed to me?
cheers
Have you not thought to use a CMS like wordpress, get a free template and then modify it?
been working on the first link on the domestic page. what do you think?
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
the form should work on a php supporting server.
That's good. You have taken your first steps into a larger world.
(http://images.tvrage.com/people_galleries/34/101251/73024.jpg)
Quote from: DEViANCE on June 26, 2011, 22:04:24 PM
been working on the first link on the domestic page. what do you think?
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
the form should work on a php supporting server.
The form you have on the page seems to be missing the actual <form> tags, these are pretty crucial for it to be a working form and not just buttons and fields on a page :)
Quote from: Clock'd 0Ne on June 27, 2011, 09:16:51 AM
Quote from: DEViANCE on June 26, 2011, 22:04:24 PM
been working on the first link on the domestic page. what do you think?
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
the form should work on a php supporting server.
The form you have on the page seems to be missing the actual <form> tags, these are pretty crucial for it to be a working form and not just buttons and fields on a page :)
your right, I dont know how that happened I definately inserted a form at the start :panic: must have deleted while I was working some how.
anyway, fixed :)
Hi thought I'd throw my 2 pence in, TBH I'm rubbish at CSS and haven't done web stuff in years...
But just had a quick look at the site and don't like the navigation quite so much, now I must be bored as I just put together a quick mock up, and kind of includes what was mentioned earlier in terms of colour coding.
Basically give each of the 6 sections a colour, then the 6 buttons along the top and the 6 larger buttons below, depending on the section, would then depend on the horizontal line, orange section in the case below, just a very rough mock up, just so you get the idea.
If you already have plans then no worries, just thought I'd chuck it across..
(http://dl.dropbox.com/u/27382557/rdsystems.jpg)
that looks good I have been wondering how I can do the colours so I think I will give that a ago.
Just done a slight update.. With the top and sides the same colour.. anyway just an idea..
I like all your ideas, I did try and add buttons to the top when I first started but they where really big and ugly and I couldnt figure out how to make them smaller.
edit: found a good guide and am now making my buttons, will update soon.
button test
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
what you think?
I think it's much better site navigation, not sure about the grey boxes..
Have you thought of doing something that looks a little more integrated like this? (PSD available if you want to have a play with it?)
(http://dl.dropbox.com/u/27382557/rdelec.jpg)
Maybe ignore that, not so happy with it after reviewing..
yeah I might give that ago looks good.
what grey boxes?
anyone know how to get rid of the brown lines that go through the page here:
http://www.robdav.nildram.co.uk/site/Untitled-2.htm
I know it is somthing to do with table borders but I cant figure out how to get rid
Quote from: DEViANCE on June 28, 2011, 19:58:21 PM
button test
http://www.robdav.nildram.co.uk/site/Untitled-3.htm
what you think?
I don't mind those although I'd work on some of the colour gradients. I tend to go on Adobe Kuler and type in colours, then nab a few swatches that look nice, you'll get some very smart colour schemes that way and avoid bad, eye gouging colours.
Quote from: DEViANCE on June 28, 2011, 20:53:14 PM
yeah I might give that ago looks good.
what grey boxes?
anyone know how to get rid of the brown lines that go through the page here:
http://www.robdav.nildram.co.uk/site/Untitled-2.htm
I know it is somthing to do with table borders but I cant figure out how to get rid
The grey boxes around the buttons, I'm using firefox if you are not seeing them?
Also what about option 2 below?
Link to PSD: http://dl.dropbox.com/u/27382557/rdelec.psd (http://dl.dropbox.com/u/27382557/rdelec.psd)
(http://dl.dropbox.com/u/27382557/rdelec2.jpg)
thanks for that mate they do look great, downloaded the .psd but getting well beyond my abilities can't make sense of what is going on :panic:
your file name is even a better company name than I could think of, never been happy with rdsystems. but quite like rdelec
Let me kNow what buttons you want, the big ones or the wire ones and I'll finish all of them, all you'll then need to do is merge the layers and copy out what you need, either that or can give me a call and I'll explain the layers, its not as complicated as it looks tbh, which version of photo shop are you using?