PDA

View Full Version : Newb Designing a Website


Prologue
04-04-2006, 01:00 AM
I'll start out by saying that I am new to page designing and Dreamweaver. I've read many articles and forum posts about the subject and have decided to do the page using CSS layout with a separate style sheet and go for a liquid design. I want the liquid design because it allows the page to take advantage of lareger screen resolution while still catering to the smaller screen users. The liquidity will be for the main content box, (which would hold updates on the main page and tutorials/faqs on the section pages), and the header(menubar) and footer. I would like a column on the left for the non-liquid side menu.


Now to start the questioning!

With CSS, how do most of you position the elements on your page? Do you use just layers? Layers with nested divs, is there such a thing? Or do you take a strictly non-layer approach? I am still unfamiliar with the theories behind this, advantages disadvantages, etc.

I have noticed in the Dreamweaver starter sites that the CSS pages have no layers, what gives? I suppose they are using the div tag wrapper, but I am unfamiliar with it all and have been unable to find much useful info on the web regarding div tags and Dreamweaver.

I have also read that Dreamweaver layers are merely absolutely positioned div containers, so why the fancy 'layer' name and dialog box just to handle absolutely positioned div containers?

How the heck do YOU use div tags to position stuff on the page, any special techniques things I should watch out for, common mistakes?

Edit: Should I use Server Side Includes? Are they necessay if you use templates?



Thanks for the help and I look forward to the challenge of building this baby.

Prologue
04-04-2006, 08:45 AM
Crap, already found my first problem just two div's into it. Notice how the Menu_Bar is getting overlapped by the Header_Logo? This is in IE and Firefox, I can guess why this is happening but maybe someone could look at the code and tell me where I screwed up. From what I can tell this is being caused by the positioning coming from the external CSS. It's telling the Logo to go 10px from the left and 10px from the top, the 10px from the top looks to be the key. It is pushing the Logo down to cover the presumably 10pixels of the MenuBar, so why is this happening? From what I read at the Macromedia site (http://www.macromedia.com/devnet/dreamweaver/articles/intro_cssp_03.html), the relative setting I have given the both of these div's should make them get out of each others way, doesn't seem to be happening. I am sure it is just some quirk that I need to file away in the brain but nonetheless it's still a problem right now. I'll try to find solutions and maybe someone from here can help.

d a v e
04-04-2006, 09:02 AM
try this for your header logo
.Header_Logo {
position: relative;
left: 10px;
top: 0px;
margin-top: 10px;
}

Prologue
04-04-2006, 11:45 AM
Thanks for the tip Dave, I have done this and it does work (LINK) (http://www.freewebs.com/prologue/Untitled.html). However the space the margin takes up is not displayed in DW, it only works in a browser. It seems like I am robbing peter to pay paul here, or am I just being paranoid? Nevertheless, I moved on for now and have the next batch of problems :( .

The top menu bar has tripled in girth and I have no clue why. It displays properly in DW but when viewed in either FF or IE it blows up. This happened when I was addressing the Left Menu, but I am not exactly sure what set it off because DW didn't show it to me. I tried making the container have a minheight of 21px and a maxheight of 21px, that stopped the background from extending down but the text was still rendered in the same spot.

The menu on the left is two div tags wrapped in another div, the container div is set to 10px top 10px left relative position, like the others, and in the browser has no space in between on top. In DW it actually overlaps the TopMenuBar by a few pixels, I'm not sure what to make of this.

Should I just use margins for all of the positioning? :?

I'll get back to messing it up some more... :lol:




Edit: Ok I'll say what I have found out and hoefully someone can explain why it is happening :) .

If I set the HeaderLogo to positioning/top/10px and box/margin-top/10px then it doubles up to put 20px in between the top of the image and the top edge of the page. If you do the same combo to the two divs below the Logo, (TopMenu & LeftMenu), then it will only put 10px between the top of the div to the bottom of the other div. If you leave out either the margin or top positioning settings but not both, then it will colapse to no gap. This is all in the browser, in DW it is all slightly different. What a bummer.

dthomsen8
04-04-2006, 12:06 PM
Here are three URLs for two and three column CSS designs. If you start with a working design done by a professional publishing on the web, you start without some of the difficulties you might encounter doing it yourself.

At least check out the first one, which is a tutorial.


http://www.maxdesign.com.au/presentation/page_layouts/

http://webhost.bridgew.edu/etribou/layouts/

http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts_pt4.html

dthomsen8
04-04-2006, 12:13 PM
I have also read that Dreamweaver layers are merely absolutely positioned div containers, so why the fancy 'layer' name and dialog box just to handle absolutely positioned div containers?


No, layers are not absolutely positioned div containers. Dreamweaver uses layers with a tracing image as a way of copying an existing web site or creating one from a graphics package design done as a mock-up of a new web site. A DW site done with layers can be converted to tables, or vice versa, by DW processes.

For your purposes, stick with CSS designs for positioning, and you don't have to learn (or unlearn) about tables for positioning, or layers for positioning.

Best wishes!

Prologue
04-04-2006, 12:17 PM
Thanks for the links and tips, I will read them and try the suggestions. Thanks.

d a v e
04-04-2006, 12:19 PM
actually layers ARE absolutely positioned divs (in DW) : if you open a blank page and draw a layer then you get something like this code
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:157px;
top:50px;
width:166px;
height:123px;
z-index:1;
}
-->
</style> ...
<div id="Layer1"></div>

domedia
04-04-2006, 01:37 PM
'Layers' is just DW's fancy way of saying it's a absolutely positioned DIV. I've never liked it, especially since NN used to have a propietary tag called LAYER (<layer>), which thankfully died out with version 4.
So questions like 'should I use layers or CSS' can't be answered ;)

Prologue
04-06-2006, 09:31 AM
Thanks for clearing that up, domedia.

dthomsen8, I took your advice and started testing just modifying someone else's code. Wow what a relief, the author of the skidoo code at Ruthsarian layouts (http://webhost.bridgew.edu/etribou/layouts/) has the css code commented pretty well, explaining what is happening/getting fixed/compensated for.

Here's the latest site build referenced below. (http://www.freewebs.com/prologue/index.html) I would really love some comments on the color scheme, or any suggestions for layout or really anything. I'm open to suggestions.

Three obstacles I face right now, the main one is the left menu problem. In IE 6 the 'Menu' heading has no background or border, and the header below it 'FAQ' sort of displays it until you hover over there. There are no hover effects set for the headings. There is also another probably related problem, the menu headings are centered but the background/border collapses against the left of the text. In Firefox, everything diplays well :) .

