We're going to need some specifics to help you out here. For instance, which page in particular, if not all, are you having problems with? What are you trying to do? From what I can see, each page looks fine in Firefox; is there a particular browser you're having troubles with?
Kurtis
munruss (not verified) posted this at 16:46 — 23rd December 2008.
If you take a look at the contact page in IE, you see the nav bar shifted to the left. Once I added in the email script, things moved. I tried to move it, but I am having difficulty.
decibel.places posted this at 16:47 — 23rd December 2008.
There is, but it's all complete nonsense.
Tables have been around well before CSS became usable as an option for complete styling.
Search engines have no issues with tables or nested tables as they don't look at layout or styling, just content.
Although, I don't think you should be making your web pages with tables. Tables should still be only used for certain content data such as where a requirement of numerous columns and rows are needed.
As for you issue, on the contact page you have this as a main container <table height="471" width="907" border="0" background="bg.gif" align="center">
(Which incidently, on other pages you use different widths for this container - weird design setup imo)
As the contact us area is wider than anything on other pages, it stretches that table container to its full width.
You need to align the nav container somehow so when content moves the page around a bit each bit of content is still in its designated place.
It can be done with tables, but honestly, it's much much easier when you know divs, floats and margins in CSS.
The products page also moves slightly to the left of the others (services and about) due to (i think) the link in the text.
In your code you have this <div align="left">, it's not the best way to align a div really (and is deprecated in all but transitional and frameset HTML 4.01). CSS is the way to go.
But with the page width being stretched by the contact us box, and that div being pushed left, is the reason your navs are like that.
I can't advise how to align all this up nicely in tables as making websitees in tables is not something I have ever done (nor will ever).
There's also something wrong with your background image as well. pattern.gif
pr0gr4mm3r posted this at 22:06 — 23rd December 2008.
This ^ is very basic and with some changes you can get a very nice table less layout.
In your code I see you ended a paragraph tag with out starting one, I'm not sure if this has anything to do with the tables not working. The contact pages content also takes up more width of the page so that may be another cause of it getting pushed to the left.
munruss (not verified) posted this at 02:57 — 24th December 2008.
The problem is in the basic design of the site. The way you have it all in tables, and different widths on tables on different pages makes it fiddly to work with.
You're basically making a layout for each pages content requirements, which is (almost) acceptable for now and will get your site looking as you want it, but what if in the future you change content on any page?
Having to adjust table widths and nested tables when you add/remove/change content is not future proof.
CSS is what you need, and as your site is very simple at the moment, using and learning divs will be very easy.
cmoyer provided a basic layout idea with all the code done for you in his post (I haven't studied it, but I'm sure it will be fine).
See the attached image I made (very quickly) to give you an idea of what CSS would be doing in your site ithout tables.
Honestly, do it now in CSS and get rid of the tables and you will be much better off now and in the future for changing your sites content, adding more pages, adding ads or additional content on xx pages or one page etc.
Use my image as a reference and the following links as the code you need to make it happen.
Read this first: http://www.yourhtmlsource.com/stylesheets/csslayout.html
All the way down to "CSS Positioning" (if you are willing to spend some time learning, read the rest of the page as well as CSS positioning)
Doing it as I have laid out in the image ill allow all pages to flow with the same spaces and layout and will be neat. Adding new pages and editing existing ones is much easier with this.
In the image, there are many ways to approach most of what I have done, but mainly the "nav_div". There are better ways to provide a nav menu, with hover over affects, but you should perhaps get to know divs, margins, padding and float first.
munruss (not verified) posted this at 14:41 — 24th December 2008.
If anyone would like to ftp in, that would be great. i'm a visual learner. I have to see a completed example to truly understand what needs to be done.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.
kazimmerman posted this at 16:26 — 23rd December 2008.
He has: 698 posts
Joined: Jul 2005
We're going to need some specifics to help you out here. For instance, which page in particular, if not all, are you having problems with? What are you trying to do? From what I can see, each page looks fine in Firefox; is there a particular browser you're having troubles with?
Kurtis
munruss (not verified) posted this at 16:46 — 23rd December 2008.
They have: 5,633 posts
Joined: Jan 1970
If you take a look at the contact page in IE, you see the nav bar shifted to the left. Once I added in the email script, things moved. I tried to move it, but I am having difficulty.
decibel.places posted this at 16:47 — 23rd December 2008.
He has: 1,494 posts
Joined: Jun 2008
eeww tables
there is talk that tables can affect your SEO
have you considered table-less CSS (divs/spans etc)?
I know that Dreamweaver can create those maddeningly nested tables.
I don't use Dreamweaver but some designers I work with do, is there a way to avoid those nasty tables and still use DW?
greg posted this at 21:52 — 23rd December 2008.
He has: 1,581 posts
Joined: Nov 2005
Tables have been around well before CSS became usable as an option for complete styling.
Search engines have no issues with tables or nested tables as they don't look at layout or styling, just content.
Although, I don't think you should be making your web pages with tables. Tables should still be only used for certain content data such as where a requirement of numerous columns and rows are needed.
As for you issue, on the contact page you have this as a main container
<table height="471" width="907" border="0" background="bg.gif" align="center">(Which incidently, on other pages you use different widths for this container - weird design setup imo)
As the contact us area is wider than anything on other pages, it stretches that table container to its full width.
You need to align the nav container somehow so when content moves the page around a bit each bit of content is still in its designated place.
It can be done with tables, but honestly, it's much much easier when you know divs, floats and margins in CSS.
The products page also moves slightly to the left of the others (services and about) due to (i think) the link in the text.
In your code you have this
<div align="left">, it's not the best way to align a div really (and is deprecated in all but transitional and frameset HTML 4.01). CSS is the way to go.But with the page width being stretched by the contact us box, and that div being pushed left, is the reason your navs are like that.
I can't advise how to align all this up nicely in tables as making websitees in tables is not something I have ever done (nor will ever).
There's also something wrong with your background image as well. pattern.gif
pr0gr4mm3r posted this at 22:06 — 23rd December 2008.
He has: 1,502 posts
Joined: Sep 2006
Maybe not. This is just speculation, but tables are designed for tabular data and stuff search engines may not be interested in.
cmoyer posted this at 22:16 — 23rd December 2008.
He has: 131 posts
Joined: Jun 2008
When I use Firefox the contact page is all to the left. You can fix this with css by wraping the whole page in a div example below:
HTML:
<div id="wrapper">
<!-- Page content here -->
</div>
CSS:
#wrapper {margin: auto;
width: 90%;
padding: 0px;
}
This ^ is just basic you could also specify a background using css or do a whole layout like the following.
HTML:
<div id="wrapper">
<div id="header">
<!-- menu div -->
<div id="menu">
<a href="link.html" title="link_title">Link</a>
<!-- repeat as needed -->
</div>
<!-- heading div -->
<div id="heading">
<h1>Heading of page</h1>
</div>
</div>
<div id="content">
Your pages content will go here
</div>
</div>
And the CSS:
body {
background: #ffffff;
}
#wrapper {
background: transparent;
width: 90%;
margin: auto;
padding: 5px;
border: 0px;
}
#header {
background: transparent;
width:100%;
margin: 5px auto;
padding: 5px;
height: 50px;
border: 1px solid #000;
}
#menu {
background: transparent;
width:45%;
margin:0;
padding: 1%;
height: 50px;
float:left;
border: 1px solid #000;
}
#heading {
background: transparent;
width: 45%;
margin:0;
padding: 1%;
height: 50px;
float:right;
border: 1px solid #000;
}
#content {
background: transparent;
width: 100%;
margin:auto;
padding: 5px;
float:left;
border: 1px solid #000;
}
This ^ is very basic and with some changes you can get a very nice table less layout.
In your code I see you ended a paragraph tag with out starting one, I'm not sure if this has anything to do with the tables not working. The contact pages content also takes up more width of the page so that may be another cause of it getting pushed to the left.
munruss (not verified) posted this at 02:57 — 24th December 2008.
They have: 5,633 posts
Joined: Jan 1970
i have a guest ftp accout. would someone like to access the files and help me out? i'm weak on web design.
greg posted this at 09:32 — 24th December 2008.
He has: 1,581 posts
Joined: Nov 2005
The problem is in the basic design of the site. The way you have it all in tables, and different widths on tables on different pages makes it fiddly to work with.
You're basically making a layout for each pages content requirements, which is (almost) acceptable for now and will get your site looking as you want it, but what if in the future you change content on any page?
Having to adjust table widths and nested tables when you add/remove/change content is not future proof.
CSS is what you need, and as your site is very simple at the moment, using and learning divs will be very easy.
cmoyer provided a basic layout idea with all the code done for you in his post (I haven't studied it, but I'm sure it will be fine).
See the attached image I made (very quickly) to give you an idea of what CSS would be doing in your site ithout tables.
Honestly, do it now in CSS and get rid of the tables and you will be much better off now and in the future for changing your sites content, adding more pages, adding ads or additional content on xx pages or one page etc.
Use my image as a reference and the following links as the code you need to make it happen.
Read this first:
http://www.yourhtmlsource.com/stylesheets/csslayout.html
All the way down to "CSS Positioning" (if you are willing to spend some time learning, read the rest of the page as well as CSS positioning)
Then read this
http://www.yourhtmlsource.com/stylesheets/cssspacing.html
It tells you in simple terms how to make a div CLASS and ID in the CSS and how to implement that CSS in your HTML.
Doing it as I have laid out in the image ill allow all pages to flow with the same spaces and layout and will be neat. Adding new pages and editing existing ones is much easier with this.
In the image, there are many ways to approach most of what I have done, but mainly the "nav_div". There are better ways to provide a nav menu, with hover over affects, but you should perhaps get to know divs, margins, padding and float first.
munruss (not verified) posted this at 14:41 — 24th December 2008.
They have: 5,633 posts
Joined: Jan 1970
If anyone would like to ftp in, that would be great. i'm a visual learner. I have to see a completed example to truly understand what needs to be done.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.