Negative Charge!

  • 79
    Posts
    18
    Years
    • Seen Nov 20, 2007
    Hi Caddug,
    Well, I'll start with the programming aspect, as that is my main field, and work my way down from the best parts. The good thing is that your mark-up is not so bad. I see a few unclosed tags (remember that img tags are closed with a /> ). And I think you should definitely have a .css file for all that style code. All you do really is to copy all those styles (without the <style> tags) into a file, then names that file something like "styles.css", and then in your html you link to the file (like this: <link rel="stylesheet" type="text/css" href="/templates/style.css" /> (of course change the URL accordingly)), and ta-da, all the styles are the same for all pages, so you don't need to worry if you forgot to change the style in some page upon a style update.
    I have to congratulate you on the fact that you don't use tables. Few webmasters these days realize that they aren't needed. Well done.
    And of course I recommend you change your doctype, seeing as you're almost valid xhtml 1.0 transitional use a doctype accordingly (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)
    I really just recommend you go to https://validator.w3.org/ and validate your code after you made those changes, just to make sure. And you are unsure about something you can look at other sites with that doctype for way's to do things. You can go to my main site, link is in my signature. Just open source code and see if you find anything helpful. I use PHP as well to simplify many aspects of webdevelopment, but if you aren't there yet, it's allright.

    As for your design, I know you didn't want anything on it, but it doesn't hurt if I just speak my mind, and you can take what you like from that. It's very clean, very simple. You might consider adding some minor flashy changes. Subtle graphical advancements are always appreciated by viewers ;). To start I can definitely suggest that you align your text to the left side. No one likes reading centered text. And also consider your display order a little. On the news page, except for the white line, nothing separates the search engine text and the news; You need to add some more space between the line and the search engine text as well as make the search engine text smaller, so that it doesn't match the the news text.
    Now, I'm not sure if you have Firefox or not, but you definitely need to get it https://www.mozilla.com/en-US/firefox/. Firefox is by far the best webbrowser out there, and it's a Must-Have for all webdesigners. As I view your page in Firefox, I see that some texts are going outside the graphical borders. Headings in the left menu bar are sticking out to the left, and text in the main content box are sticking outside the box. You need to add padding to that box so that the text remains inside it.

    Graphically you need to start thinking smaller, more subtle graphical details. Instead of big stars surrounding the layout, have something smaller. Tiny stars maybe? Or maybe just thin streaks that cross the layout horizontally. Or better yet, thin dots, that's always subtle, and adds a nice flare to the design. Consider the dotted streaks on the banner's background, and on the bottom of this page https://www.cultanime.com/temp/halo-masters/ (also one of my old creations). It's hardly noticeable, but adds that special touch of detail that viewers like. I personally also like to work a lot with layers (notice how objects appear in front and behind each other in my sites), this is each done with contrasting colors and some shadow effect that are simple enough in Photoshop.
    Also consider your font carefully. Not all links have to have underlines (menu doesn't have have to have underlines, since all that's in there is links anyway). Try to separate all types of texts by it's association. If it's a link, if it's a bit of extra info (like the search engine text), if it's a comment, a quote, etc etc. Have special fonts for each, just so the reader can easy identify each (But always remember that these separate fonts need to be similar and compliment each other.
    All I can really say as far as designing goes is that designing a layout is a lot like any other creative job. If you are a cartoonist your skill comes from experience. Not just from drawing but by just learning about what you draw. To draw a human body you need to learn the anatomy of a human body carefully, otherwise the drawing will look weird and unrealistic. In designing a layout you need to look around for others sites with good designs and learn from it. Take notes of specific things you like about that sites layout. And always consider how that layout will look on different computers, browsers and so on.

    Finally, about your content. Well, obviously, just sit down and write. It's a simple fact that people look more to the content of a site than it's programming or design (even though that does help). If your content is better than PPN, then expect that people will choose your site over PPN. Also very much consider original content. If you have something that PPN doesn't, than obviously people are gonna come to your site instead. Just think outside the box, sit down, get comfy and start writing!

    Well I hope I was helpful in any way. I know I dragged on quite a bit, but that's me. I always do that when I write :P

    Good luck, and feel free to ask for help if you need any (and by that I mean questions and such things, don't ask me to write or design for you :P)
     
    Hi, thanks a billion for your comments, I'll take all of it into mind! Can I just ask what the padding code needed is?

    I never knew what a doctype was, thanks for telling me! ^^
     
    You're very welcome :)

    Padding is a CSS style code. In the object that you want to alter (let's say your main content box is called "main") in the main object add "padding: 10px;" (or however much is needed really). This can also be manipulated. You can choose specific sides. If you just wanna pad the right side, just put "padding-right: 10px;". Or if you wanna pad the bottom or top of the box just use "padding-top: 10px;" or "padding-bottom: 10px;". CSS is very easy to learn, so I suggest you look up a CSS tutorial on google and learn it really quick ;)
     
    Well that totally depends. Would you change the whole layout for something a bit more flashy and stuff than I would suggest changing to yellow. I would however under no circumstances change to black. Black is an extremely difficult color to make work at your current level. Heck, black is sometimes even hard for me. I think it's best to stick to different shades of blue and gray.
     
    Oki Doki, thanks, just 1 more question (sorry! ^^;)
    What's wrong with my left nav bar?

    Here is the CSS.
    Code:
    [B]
    body {
    text-align:center;
    font-family:verdana;
    font-size:10pt;
    color:#000000;
    background:url(https://img108.imageshack.us/img108/3386/backgroundrt5.png);
    }
    
    a:link, a:visited {
    text-decoration:underline;
    color:#000000;
    }
    
    a:active, a:hover {
    text-decoration:underline;
    color:#888888;
    }
    
    #layout {
    margin:auto;
    width:779px;
    text-align:left;
    }
    
    #container {
    float:left;
    width:779px;
    background:url(https://img517.imageshack.us/img517/4460/contentmo8.png);
    }
    
    #header {
    text-align:center;
    }
    
    #header img {
    }
    
    
    #leftcontainer {
    float:left;
    width:649px;
    }
    
    #content {
    float:right;
    width:510px;
    padding-left: 150px;
    }
    
    #leftmenu {
    float:left;
    width:124px;
    padding-left: 20px;
    }
    
    #rightmenu {
    float:right;
    width:124px;
    padding:3px;
    text-align:right;
    }
    
    #footer {
    clear:both;
    padding:0px;
    background:url(https://img517.imageshack.us/img517/5150/disclaimerse9.png);
    height: 56px;
    }
    
    #leftmenu ul, #rightmenu ul {
    list-style-type:none;
    padding:0 5px;
    margin:0;
    }
    [/B]
     
    well best I can tell, you tried to place the content box over the menu. Two boxes cannot overlap each other, unless they're of another position type (https://www.w3schools.com/css/pr_class_position.asp). What you need to do is for example make a main box. Which will be invisible. Make it have a fixed width (example: 760px), place the boxes inside it and you make the left menu about 150 px. Then you simple take 760 - 150 = 610, and there you have your content box width. That way there is no room between them and they each have their own space without overlapping one another. Now padding and margin do make a difference in this matter, if you notice the problem doesn't go away, keep minimizing the width of one of them (prefferable the content box, and also make it float right) and eventually you will find the right size that will allow them both to stay next to each other.
     
    Well basically, a Box is the <div></div> tags. That makes in a sense a "box" for the content which you place inside.

    Do you have a chat program I can contact you on? I could help you out with that problem much easier if I talked to you directly. You can PM me if you do.
     
    Uhh... Ok... I don't see why that makes a difference... But whatever. Do you have an IRC program?
     
    Ok... Well it is a rather stupid rule, no offense to your parents (I'm guessing).

    Umm... well... I dunno... How about you copy the CSS file as it is now and I'll take another look (try not to change anything until I reply)
     
    body {
    text-align:center;
    font-family:verdana;
    font-size:7pt;
    color:#000000;
    background:url(https://img108.imageshack.us/img108/3386/backgroundrt5.png);
    }

    a:link, a:visited {
    text-decoration:underline;
    color:#000000;
    }

    a:active, a:hover {
    text-decoration:underline;
    color:#888888;
    }

    #layout {
    margin:auto;
    width:779px;
    text-align:left;
    }

    #container {
    float:left;
    width:779px;
    background:url(https://img517.imageshack.us/img517/4460/contentmo8.png);
    }

    #header {
    text-align:center;
    }

    #header img {
    }


    #leftcontainer {
    float:left;
    width: 690px;
    }

    #content {
    float: right;
    width: 500px;
    margin-left: 5px;
    margin-right: 7px;
    padding-left: 100px;
    }

    #leftmenu {
    float:left;
    width:100px;
    padding-left: 5px;
    }

    #rightmenu {
    float:right;
    width:124px;
    padding:3px;
    text-align:right;
    }

    #footer {
    clear:both;
    padding:0px;
    background:url(https://img517.imageshack.us/img517/5150/disclaimerse9.png);
    height: 56px;
    }

    #leftmenu ul, #rightmenu ul {
    list-style-type:none;
    padding:0 5px;
    margin:0;
    }
     
    Ok, just hold on, this may take a little while (I'm gonna redo your whole code).
     
    You could take it to PM if you want~ :D
     
    Ok, now this should bring your page back to approximately the way it was before you changed it. To fix the margin problem we'll have to take it step by step, so don't get ahead of yourself with changing.

    First is the CSS code, just copy it into your CSS file (keep a backup of the one you have now just in case)

    And below is the code for your HTML main page (again, keep original backup). I've marked the area where you need to place your content (in the case of site.html, that would be the search engine and the news things). I also cleaned it up a bit.

    Code:
    body {
    text-align:center;
    font-family:verdana;
    font-size:7pt;
    color:#000000;
    background:url(https://img108.imageshack.us/img108/3386/backgroundrt5.png););
    }
    
    a:link, a:visited {
    text-decoration:underline;
    color:#000000;
    }
    
    a:active, a:hover {
    text-decoration:underline;
    color:#888888;
    }
    
    #layout {
    margin:auto;
    width:779px;
    text-align:left;
    }
    
    #container {
    float:left;
    width:779px;
    background:url(https://img517.imageshack.us/img517/4460/contentmo8.png););
    }
    
    #header {
    text-align:center;
    }
    
    
    #content {
    float: right;
    width: 500px;
    margin-right: 7px;
    }
    
    #leftmenu {
    float:left;
    width:120px;
    padding-left: 5px;
    }
    
    #rightmenu {
    float:right;
    width:124px;
    padding:3px;
    text-align:right;
    }
    
    #footer {
    clear:both;
    padding:0px;
    background:url(https://img517.imageshack.us/img517/5150/disclaimerse9.png););
    height: 56px;
    }
    
    #leftmenu ul, #rightmenu ul {
    list-style-type:none;
    padding:0 5px;
    margin:0;
    }

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>::Negative Charge::</title>
    <link rel="stylesheet" type="text/css" href="https://www.zendurl.com/n/ncharge/style.css" />
    </head>
    
    <body>
    <div id="layout">
    <div id="header">
    <img src="https://img108.imageshack.us/img108/262/banner2il4.png" alt="Negative Charge Banner" />
    </div>
    
    <div id="container">
    <div id="leftmenu">
    
    <ul>
    
    <li>Sitely
    <ul>
    <li><a href="https://www.zendurl.com/n/ncharge/site.html">Home-ness</a></li>
    <li><a href="https://nchargeforums.awardspace.com/forums/">Forums</a></li>
    <li><a href="https://www.zendurl.com/n/ncharge/linktome.html">Link to Me</a></li>
    <li><a href="https://www.zendurl.com/n/ncharge/affy.html">Affiliate!</a></li>
    </ul>
    </li>
    
    <li>Pokémon Guides
    <ul>
    <li><a href="https://www.zendurl.com/n/ncharge/rbydifferences.htm">R/B/G Differences</a></li>
    <li><a href="https://www.zendurl.com/n/ncharge/startersyellow.html">3 Starters! (yellow)</a></li>
    <li><a href="https://www.zendurl.com/n/ncharge/evoloution.html">Eeveeloutions</a></li>
    <ul>
    </li>
    
    </ul>
    </div>
    
    <div id="content">
    {your content/search engine/news here}
    </div>
    
    
    <div id="rightmenu"> </div>
    
    
    <div id="footer"> </div>
    
    
    </body>
    </html>
    
    <!-- Start of StatCounter Code -->
    <script type="text/javascript" language="javascript">
    var sc_project=1144755; 
    var sc_invisible=1; 
    var sc_partition=10; 
    var sc_security="d3d7ec5e"; 
    </script>
    
    <script type="text/javascript" language="javascript" src="https://www.statcounter.com/counter/counter.js"></script><noscript><a href="https://www.statcounter.com/" target="_blank"><img  src="https://c11.statcounter.com/counter.php?sc_project=1144755&java=0&security=d3d7ec5e&invisible=1" alt="hit tracker" border="0"></a> </noscript>
    
    <!-- End of StatCounter Code -->
    
    
    <script src="https://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-835715-1";
    urchinTracker();
    </script>
     
    Back
    Top