The first is a discography page: nothing too fancy here, just a div with 5 left-floated divs containing images and paragraphs, separated by a br s assigned to clear: both. There's also a foot with some :hover rollover properties.
http://onepotcooking.com/nickmcmaster/class2/musician/disco.html
Two versions of a bio page:
The first is a fixed-width, float-based layout with a fixed footer. I'm having an issue with the footer: it's composed of float-left li s, which have a problem with stacking when you reside the browser window. I tried putting them in a fixed-height div, and that at least stopped it from stacking, but the individual list items still disappear and reappear in a way that doesn't look great.
http://onepotcooking.com/nickmcmaster/class2/musician/bio.html
Next we have a liquid version of the bio made with absolute positioning for the sidebar and the right-side picture. I wrapped the head in two div s to achieve the double-background effect--the graphics look a little wonky, especially when you slide over far enough for the right image to cover the left one, and here on window firefox the black of the right jpg doesn't quite match the black background, but i just wanted to be able to get the effect of an expandable header along with the layout.
http://onepotcooking.com/nickmcmaster/class2/musician/liquidbio.html
Next we have another discography page, ostensibly for singles: nothing too crazy here, just wanted to experiment with floats-within-floats. The gallery is floated right, allowing sidebar to populate the left field (it's just normal HTML). Then the image is floated right, allowing the "credits" textbox to slide up, (just like the two parent divs) and the layout is solidified with a clear:both br Below that, I've put a textbox with overflow: auto and enough text to prompt it to make a text box.
The other sidebar has several img's, ideally these would be links but i didn't bother. They are separated with br s, but interestingly, they don't need to be floated, since img is an inline element. Ideally, the big div to the right would be dynamic content that could be loaded by clicking on the img links, but I'm not there yet!
http://onepotcooking.com/nickmcmaster/class2/musician/singles.html
Last musician page is yet another discography gallery. I made this page to test out a technique I'd heard about for dynamic CSS. Sidebar is floated left, and then I made a gallery with floated img s, some of which are, sneakily, actually divs. These divs contain other divs, with an explanatory paragraph and a background image, that compose a pop-up window. The pop-up div is set with "visibility: hidden" and then a descendant selector is used to change that value to visible on :hover.
That command looks like this:
#makepop1:hover #pop1 {
visibility: visible;
}
Pretty fun! Sadly, a descendant selector seems to be the only way to have :hover trigger a change in property for an element other than the one you're hovering over. I guess javascript is necessary for such remote triggering! Also, I note that here on windows firefox the text is rendering a slightly different size, meaning my careful formatting to keep it within the bounds of the background image is wasted. I thought specifying the text size and padding in pixels would prevent that...I guess a developer's work is never done!http://onepotcooking.com/nickmcmaster/class2/musician/gallery.html
Lastly, and not really related, I made a version of the CSS Zen Garden. This is a page people are invited to modify, but only by changing the CSS--the HTML remains the same. Mine is pretty sad, especially given my lackluster graphic design, but note the header done with negative margins, the absolutely-positioned side bar (outside the wrapper div), and the fixed framing image. Also, I didn't really get a chance to finish this--the paragraphs and paragraph headings need spacing out. But I figured I'd post it anyway.
http://onepotcooking.com/nickmcmaster/class2/zengardenpage/zengarden.html
0 comments:
Post a Comment