Comic Discussion > QUESTIONABLE CONTENT

Optimized Homepage CSS

<< < (2/3) > >>

championofkhorne:
the only failure of this thread is that you are doing this for free

bicostp:
Not necessarily.

http://twitter.com/jephjacques/status/1267403869

The last bit is probably why nobody responded. :roll:

(And it only took about 10 minutes anyway.)

pwhodges:
Combining different styles that happen to be similar (e.g. left and right) is not necessarily entirely good CSS practice, though, because it may complicate future changes which don't choose to keep that symmetry.

Random832:

--- Code: ---[code]
a { text-decoration: underline; }
a:link, a:visited { color: #f60; }
a:hover { color: #00c6ff; }

--- End code ---

Now - it's poor practice to use just "a" or "a:hover", since this also applies to <a name=...> tags that aren't links. (this is what is happening when you go to some sites and entire paragraphs light up yellow/underlined when you mouse over them).


--- Code: ---a:link, a:visited { text-decoration: underline; color: #f60; }
a:link:hover, a:visited:hover { color: #00c6ff; }

--- End code ---

But since you are not using these - if you can guarantee you won't want to use them in the future, you can simply

--- Code: ---a { text-decoration: underline; color: #f60; }
a:hover { color: #00c6ff; }

--- End code ---

----

--- Code: ---#comicnav a { margin: 4px; font-size: 18px; }

--- End code ---

Narrowly scoped like this, it's ok if it can be guaranteed there will be no non-link anchors.

----

Other issues: there's no such thing as an ".inline-list ul", you need "ul.inline-list" to catch a <ul class="inline-list">. ".inline-list ul" would catch nested lists inside an .inline-list, but there aren't any of those, so removing for the sake of optimization. There are also no paragraphs inside inline-lists, so removing ".inline-list p".

body { min-width: 800px } has no effect since container { width: 800px } already stretches it

The "/1.5em" on body is the abbreviated line-height - line-height should really be unitless (1.5em binds the line spacing it to that font size rather than letting child elements change the font size and keep a sensible line spacing) but this has an effect on the spacing of the navigation bars that it'll take some time to figure out how to duplicate this with margin and padding properties. So leaving it alone.

I can see no reason for the clear: both on #comic img, since there are no floaters within its parent element - obviously this should be restored if this is something I did not forsee - what browser was this meant to address a problem with?

----


--- Code: ---body { color: #fff; background: #112b33; font: 11px/1.5em Helvetica,Arial,sans-serif; }
table { margin: 2px 0; }
img, table { border: 0; }
a:link, a:visited { text-decoration: underline; color: #f60; }
a:link:hover, a:visited:hover { color: #00c6ff; }
.inline-list { width: 100%; margin-top: 10px; padding: 0; }
.inline-list li { display: inline; padding: 10px; font-weight: bold; }
.inline-list a { margin: 4px; font-size: 24px; text-decoration: none; }
#comicnav { margin: 0; text-align: left; }
#comicnav a { margin: 4px; font-size: 18px; }
#container { width: 800px; margin: 0 auto; border: 4px #444 solid; border-width: 0 4px; background: #555; text-align: center; }
#comic { float: left; width: 600px; border: 4px #444 solid; border-width: 4px 4px 0 0; background: #444; }
#strip  { border: 1px solid #000; }
#side { float: right; width: 190px; text-align: left; }
#header { width: 800px; margin-bottom: 0; text-align: left;  }
#archive, #news { margin-right: 0; padding: 2px; background: #fff; color: #000; text-align: left; }
#adbar { width: 100%; height: 60px; overflow: hidden; padding: 0 0 2px; color: #666;  }
/* fixes for weird browsers */
.clear { clear: both; }
#comic img { display: block; }
--- End code ---
[/code]

----


--- Quote from: pwhodges on 03 Mar 2009, 12:33 ---Combining different styles that happen to be similar (e.g. left and right) is not necessarily entirely good CSS practice, though, because it may complicate future changes which don't choose to keep that symmetry.

--- End quote ---

It's no harder to change "0 4px" to "0 4px 0 10px" than it is to change "0 4px 0 4px" to "0 4px 0 10px".

pwhodges:

--- Quote from: Random832 on 03 Mar 2009, 12:40 ---It's no harder to change "0 4px" to "0 4px 0 10px" than it is to change "0 4px 0 4px" to "0 4px 0 10px".
--- End quote ---

Granted; I was thinking of something different and not quite relevant.  I should concentrate more.

Navigation

[0] Message Index

[#] Next page

[*] Previous page