Complete DigimonPet redesign

Xilef · Jul 13, 2008

Everyone remember my horrible, horrible, free-web building tool weebly website "digimonpet"?
I took all of RMXP.org's design suggestions on board and produced something new that threw those suggestions into a bottom-less pit with spikes of fire at the bottom of it, flooded with acid that has a pH of 14.
The new DigimonPet website now uses a CSS made by me, PHP made by me, HTML designed by me, all under a name of DigimonPet rather than Xilef. I like my identity.
The site has moved from this:
DigimonPet with Weebly :dead:
To this:
http://digimonpet.x10hosting.com/images/Digimonpethpbanner.png[/img]
(Click the image to see)
The forum and topsites are not part of the website's CSS, the main page uses my own CSS that I made from scratch.

I am particulaly proud of this as I used iframes to make some parts easier to edit without having to change every single webpage (The affiliates and voting buttons at the bottom of the pages for example)
Also I intergrated the recent posts from the Simple Machines Forum to the front page of the website with iframes, actually I'm just proud of the entire site which I made from tutorials and didn't ask for any direct help :thumb:

But I need to ask about this, the general public, on my weebly site they said they like the new design, but that's because it's better than the old one, so I need fresh viewers to tell me what is the issue.

(Also, this new site is firefox compatible! Yay!)

Thanks RMXP.org :thumb: I might follow a career into website design if I get really good :blush:

___ · Jul 14, 2008

I hate to say this since you're proud of them, but iFrames are pretty icky and generally considered bad practice. A good alternative would be PHP includes. Let your server do the work of assembling disparate chunks of HTML, let the user's browser focus on rendering it. It will make your page cleaner, more efficient and more consistent across browsers.

If you do choose to stick with iFrames, remember each frame is supposed to be a fully formed valid HTML doc, so you need to include a doctype declaration, head and body tags, etc. There are also a few page errors stemming from other issues, such as the use of backslashes instead of forward slashes in your stylesheet includes. Your main page seems to be lacking a <head> and <body> as well. Also of note, you have declared XHTML 1.0 Strict doctype, but are not using valid XHTML syntax in many page elements, such as your line breaks which need to be closed:

Code:

<br />
instead of <br>

Same goes for your <img> tags, and any other tag that doesn't have a seperate closing element. You might want to switch to XHTML 1.0 Transitional and/or run your site through a validation service or use a browser validation plugin - "HTML Validator" for Firefox is really nice.

Best practices in web design discourage the use of presentational HTML elements such as <font> and attributes like width, height, bgcolor, etc. It is recommended you use <span> instead of <font>, and use CSS to provide presentational data, using HTML only for semantic markup. It makes your code cleaner and much easier to update and modify down the road.

All that said, there are also a variety of problems with the design. In the navigation iframe, it appears you're trying to give the feel of a row of buttons. The text however is offset from the background image, ruining the effect. This is probably due to using a set of anchors and line breaks without specifying line height. A preferred approach is to place the anchors inside an unordered list (<ul>). There is also no tactile response whatsoever on mousover (it doesn't highlight or underline or anything) which typically causes a little confusion.

The contrast between the background and text content in general is pretty low, you might consider making the background darker or else using a light-colored text. Also the "Recent Community Posts" blue text is nearly unreadable.

Last but not least, "This website is hentai free"

Good luck

Xilef · Jul 14, 2008

Nphyx":1rxg35kl said:
All that said, there are also a variety of problems with the design. In the navigation iframe, it appears you're trying to give the feel of a row of buttons. The text however is offset from the background image, ruining the effect.

Wrong; I'm not using an iframe for the navigation :p I'll use the anchoring to fix that error, which only appears on mozzilla browsers. Thanks!
EDIT: Same with the recent community posts, for some reason firefox won't display the iframe background, I'll fix that now.
EDIT2: Line height css isn't working with firefox, why is this?

Munkk · Jul 14, 2008

