Talon's Blog

Back to Talon's Blog

Yaaay, Finally a Part 2 is coming up here. this will be more intresting because this time we won't just look at our list but change something too. Now move your ass to the Advanced CSS editor and look at the pre given classes.

Color
one of the most important things are the Colors you choose.
Most colors are showen with HEX code like #000000. HEX code is a little difficult to understand, you can also write down somthing like "yellow" or "blue" wich makes you not being able too choose between a great span of colors. Another option is using google to find one of thousands Hexadecimal Color Charts and use these to choose your color

you can Color following things:

• - Text - color:#000000; (would make your text black)
• - Background - background-color:black; (would make your background black)
  
• - Border - border-color:#FFFFFF; (will make your border white)
  

Borders
Most just don't use them but you can do great things with those little freaks. You can fancy the flow of the line up by setting a style. following could be used like border-style:solid; wich makes a solid line. other methodes are:

• None - border did never existed
  
• Hidden - won't show the border but leaves the space
• Dotted - well.. dots I suppose...
• Dashed - you can guess..
• Double - makes 2 borderlines with some space beween them.
• Groove - makes a bevel effect
• Ridge - sameas groove butupside down
• Inset - kinda shadow-border effect
• Outset - Inset but then outset >_>'

besides A style your border can be different width. Example for a 12pixel wide border would be: border-width:12px;

I'll skip the Outline chapter but before I end this border part another good thing to know about borders. You can give every side of the border his own style, like:

border-left-style:dotted;
border-top-style:double;
border-right-width:2px;
border-color:#33FF00 #5522BB;

Yes the last one is strange. The border color has 2 colors...
CCS make with 2 colors, style, width or whatever given the two attributes to one attribute for the horizontal borders (top and bottom) and one for the vertical ones (left and right). It goes much further but that maybe in an other tutorial (part 3 maybe).

Position of your list
Oh many are waiting for this chapter. I should finally write it.

The whole list we got here on MAL is one DIV wich has not a class but a ID. it's called in your CSS editor div#list_surround. actually you can dropp the div in front.. it doesn't change something and is just unnessesary.
As you can see we're editing a Div and unfortunaly Div hasn't the align within it.
an other solution to move you list to the center is made by Xinil by giving the horizontal margin an auto attribute. this makes the margin on both sides to max wich centers the list.

margin:0px auto ; in the script

To align it left you can just drop the auto.
To align it right you must change it to margin-left: auto;

I prefend to leave it in the middle and just place from the middle the list in one direction.
For this we gonna use the power of moving divs. to Activate this we just have to add to our ID a Position mode. you can Choose between Absolute, Relative, Fixed and Static. normal it's always Static. We need Relative because we want to move our list from the current position.

position:relative;

and then.. how to move? ha easy just say left or right and give it something like 100 pixel.

left: 100px; // will move you list 100px to the left from the center
right: 100px; // will move you list 100px to the right from the center

ah damn that is easy like copy and pasting this..

div#list_surround
{
margin:0px auto ;
position:relative;
right:100px;
}

okay next chapter..

Adding External Images
You may have seen some list mit individual headers for the Watching, complete, etc headers. Those are Images wich are background of every div holding them.

scroll down in your CSS editor and you will find the classes for the headers of every cathegories. you can simply add in those classes: background-image:url(http:www.yourdomain.com/youimage.jpg); and it will add you image to it.
to get some more controll over them you can give other atributes to the background like background-repeat:no-repeat; or align it with background-position:center top; I think you can figur things out yourself..

Little Tricks
Some people say I cheat.. well true... but you can cheat too!~ tehehe..

those are my little tricks to get some effects:

1. to get a windowed list add a height and overflow:auto; to #list_surround.

   #list_surround
   {
   margin:0px auto;
   width:600px;
   height:400px;
   overflow:auto;
   }

2. to rip out your list header and links give it simply a position:fixed; won't work for IE6.0 but screw IE...

   .header_al
   {
   position:fixed;
   margin:0px auto;
   }
   .header_al_links
   {
   position:fixed;
   margin:0px auto;
   top:20px;
   }
   

3. Use for Images PNG with tranparency.
   It just looks better and I'll make another blog to tell how those are made.
4. When I think about more tips I can add them, currently working on a system to place external Images begin a table~

Okay I'm to confused now to sort the text, maybe layer but comments about everything that is unclear or just wrong are wecome.

Talon