ibneko: (Default)
I was looking at http://orderedlist.com/, trying to see how the site was put together. There's an interesting trick: his/her menu bar is set up in a rather interesting way, in the same way yahoo (and some other sites) load up one entire sheet of mini icons, then show the correct one as required.

It puzzled me at first, because it wasn't text since you couldn't select the letters, and it didn't act like an image (you couldn't drag the image elsewhere).

Here's his nav bar:

And here's the relevant code:
#header ul {width:544px; height:30px; top:35px; right:0; list-style-type:none; background:url(../images/nav.gif) no-repeat; position:absolute;}
#header li {float:left;}
#header ul a {position:absolute; height:30px; top:0; text-indent:-9999px; overflow:hidden; background:url(../images/nav.gif) no-repeat top left;}
#header #hom a {width:53px; left:0; background-position:0 0;}
#header #art a {width:73px; left:53px; background-position:-53px 0;}
#header #por a {width:87px; left:126px; background-position:-126px 0;}
#header #hom a:hover {background-position:0 -30px;}
#header #art a:hover {background-position:-53px -30px;}
#header #por a:hover {background-position:-126px -30px;}
#body_hom #header #hom a {background-position:0 -60px;}
#body_art #header #art a {background-position:-53px -60px;}
#body_por #header #por a {background-position:-126px -60px;}

So essentially, when you hover over it, it'll change the background position to a -30px, which would load the "hilighted" words. Spiffy.

CSS, part 3

Jan. 6th, 2006 11:51 pm
ibneko: (Default)
So the conclusion I arrived at?

Leave most of the work intact. The icky parts that look better in tables are displayed as tables by default. However, if you want CSS, a simple ?style=CSS will enable CSS for you.

It's probably a waste of space, but this means that if, before hell freezes over, someone actually manages to come up with browsers that support CSS correctly all around, it'll look perfect.

Right now, my focus is on patching any and all security holes and converting the coldfusion stuff to PHP. Most of it's easy, to the point where I could probably write up a perl script to parse coldfusion, write it out to PHP, and be done with it. But the problem with that is, stuff's going to get missed, and then I'll have to track it down later. But CSS pretty-fying will have to wait. I've got a week left before all hell breaks loose again.

Le sigh. I'm thinking of resigning my position. This probably looks pretty good on my transcript, but... I dunno. I'm not going to have the time once school starts, to make sure everything runs right and stuff. I've promised myself that I would try (even harder, yeah, I know I said this before. I know.) for straight A's. That it's possible. Even for someone like me, who sucks at taking exams, and is insanely careless when it comes to... just about everything. 'cept coding, which I can play perfectionist at, if I understand the syntax and language.

Heck, I'm not even sure I'll be able to keep the job at T.I.S. Brian (Bryan?) said he'd welcome me back, but... I dunno. I'm afraid I might be giving too much of my time to non-school things.. that that's why I'm failing.

On the brighter side, senpai told me to stop worrying. Posting that locked, so I don't forget. =^^= Senpai, I love you. Even if you probably don't read this.
ibneko: (Default)
Well, so it's possible. Here's the example:
Original page (source) is http://www.keithjbrown.co.uk/vworks/design/design_2.shtml, where he shows how to translate a page from tables to CSS.

However, I had to go a further step to add a variable min-height, based off of the upcoming events box... if there were more events, we add more to the min-height. Less events, less min-height.

Now the annoying thing is, now my page renders completely differently on every single browser. Close enough to what I want for most, but the variations are quite.. iffy. I think the issue here is the fact that I used the 'em' value, instead of pixels, as I had been doing. Why? Because min-height would be pointless if someone changed the size of the font, which you can easily do on Safari, and that breaks it like a little girl breaking her doll by dropping it off a truck on the beltway.

...Granted, even with using 'em' instead of 'px', increasing/decreasing the size more than once will break the page. Or at least make it look ugly.

So maybe I'll stick with pixels.

Also, another funky thing: Safari adds random spacing above and below my main chunk. I can't figure out why. It's caused by the use of 'p' tags, but I need p tags! Having no 'p' tags = de ugly. It doesn't happen in other browsers, so I don't see why it should be happening in Safari. WTFmuch?


Yeah, OmniWeb doesn't understand min-height at all.

Opera has left-side-bar displaying issues: notably, the repeating background arrow doesn't repeat, and the entire thing is offset to the left by 8 or so pixels.


You know, maybe I should just give up and go back to tables. They're ugly, codewise, but they seem to work. Very well, actually.

You know, I think I'll go to bed. And we'll see from there. XP I hate scrapping work, and making the past, oh, several days worthless, but... since tables work so much better (it renders the same way, more or less in just about every single browser... :P fuck that, ne?)
ibneko: (Default)
In my attempts to convert the Engineering Council website (http://ec.uiuc.edu) from coldfusion to PHP, I've also taken it upon myself to not use tables, and convert it over to pure CSS.

This, I find, is somewhat of a pain in the ass. While tables are clunky, and tend to uglify code, CSS isn't implemented in the same way for all browsers.

And that annoys me. Only ONE browser, out of the five I keep on my laptop, handles the div the way I want it to.

Here's what I'm trying to do:
See the rather ugly peach-colored navigation bar at the left? And how there's that extending empty chunk at the bottom (it extends, trust me; just try the program/events link.), 'cause it's based on a table, and that's the result of the table row-height extending?

I can't replicate that with CSS. I'm pretty sure I'm doing it right, but it only displays perfectly in OmniWeb, of ALL THINGS. Opera probably handles it correctly, but I have a bug elsewhere that's causing it to offshift a bit too far upwards.

Here's how I'm doing it:
<div class="main-area-wrapper">
<div class="left-filler">
<div class="main">
<?php include "main.php"; ?>

CSS code:

.main-area-wrapper {
/* Dummy wrap */
margin: 1px;
width: 160px;
height: 100%;
background-color: #ffcc99;
.main {
position: absolute;
left: 0px;
top: 71px;
width: 575px;
margin-left: 170px;

Essentially, the idea here is that, due to the fact that stuff is wrapped in the main-area-wrapper, this will expand as far as there is text, thereby stretching the left-filler so that it matches the height of the main content area.

However, most browsers read the height:100% in the left-filler incorrectly, and stretch that to 100% of the browser window, which I DON'T want. XP

So I have two options. Keep poking around to see if there's some sort of CSS hack to work this out, code up a javascript hack to calculate the size of the text, and insert that in, or use the faux columns method (where you have a vertically repeating background).

None of those methods are particularly appealing... Why the fuck can't things be implemented correctly?!?

Expand Cut Tags

No cut tags


ibneko: (Default)


RSS Atom

Most Popular Tags

Style Credit

Page generated May. 25th, 2017 08:56 am
Powered by Dreamwidth Studios
November 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 2016