The second not so bad problem is in IE 6 also. The top menu bar or (hnav) in the code, does no display the very right most 1px border on the last element. FF does it well.


The last isn't really a problem but more of a 'how the heck do I do this?'. I want the page to stop squishing down once the banner has started crunching the Logo and go to a horizontal scroll bar. I tried putting some min-width css code applied to the body tag, but that didn't seem to work. That banner is absolutely positioned because I couldn't figure out how to keep the banner to the right and the logo on the left without doing that.


Any ideas?

Thanks again for the tips everyone, they are helping make this more fun and less rip-hair-out-y :shock: .

Prologue
04-07-2006, 08:55 AM
Bueller...Bueller...anyone...?

dthomsen8
04-08-2006, 04:15 PM
Bueller...Bueller...anyone...?

I will take a look much later today.

Have you run your HTML and CSS through the www.w3.org validation, as well as the checks that DW does? There may be a hint in there, especially if there is an error, rather than a warning.

Prologue
04-08-2006, 11:18 PM
Yeah, I have run it through w3's html validator and it has no HTML errors. It has 2 CSS errors, but they are commented in the code, saying that they need to be there in order for it to display correctly in IE and IE mac.

There are a lot of warning, but mostly stating that I didn't define a background for this or that or I redefined a border color or something. I suppose those could be a reason, but I redefined them just in order to test with different color schemes and looks. And since the are cacading, it shouldn't make a difference. I am stumped. :oops:

I thought that it could be the tag (h3) redefinition that could be causing the problem. So removed the h3 tags and just applied a class to each seperately, it did the same thing. I put another div in just for each of those headers and it did the same thing. I then took the h3 tag off and tried applying a class inside that div, it did the same thing.

I have found a way to get it to render decently now though, they sort of look like a folder tab because the formatting will only follow the length of the text, not fill in the white space. That is better than what it 'was' doing (in IE only) though. The page on the server still has the old code with the disappearing header backgrouds, I haven't updated it with the 'fixed' code yet because I was hoping I wouldn't have to compromise it. I will if I have to though, I'm not hell bent on it.

Thanks for the help! :D