My Website

Show Off
#21

So maybe what you can do is perhaps still list them all, but then categorize them as Bronze package, Silver package, and Gold package. (or something of a ‘tier level’) this way folks can get a feel for what you would normally present as a ‘cheap’ site as apposed to an ‘expensive’ site. And then of course you would have at least 1 “platinum” site to show. :wink:

That is TOTALLY what I did! I took this template, and then added my favorite stuff to it or took out resource hogs or things people complained about. Like the flash at the top. =-( OF WHICH was my fav part of the whole thing, but oh well. But now I have a sitethat seems to load fast and still has everything I need. Also, I highly recommend the following sites:

The menu was built with “Infinite Menus” by Open Cube. I am using their free version that was originally available 6 years ago, but is no longer offered. For a person that likes web design, you may be interested in these folks. OR if you feel like playing with an unsupported toy, get the free version of infinite menus here:
https://www.catzeyes93.com/resources/InfiniteMenusv8-5-1/infinite_menus_dd.zip

Dynamic Drive DHTMLis a REALLY fun site to poke around on.

#22

Looks nice! Keep it up :wink:

#23

Hey check it out. I’ve successfully created the first page on my latest project using CSS and no tables. Using Dillon’s CSS as inspiration, I took it apart, and applied it to my design.

https://www.scribbs-piper.com/lollibabies

Not too bad if I do say so myself.

#24

-Background is a problem if somebody is running a resolution 1680x1050 or higher (I see your blue background outside the background-image boundaries). May I make a suggestion? Fade out your background to a solid color and use that solid color you faded to as your site’s background-color. I’ll show you a website I’ve been designing overtime (still a WIP) to show you an example: https://deviationdesigns.com/ (I used repeating x axis stripes fading out to a green. This allows everyone to see the same background regardless of screen resolution https://deviationdesigns.com/images/bg.png)

-One of your content divs is creating a horizontal scrollbar in Firefox. It’s quite annoying to be honest.

-You’ve got some coding errors you may want to address. HTML: https://validator.w3.org/check?uri=http%3A%2F%2Fwww.scribbs-piper.com%2Flollibabies%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 and CSS: https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.scribbs-piper.com%2Flollibabies%2F&profile=css21&usermedium=all&warning=1&lang=en

A few extra tags you don’t need and I suggest using a doctype of XHTML 1.0 Transitional instead of HTML 4. Not many people care about validation because of the way all the different browsers render the web, but I try to validate my sites as best as possible. It mainly comes down to preference (but everybody really should code to standards). I’m pro W3C standards.

All and all, when I started viewing this thread I cringed. Your previous designs made me feel like I fell into a 1999 warp vortex. After seeing this attempt, you’re improving quite a bit so that I commend you for. Great progress from what you showed us to start with to what you’re doing now.

#25

hmm, I also just noticed the horizontal scrollbar. What do you suppose is causing that?

I’ll check into that. Thanks for the feedback.

Edit: I fixed the CSS, but the index page still has 10 errors. Half I don’t even understand. I made sure I cleaned up all of the unnecessary ‘div’ tags, and it’s still saying I have leftover one’s.

And I don’t even know what’s going on with the right side of the page.

I also fixed the background image. I hope this works out.

Edit [Again]: I figured it out. Woot.
It was the horizontal navigation, and the div tag it was relating to had this attribute: “position : relative;” So I changed “relative” to “absolute” and it fixed the problem. This happened while I redesigned the navigation, so I figured on going through the mark-up to see what was going on.

#26

Background image is better, good job on that.

If I had to guess, it’s the div class page causing it. Change page to this {width:900px; margin:0 auto;}

You don’t need to define a height in your container/wrapper (which is “page” in your case). Your container/wrapper div should fill to the height of the content inside it on its own.

Visit this web page for more info https://davidwalsh.name/horizontally-center-website-structure-css

As for as your invalid code, I think that javascript needs to be inside the head, not inside the body. It’s causing the validator to freak out saying that the body tag is in the wrong spot, which is bringing on a cascading amount of errors.

The attribute code errors are something you can’t fix with what you are using right now (I’m assuming that javascript you have for a image rollover looks for that attribute). I suggest instead of moving that code to the head, just nix that rollover library entirely and just use normal mouseover techniques that are included in normal browser javascript. That should clear up a bunch of those errors.

#27

Ninja’d. I edited my original post to mirror my fixes. But as stated, I fixed the extra space on the side by switching “position : relative;” to “position : absolute;”

I just kinda fumbled around till I found a positional attribute that worked consistently.

As far as the image rollover attributes, I think I’ll just stick to the JavaScript I have. I mean, you’re gonna have those discrepancies anyways, why change it if it works and it’s a legitimate means to get those rollovers to work?

I’m still wondering where those extra div tags are.

Edit: Played around a bit, and now I’m down to five errors. Three of which do not have to do with the JavaScript.

#28

Can’t you do rollover effects in CSS divs with like, one or two lines of code? No point in using a longer external script to accomplish the same effect. Consequently, I didn’t see any rollover effects because I use a script blocker; but I would have if the rollover was done with CSS. If it solves your validation problems then you’re killing two birds with one stone.

I don’t know how you’re handling the top nav bar either; if I make the window fairly small, perhaps 1/4 of my screen, the buttons drop off of the bar and start stacking in a vertical column on the right side of the page, even though there is room on the title bar for them to slide over. You should probably have all the buttons contained within an invisible div that is kept at a fixed location within the main header bar, so that it slides around accordingly when the window is scaled; right now it must be centered because if I expand to fullscreen, the home button overlaps the title (I couldn’t find it for a few seconds)

#29

Yep, Rabid’s right, doing the same thing to me here as well, need to throw in a container navigation div to keep them in place.

As for your rollovers, he has another good point. CSS is a nice way to handle them, I do it on this website I made here. It requires a bit of finesse but definitely worth it. https://podfinity.com/ (ignore the stream if it stutters, our box isn’t on a good connection at the moment while we program it). I’ve tried to avoid image rollover scripts since the early 2000s. It really eats up unnecessary bandwidth, and if you don’t force an image pre-load, you’ll get that weird button loading effect when a person rolls over a button.

As to answer your question about the javascript too. It’s technically NOT a legitimate method of making a roll-over work. That’s why W3C is pointing it out to you. That attribute type your javascript library looks for isn’t a valid attribute. Will it cause problems? That would be a 99.9% negative. However, if a browser wanted to look for an attribute tag like that, it could cause rendering issues.

Another small nitpick which isn’t entirely important, I also noticed you made every div a class. It really doesn’t affect anything, but any div you use only once in a CSS code should be an ID not a Class (# instead of . in the css and div id instead of div class in the HTML)

Oh, by the way, the HTML that’s causing those 3 errors with the tag mismatches is the above your . Baleet it. You have 13 div tags, and 14 closing div tags. That’s what usually triggers the error. The easiest way to prevent problems like this, is to code HTML almost like a program. Indent (tab) lines that are inside operations so for example:

<div id="container">
     <div id="header">
          <div id="header_siteLogo"></div>
          <div id="header_spacer"></div>
          <div id="header_navigation">
               <div id="header_link1">Blah Text 1</div>
               <div id="header_link2">Blah Text 2</div>
          </div>
     </div>
</div>

It makes it so you always have an equal amount of opening and closing tags. If your indentation didn’t come out right, you missed a tag somewhere. Or you can just count the divs, but there’s always a chance you may miss one if the coding is messy enough.

#30

Actually, I do like that image rollover method better. Thanks for the tip. Just means one less file to load up.

I also caught what you were saying about resizing the window with the links piling up on each other. hmm, fix one problem, only to be presented with another. I haven’t started on the other pages yet because I wanted to make sure that the first one was done right.

And to get rid of those “extra” tags, I may just have to re-type it to see where it was going with that.

#31

I generally like to abuse the a-tags for my rollovers. This way it works in IE, the thorn in the side of many web designers alike.

#32

Agreed. I’ve had a ton of cross-browser problems that IE created. I’m assuming that Chrome accepts generally anything that Firefox will. Of course, that could be wrong.

#33

when I create Website I don’t even care about that shitty IE, those idiots who use it should download a real webbrowser and don’t use this piece of shit, my websites work properly on every webbrowser except IE because of its lack of CSS support, so I don’t support the incompetence of this browser

#34

Well, I tend to keep IE in mind, mainly because 63% of the visitors of my company’s website uses IE. And of that 63%, over 80% still uses IE7 or lower.

Yes, IE is a pain to work with, but theoretically it can do everything the other browsers can, you just have to tweak your code for it, and that can be a time consuming task, but I have to do it, since I can’t expect 63% of our visiting customers to adapt to our website. So I end up coding the website for IE, so it works on all the other browsers (and it’s not like I have to leave things out because IE doesn’t support it, anyway).

#35

The mouse over works, but the replacement image is actually showing up behind the original image. How do I fix this?

Edit: Ok, I got another MouseOver method to work, and guess what? I passed!!! The page is currently marked Valid. Woot!

Now I can continue with the rest of the site, and show the client what I’ve been up to.

#36

This ^. However, say good riddance to IE6. I won’t code for it anymore. Even YouTube is dropping support for it this month.

Congrats, you’ve definitely made good progress from where you’ve started. Keep on evolving.

#37

My most recent project. Working with another designer and two marketers, and we’ve started our own design business. Work in progress, of course, but critiques are more than welcome.

https://www.h20webhosting.com

btw, I still can’t find a sufficient ‘onmouseover’ method that also supports ‘onmousedown’ while making it universal to all images. My current method allows me to leave the Javascript as is, and it works by just putting in the ‘srcover=“img.jpg”’ and ‘srcdown=“img.jpg”’ markup that isn’t Standard Compliant. Otherwise, everything else works fine.

Founded in 2004, Leakfree.org became one of the first online communities dedicated to Valve’s Source engine development. It is more famously known for the formation of Black Mesa: Source under the 'Leakfree Modification Team' handle in September 2004.