layout suggestions

@PeOfEoNov 09.2003

~~[url]~~http://knights.europe.webmatrixhosting.net/wfrp/index.html[/url]
That is a layout for a new site I am making. It validates as html 4.01 strict and the css is valid with the exception of the scroll bar proprietary codes used for ie. What do you think? Do you have any suggestions, If not I will move on to phase two. That will be the content and populating those menus on the left side. In those menus I plan to put an active users thing, a poll and some links. I am not using an iframe in this layout but rather a div with overflow:auto;. But the whole layout, everything that is not in that div ‘content shell’ will be setup as an include.
PS: I know that the drop down menus will not work on ns based browsers. That is why I have a link for the text at the top, that link will direct the user to a page with the same links that are in that menu inside the content directory. It will not just be two links inside the content area I will have a description of the link, like the page it goes to etc so it still looks tasteful and like it is the way it is supposed to be and not plan b.

to post a comment

Full-stack Developer

24 Comments(s) _↴

@PunkSktBrdr01Nov 09.2003 — #Looks pretty good!

@Paul_JrNov 09.2003 — #[i]Originally posted by PunkSktBrdr01 [/i]

[B]Looks pretty good! [/B][/QUOTE]

I must concur. Very nice job, PeOfEo.

@PeOfEoauthorNov 09.2003 — #thanks for the compliments. So there are no obvious weak points or flaws in my design from a 3rd persons point of view?

What browsers / os's are you using, just ie6 xp? I previewed it on ie5 but I wanna take another look at the final product on that.

@spufiNov 09.2003 — #I know you haven't gone content heavy yet, but I saw this code on your left side.

<div id="navAlpha">

<div class="nav">

-

</div>

<div class="nav">

-

</div>

<div class="nav">

-
  </div>
  <img src="bottuml.gif" alt="br" style="z-index:3; bottom:-1px; left:-1px; position:absolute;">

</div>

If you are only going to have <div> tags with a nav class in that section, you might as well just not use the nav class like you are and just define the CSS for that area as "#navAlpha div { CSS goes here }"

I know there was a thread in the CSS forum that had a CSS dropdown menu that also used JavaScript for IE users that you might want to look at. I think it was posted on the more recent side.

@PeOfEoauthorNov 09.2003 — #well with those divs I wanted separate menus inside the larger side div. I just thought nesting divs of that class would be the best way to go about doing that. I am going to fill those divs with a poll some quick links and active users etc so that whole section will be filled with content but I thought having dashed boarders added some more personality to it but having it inside the solid one would not take away from the flow of the site. Well atleast thats what I was trying to go for with that. Did I miss the point of what you were trying to say???

@pyroNov 10.2003 — #I think I pointed this out once before but the drop down menus do not work in Mozilla (and thus, almost certainly, Netscape). And that's not to mention those without JavaScript enabled. ?

@PunkSktBrdr01Nov 10.2003 — #I tested the site in Firebird 0.7.

@PeOfEoauthorNov 10.2003 — #[i]Originally posted by pyro [/i]

[B]I think I pointed this out once before but the drop down menus do not work in Mozilla (and thus, almost certainly, Netscape). And that's not to mention those without JavaScript enabled. ? [/B][/QUOTE] Read my first post the ps ? I have a backup plan for those, and it will look intentional, not like plan b

@PunkSktBrdr01Nov 10.2003 — #Oh, wait, I didn't realize there was supposed to be a drop-down menu! Not working for me.

@PeOfEoauthorNov 10.2003 — #look at the site in oper or ie. Those links you see will put a menu inside of that main div with like descriptions by them so it looks like I meant to do it. Ok it is obvious that that java script is why the layout will not work for ns users. You know a better one? I will drop it in. I will still go with my backup plan obviously becuase many of us do not support java scipt or you are like me and you disable it while u surf because of stupid scrolling ads and annoying no right click scripts.

@PunkSktBrdr01Nov 10.2003 — #I checked it out in Opera and IE, and the drop-downs work fine. The only visual suggestion I have would be to get rid of the top border for the drop-down boxes. Most won't notice it, but I think it doesn't look very good. Just me, though. ?

@PeOfEoauthorNov 10.2003 — #Ill take a look at it real quick w/ none.

@PeOfEoauthorNov 10.2003 — #I made it solid at the top so it wont look like crud on opera. If I get ambitious Ill play w/ the bottomr ight image on opera. But opera hits are reallyonly going to be me and thats when I test it. My audiance will be ie5 and 6. If I cant get that image in w/ out messing this up for ns and ie I will ignore it since It will not affect the content.

