My CSS - UPDATED!

[Lami[CZE]]

Updated, i think much better

Code: Select all

/* Dark style */

body {
  position: relative;
  margin: auto;
  width: 750px;
  background: #605050;
  color: #D7CECE;
}

#header {
  position: relative;
  margin: 0px auto;
  padding: 10px 0px 10px 0px;
  top: 10px;
  border-right: 5px solid #000000;
  border-top: 3px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

#main {
  position: absolute;
  width: 488px;
  left: 246px;
  top: 150px;
  padding: 5px;
  border-right: 5px solid #000000;
  border-top: 3px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

#menu {
  position: absolute;
  top: 150px;
  width: 230px;
  border-right: 5px solid #000000;
  border-top: 3px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

a {
  font-family: verdana, sans-serif;
  font-size: 0.8em;
  color: #D7CECE;
  text-decoration: underline;
  border-left: 3px solid #605050;
  border-right: 3px solid #605050;
}

a:hover {
  text-decoration: none;
  border-left: 3px solid #FF0000;
  border-right: 3px solid #FF0000;
}

ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

li.gb {
  list-style-position: inside;
  font-family: georgia, sans-serif;
  font-size: 0.8em;
  padding: 0px;
  margin: 0px;
  color: #CBC7C7;
}


li.type1 {
  list-style-position: inside;
  font-family: verdana, sans-serif;
  font-size: 0.8em;
  padding: 0px;
  margin: 0px;
}

li.type2 {
  list-style-position: outside;
  font-family: georgia, sans-serif;
  font-size: 0.9em;
  padding: 0px;
  margin: 0px;
}

H1 {
  font-family: tahoma, sans-serif;
  font-size: 1em;
  text-align: center;
  color: #D7CECE;
}

H2 {
  font-family: tahoma, sans-serif;
  font-size: 0.8em;
  text-align: center;
  color: #D7CECE;
}

table {
  margin: auto;
  border-collapse: collapse;
}

table#calendar {
  border-collapse: separate;
}

td {
  font-family: georgia, sans-serif;
  font-size: 0.7em;
  color: #FFFFFF;
  background-color: transparent;
  border: 1px solid #201C1C;
  padding: 3px;
}

td.gb {
  border: none;
  border: 1px solid #605050;
}

td.calendar-bad-month{
  background-color: transparent;
}

td#calendar-today{
  font-weight: bold;
  border: 1px solid #0000FF;
}

td.calendar-event{
  font-weight: bold;
  border: 1px solid #FF0000;
}

th {
  font-family: georgia, sans-serif;
  font-size: 0.7em;
  color: #D7CECE;
  background: transparent;
  border: 1px solid #201C1C;
  vertical-align: middle;
  padding-left: 3px;
  padding-right: 3px;
}

select {
  width: 75px;
  color: #FFFFFF;
  background: #000000;
  border: none;
}

input {
  background: transparent;
  width: 75px;
  color: #D7CECE;
  border: none;
}

input.gb {
  width: 300px;
}

img {
  background-color: transparent;
  border: none; 
}

textarea {
  background-color: transparent;
  color: #FFFFFF;
  border: none;
}

span.about {
color: #FFFFFF;
font-weight: bold;
border: #333333 1px solid;
font-family: verdana;
font-size: 0.8em;
}


You can see it at
http://3nigma.php5.cz[/url]

[ebba]

Great you posted this, Im gonna learn CSS soon and It is always good to see realy exampels. Thanks alot.

[nighthawk]

I'm a beginner at CSS, what's the difference between position: absolute; and position: relative; ?

[johneva]

Relative is eaxcly as it says it is reative to other sizes.

Meaning it depends on the size of somethig else to what it's position or size is.

Absolute positioning is generally a bad idea cos when you veiw it in diffrent res screens it still stays the same position as you told it to be but other things will have moved, so it looks a right mess.

[C@L]

not really john

if you set the padding to the same size as the width of the other columns then it should all expand and contract nicely

[johneva]

Yeah aslong as the width is fixed too.

But if you mix relative and fixed then your gonna have big problems and in my opinion fixed widths suck.

Sorry Razz I know you use fixed width for DEVPPL and your site rocks.

[webmaster]

Sorry Razz I know you use fixed width for DEVPPL and your site rocks.

As long as you do it right, there aren't any problems with fixed width. (I've just one more thing to fix, the forum can break the layout if you post long words without spaces, for example long URLs, but that will be fixed in the next version).

[knifeinback]

Yeah aslong as the width is fixed too.

But if you mix relative and fixed then your gonna have big problems and in my opinion fixed widths suck.

Sorry Razz I know you use fixed width for DEVPPL and your site rocks.

Why would you mix?
There is no need to if you have the brain to overcome the problem/s.
I was always taught not to mix, mainly for this reason I guess.

I always use absolute.

[knifeinback]

Sorry Razz I know you use fixed width for DEVPPL and your site rocks.

As long as you do it right, there aren't any problems with fixed width. (I've just one more thing to fix, the forum can break the layout if you post long words without spaces, for example long URLs, but that will be fixed in the next version).

hahaha, yes.. I noticed that a few times on the forum.
Try something like maximum-width