iframes are the biggest no no in web design history. </fact>

also, the reason it doesn't work in firefox is because it's an extremly bad browser.

Xilef · Jul 14, 2008

Munkk":chczrpql said:
iframes are the biggest no no in web design history. </fact>
also, the reason it doesn't work in firefox is because it's an extremly bad browser.

What's wrong with iframes? They're working fine for my website, I've had no issues.

After today, I agree about Firefox, it is lacking on many, many features. It translates CSS like M. Night Shyamalan trying to translate a story.

Munkk · Jul 14, 2008

well, to be fair, Firefox is the second best browser. But it's nowhere close to the standard of Opera.

never been a fan of frames really, search engines can't read 'em for once. also there is more effective ways to do it, PHP is one of them, else you could google on how to include other pages with <object> instead.

___ · Jul 14, 2008

Firefox represents 30% or so of all the users on the web, and renders CSS better than most of the other 70%, which is IE6, IE7 and a tiny smattering of other browsers. If you can't make a website work in Firefox, the problem is probably yours, not the browser's

Opera, Firefox, and Safari all render websites almost identically, except for some support for obscure features taken from the unreleased CSS 3 standard, some very minor bug differences between the three, and SVG. Write for these browsers first, then figure out how IE has fucked up.

Also yeah I forgot to correct the note about the navigation after I took a second look at the site. The point stands though that the text doesn't line up with the background and it has no tactile response.

Xilef · Jul 15, 2008

Nphyx":157fgx4g said:
Firefox represents 30% or so of all the users on the web, and renders CSS better than most of the other 70%

90% of statistics are made up to defend a lie.

I've just found out for myself that Firefox (And all the other Mozzilla based ones) renders CSS the worst out of IE7 and Opera and that IE4 doesn't render CSS at all.
I've just tried loads of CSS options to try and fix this menu error I have, IE7 renders the new font sizes, line spacing, divider sizes, but Firefox ignores my changes completely (Even with Alt+Refresh, which is a complete refresh without cache).

Munkk · Jul 15, 2008

Erhh, sorry to bust your bubble of Firefox hating. But there is no denying that Firefox renders CSS aaalooot better then IE.

Xilef · Jul 15, 2008

Munkk":300yfrwg said:
Erhh, sorry to bust your bubble of Firefox hating. But there is no denying that Firefox renders CSS aaalooot better then IE.

Okay, you go learn CSS and add in a bunch of options such as line-height and float then try it out in IE then try it in Firefox.
What's that? Oh dear, Firefox is incapable of displaying half the CSS you wrote. Don't worry, it does the background and the font fine! Who'da thunk it!? This is Firefox 2 and 3 BTW, Firefox 1 is even worse.
I used to use firefox all the time until I starting getting errors with web design, then I moved back to IE and all is fine.

EDIT: I checked it out, my problem is that the line-height CSS does not exist in Firefox at all. God that's so annoying, you'd think they'd have put all the CSS options into a browser before releasing it.

Munkk · Jul 15, 2008

Oh, don't even try to challange my knowledge of CSS. However, you could go and try to learn how to write your CSS correct, so this won't happen. It's a know fact that IE is terrible when it comes to rendering CSS.

Don't get me wrong, I'm not a fan of Firefox, but to say that it's even worse then IE, who is the most shittest browser known to the internet, is joke.

AbyssalLord · Jul 16, 2008

I would seriously suggest doing something with that nav bar. onmouseover make the background change color, the text get bigger, anything to show that it is active really...for some reason, nav bars that dont do anything of interest bug me (especially when it looks like it should do something like yours);

___ · Jul 16, 2008

Mozilla-based browsers support line-height correctly. Over time you come to realize, as a designer, that anything that works in Internet Explorer differently than it works in other browsers is due to Internet Explorer doing something wrong - either having a bug or simply its developers willfully ignoring the standards specifications.

