A dozen ways to skin a cat

notarypublic · 04-13-2011, 07:54 PM

Alright, so here's the deal.

I'm trying to explore what all I'm able to do using CSS to get out of boring, box-model web designs. Once I realized you could use floats, relative positioning, and negative margins to pop things all over the page, suddenly things got a lot more interesting!

Right now, I'm trying to create a small, tabbed overhang that will sit on top of an image slideshow I'm working on in jquery. I want it to have a fancy diagonal corner, and I've tried to make it by abusing the border properties in CSS. Problem is.. I spent a lot of time playing with magic numbers to make it 'pixel perfect' and it still looks like crap.

How would you go about making something like this?

HTML file:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cognitive Aging Lab</title>
<link href="cognitive.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class = "wrapper">

	<div class = "header">
    	<h1><span class = "firstLetter">C</span>ognitive <span class = "firstLetter">A</span>ging <span class = "firstLetter">L</span>ab</h1>
        <div class = "overHang">
        	<span class = "leftArrow"></span><span class = "leftArrowTransparent"></span>
        	<a href = "#">Home</a> | <a href = "#">Contact</a>
        </div>
    </div>
    
    <div class = "slideshow">slide show
  </div>
    
    <div class = "navBar">navigation bar
    </div>
    
    <div class = "content">main content, or something lol
    </div>
    
    <div class = "footer">footerrrr</div>
</div>

</body>
</html>

CSS File:

HTML Code:

/* Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout Layout */

html{
	 height: 102%;
}

body {
	margin: 0;
	font-family: Helvetica,Verdana, Arial, sans-serif;
	font-size: .9em;
	line-height: 1.4em;
	padding: 0;
	text-align:center;
}

.wrapper {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
        margin-top: 10px;
	text-align:left;
}

.header {
	width: 100%;
	height: 100px;
        border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #000;    
}

.slideshow {
	width: 100%;
	height: 240px;
	background-color:#CCC;
}

.navBar {
	width: 100%;
	height: 30px;
	background-color:#363;
}

.content {
	width: 100%;
	height: 400px;
	background-color: #AAA;
}

.footer {
	width: 100%;
	height: 30px;
	background-color:#363;
}

/* Content Content Content Content Content Content Content Content */

h1 {
	font-size: 3.2em;
	color: #333;
	padding-left: 10px;
	padding-top: 30px;
}

.firstLetter {
        background-color: green;
}

.overHang {
	z-index: 10;
	float:right;
	position: relative;
	margin-top: 1.2em;
	padding-right: 5px;
	padding-bottom: 2px;
	background-color: #fff;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #000;        
}

.leftArrow {
         z-index: -1;
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 1em solid transparent;
	 border-top: 1.6em solid #000000;
	 left: -.95em;
	 position: absolute;
	 
	 *display: none;
}

.leftArrowTransparent {
        z-index: -1;
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 1em solid transparent;
	 border-top: 1.6em solid #fff;
	 left: -.9em;
	 position: absolute;
	 
	 *display: none;
}

Yes, the colors are that bad on purpose. I don't know what I really want to do with the design, yet. I'm also thinking of having a thin, repeating diagonal slash pattern instead of a solid line for the border on the bottom of the header. Different ideas welcome.

Phreaddee · 04-13-2011, 10:38 PM

maybe not what you are after but it might get you thinking
http://www.css3.info/preview/border-image/

heres the borders spec, have a read through it
http://www.w3.org/TR/2002/WD-css3-border-20021107/

you'll have some awesome borders in no time!

Phreaddee · 04-13-2011, 10:39 PM

http://www.w3.org/TR/css3-background/
is a more updated spec for backgrounds and borders

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

04-13-2011, 10:38 PM	#2
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,133	maybe not what you are after but it might get you thinking http://www.css3.info/preview/border-image/ heres the borders spec, have a read through it http://www.w3.org/TR/2002/WD-css3-border-20021107/ you'll have some awesome borders in no time!

04-13-2011, 10:39 PM	#3
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,133	http://www.w3.org/TR/css3-background/ is a more updated spec for backgrounds and borders