Jump to content

Klaas

WFG Retired
  • Posts

    3.116
  • Joined

  • Last visited

Posts posted by Klaas

  1. Alrighty, another question.

    Can I use the same trick that you posted above Klass(two different CSS, depending on browser), but instead of browsers, it works on browser resolution?

    No, don't think so. You can use javascript for that, but I don't recommend it.

    It's better to make your site support most resolutions. There are several options you have here:

    Fixed layout:

    This means the width if your site is fixed, eg. 740-760 pixels if you want to support 800x600 and higher

    Fluid layout:

    This is a tricky one. Your layout's width depends on the browser (eg. you use % or em instead of px), but there is a maximum or minimum width. Look here for example and resize your browser window:

    http://www.projectseven.com/whims/cssp_3box/

    Tricky think is that IE doesn't support this very well, it doesn't support max and min-width.

    Liquid layout:

    The width is totally % or em based, so no max or min-width.

    Advanced fixed layout:

    It's a pretty recent method. Your layout is fixed but it doesn't support resolutions lower than 1024x768. The thing is that it still looks good on lower resolutions, even though the user can scroll horizontally. The trick is putting content that isn't important right and the important content left with a width lower than 760 pixels.

    Look here and resize the browser window:

    http://veerle.duoh.com/index.php

    The stuff like the flickr pics, veerle's art and art/type elsewhere is the unimportant content.

    imho the advanced fixed layout is the best if your layout is image heavy. Otherwise fluid is very good, though liquid is easier to implement.

  2. Well this is a typical example of crappy hosts. Nobody can offer 50GB space and 500GB bandwith for that price and make profit, it's impossible. So obviously they're overselling and probably putting thousands of accounts on one server.

    Seriously, if you look for a host don't look for the huge amount of GBs you get for only a few bucks, but look at the quality of service, their reputation, etc. Is anyone not running an online business really going to use that amount of resources? I think not, so better look at the quality and relieability than numbers.

    http://www.webhostingtalk.com/ is the best place to look for a good host.

    As far as prices go, 20GB bandwith/1GB space is about $5-15/month, if a company is charging much less don't trust them.

  3. Don't go for a Windows server, it's more expensive. You should only get Windows hosting if you actually use ASP or other Windows-only server technologies.

    Linux has better alternatives, like PHP and MySQL, and the majority of open source scripts will only run well on a Linux box. If your dad ever wants to install a free CMS or forum (Drupal, phpBB, Joomla, Wordpress, etc.) he can't do that on a standard Windows box. There are Windows servers supporting PHP/MySQL but not many, plus it's more stable on Linux.

    The linux config looks very nice compared to the Windows one. The Windows box only supports one server-side language (ASP) while the Linux one supports 5 (PHP, Perl, Python, Java, Ruby). So a lot more bang for the buck if you don't know/use ASP.

    What hosting company is he looking at btw? It's important to choose a relieable host, which is pretty hard considering that the hosting market is over saturated with crappy hosting companies.

  4. Sure :P

    Well my first move will be buying a new screen since that's what I need most. I currently have a 17" BenQ LCD. I've been very happy with it, fast response time, excellent colors, etc.

    The only thing that bugs me is the resolution, 1200x1024. My laptop has an UXGA screen (1600x1200), so since I got used to that 1200x1024 really isn't enough for programming and making site designs in photoshop.

    So I'm thinking about getting a 20" or 21" LCD, probably a widescreen.

    These are currently on my list:

    Samsung 215TW

    Samsung 205BW

    Viewsonic VX2025wm

    BenQ FP202W

  5. Thanks for the info :P

    Myeah, I'm thinking of AMD too since the benchmarks show some nice results for games.I've been comparing the Intel D930, Athlon64 X2 3800+ and Athlon64 4000+. The intel is €120 cheaper than those two, but it performs reasonably worse for games. For multitasking and office stuff however it performs much better.

    So not sure what to get since I want something that's good for both office stuff and gaming.

    Nathan, do you think it's a big difference when gaming between the Intel and the AMD? I don't care about small differences, but if it justifies the €120 price difference I might get one.

    This is what I configured as an AMD alternative:

    Soundcard: Creative Audigy 4 €57,16

    CPU: AMD Athlon 64 X2 3800+ €341,24

    Motherboard: Asus A8R-MVP €107,76

    Case: Antec P180B €149,20

    PSU: Antex Truepower 2 550W €90,15

    Memory: Kingston ValueRam 2x1GB DDR SDRAM PC3200 €208,39

    GPU: Asus x1900XT €422,28

    DVD-reader: BenQ €21,49

    DVD-writer: BenQ €45,97

    Wifi PCI card: Belkin 128Mbps €32,17

    HD: Maxtor 300GB 16MB €102,30

    Card reader €15,61

    Total: €1593,75

    Most components are different since it's from another shop. I also choose the X1900XT because I read that it's a bit better than the 7900GTX and the 7900 line seems to have some problems with bad overheating chips.

    Oh, another question regarding the motherboard. Is it possible to put a 1900XT on a motherboard with the nforce4 chipset? I don't really care about crossfire or SLI, but I've seen that there are much more nforce4 motherboards available.

  6. This link do not work, I have tryed 4 times with out o get any thing, it's blank. Any idea why??

    Maybe you should read the whole post; his site doesn't display in Internet Explorer :P

  7. To erase everything from the HD you don't have to get a new motherboard, simply format the disk.

    If you want a new modern Gfx card it might be better to get a new motherboard. Just watch out what you get. Have a look at your RAM, is it DDR or DDR2?

    If you figure that out get a motherboard that supports the type of RAM you already have and PCI-E, and then get a PCI-E Gfx card (not AGP).

    If you don't want to change motherboard look up what kind of motherboard it is, if it supports PCI-E or AGP. Depending on that get a Gfx card supporting either PCI-E or AGP. Note though that AGP is a bit more expensive and considered outdated.

    Your CPU could also need a change if you plan to game and do 3D modeling. I would look into a Pentium D 920 or 930 or and AMD Athlon X2 (again watch out with your motherboard, check if it supports the socket of the CPU).

    I don't know which Gfx card to suggest, but definately not get a 6800. It really depends on your budget. If you have enough money get an ATI 1900XT or Nvidia 7900GTX, if not look into an ATI 1800XT or Nvidia 7900GT.

    Do watch out with the Nvidia 7900's though. I've heared rumours that people are constantly having problems with them. The ATI 1900XT gets quite hot though but other than that it seems to be ok, and it supports all the latest stuff (like HDR + AA)

  8. The reason why it probably doesn't show up in IE is that you've closed the body and html several times:


    </body>
    </html>

    If you have firefox instill an extension to validate websites, that way you'll easily find errors like that. Otherwise simply use http://validator.w3.org/ and correct every mistake the validator mentions.

    Those who say not to use browser targetting don't know what they're talking about. You shouldn't use browser-specific hacks that exploit CSS bugs, but there are other ways to target IE that are fine.

    <!--[if IE 6.0]>
    <link href="css/ie6.css" type="text/css" rel="stylesheet" media="screen" />
    <![endif]-->
    <!--[if IE 5.0]>
    <link href="css/ie5.css" type="text/css" rel="stylesheet" media="screen" />
    <![endif]-->

    Put this in the head. This will only load ie6.css for IE6 and ie5.css for IE5.

    The thing is with hacks that they depend on bugs. If a new browser version comes out and the bug is fixed that makes sure you can target that browser but not the bug you want to fix with the hack you're in trouble.

    So using IE conditional comments (the code I gave you) solves that problem since it will only target the specified browser, not the next version.

    If you want to make a liquid layout you'll have to be cautious about your html to avoid errors.

    Just use XHTML Strict 1.0 for you doctype instead of HTML4, validate your document using the W3C validator and don't use divs where it's not needed.

    For example this:




    <div class="latesthead">Music Updates</div>
    <div class="first">Music Updateola - April 6th [<a href="">Read More</a>]</div>
    <div class="second">Music Updateola - April 5th [<a href="">Read More</a>]</div>
    <div class="first">Music Updateola - April 6th [<a href="">Read More</a>]</div>

    <div class="second">Music Updateola - April 5th [<a href="">Read More</a>]</div>
    <div class="first">Music Updateola - April 6th [<a href="">Read More</a>]</div>
    <div class="second">Music Updateola - April 5th [<a href="">Read More</a>]</div>
    <div class="first">Music Updateola - April 6th [<a href="">Read More</a>]</div>

    <div class="second">Music Updateola - April 5th [<a href="">Read More</a>]</div>
    </div>

    There's absolutely no reason to use those divs wrapping each link. Just think about it, what is it you're showing? It's a list of dates, so you should use a list in your html, not divs. So it should become this:




    <h3 class="latesthead">Music Updates</h3>
    <ul>
    <li class="first">Music Updateola - April 6th [<a href="">Read More</a>]</li>
    <li class="second">Music Updateola - April 5th [<a href="">Read More</a>]</li>
    <li class="first">Music Updateola - April 6th [<a href="">Read More</a>]</li>

    <li class="second">Music Updateola - April 5th [<a href="">Read More</a>]</li>
    <li class="first">Music Updateola - April 6th [<a href="">Read More</a>]</li>
    <li class="second">Music Updateola - April 5th [<a href="">Read More</a>]</li>
    <li class="first">Music Updateola - April 6th [<a href="">Read More</a>]</li>

    <li class="second">Music Updateola - April 5th [<a href="">Read More</a>]</li>
    </ul>
    </div>

  9. Well said Cory :P

    I just wonder who the US government is actually trying to fool. You simply don't bring democracy to a region just like that, that's not the way it works. But why do they keep telling they're in Iraq to bring democracy; I'm positive they know better than that, that this is simply a cheap lie to appease the voters.

    Each region and people has its culture, its religion, folklore, its rivalries, etc. You can't just change that in a few years by taking away only one reason why there's no democracy (Saddam). It's a long term project that takes decades, even centuries, and it has to come from the people themselves, not a foreign nation with whom they have absolutely no affinity.

    The most important thing imho to turn the tide in the Middle East, or Africa, is education and prosperity, not war. And not "just like that", it's something that can only happen in several generations.

  10. If you're going to buy a laptop I highly recommend an IBM (or Lenovo now) Thinkpad. Nothing beats these things :P

    I have one for 9 months now and haven't had any problems yet, while I've been using it 4-10 hours a day and carrying it around all the time. Doesn't get hot, doesn't make much noise, very fast, light and durable.

    These aren't gaming machines though, but maybe the new Z series are suitable for that.

    They may be a bit expensive but the Sony Vaio's are too.

  11. Well I've always wanted to do this so this summer I'll have a go at it.

    The plan is building a great gaming machine/workstation for a reasonable price, preferable nothing more than €1200-1300

    The technical requirements are:

    CPU:

    Don't care about AMD or Intel. I'm not sure what the speed factor of 64bit architecture and dual core is, but since I want this PC to last for atleast 2-3 years I suppose it's smart to invest in a 64bit dual core CPU.

    GPU:

    I want something that scales well. My current PC has an ATI 9800XT and I've been very happy with it, still very good results with the latest games. I also don't care if it's ATI or Nvidia.

    PSU:

    It would be great if it comes with the case. I have no idea about the power. I was thinking about 650W, but maybe that's overkill?

    Case:

    No idea if I should go for ATX or BTX or something else. Most important factors are being large enough for easily adding a second or third HD and very good cooling. Doesn't have to be very silent.

    The looks aren't very important, as long as it isn't a hideous gaming case or an ugly office box.

    Mobo:

    Frankly I don't know much about this. I'm my searching I only looked for a mobo that supports the CPU socket.

    It would great though that it has gigabit ethernet and perhaps a good sound chip on board. Other than that it has to support PCI-e, Sata II and DDR2. SLI is not required since two GPU's is far too expensive.

    Memory:

    I was thinking something between 1GB and 2GB DDR2 ram, the more the better of course.

    HD:

    Just the usual, no 10.000rmp drives as they are a bit too expensive. Nothing too large either, 160GB - 200GB will do.

    Other stuff:

    A card reader thingy, especially for SD cards

    DVDRW+/-, maybe double layer. Don't care about lightscribe or its speed because I don't burn much stuff.

    DVD reader with decent speed

    Perhaps a sound card, but if the chip on the mobo is good enough it's not important

    A good Wifi card (b/g)

    And if there's still enough money left a floppy drive.

    Here's what I currently put together, suggestions are welcome. All parts are from a Dutch shop, I preferably only chose stuff they have because their prices are about 10%-15% lower than in Belgium and it's close to my house (no additional fees). The website is:

    http://www.hi-tune.com/

    Memory: 1GB x 2 (2GB) PC4300 DDR2, CL4

    http://www.geilusa.com/proddetail.asp?linenumber=51

    €167,5

    Case: Silverstone TJ06

    http://www.silverstone-usa.com/products-tj06.htm

    €119

    CPU: Intel Pentium 4 D 930 Dual Core (S775, Boxed)

    €199

    PSU: Silverstone ST65ZF, 650W (ATX 12V 2.0, EPS 12V, SLI)

    http://www.silverstonetek.com/products-65zf.htm

    €119

    Mobo: Gigabyte GA-8N SLI (S775)

    http://www.giga-byte.com/Products/Motherbo...lName=GA-8N-SLI

    €87

    HD: Maxtor 300Gb 7200rpm SATAII 300 16Mb DiamondMax 10

    €99

    DVDRW: Lite-On SHW-16H5S 16x

    €37,25

    DVD: LG 8161B 48x16x Tray Bulk

    €18

    GPU (several choices):

    Club3D GeForce 7900GT 256MB €268

    Club3D Geforce 7900GTX 512MB €430

    Club3D Radeon X1900 RX 256MB DDR3 €285

    Club3D Radeon X1900 XT 512MB DDR3 €420

    The wifi and cardreader will be about €70

    Total is €916 without GPU

    If someone has any suggestions please tell them. I'm really not sure about which GPU to chose. The price difference between the GT and GTX or RX and XT is very big, so if someone knows if it's worth or not...

    Also not sure about the Mobo. It's seems quite cheap compared to the other components so maybe I should get something better?

    I also don't know if I should purchase a sound card and additional fans.

  12. One of my jobs this summer is making a user friendly form builder. It's for a university research department of psychology; they need a way to easily create questionnaires for gathering data from university students.

    To make it easy to use I decided to make it asynchronous: form elements are added in real time, no page loading required. This is done by using Javascript which, after the creation of the form, will be serialized and sent to the server so PHP can build a PHP validator script to manage form submissions.

    I'm currently making a proof-of-concept, now only the javascript front end.

    Only the "Tekstveld" (textfield) really works. If you click on it a textfield will be added with some default values. You can edit the values by clicking on the pencil icon, changing the values and pressing edit. Deleting works too already.

    It's also possible to sort the form elements, simply drag it to another place (done by using the scriptaculous javascript library).

    Here it is:

    http://kvw.be/formgen/index.html

  13. Might come about for a couple beers. :P

    Excellent work Klaas on both the logo and the design! Hats off! :) Just don't understand why you got that blue favicon there? A greenish-redish one would be better I think. Andmaybe the navigation links would look even nicer with some color changing ">>" (») in front of them...or maybe bolding them would do the job too...

    Also I was wondering on which page you are actually using the beautiful javascript code to hide/show paragraphs?

    The favicon is autogenerated by the server it's sitting on, it's my college's logo. It's a website done for a college project, so because I was a bit late for the deadline I didn't have the time anymore to override it with a nicer one or for example make icons for those ulgy text-resize links.

    Yeah good idea for the navbar. If I plan to use it for my portfolio I'll try it out :D

    The javascript is used mainly here:

    http://webs.hogent.be/~054723kv/html/inschrijven.html

    Click on "Verberg facultatieve gegevens", it'll hide everything that's not required to fill in.

    Also have a look here, some messing with the Google Maps API :D

    http://webs.hogent.be/~054723kv/html/informatie.html

    At the bottom you'll find an interactive Google map

    @Lorian

    Yeah I know it looks a little like he's puking :P, hopefully some people will have a laugh with it, always good promotion ;)

    Thanks for the comments everyone :P

  14. Semantics and separation of markup/presentation:

    Well it seems nobody explained to you what XHTML and CSS is all about so here you go :P:

    A simple website consists of three parts (I'm leaving out the other stuff since it doesn't apply to my explanation):

    - contents (text, images, links, etc.)

    - Markup (XHTML)

    - Presentation (CSS)

    The purpose of a website is to serve the content (which can be text, images, movies, links, etc.).

    The visitor has to view the content, which is done by using a browser, textbrowser, screenreader, etc (I'll use 'device').

    The problem is: how does the device know what to do with this content? How does it know x is a link, y is a paragraph and z is an image?

    That's where XHTML joins the party (the markup): it "marks" pieces of the contents to explain to the browser what its meaning is. So <a href="#">link</a> will tell the browser: "this is an URL pointing to # saying link" or <h1>Title</h1>: "This is a level 1 title saying Title".

    So what you have to do is using the XHTML text to explain what the content is. Of course this means you have to understand the meaning of most XHTML text AND the meaning of your content.

    This also means (which is very important) that XHTML has nothing to do with the looks or presentation of your website. So <h1> does not mean "Make this text big, bold and use that kind of font", or <ul> does not mean "Put some bullets before these things". Their meaning is simply "This is a level 1 title" and "This is an unordered list".

    Have a look here to learn the meaning of each XHTML tag (ignore those that are marked "deprecated' though):

    http://www.w3schools.com/tags/default.asp

    So how do you determine the looks of everything?

    That's the job of CSS. CSS adds style to your tags. With CSS you can determine how a h1 will look or a paragraph or whatever.

    You might notice however, when not applying CSS that certain elements are already styled (eg. a h1 tag is black, big, bold, and has margins).

    This is because your browser has an internal default CSS stylesheet that it applies to each tag.

    So the CSS you write will overwrite the default CSS of your browser.

    Applying the above explanation to your website:

    You don't need image maps for your navigation. Simply do something like this:

    XHTML:


    <ul id="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    ... and the other links
    </ul>

    CSS:


    #navigation {
    list-style:none;
    margin: 4px 8px;
    padding: 4px;
    height: 16px;
    border: 2px solid #333;
    border-width: 2px 0;
    text-align: center;
    }

    #navigation li {
    display: inline;
    padding: 0 4px;
    }

    #navigation a {
    font-size: 0.8em;
    color: #fff;
    text-decoration: none;
    }

    So that'll do the trick. It'll look like it looks now, but if it doesn't you can tweak it a little.

    You can also use your images instead. In that case set all the padding and margin you find in the css to 0px and replace the li's in the xhtml by:

    <li><a href="index.html"><img src="HG_Button_Home.jpg" alt="Home" /></a></li>

    About <h1>: No, it represents a level 1 title, meaning the main title of your page.

    BTW

    There's an interesting new article at Sitepoint about starting with XHTML and CSS:

    http://www.sitepoint.com/article/html-css-beginners-guide

  15. Nice site Morgan.

    One little tip though. There isn't a h1 in your code. A h1 is very important for search engine indexing and ranking since it's treated as a container for important keywords.

    To add one quickly you could put it anywhere (preferably somewhere at the top) and hide it:

    <h1 style="display:none">Morgan Ramsay, bla bla</h1>

    And replace bla bla by a very short descriptive text containing the keywords you wish to target.

  16. It's a good start but there's quite a bit that needs to be improved to make it a nice website.

    I'll comment on it by subject:

    Code:

    Good idea to use CSS but I notice you're missing the point a little. The bad thing is that many books and tutorials (and even my teachers at college) constantly say "use divs and css to replace tables, bla bla bla". That's nonsense really, that's only a tiny reason to use css.

    The main reason is separation of markup and presentation and especially that your markup has a meaning: the semantics.

    So, if you code your website think about the content first. Examples:

    - the main title that's only used once on your page: <h1>

    - a piece of text without a special meaning (paragraph): <p>

    - a list of links or text (eg. the navigation): <ul> with <li>'s inside

    - a word that's an abbreviation or acronym: <abbr> or <acronym>

    - something with no meaning at all or only used for presentation: <div> or <span>

    - an important word: <strong>

    etc.

    Applied to your code you'll need to change this:

    Your navigation should be in a list:

    <ul><li><a href="http://link">link</a><li> etc...</ul>

    Your logo (HistoryGuy's portfolio) has to be in a <h1>

    The "Welcome" title needs to be in a <h2>

    The text needs to be in one or more paragraphs (instead of a <h2>)

    Your footer text and copyright needs to be in a <p>

    Get rid of the <center> tags, it doesn't have a semantic meaning, it's presentational. So use css instead to center your website. You can do this by applying margin: 0 auto; to the main container div. If you don't have such a div make one and put everything that's in the body inside it.

    Also watch out with using those images. First of all, use the correct xhtml syntax (so close it with />) and use an alt attribute.

    There's also no point in using images for your navigation and footer since you can use text instead. But if you insist on using images at least use an alt attribute so people who disabled images or using an alternative browser (textbrowsers, screenreaders, some cellphones) know what the images mean (they can't see it but only know what's in the alt attribute).

    Now on to the graphics, structure and typography:

    Your font size is really too small, not everyone has such good eyes as us young people have :P. It's also a good idea not to use a serif font for smaller text as it gets too crowded on the screen. Use a sans-serif font like Arial for example.

    Use a lot more whitespace to give the visitor some breathing room. Look here for example: http://webs.hogent.be/~054723kv/index.htm

    You'll see that the distance between the text and the edges of the container is quite large.

    You can do this by for example applying padding: 16px; to the container of the text.

    Also use a larger line-height (the distance between two lines of text). This makes the text a lot more readable. Again, have a look at the Italia website for an example.

    This is done by applying line-height: ?px; to the container of the text, ? being the amount of pixels between each line.

    If you use large amounts of text divide it in small paragraphs, shorten it, or put subtitle between them (again see the Italia website for an example).

    The average visitor is extremely lazy and doesn't want to read large chunks of text. So making your text seem smaller will make them stay.

    Make your site a lot bigger. It's really very small now. Perhaps your resolution is very small so you haven't noticed. The best thing to do it to use a width larger than 650px for your site.

    Make it more colorful and use the right colors. The combination of darkgray, drakblue and white isn't really good. Have a look at the website galleries on the following sites for inspiration:

    http://www.cssbeauty.com/

    http://www.csszengarden.com/

    http://www.cssdrive.com/

    http://www.cssvault.com/

    Well that's it for now. Generally I suggest you browse the above sites every week for a few hours. It's a good way to gather inspiration and an eye for a good layout.

  17. Since my latest website is finished (Italia, see it here in its full glory: http://webs.hogent.be/~054723kv/, only works nice in FF though) I'm busy doing something new. This time it'll be a personal RSS reader.

    It'll have all the shiny AJAX stuff and similar features as a desktop RSS reader. So it won't only show you a website's current feed but you'll also be able to save the feed items permanently.

    I'm currently busy designing and coding the UI, so nothing that actually works to show yet. Since I'm not going to show the actual UI until it's in beta stage I'll let you have a sneak peak at by showing the login screen with the logo.

    Here it is:

    http://www.kvw.be/feedme/login.html

    Nothing special but what do you think of the logo? It's my first attempt at a real logo design, so not sure if it's ok.

    Oh and it doesn't look good in IE yet, no transparent PNG support :/

×
×
  • Create New...