Yasmeen Ghauri II

Jan 23, 2004 by Aleksandar Vacić 6 minute read

In the previous post, I explained the “how and why” for the site structure.

This one is about adding the life. Doors, windows and coloured walls.

Doors and windows…

Motions section is dynamically generated. Photos are divided in directories starting with designated characters, denoting the rooms: “c_” for Creators, “m_” for Magazines, “h_” for Houses and “x_” for Other. I wanted to ease myself the updating process - simply upload new photos and they will appear in the menu. Problem is that names of the creators should be written with spaces and single quotes, and such directory names are problematic for certain browsers. I needed 1-1 translation to replace directory names with real names, and associative arrays are the natural data structure.

Since the server-side technology I use is ASP/VBScript, which does not have intrinsic associative arrays, I resorted to Dictionary object. ASP’s FileSystemObject reads the directories and files and switch directory names with actual names, which are kept in the dictionary.

To break the box, I added some additional pieces of text or info. Each section has a punch line, from Yasmeen’s lips or some other people, placed as pull-quotes. I planned some more features like this, but had no time to implement them. For instance, if I ever get the forum up, I could place the latest thread as another side box.

This covers the site essence.

…and some paint. A lot of it.

Yasmeen in shiny dress Yasmeen is one of the most beautiful women of all time, and she deserves strikingly good web site. That was my first prerogative, and that is why some images are 50k or more. I was not, nor will be, in the mood to compromise quality.

I gave my self a lot of degrees of freedom, so I intentionally placed several styling hooks. First layer consists of global and bottom div. Inside of global div, I have top div that holds the header with site-wide navigation, main div which holds the actual content and few other divs where needed. Also, few paragraphs have ids and classes purely to act as hook.

Text size is defined only in body style rule, as 13px. All other rules, if they need to change the font-size property do that by %. That means that when text-size changes, either using the script like here (in Control Panel) or with browser option, all sizes will change proportionally.

All image replacements are done using LIR. Classic example is the H1 title, with added fix for IE5/Mac which apparently ignores overflow:hidden when element is floated. Opera 6 is troubled with the same ache, and since not a single Opera user accessed the web site in over two years, I decided to let it be and spare myself of the over-complicated style sheet.

I experimented a lot with images for global navigation, but in the end simply used the beautiful Trebuchet MS font. Drop-effect, when item is hovered, is another classic: make the item relatively positioned, and then move the bottom edge.

Content

Central part of the page is the main div. Its left margin is set to 219px, value that fits the home page picture. This value is dependent on the background-image, placed in the global div, like this (example for home page):

#global {
	background-image: url(images/global_bg.gif);
	background-repeat: no-repeat;
	padding: 0;
	margin: 0;
	min-height: 497px;
}

Setting left margin for main div leaves room for this image. Each section has its own image to place.

This can be extended further. You can use server-side script to dynamically set the semi-random class for global div and define several images as various classes, thus having random-image-on-loading effect.

Minimum height is again set according to the background-image. Now, since IE does not support this property, I could ran into trouble if the content is too short: image will be cut off, and absolutely positioned boxes would overlap with bottom line. There are solutions for this, but I had IE crashing sometimes - not sure was it because of this or something else. Back and forth…I decided to ignore this. It’s not that big of a problem as long as the pages function properly and all of the content is accessible.

Throughout the site, second-level heading is usually removed. I already have the visual clue for the current page in the top navigation so I saved the space for actual content.

Pull-quote is absolutely positioned, on various locations on the page. Starting and ending quotes are enclosed in spans which are given ids, as hooks for those fancy image quotes. In the context of the mentioned extension above, and having in mind that pull-quote p is structurally inside the global div, you can dynamically position it based on the chosen image for the section. As with rollovers, power of the CSS frees us from scripting something like this.

Motions

Sub-navigation in this section is used to create the illusion of tabs, as well as giving a visual header at the same time. Sub-section heading is thus removed. When you click on particular item, the corresponding div is shown, while all other are hidden. This is done with the little script help.

I was experimenting with the ways to do this without script, and use the subs-section headers (interviews, runway) as clickable element, but I couldn’t find the style combination that will work in all browsers. Maybe some other slow day…

All that this script does is replace the class name for the clicked link to this:

#menuMot a.current {
	font-size: 150%;
	font-weight: bold;
	font-style: oblique;
	color: #000;
	background-color: #ededeb;
	bottom: -12px;
	position: relative;
}

To be able to move it, we change the position property to relative, then move it 12px down, and enhance the text size to give the visual clue about the current sub-section. Yes, the same thing as for the top navigation.

Walls

There are few nice features here. First one is that main div has width:auto, enabling us to use the full browser width to display the thumbnails. Change browser window size and see how image rows reflow to fit. You can’t do that with tables.

Since this page has a lot (and I mean a lot) of graphics, there is no left-hand photo. I used that space to keep the settings form, that lets you choose the number of thumbs per page. If you have cable or something faster, just enter 1000 and have all of them on one page. From there, is a short way to download all the images at once. :)

Bottom line

Bottom div consists of single paragraph holding the copyright line. It sounds strange to have two block elements for a single line of text, but I plan to add serbian translation sometime in the future, and this would be the place to keep language switcher.

This concludes the style explanations. I hope you’ll find this useful, as I tried to outline the design process, the way I saw it.