@PunkSktBrdr01Nov 10.2003 — #The solid border on the top does look better. How are you positioning the corner image?

@PeOfEoauthorNov 10.2003 — #look in my source, I dont remember off the top of my head but it works in ie and mozilla. I had a hell of a time positioning that the first time b/c It would be ok at some resoultions in ie but then in others it would fail because at like an odd resolution ie slaps an extra pixil in there and it puts the image in to far or out to far. So I had to use absolute left megin in the div as 100% - 13 I believe. Let me look at my source

<img src="bottumr.gif" alt="br" style="position:absolute; bottom:-1px; left:-13px; margin-left:100%;"> yea I was right I got that from my source

@toicontienNov 10.2003 — #I looked at your javascript file and you are using document.all to toggle the visibility of the menus.

I've had good luck using the following code:

<i>
 </i>if (document.getElementById) {
 document.getElementById(ID).style.visibility = "visible";
 }
 else if (document.all) {
 document.all(ID).style.visibility = "visible";
 }
 else {}

I've made a DHTML menu that you can check out:

http://users.tm.net/gburghardt/home/

@pyroNov 10.2003 — #Might also be interested in this recent ALA article: http://www.alistapart.com/articles/dropdowns/

@PeOfEoauthorNov 10.2003 — #Ill play w/ that later. Right now I need to figure out yet another way to position the boom right pic :rolleyes: This will be the 5 or 6th way I have tried. The reason is this thing is mis aligned in opera and ie5... I wish I could get ie5 and 6 and mozilla to aggree with eachoother!

@PeOfEoauthorNov 11.2003 — #toicontien, your code works like a charm on firebrd, ty. Now the problem is how to fix the menus, they are positioned wrong on that browser :rolleyes:

<i>
 </i>function showmenu(elmnt)
 {
 if (document.getElementById) {
 document.getElementById(elmnt).style.visibility = "visible";
 }
 else if (document.all) {
 document.all(elmnt).style.visibility = "visible";
 }
 else {}
 }
 function hidemenu(elmnt)
 {
 if (document.getElementById) {
 document.getElementById(elmnt).style.visibility = "hidden";
 }
 else if (document.all) {
 document.all(elmnt).style.visibility = "hidden";
 }
 else {}
 }

just a final version of what you had.

@pyroNov 11.2003 — #You probably don't even need the else for the document.all in there. That is only going to catch IE 4, and that browser is very rare.

@PeOfEoauthorNov 11.2003 — #well I have a problem on mozilla now. View my site in mozilla and try to go to the bottom links in the menus. The menu becomes invisible because you can get there. I looked at toicontien's code on his site and compared it to mine. I tried putting calling the showmenu function on mouseover from the table which is similar to what his keepmenu is doing except I do not use submenus. Well basically that did not work. Any ideas?

@PeOfEoauthorNov 11.2003 — #Pyro, thanks for the help getting it working on mozilla at all to begin with. I tried to position the div's after they appeared in mozilla and then I got the same problem I had with them dissapearing in the second link. I tried turining padding and magins off within the tables but that is not working. I thought I would try just changing the table into a div (though I thought a table would be better because I could have each cell individual with less code) but I decided to chuck it thinking it could be the cause of my problems. Low and behold a div fails too, what a pain in the butt. This defies logic.

@PeOfEoauthorNov 12.2003 — #I finally got the menus working in ns! Thanks pyro. I also got that bottom right hand courner working in opera mozilla and ie6 without the ie positioning bug when ie slaps in a extra pixil on odd widthed window sizes. I need to know if it works in ie 5. http://knights.europe.webmatrixhosting.net/wfrp/index.aspx . Ill be able to preview it on a school comp tomorrow though so if no one can take a look at it sooner it does not matter.

@pyroNov 12.2003 — #Sure thing, man... ?

Also in #Full-stackDeveloper _↴

Do I have to attach my robots.txt file to my website somehow?Frameset Question.Re-writing company intranet - what are my options?

Success!

Help @PeOfEo spread the word by sharing this article on Twitter...

Tweet This

layout suggestions

24 Comments(s) _↴

Also in #Full-stackDeveloper _↴

Success!

Social

Version

layout suggestions

24 Comments(s) ↴

Also in #Full-stackDeveloper ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #Full-stackDeveloper _↴