Z
zac.gorak
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Redesign for twodayslate.com</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
font-family: Verdana, Arial, Helvetica, 'Trebuchet MS', sans-serif;
}
body {
height: 100%;
background: #1f3f9f url(http://images.twodayslate.com/design/
background.gif) repeat-x top;
}
#container {
margin: 0 auto;
margin-top: 30px;
width: 85%;
min-width: 770px;
max-width: 1900px;
}
#header {
margin-bottom: -300px;
background: none;
display: block;
margin-left: -30px;
vertical-align: center;
z-index: 1000;
}
/*NAVIGATION!*/
/* Nav=35, sub=20 */
/* the styling */
#navigationdiv {
float:right;
width:100%;
height:60px;
background:#315d9d url(http://images.twodayslate.com/design/
navigationend.png) no-repeat right;
font-size: 18px;
margin-top: -100px;
z-index: 200;
}
#navigationdiv .select, #navigationdiv .current {
margin: 0;
padding:0;
list-style:none;
display:block;
line-height: 40px;
}
#navigationdiv .sub {
margin:0;
padding:0;
list-style:none;
}
#navigationdiv li {
display:block;
float:left;
margin:0;
padding:0;
position:relative;
z-index:100;
}
#navigationdiv .current li {
z-index:50;
line-height: 35px;
}
#navigationdiv .select a,
#navigationdiv .current a { /* select main */
display:block;
height:100%;
float:left;
width: 100px;
padding:0 0 0 9px; /*Important*/
text-decoration:none;
font-weight:bold;
line-height:35px;
white-space:nowrap;
color: #f7f9ff;
}
/* calculate the required widths of the top level */
#navigationdiv .one a {width:3.1em;}
#navigationdiv .two a {width:2.3em;}
#navigationdiv .three a {width:2.3em;}
#navigationdiv .four a {width:9em;}
#navigationdiv .select a b,
#navigationdiv .current a b {
height:100%;
display:block;
padding:0px;
color: #f7f9ff;
line-height: 40px;
}
#navigationdiv .sub {
display:none;
line-height: 20px;
font-size: 14px;
}
#navigationdiv .select a:hover b {
color:#b3c4ec;
cursor
ointer;
height: 100%;
}
#navigationdiv .current a {
background-position:0 -150px;
}
#navigationdiv .current a b {
background-position:100% -150px;
color:#8fa5da;
line-height: 40px;
}
#navigationdiv .sub li a:hover,
#navigationdiv .select a:hover .sub li a:hover,
#navigationdiv .select li:hover .sub li a:hover {
background:#315d9d;
color:#bdccec;
}
#navigationdiv .current .sub .current_sub a,
#navigationdiv .current .sub a:hover {
background:#315d9d;
color: #bdccec;
}
#navigationdiv .current .sub,
#navigationdiv .select a:hover .sub,
#navigationdiv .select li:hover .sub {
display:block;
position:absolute;
width:700px;
top: 40px;
background:#315d9d;
}
* html #navigationdiv .current .sub, * html #navv .select a:hover .sub
{
margin-top:0;
margin-t\op:1px;
}
#navigationdiv .current .sub li a,
#navigationdiv .select a:hover .sub li a,
#navigationdiv .select li:hover .sub li a {
display:inline;
background:#315d9d;
width:auto;
white-space:nowrap;
font-weight:normal;
font-size:0.9em;
height:20px;
line-height:20px;
}
#navigationdiv .select a:hover,
#navigationdiv li:hover a {
background-position:0% -150px;
}
#navigationdiv .select a:hover b,
#navigationdiv .select li:hover a b {
background-position:100% -150px;
color:#a8b8df;
}
/* calculate the left edge position of each sub level */
#navigationdiv .one .sub {left:0;}
#navigationdiv .two .sub {left:-3.8em; margin-left:-9px;}
#navigationdiv .three .sub {left:-6.9em; margin-left:-18px;}
* html #navigationdiv .three .sub {margin-left:-9px; marg\in-
left:-18px;}
#navigationdiv .four .sub {left:-38.5em; margin-left:-27px;}
* html #navigationdiv .four .sub {margin-left:-18px; marg\in-
left:-27px;}
/* End Navigation*/
#topcorners {
background: url(http://images.twodayslate.com/design/
toprightcornerlong.png);
background-position: right;
height: 12px;
margin-left: 13px;
}
#topleftcorner {
background: url(http://images.twodayslate.com/design/
leftopcorner.png) no-repeat;
display: block;
height: 12px;
width: 10px;
margin-left: -7px;
}
#contentcontainer {
background: url(http://images.twodayslate.com/design/
rightsidecontentfade.png) repeat-y;
background-position: right;
padding-right: 8px;
margin-top: 4px;
}
#content {
background: #FFF;
margin-left: 6px;
margin-top: -4px;
margin-bottom: -3px;
padding: 10px;
padding-top: 100px;
}
#bottomcorners {
background: url(http://images.twodayslate.com/design/
bottomrightcornerlong.png);
background-position: right;
height: 16px;
margin-right: 2px;
margin-left: 19px;
}
#bottomleftcorner {
background: url(http://images.twodayslate.com/design/
bottomleftcorner.png) no-repeat;
float: left;
display: block;
height: 16px;
width: 13px;
margin-left: -13px;
margin-top: -1px;
}
#footer {
margin: 0 auto;
margin-top: 5px;
color: #8f9ecb;
text-align: center;
margin-bottom: 8px;
font-size: .9em;
}
#footer a {
color: #8f9ecb;
text-decoration: none;
font-size: .9em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://images.twodayslate.com/design/logo.png" style="z-
index: 300;"/>
<!-- Start Naviation -->
<div id="navigationdiv">
<ul class="current one"><li><a href="http://twodayslate.com"><b>Index</
b></a>
<ul class="sub">
<li><a href="#">About</a></li>
<li><a href="#">Geek?</a></li>
<li><a href="/x.php">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
<ul class="select two"><li><a href="doors_drop_line.html?
current=two&sub=none"><b>Blog</b></a>
<ul class="sub">
<li><a href="doors_drop_line.html?current=two&sub=a">Newest</a></
li>
<li><a href="doors_drop_line.html?current=two&sub=b">Catagories</
a></li>
<li><a href="doors_drop_line.html?current=two&sub=c">RSS</a></li>
</ul>
</li>
</ul>
<ul class="select three"><li><a href="doors_drop_line.html?
current=three&sub=none"><b>Forums</b></a>
<ul class="sub">
<li><a href="doors_drop_line.html?current=three&sub=a">Profile</
a></li>
<li><a href="doors_drop_line.html?current=three&sub=b">Members</
a></li>
<li><a href="doors_drop_line.html?current=three&sub=c">Log-in/
Register</a></li>
</ul>
</li>
</ul>
</div>
<!-- end Navigation -->
</div>
<div id="topcorners">
<div id="topleftcorner"> </div>
</div><!-- end topcorners-->
<div id="contentcontainer">
<div id="content">
Background color for content: white<br />What I am going for the
sidebar:<br />
<a href="http://images.twodayslate.com/design/over800.gif">When width
is over 800px</a> | <a href="http://images.twodayslate.com/design/
lessthan800.gif"><br />When width is under 800px</a><br />Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Phasellus consectetuer,
lacus sit amet sollicitudin commodo, mauris diam fermentum dolor, sed
accumsan pede est quis lacus. Pellentesque dignissim massa at ante.
Phasellus vitae felis. Quisque varius facilisis augue. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Quisque iaculis leo a
eros. Phasellus venenatis ante ullamcorper odio. Nunc adipiscing
sodales nibh. Nullam luctus tempor tortor. Donec eu est. Quisque
accumsan velit at ante. Integer risus. Curabitur erat mi, tristique
ut, molestie sed, facilisis tincidunt, pede.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec a pede. Praesent vel ligula a pede
imperdiet pulvinar. Aliquam non sapien. Vivamus nibh odio, fringilla
in, dictum in, sagittis vitae, eros. Nulla eu eros. Praesent a nisl a
nibh mollis ullamcorper. Proin tristique. Nulla accumsan felis at
odio. Suspendisse sit amet risus nec lectus ornare auctor. Sed quis
est. Aliquam erat volutpat. Integer suscipit sem et eros. Duis et dui
eget odio consectetuer egestas. Nunc augue nisi, mollis ut, aliquet
vitae, nonummy ac, urna. Cras in libero.
Nam vel elit. Sed sed massa. Quisque sollicitudin euismod eros.
Curabitur laoreet egestas metus. Mauris sagittis. Sed erat nisl,
facilisis quis, auctor eu, placerat a, purus. Curabitur id magna sit
amet magna tristique viverra. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Sed hendrerit, libero
sed suscipit laoreet, pede pede convallis erat, ut viverra magna
turpis luctus nisl. Nulla vel orci ac leo facilisis egestas. Fusce at
enim.
Curabitur consequat nulla gravida erat. Curabitur mi. Mauris congue
ipsum quis tellus. Suspendisse semper elementum libero. Nunc velit.
Donec faucibus vestibulum nisl. Nulla semper nisl eu neque. Nulla eget
tellus. Nullam felis leo, faucibus at, sodales non, facilisis ac,
augue. In vitae orci nec nulla tempor tristique. Aliquam consectetuer
erat. Vivamus in orci sed lectus tempor aliquam. Duis consectetuer
interdum mi. Integer blandit, arcu sed sollicitudin dignissim, ligula
odio porttitor augue, at mollis quam odio ornare diam. Etiam pharetra
sollicitudin enim. Phasellus quis diam sed risus lacinia faucibus.
In dictum, erat quis mattis vehicula, lorem lorem vestibulum dolor,
eget adipiscing ipsum velit tempus leo. Duis faucibus porta odio.
Morbi neque. Fusce convallis libero eget sapien. Aliquam nec justo.
Integer ac nunc a odio molestie ullamcorper. Praesent a nibh sed massa
vulputate varius. Duis lacus. Vivamus euismod ultrices pede. In luctus
malesuada lorem.
</div><!-- end content-->
</div><!-- end contentcontainer -->
<div id="bottomcorners">
<div id="bottomleftcorner"> </div>
</div><!-- end topcorners-->
</div><!-- end container-->
<div id="footer">
<a href="#">linkage</a> | <a href="#">linkage</a> | <a
href="#">linkage</a>
</div> <!-- end footer-->
</body>
</html>
http://twodayslate.com/test/test.php
You can probably get the idea of what I want to do by just looking at
the site and the two images on the site. I am having a hard time
positioning the logo and nav. (This is were z-index might come in
hand?)
Don't worry about styling the nav I will do that later, more worried
about the position.
After we do that I would like the text to wrap around the logo a bit.
I am sure there is something online already that will help me with
that.
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Redesign for twodayslate.com</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
font-family: Verdana, Arial, Helvetica, 'Trebuchet MS', sans-serif;
}
body {
height: 100%;
background: #1f3f9f url(http://images.twodayslate.com/design/
background.gif) repeat-x top;
}
#container {
margin: 0 auto;
margin-top: 30px;
width: 85%;
min-width: 770px;
max-width: 1900px;
}
#header {
margin-bottom: -300px;
background: none;
display: block;
margin-left: -30px;
vertical-align: center;
z-index: 1000;
}
/*NAVIGATION!*/
/* Nav=35, sub=20 */
/* the styling */
#navigationdiv {
float:right;
width:100%;
height:60px;
background:#315d9d url(http://images.twodayslate.com/design/
navigationend.png) no-repeat right;
font-size: 18px;
margin-top: -100px;
z-index: 200;
}
#navigationdiv .select, #navigationdiv .current {
margin: 0;
padding:0;
list-style:none;
display:block;
line-height: 40px;
}
#navigationdiv .sub {
margin:0;
padding:0;
list-style:none;
}
#navigationdiv li {
display:block;
float:left;
margin:0;
padding:0;
position:relative;
z-index:100;
}
#navigationdiv .current li {
z-index:50;
line-height: 35px;
}
#navigationdiv .select a,
#navigationdiv .current a { /* select main */
display:block;
height:100%;
float:left;
width: 100px;
padding:0 0 0 9px; /*Important*/
text-decoration:none;
font-weight:bold;
line-height:35px;
white-space:nowrap;
color: #f7f9ff;
}
/* calculate the required widths of the top level */
#navigationdiv .one a {width:3.1em;}
#navigationdiv .two a {width:2.3em;}
#navigationdiv .three a {width:2.3em;}
#navigationdiv .four a {width:9em;}
#navigationdiv .select a b,
#navigationdiv .current a b {
height:100%;
display:block;
padding:0px;
color: #f7f9ff;
line-height: 40px;
}
#navigationdiv .sub {
display:none;
line-height: 20px;
font-size: 14px;
}
#navigationdiv .select a:hover b {
color:#b3c4ec;
cursor
ointer;height: 100%;
}
#navigationdiv .current a {
background-position:0 -150px;
}
#navigationdiv .current a b {
background-position:100% -150px;
color:#8fa5da;
line-height: 40px;
}
#navigationdiv .sub li a:hover,
#navigationdiv .select a:hover .sub li a:hover,
#navigationdiv .select li:hover .sub li a:hover {
background:#315d9d;
color:#bdccec;
}
#navigationdiv .current .sub .current_sub a,
#navigationdiv .current .sub a:hover {
background:#315d9d;
color: #bdccec;
}
#navigationdiv .current .sub,
#navigationdiv .select a:hover .sub,
#navigationdiv .select li:hover .sub {
display:block;
position:absolute;
width:700px;
top: 40px;
background:#315d9d;
}
* html #navigationdiv .current .sub, * html #navv .select a:hover .sub
{
margin-top:0;
margin-t\op:1px;
}
#navigationdiv .current .sub li a,
#navigationdiv .select a:hover .sub li a,
#navigationdiv .select li:hover .sub li a {
display:inline;
background:#315d9d;
width:auto;
white-space:nowrap;
font-weight:normal;
font-size:0.9em;
height:20px;
line-height:20px;
}
#navigationdiv .select a:hover,
#navigationdiv li:hover a {
background-position:0% -150px;
}
#navigationdiv .select a:hover b,
#navigationdiv .select li:hover a b {
background-position:100% -150px;
color:#a8b8df;
}
/* calculate the left edge position of each sub level */
#navigationdiv .one .sub {left:0;}
#navigationdiv .two .sub {left:-3.8em; margin-left:-9px;}
#navigationdiv .three .sub {left:-6.9em; margin-left:-18px;}
* html #navigationdiv .three .sub {margin-left:-9px; marg\in-
left:-18px;}
#navigationdiv .four .sub {left:-38.5em; margin-left:-27px;}
* html #navigationdiv .four .sub {margin-left:-18px; marg\in-
left:-27px;}
/* End Navigation*/
#topcorners {
background: url(http://images.twodayslate.com/design/
toprightcornerlong.png);
background-position: right;
height: 12px;
margin-left: 13px;
}
#topleftcorner {
background: url(http://images.twodayslate.com/design/
leftopcorner.png) no-repeat;
display: block;
height: 12px;
width: 10px;
margin-left: -7px;
}
#contentcontainer {
background: url(http://images.twodayslate.com/design/
rightsidecontentfade.png) repeat-y;
background-position: right;
padding-right: 8px;
margin-top: 4px;
}
#content {
background: #FFF;
margin-left: 6px;
margin-top: -4px;
margin-bottom: -3px;
padding: 10px;
padding-top: 100px;
}
#bottomcorners {
background: url(http://images.twodayslate.com/design/
bottomrightcornerlong.png);
background-position: right;
height: 16px;
margin-right: 2px;
margin-left: 19px;
}
#bottomleftcorner {
background: url(http://images.twodayslate.com/design/
bottomleftcorner.png) no-repeat;
float: left;
display: block;
height: 16px;
width: 13px;
margin-left: -13px;
margin-top: -1px;
}
#footer {
margin: 0 auto;
margin-top: 5px;
color: #8f9ecb;
text-align: center;
margin-bottom: 8px;
font-size: .9em;
}
#footer a {
color: #8f9ecb;
text-decoration: none;
font-size: .9em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://images.twodayslate.com/design/logo.png" style="z-
index: 300;"/>
<!-- Start Naviation -->
<div id="navigationdiv">
<ul class="current one"><li><a href="http://twodayslate.com"><b>Index</
b></a>
<ul class="sub">
<li><a href="#">About</a></li>
<li><a href="#">Geek?</a></li>
<li><a href="/x.php">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
<ul class="select two"><li><a href="doors_drop_line.html?
current=two&sub=none"><b>Blog</b></a>
<ul class="sub">
<li><a href="doors_drop_line.html?current=two&sub=a">Newest</a></
li>
<li><a href="doors_drop_line.html?current=two&sub=b">Catagories</
a></li>
<li><a href="doors_drop_line.html?current=two&sub=c">RSS</a></li>
</ul>
</li>
</ul>
<ul class="select three"><li><a href="doors_drop_line.html?
current=three&sub=none"><b>Forums</b></a>
<ul class="sub">
<li><a href="doors_drop_line.html?current=three&sub=a">Profile</
a></li>
<li><a href="doors_drop_line.html?current=three&sub=b">Members</
a></li>
<li><a href="doors_drop_line.html?current=three&sub=c">Log-in/
Register</a></li>
</ul>
</li>
</ul>
</div>
<!-- end Navigation -->
</div>
<div id="topcorners">
<div id="topleftcorner"> </div>
</div><!-- end topcorners-->
<div id="contentcontainer">
<div id="content">
Background color for content: white<br />What I am going for the
sidebar:<br />
<a href="http://images.twodayslate.com/design/over800.gif">When width
is over 800px</a> | <a href="http://images.twodayslate.com/design/
lessthan800.gif"><br />When width is under 800px</a><br />Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Phasellus consectetuer,
lacus sit amet sollicitudin commodo, mauris diam fermentum dolor, sed
accumsan pede est quis lacus. Pellentesque dignissim massa at ante.
Phasellus vitae felis. Quisque varius facilisis augue. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Quisque iaculis leo a
eros. Phasellus venenatis ante ullamcorper odio. Nunc adipiscing
sodales nibh. Nullam luctus tempor tortor. Donec eu est. Quisque
accumsan velit at ante. Integer risus. Curabitur erat mi, tristique
ut, molestie sed, facilisis tincidunt, pede.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec a pede. Praesent vel ligula a pede
imperdiet pulvinar. Aliquam non sapien. Vivamus nibh odio, fringilla
in, dictum in, sagittis vitae, eros. Nulla eu eros. Praesent a nisl a
nibh mollis ullamcorper. Proin tristique. Nulla accumsan felis at
odio. Suspendisse sit amet risus nec lectus ornare auctor. Sed quis
est. Aliquam erat volutpat. Integer suscipit sem et eros. Duis et dui
eget odio consectetuer egestas. Nunc augue nisi, mollis ut, aliquet
vitae, nonummy ac, urna. Cras in libero.
Nam vel elit. Sed sed massa. Quisque sollicitudin euismod eros.
Curabitur laoreet egestas metus. Mauris sagittis. Sed erat nisl,
facilisis quis, auctor eu, placerat a, purus. Curabitur id magna sit
amet magna tristique viverra. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Sed hendrerit, libero
sed suscipit laoreet, pede pede convallis erat, ut viverra magna
turpis luctus nisl. Nulla vel orci ac leo facilisis egestas. Fusce at
enim.
Curabitur consequat nulla gravida erat. Curabitur mi. Mauris congue
ipsum quis tellus. Suspendisse semper elementum libero. Nunc velit.
Donec faucibus vestibulum nisl. Nulla semper nisl eu neque. Nulla eget
tellus. Nullam felis leo, faucibus at, sodales non, facilisis ac,
augue. In vitae orci nec nulla tempor tristique. Aliquam consectetuer
erat. Vivamus in orci sed lectus tempor aliquam. Duis consectetuer
interdum mi. Integer blandit, arcu sed sollicitudin dignissim, ligula
odio porttitor augue, at mollis quam odio ornare diam. Etiam pharetra
sollicitudin enim. Phasellus quis diam sed risus lacinia faucibus.
In dictum, erat quis mattis vehicula, lorem lorem vestibulum dolor,
eget adipiscing ipsum velit tempus leo. Duis faucibus porta odio.
Morbi neque. Fusce convallis libero eget sapien. Aliquam nec justo.
Integer ac nunc a odio molestie ullamcorper. Praesent a nibh sed massa
vulputate varius. Duis lacus. Vivamus euismod ultrices pede. In luctus
malesuada lorem.
</div><!-- end content-->
</div><!-- end contentcontainer -->
<div id="bottomcorners">
<div id="bottomleftcorner"> </div>
</div><!-- end topcorners-->
</div><!-- end container-->
<div id="footer">
<a href="#">linkage</a> | <a href="#">linkage</a> | <a
href="#">linkage</a>
</div> <!-- end footer-->
</body>
</html>
http://twodayslate.com/test/test.php
You can probably get the idea of what I want to do by just looking at
the site and the two images on the site. I am having a hard time
positioning the logo and nav. (This is were z-index might come in
hand?)
Don't worry about styling the nav I will do that later, more worried
about the position.
After we do that I would like the text to wrap around the logo a bit.
I am sure there is something online already that will help me with
that.