The Gang of Five

Beyond the Mysterious Beyond => Hobbies and Recreation => Computer and Electronics => Topic started by: Mumbling on April 07, 2010, 11:01:03 AM

Title: Need CSS help
Post by: Mumbling on April 07, 2010, 11:01:03 AM

So I've been working on the lbtrpg website for a while now (I want to get rid of webs, but I want to have the same quality website).

Thing is, while things look fine on my end my code does not seem to work for Internet explorer *grumble*. It looks really ugly, honestly!

Now I know my CSS is probably really messed up and doesn't look pretty at all to advanced CSS programmers, mind you I'm just a noob. (Really I am)

If you'd like to help me, feel free to download my progress (http://www.mediafire.com/?mr5ymcknnzj) so far.

So these are the points I'd like to work on:

Remove the border from the header image
Make sure that navigation and content and header don't cross each other
Add a footer (how should I do that?)
Reduce my text size (for content) to the same size as we got here on the GoF
Make the Navigation box the same length as the Content box

I'm open for critique... But even more I'm open for help.

Thanks! :lol:

Title: Need CSS help
Post by: landbeforetimelover on April 07, 2010, 04:08:57 PM

Ugh. I'm sorry Mumbling, but it would be easier to start over than salvage this. Heck, the entire website is inside the header! :bang Your tags aren't even closed and you're missing a lot of braces too. Here. I'll give you a nice basic layout that you can muck around with. It should work with all modern web browsers. I'll code it up now. It should only take 10 minutes or so.

Title: Need CSS help
Post by: landbeforetimelover on April 07, 2010, 04:37:32 PM

Here it is:

http://lbtserver.co.cc/UniversalUploadFolder/BasicLayout.zip (http://lbtserver.co.cc/UniversalUploadFolder/BasicLayout.zip)

CSS is much more advanced that you realize. The entire website depends on it. There are a ton of things you can do to make this layout better, and customization is pretty easy. Please let me know if you have any further questions.

Title: Need CSS help
Post by: landbeforetimelover on April 07, 2010, 11:18:54 PM

Here are a few tips you can wrap your mind around:

*If you don't specify the height of a div, it adjusts dynamically depending on the content

*Adding padding to layout divs can really screw you up depending on the circumstances. If you have strange, unexplained spaces, try turning off padding

*If the width of a div is not specified, it is automatically set to 100%.

*If the wrapper div is set to 80% and the header that's inside the wrapper is set to 100%, both divs will be 80% of the page depending on your screen resolution. The width of each div is dependent on its parent element. In this case, the parent element of the wrapper is the body, so by setting the width of the wrapper to 80%, it's relative to the body and everything inside the wrapper is relevant to the initial size of the wrapper.

*If you want to make your wrapper and absolute width (I'd recommend 950px if you want to do this), you'll have problems in IE if you set say the header (or any other div inside the wrapper that's supposed to span across it all the way) to 100%. To fix this, simply specify each element in pixels instead of percentages. IE doesn't mix pixels and percentages very well. It works great in all other browsers, but...*Grumble*

Title: Need CSS help
Post by: Mumbling on April 08, 2010, 01:15:04 AM

I told you I'm a noob and you do not have to tell me that its screwed up, i know. The fact that you've been working with it for most likely years and I only with 3 days taking what I get from tutorial sites makes it like this.

thanks anyway, i'll start working on it.

Edit: what's a wrapper?

Edit 2: why is there this huge empty space on the nav bar (on the left), can't seem to get that away either.

Title: Need CSS help
Post by: landbeforetimelover on April 08, 2010, 03:55:51 AM

Quote

what's a wrapper?

A wrapper is the master div in a CSS based layout. Think of it as just a large container. It contains the header, navbar, maincontent, sidebar, and footer as well as everything inside those divs.

Quote

why is there this huge empty space on the nav bar (on the left), can't seem to get that away either.

That's due to the UL. It has inherited indentation. To fix this, simply use relative positioning to get it to go over. Be aware that positioning in IE is different than all other browsers, so you might have to write a few IE exceptions. You'll have to have two style sheets; one for IE and one for every other browser. It sucks, but that's the only way to do it right now. This is how you use an IE exception:

Code: on


<!--[if IE]><link rel="stylesheet" href="style.css" type="text/css"><![endif]-->

There are many conditions you can use.  What conditions you use depends on several factors including what you want to edit and what your target audience will be (for example, if none of your target audience would be using IE 5.5, don't write exceptions for it).  Here are the conditions:

Condition is one of the following:

    * IE (Any version of IE)
    * lt IE version (Versions less than version)
    * lte IE version(Versions less than or equal to version)
    * IE version (Only version)
    * gte IE version (Versions greater than or equal to version)
    * gt IE version (Versions greater than version)

Here is a practical example of one of these conditions:

<!--[if lte IE 6]><link rel="stylesheet" href="style.css" type="text/css"><![endif]-->

This code says that if the user is using a browser that is less than or equal to IE6, load the following style sheet.

I spend roughly 10% of development time writing exceptions for IE, and that's considerably less than most people have to do. It's mainly because I code everything PROPERLY, so the number of exceptions I need to write is minimal. This is the head and a little of the body of TheLandBeforeTime.org. The code is protected so you can't really see it, so I'll post some of it here:

Code: on
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="robots" content="index, follow"/> <meta name="description" content="Welcome to The Land Before Time Funsite!."/> <meta name="keywords" content="land before time, littlefoot, cera, tv episodes, tv series"/> <title>TheLandBeforeTime.org</title> <link rel="stylesheet" type="text/css" href="style.css"/>  <script type="text/javascript" src="jquery_min.js"></script> <script type="text/javascript" src="fadeslideshow.js"></script> <script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow dimensions: [940, 175], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["images/bannerslides/1.png", "tvepisodes.html"], ["images/bannerslides/2.png", "icons.html"], ["images/bannerslides/3.png", "coloringpages.html"], ["images/bannerslides/4.png", "desktopbackgrounds.html"]//<--no trailing comma after very last image element! ], displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false}, persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "" }) var mygallery=new fadeSlideShow({ wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow dimensions: [200, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["images/sidethumbs/1.jpg", "photos.html"], ["images/sidethumbs/2.jpg", "photos.html"], ["images/sidethumbs/3.jpg", "photos.html"], ["images/sidethumbs/4.jpg", "photos.html"], ["images/sidethumbs/5.jpg", "photos.html"]//<--no trailing comma after very last image element! ], displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false}, persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "" }) </script> </head> <body>

As you can see, the IE exception code can be used inside and outside of the header. TheLandBeforeTime.org also has an separate style sheet for IE. Be aware that you don't need to copy everything from the default style sheet to the IE style sheet. All you need to do is respecify the classes and id's that it has problems with.