This is especially important to understand since IE 8 (and future versions of IE) will adhere more closely to standards - IE 8 has an almost complete implementation of CSS 2.1 and the new dev team has made a commitment to quit ignoring standards and doing things the Microsoft way for the sake of our collective sanity. The skinny is if you develop for IE 7 and in doing so generate bugs in standards-supporting browsers your website will also break in IE 8, which will probably occupy a large chunk of your user base within the lifespan of your website.

That's why most professional designers develop for standards browsers first, and then correct issues in the various versions of Internet Explorer. You're better off learning DOM and the cascade as it works when implemented correctly. This isn't a religious issue, where you get to evangelize your favorite browser and espouse its virtues; it's a technical issue where facts win and you can be objectively wrong or right. People with experience are trying to help you here, so it's best to realize that and accept it : /

Xilef · Jul 16, 2008

I'm going to have to completely re-design the CSS for this then. I'll get started Y_Y

AbyssalLord · Jul 17, 2008

No offense, but your top sites login sucks. The username is case sensitive, so if your username is something like this -- AbySsAlLOrd -- (mine isnt really like that), you have to remember all of the caps. If you are using php, try the strtoupper() function. Secondly, it seems your site cannot hold a session, which in reality, makes the login useless in the first place because every time you go to a new page, you're logged out. You really need to work that out...

Xilef · Jul 17, 2008

AbyssalLord":1hv3cmix said:
No offense, but your top sites login sucks. The username is case sensitive, so if your username is something like this -- AbySsAlLOrd -- (mine isnt really like that), you have to remember all of the caps. If you are using php, try the strtoupper() function. Secondly, it seems your site cannot hold a session, which in reality, makes the login useless in the first place because every time you go to a new page, you're logged out. You really need to work that out...

Okay, I'll change all that now.
EDIT: I can't figure out what to change to make the form case insensitive, the PHP files don't actually state where the login and password forms are. Can you do it with HTML because I found the specific place there but the internet won't show me how I can make HTML forms case-insensitive.

AbyssalLord · Jul 17, 2008

You can't do it with only html. You need to find where the form connects to the database or xml file. Do you have access to the php files?

Xilef · Jul 17, 2008

Yes I have access, I can't find the xml file (yet) still looking.

AbyssalLord · Jul 17, 2008

Well, I'd tell you how/where to edit, but I'd need to see the files...and, you most likely wouldn't want to give a stranger access to them. Correct? If I'm wrong, then I'd be happy to take a look at them for you ^_^ Good luck!

___ · Jul 18, 2008

What you want to do is look for the function that process the POST data your login form submits. The line that assigns the post data to a variable will look something like

Code:

$username = $_POST['username']

and will probably retreive information from the database, then compare it using something like:

Code:

if ($username == $_POST['username'])

or possibly use the POST data to perform an SQL query, which may look something like

Code:

$query = "SELECT * FROM users WHERE username=".$_POST['username'];
$res = mysql_query($query, $database) or die (mysql_error());
$row = mysql_fetch_assoc($res);
if ($row['password'] == $_POST['password'] {
...

Once again this will vary wildly depending on how your code talks to the database, what kind of database it uses, whether it uses object-oriented design, what sort of security features it has, etc, but it should be somewhere in that general ballpark. If you can find something resembling that in the source someone can probably help you with the case sensitivity problem.

Regarding session management, that also depends on how your code handles sessions but the easiest way to implement it is to register the user's id using session_register() after a successful login, then load the user data using the id you registered from $_SESSION at the beginning of the page. You can look up both those things for more info

Envision, Create, Share

Complete DigimonPet redesign

Xilef

___

Xilef

Munkk

Xilef

Munkk

___

Xilef

Munkk

Xilef

Munkk

AbyssalLord

___

Xilef

AbyssalLord

Xilef

AbyssalLord

Xilef

AbyssalLord

___

Share this page

Thank you for viewing

Discord

RPG Maker

Content