Click to See Complete Forum and Search --> : layout problems
muran
11-21-2003, 02:47 PM
Hi
I am creating my friends new website, please take a look at:
http://www.yoladesigns.com/revamp/
What I want to know is, how do I get the images to the immmediate left of the page, i.e. have no gap between the edge of the browser and the edge of the graphic.
Also, I am now making it so it will be 1024x800 screen res, how do I get my nav bars to go all the way across without it pushing the browser across which then creates a horizontal scroll bar.
Any help would be very much appreciated.
Thanks
Daria
11-21-2003, 02:51 PM
Standard <body> tag has a default setting for (correct me if I'm wrong) 20px.
replace your <body> tag with
<body leftmargin="0" topmargin="0">
it sets coordinages for 0.
Daria
11-21-2003, 02:56 PM
Sorry, forgot to add:
you may also take a little snip off your navigation bar design, make it 1px width with full height of that image, than lay it as a backgrownd for the <td> your navbar is residing in. Make your parent table 100% width, so it will stretch throughout the screen in any resolution.
However, your design looks very beautiful, but forgive me for asking - why do you use so many nested tables? They may come around to bite you later on...
muran
11-21-2003, 03:36 PM
Hi Daria
Thanks for your quick reply, I shall try your suggestions soon.
I use a lot of tables so it keeps things together and so the text/graphics don't jump about. Is this not the right way? :confused:
As you can probably see, I'm not really an expert, so need all the help I can get!
Muran
Daria
11-21-2003, 03:47 PM
Well, I wouldn't say that it is wrong way per ce... I don't want to go into tables vs. css conversation here - there are plenty of discussions on this particular subject in this forum.
I would just say that over-using tables may be a bit of "older" way and "over-complicated", but not necessarily wrong.
If you are interested, you may want to look into the CSS for simplifying your life.
However, when you use tables, less is more. For example,
--------------------
<table width="97%" border="0" align="left">
<tr>
<td><font color="#666666" size="1" face="Arial, Helvetica, sans-serif"><b>Welcome
to Yola Designs</b></font></td>
</tr>
<tr>
<td><font color="#666666" size="1" face="Arial, Helvetica, sans-serif">Personalised
stationery for all your needs</font></td>
</tr>
</table>
--------------------
:) could instead be
--------------------
<font color="#666666" size="1" face="Arial, Helvetica, sans-serif"><b>Welcome to Yola Designs<br>Personalised stationery for all your needs</b></font>:)
---------------------
It could be simplified even further with CSS, but I don't know if you want to go that far just yet.
When you multiply little things like this throughout the page, they add up to be a sizeble chunk of a document. You can clean your code up so it will be smaller in size.
:) Sorry, I don't mean to b*tt in like that, by all means, starting with tables is an excellent learning curve, especially with such wonderful tool as Dreamweaver. Start using it in source code mode more often, and nothing can stop ya!
toicontien
11-22-2003, 01:26 PM
Again, without getting into a CSS debate, the easy answer to your problem is CSS.
In the <HEAD> of the HTML document:
Of course you can name stylesheet.css anything you want, as long as it has the .css file extension.
Place that <link> tag on every page that you want to have no space between the content and the browser display. The affect is the same as my first example, but it keeps that style in one separate file that each page downloads. In the future, you could add styles for other HTML tags and not change the HTML itself.
Kinda handy!
James L.
11-22-2003, 03:08 PM
Just so you know....
The body attributes "leftmargin", "topmargin", "marginheight", "marginwidth" are proprietary, and your page will not validate with them.
As mentioned above, use CSS to set the left padding and margins of the body to 0. The only downfall to just using css to do this is that it won't work in the old, version 4 browsers. If you still want the page to nestle right up to the top left corner of the screen in version 4 browsers, you will need the illegal attributes mentioned above.
Technically, however, you should not use proprietary commands at all... straight css is the way to go!
Next up, the font tag is also deprecated, and should no longer be used. It is very redundant, and makes maintaining your pages a nightmare when there are changes.
For example, supposed you wanted to set it so that every h1 was 18px Verdana, bold, and black. Instead of writing out a font rule for every h1 tag, you could just put this ONCE in your stylesheet:
h1 {font: bold 18px Verdana, Arial, Helvetica, sans-serif;
color: #000000;}
Now, if you decide you want to change ALL of your h1 tags, you just go and change this ONE rule and they all change.
...cool, eh?
You could do the same thing for your text. If you want every paragraph to be 12px, line and a half in spacing, in Arial, and grey, the rule might be:
p {font: 12px/18px Arial, Verdana, Helvetica, sans-serif;
color: #666666;}
Again, maybe later you decide all of your paragraphs should be double spaced, you just need to change the ONE rule.
The reason I added other font names is so if the user doesn't have Verdana, for example, on their system, the page will use the next font listed.
Hope this helps.
toicontien
11-22-2003, 03:43 PM
As mentioned above, use CSS to set the left padding and margins of the body to 0. The only downfall to just using css to do this is that it won't work in the old, version 4 browsers. If you still want the page to nestle right up to the top left corner of the screen in version 4 browsers, you will need the illegal attributes mentioned above.
That's not true. The only 4.0 browser that MIGHT not recognize the CSS I wrote for the <body> tag is Netscape 4.0 specifically, but all newer versions of Netscape do. Margins and padding are considered CSS 1.0, which 4.x browsers did a fairly good job at supporting. Fourth generation and newer browsers (released 1998 and after) all seem to support padding, margin, background-color, color, font, and text-align just fine.
James L.
11-23-2003, 04:49 AM
Try it with NN4.x, it doesn't work... at least not in any page I have ever made.
NN4.79 I think was the version number I tried it in, tested on both the Mac and the PC.
In both cases setting the body margins and padding to 0 did not bump the page up to the top left corner. In both cases I had to add the old proprietary code to make it work in NN4.x.
Not that this is a big deal to me, as I don't code for NN4 or IE4 at all, but the above is my experience.
Cheers!
Ian
toicontien
11-23-2003, 11:46 AM
I stand corrected. I don't know where I got that from then. I'll swear to my dying day that it worked, but after testing it again it doesn't. So... no more swearing to my dying day :)
James L.
11-23-2003, 01:12 PM
Which does bring up a point of curiousity for me.... back in the browser war days I was always a NN guy, so I didn't really use IE for anything.
Now, it seems that I can have 10 versions of NN/Mozilla/Etc on my PC machine, but it only allows 1 version of IE. This being the case for me, I only have IE6 and IE5.2.2 on my PC and Mac and don't have IE4 to test with at all for situations like this.
Would the padding and margin attributes work for IE4? Does anybody know?
Thanks!
toicontien
11-23-2003, 06:04 PM
IE 4 should support both the padding and margin properties for the body tag. It's a part of the CSS 1.0 spec. CSS 1.0 came out as an official specification in 1998, only a couple months after IE and NN 4.0 came out. They support CSS 1 for the most part.
With what little playing I've done with IE4, it seems to behave very similarly to IE 5.x /PC when CSS is used. I don't think IE4 supports any CSS 2.0 property, but I don't know for sure.
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.