New site version test — OZONE Asylum, home of the Mad Scientists

New site version test

This page's ID: 23120

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Wordpad? You're kidding right? Do yourself a favor and get a decent text editor - something that supports Syntax highlighting so you can see whenever you make a type or something. There are heaps of them around. Max's HTML Beauty ++ is popular among the inmates here. I use EditPlus2, mainly because it integrates well when running a local web server for developing simple web apps. A lot of others also swear by TextPad. If you're ona Mac then BBedit is also one to look into. As for the layout, well, it has issues like you mentioned. A lot of this stems from the way you're marking things up because quite frankly the CSS is a mess. Your "menu-item" class doesn't have the "." class descriptor, and it's only assigned to the first <li> element of the menu list. God knows what that's meant to do. I suggest you strip all of your ids and classes to start afresh. It'll be easier than trying to salvage what you currently have. Start with the basics. Use a template someone else has built to get the two columns happening (www.glish.com would be a good place to start). After that, you can start to do the visual (colours & fonts) styles. Always begin with the layout styles (Blocks, floats, margins, padding etc...), once those are all working well move onto the visual ones or you'll get confused as to where the error(s) might be. Also be sure to maximize your use of inheritance, and try to use as few class and id attributes as you can. For example: [code] <div id="columnl"> <div id="menu" class="navbar"> <ul class="nav"> <li><div class="menu-item"><a href="index.htm">home</a></div></li> <li><a href="graphics.htm">art</a></li> <li><a href="writings.htm">writings</a></li> <li><a href="blogit.htm">blogit!</a></li> <li><a href="links.htm">links</a></li> <li><a href="about.htm">about</a> </li> </ul> </div> </div> [/code] could be done jusr=t as well like this: [code] <ul id="nav"> <li><a href="index.htm">home</a></li> <li><a href="graphics.htm">art</a></li> <li><a href="writings.htm">writings</a></li> <li><a href="blogit.htm">blogit!</a></li> <li><a href="links.htm">links</a></li> <li><a href="about.htm">about</a> </li> </ul> [/code] Which is much easier to read and style. You CSS would be something like: [code] #nav { width: 100px; background-color: transparent; padding: 0; margin: 0; float: left; } #nav li { list-style-type: none; padding: 5px 10px 5px 5px; margin: 0; font-weight: bold; } #nav li a { text-decoration: none; } #nav li a:link, #nav li a:visited { color: #003333; } #nav li a:active { color: #DFDF4A; } #nav li a:hover { color: #DFDF4A; } [/code] You don't need to declare everything as "float left" of you'll end up with elements overlapping in strange places like you do now. You also don't need to re-declare every style when using pseudo elements or when overriding an element's style based on a class name. Precedence will always be given to the style rule with the highest precision for any given element. body {color:red} will make all of the text red but p{color:green} will override the red body text in paragraph elements as the p{} style rule is more specific. Thus the name [b]Cascading[/b] Style Sheets. I also strongly suggest you read through the Gurus Network CSS tutorials. You seem to be miss understanding how CSS works at the moment and until you get a firm grasp on it then you're just going in circles. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu