notarypublic
New Member
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:
CSS File:
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.
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:
<!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:
/* 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.
