New Topic/Question
Reply
CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
<style type="text/css">
body
{
margin:0px;
background-color: #393a43;
background-repeat:no-repeat;
background-position:top center;
font-family: Helvetica, Verdana, Tahoma;
font-size:12px;
width: 100%;
}
h3
{
font-family: Helvetica, Tahoma, Verdana,;
}
em
{
font-style: italic;
}
p
{
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-size:0.849em;
color:#757575;
}
#outsidebox
{
margin-left:auto;
margin-right:auto;
background-image: url(images2/mainbg3.jpg);
width: 992px;
height: 1000px;
background-repeat: no-repeat;
text-align: center;
}
#header
{
background-color: #1a1a25;
height: 80px;
width: 992px;
}
#listheader
{
margin: 0 0 0 40px;
}
#listheader ul
{
list-style-type: none;
padding: 0px;
margin-left:240px;
margin-top:0;
margin-bottom:0;
}
#listheader ul li
{
margin: 0px 0 0 0px;
padding: 0px;
}
#listheader ul li a
{
display: block;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
margin: 50px 0 0 0;
}
.logo
{
float: left;
width: 252px;
height: 80px;
margin: 0 0 0 0px;
background-image: url(images2/logomain2.png);
text-indent: -1000em;
overflow:hidden;
}
.home
{
background-image: url(images2/mainwabout5.png);
width: 67px;
height: 30px;
background-position: top left;
float: left;
}
.home:hover
{
background-position:0px -30px;
float: left;
}
.services
{
background-image: url(images2/mainwabout5.png);
width: 83px;
height: 32px;
background-position: -67px 0px;
float: left;
}
.services:hover
{
background-position: -67px -30px;
}
.portfolio
{
background-image: url(images2/mainwabout5.png);
width: 86px;
height: 30px;
background-position: -150px -67px;
float: left;
}
.about
{
background-image: url(images2/mainwabout5.png);
width: 78px;
height: 30px;
background-position: -240px 0px;
float: left;
}
.about:hover
{
background-position: -240px -30px;
}
.contact
{
background-image: url(images2/mainwabout5.png);
width: 82px;
height: 30px;
background-position: -322px 0px;
float: left;
}
.contact:hover
{
background-position: -322px -30px;
}
/*End of Header */
/*End of Header */
/* subnav */
#subnav
{
background-color: #02345b; /*original color #02345b */ /* possible option 9acddc */
width:992px;
height:22px;
float: left;
margin: -2px 0 0 0;
}
#sublist
{
text-align: left;
list-style-type:none;
margin: 0 0 0 444px;
padding: 0 15px 0 0;
text-transform:uppercase;
}
.listtext
{
font-size:.85em;
color: #cdd4e1;
margin: 5px 4px 0 0px;
padding: 0 0 0 10px;
float: left;
/*font-family:Arial, Helvetica, sans-serif; */
/*font-size:0.849em;*/
}
#subnav li a:hover
{
color: #389bf0;
}
/* End of subnav */
/* Middle Box original color white is #ededf6 */
#logodesigncontainer /* Web Portfolio Text */
{
float: left;
height: 250px;
width: 992px;
margin: 0 0 0 0;
background-color: #161e2c;
background-image: url(images2/porttop.jpg);
}
#designpic /*moving or controlling the text in the above container*/
{
height: 250px;
width: 992px;
float: left;
}
#wrapper /*Shell for web portfolio portion */
{
margin: 0 0 0 0;
background-color:#000000; /*1a1a25*/
height: 1350px;
width: 992px;
}
#topheading /* SHOW ALL Informational E-Commerce etc Container */
{
float: left;
background-color:#1a1a25;
height:80px;
width:992px;
}
#showbox
{
float:left;
width: 115px;
height: 38px;
background-color:#1a1a25;
}
.show
{
height:22px;
width:57px;
margin:16px 0 0 60px;
}
#listitembox
{
float:left;
background-color:#1a1a25;
width:877px;
height:38px;
}
#listitembox ul li a
{
display: block;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
#showlist
{
text-align: left;
list-style-type:none;
}
.all
{
background-image: url(images2/showhover.gif);
width: 35px;
height: 23px;
background-position:0px -39px;
float: left;
margin:5px 0 0 0;
}
.informational
{
background-image: url(images2/showhover.gif);
width: 84px;
height: 21px;
float: left;
margin:5px 0 0 15px;
background-position: -57px 0px;
}
.informational:hover
{
background-position: -57px -20px;
}
.ecommerce
{
background-image: url(images2/showhover.gif);
width:77px;
height: 21px;
float: left;
background-position: -169px 0px;
margin:5px 0 0 15px;
}
.ecommerce:hover
{
background-position: -169px -20px;
}
.blog
{
background-image: url(images2/showhover.gif);
width: 34px;
height: 21px;
float: left;
background-position: -270px 0px;
margin:5px 0 0 15px;
}
.blog:hover
{
background-position: -270px -20px;
}
#longline
{
margin: 4px 0 0 0;
}
#headingbox1
{
float:left;
width:992px;
height:21px;
background-color:#FF9999; /*FF9999 */
}
#sdrive
{
float:left;
margin: 0 0 0 55px;
}
#features1
{
float:left;
margin: 0 0 0 100px;
}
#opalheading
{
float:left;
margin: 0 0 0 60px;
}
#features2
{
float:left;
margin: 0 0 0 70px;
}
#logobox1
{
float: left;
width: 444px;
height: 142px;
background-color: #1a1a25;
margin: 10px 0 0 45px;
}
#sharebutton
{
background-image: url(images2/sdrive.jpg);
width: 444px;
height:142px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
p
{
margin: 0; padding: 0;
margin-left:96px;
text-align: left;
font-size: 94%;
}
h2
{
padding: 0;
margin:5px 0 0 94px;
text-align: left;
color: #ffffff;
font-size:140%;
font-weight:bold;
font-style:normal;
}
#logobox2
{
float: left;
width: 444px;
height:142px;
background-color: #1a1a25;
margin: 10px 0 0 14px;
}
#opalbutton
{
background-image: url(images2/opalsmall.gif);
width: 444px;
height:142px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#textboxrow1 /*outer container used to hold all of contents in row 1 */
{
float:left;
width:992px;
height:200px;
background-color:#FFFF66;
}
#innerrow1
{
float:left;
width:992px;
height:64px;
background-color:#9999FF; /*div that holds textbox1 and 2 so that next buttons arent on same line */
}
#textbox1
{
float:left;
width:410px;
height:54px;
background-color:#CC00CC; /* shareboxCC00CC*/
margin:10px 0 0 0;
}
#textbox2
{
float:left;
width:410px;
height:54px;
background-color:#FF99FF; /* opal box FF99FF*/
margin:10px 0 0 40px;
}
#sharelink1
{
float:left;
background-color:#FF0066;
width: 214px;
height: 32px;
margin: 20px 0 0 0;
}
#shareshot
{
width:214px;
height:32px;
background-image:url(images2/screenshots.jpg);
text-indent: -999px;
overflow: hidden;
}
#opalbutton1
{
float:left;
background-color:#000000;
width: 114px;
height: 32px;
margin:0 0 0 20px;
}
#opalshot
{
width:114px;
height:32px;
background-image:url(images2/screenshot.gif);
text-indent: -9999px;
overflow: hidden;
}
#logobox3
{
float: left;
height: 300px;
width: 290px;
background-color: #1a1a25;
margin: 10px 0 0 14px;
}
#relaxislebutton
{
background-image: url(images2/th_relaxbest.png);
width: 290px;
height:247px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#logobox4
{
float: left;
height: 300px;
width: 290px;
background-color: #1a1a25;
margin: 10px 0 0 45px;
}
#logobox5
{
float: left;
height: 300px;
width: 290px;
background-color: #1a1a25;
margin: 10px 0 0 14px;
}
#logobox6
{
float: left;
height: 300px;
width: 290px;
background-color: #1a1a25;
margin: 10px 0 0 14px;
}
#logobox7
{
float: left;
height: 300px;
width: 290px;
background-color: #1a1a25;
margin: 10px 0 0 45px;
}
#logobox8
{
float: left;
height: 300px;
width: 290px;
background-color: #1a1a25;
margin: 10px 0 0 14px;
}
#logobox9
{
float: left;
height: 300px;
width: 290px;
background-color: #1a1a25;
margin: 10px 0 0 14px;
}
#zegnabutton
{
background-image: url(images2/zegnasmall.png);
width: 290px;
height:247px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#saviorbutton
{
background-image: url(images2/saviorsmall.png);
width: 290px;
height:247px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#jaxbutton
{
background-image: url(images2/jzsmall.png);
width: 290px;
height:247px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#lgebutton
{
background-image: url(images2/lgesmall.jpg);
width: 290px;
height:247px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#marketbutton
{
background-image: url(images2/marketsmall.png);
width: 290px;
height:247px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#homeworkbutton
{
background-image: url(images2/homeworksmall.jpg);
width: 290px;
height:247px;
float: left;
text-indent: -9999px;
overflow: hidden;
}
#footerborder
{
background-image: url(images2/mainbg.jpg);
width: 992px;
height: 3px;
float: left;
}
#footerright
{
margin: 0 0 0 0;
height: 180px;
width: 195px;
background-color: #23282c; /*02345b*/
float: right;
border-bottom: 1px solid #161e2c;
border-right: 1px solid #161e2c;
}
#footerright h3
{
text-align: right;
margin: 15px 70px 0 0;
text-transform:uppercase;
color: #b2cbdf;
}
#logobottom
{
float:right;
margin: 40px 40px 0 0;
}
#footline
{
height: 140px;
width: 3px;
background-image: url(images2/footerline2.png);
float: right;
margin: 0px 70px 0 0;
}
#footmiddle
{
float:right;
background-color: #23282c;
width: 315px;
height: 180px;
border-bottom: 1px solid #161e2c;
margin: 0 0 0 0;
}
#listleft
{
float: left;
width: 145px;
background-color: #23282c; /*1a1a25*/
margin:0 0 0 4px;
}
#listleft2
{
float: right;
width: 165px;
background-color: #23282c; /*1a1a25*/
margin:0 0 0 4px;
}
#listright
{
float:left;
width: 170px;
background-color:#23282c;
}
#listright li a:hover
{
color:#389bf0;
}
#listleft2 li a:hover
{
color:#389bf0;
}
#list1
{
text-align: left;
list-style-type:none;
margin: 0;
padding: 0 15px 0 0;
text-transform: uppercase;
}
#list2
{
text-align: left;
list-style-type:none;
margin: 0 10px 0 0;
padding: 0 0px 0 0;
text-transform: uppercase;
height: 75px;
}
#footline2
{
height: 140px;
width: 3px;
background-image: url(images2/footerline2.png);
float: right;
margin: 25px 0 0 0;
}
#footmiddle h3
{
margin: 15px 0 0 20px;
text-transform:uppercase;
color: #bfbfbf; /*b2cbdf */
font:font:90% Arial, Helvetica, sans-serif;
font-weight:normal;
text-align: left;
}
.footertext
{
color: #b2cbdf;
margin: 0 0px 0 0px;
padding: 0 0 0 10px;
float: left;
}
.footertright
{
margin: 0 0 0 20px;
color: #b2cbdf;
}
#footerleft
{
background-color: #23282c;
float:left;
height: 180px;
width: 370px;
border-bottom: 1px solid #161e2c;
border-left: 1px solid #161e2c;
}
#footerleft h3
{
margin: 15px 40px 0 0px;
text-transform:uppercase;
color: #bfbfbf; /*b2cbdf */
font:font:90% Arial, Helvetica, sans-serif;
font-weight:normal;
text-align: right;
}
#footlogo
{
float:left;
width:90px;
height: 180px;
border-bottom: 1px solid #161e2c;
}
#footline
{
float: left;
height:180px;
width: 20px;
margin: 0px 0 0 0;
border-bottom: 1px solid #161e2c;
}
#innerleft
{
float: left;
width: 120px;
height: 179px;
background-color: #23282c;
border-bottom: 1px solid #161e2c;
}
.contact2
{
float: left;
margin: 80px 0 0 0px;
background-image: url(images2/contactus.png);
width: 153px;
height: 38px;
text-indent: -1000em;
overflow:hidden;
}
.relaxfont
{
margin:5px 0 0 104px;
text-align: left;
color: #ffffff;
}
.relaxtext
{
margin-left:86px;
text-align: left;
}
.sharetext
{
margin-left:76px;
text-align: left;
}
.opaltext
{
margin-left:76px;
text-align: left;
}
.opalfont
{
margin:5px 0 0 124px;
text-align: left;
color: #ffffff;
}
.jzfont
{
margin:5px 0 0 84px;
text-align: left;
color: #ffffff;
}
.jztext
{
margin-left:106px;
text-align: left;
}
.zegnafont
{
margin:5px 0 0 84px;
text-align: left;
color: #ffffff;
}
.zegnatext
{
margin-left:95px;
text-align: left;
}
.saviorfont
{
margin:5px 0 0 124px;
text-align: left;
color: #ffffff;
}
.saviortext
{
margin-left:106px;
text-align: left;
}
.lgefont
{
margin:5px 0 0 84px;
text-align: left;
color: #ffffff;
}
.lgetext
{
margin-left:90px;
text-align: left;
}
.marketfont
{
margin:5px 0 0 84px;
text-align: left;
color: #ffffff;
}
.markettext
{
margin-left:85px;
text-align: left;
}
.homeworkfont
{
margin:5px 0 0 84px;
text-align: left;
color: #ffffff;
}
.homeworktext
{
margin-left:85px;
text-align: left;
}
HTML
<div id="outsidebox">
<div id="header">
<a href="index.html"class="logo" style="text-decoration:none"></a>
<div id="listheader">
<ul>
<li><a href="index.html" class="home" style="text-decoration:none">Home</a></li>
<li><a href="services.html" class="services" style="text-decoration:none">Services</a></li>
<li><a href="portfolio.html" class="portfolio" style="text-decoration:none">Portfolio</a></li>
<li><a href="about.html" class="about" style="text-decoration:none">About</a></li>
<li><a href="contactform.html" class="contact" style="text-decoration:none">Contact</a></li>
</ul>
</div>
</div>
<div id="subnav">
<ul id="sublist">
<li> <a href="webportfolio.html" class="listtext" title="chicago web design" style="text-decoration:none">web design</a> </li>
<li><a href="printportfolio.html" class="listtext" title="chicago print design"style="text-decoration:none">branding</a> </li>
<li><a href="logoportfolio.html" class="listtext" title="chicago logo design"style="text-decoration:none">logo design</a> </li>
<li><a href="webportfolio.html" class="listtext" title="search engine optimization"style="text-decoration:none">accessibility</a> </li>
<li> <a href="coming.html" class="listtext" title="chicago blog design"style="text-decoration:none">blog design</a> </li>
<li> <a href="webportfolio.html" class="listtext" style="text-decoration:none">e-Commerce</a> </li>
<li> <a href="webportfolio.html" class="listtext" style="text-decoration:none">application development</a> </li>
</ul>
</div>
<div id="logodesigncontainer">
</div>
<div id="wrapper">
<div id="topheading">
<div id="showbox">
<img src="images2/show.gif" class="show" alt="Filter Results By" />
</div>
<div id="listitembox">
<ul id="showlist">
<li> <a href="webportfolio.html" class="all" title"" style="text-decoration:none">All </a> </li>
<li> <a href="webportfolio.html" class="informational" title"" style="text-decoration:none">Informational </a> </li>
<li> <a href="webportfolio.html" class="ecommerce" title"" style="text-decoration:none">Ecommerce </a> </li>
<li> <a href="webportfolio.html" class="blog" title"" style="text-decoration:none">Blog </a> </li>
</ul>
</div>
<div id="showline">
<img src="images2/showline.gif" alt="line" id="longline" />
</div>
</div>
<div id ="headingbox1">
<img src="images2/sdrive.gif" alt="sharedrive logo" id="sdrive" />
<img src="images2/features1.gif" alt="sharedrive features" id="features1" />
<img src="images2/opal.gif" alt="Opal" id="opalheading" />
<img src="images2/features1.gif" alt="opal features" id="features2" />
</div>
<div id ="logobox1">
<a href="http://www.nvisiondetail.com/images/sharedriveimage.html" id="sharebutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=1" >Link Name</a>
</div>
<div id ="logobox2">
<a href="http://www.nvisiondetail.com/images/opalimage.html" id= "opalbutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >opal</a>
</div>
<div id="textboxrow1">
<div id="innerrow1">
<div id="textbox1">
<p class="sharetext">Our friends at Opal wanted to create a book publishing site that allowed users to upload their own books and sell them online. We made that idea come to fruition. Opal is now one of the premier leading book sites on the market.</p>
</div>
<div id="textbox2">
<p class="opaltext">Our friends at Opal wanted to create a book publishing site that allowed users to upload their own books and sell them online. We made that idea come to fruition. Opal is now one of the premier leading book sites on the market.</p>
</div>
</div>
<div id="sharelink1">
<a href="http://www.nvisiondetail.com/images/sharedriveimage.html" id="shareshot" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=1" >View Sharedrive</a>
</div>
<div id="opalbutton1">
<a href="http://www.nvisiondetail.com/images/opalimage.html" id= "opalshot" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >opal</a>
</div>
</div>
<div id ="logobox3">
<a href="http://www.nvisiondetail.com/images/relaximage.html" id= "relaxislebutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >relaxisle</a>
<h2 class="relaxfont">Relax Isle</h2>
<p class="relaxtext">Tropical Resort and Hotel </p>
</div>
<div id ="logobox4">
<a href="http://www.jacquelinezinn.com" id= "jaxbutton" class="lightwindow" params="lightwindow_width=869,lightwindow_height=583,lightwindow_show_images=2" >Jacqueline Zinn</a>
<h2 class = "jzfont">Jacqueline Zinn</h2>
<p class="jztext">Interior Designer</p>
</div>
<div id ="logobox5">
<a href="http://www.nvisiondetail.com/images/zegnaimage.html" id= "zegnabutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >Zegna & Crevere</a>
<h2 class = "zegnafont">Zegna & Crevere</h2>
<p class="zegnatext">Womens Accessory Store</p>
</div>
<div id ="logobox6">
<a href="http://www.nvisiondetail.com/images/saviorimage.html" id= "saviorbutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >Savior</a>
<h2 class = "saviorfont">Savior </h2>
<p class="saviortext">Community Church</p>
</div>
<div id ="logobox7">
<a href="http://www.nvisiondetail.com/images/lgeimage.html" id= "lgebutton" class="lightwindow" params="lightwindow_width=1004,lightwindow_height=1347,lightwindow_show_images=2" >Los Angeles Garden Expo</a>
<h2 class = "lgefont">Los Angeles </h2>
<p class="lgetext">Garden Expo Show</p>
</div>
<div id ="logobox8">
<a href="http://www.nvisiondetail.com/images/marketimage.html" id= "marketbutton" class="lightwindow" params="lightwindow_width=1004,lightwindow_height=800,lightwindow_show_images=2" >Los Angeles Garden Expo</a>
<h2 class = "marketfont">Market Growth </h2>
<p class="markettext">Online Marketing Database</p>
</div>
<div id ="logobox9">
<a href="http://www.nvisiondetail.com/images/homeworkimage.html" id= "homeworkbutton" class="lightwindow" params="lightwindow_width=1004,lightwindow_height=800,lightwindow_show_images=2" >Do My Homework</a>
<h2 class = "homeworkfont">Do My Homework </h2>
<p class="homeworktext">Online Homework Assistance</p>
</div>
</div>
<div id ="footerborder">
</div>
<div id ="footerright">
<a href="contactform.html" class="contact2" style="text-decoration:none">Contact</a>
</div>
<div id = "footmiddle">
<h3>Discover</h3><br />
<div id = "listright">
<ul id="list2">
<li> <a href="coming.html" class="footertright" style="text-decoration:none">Our Sitemap</a> </li>
<li> <a href="contactform.html" class="footertright" style="text-decoration:none">Contact Us</a></li>
<li> <a href="contactform.html" class="footertright" style="text-decoration:none">Quote Form</a></li>
<li> <a href="testimonials.html" class="footertright" style="text-decoration:none">Client Testimonials</a></li>
</ul>
</div>
</div>
<div id = "footerleft">
<h3>What We Do</h3><br />
<div id = "listleft2">
<ul id="list1">
<li> <a href="webportfolio.html" class="footertext" style="text-decoration:none">Web Portfolio</a> </li>
<li><a href="printportfolio.html" class="footertext" style="text-decoration:none">Branding Portfolio</a> </li>
<li><a href="logoportfolio.html" class="footertext" style="text-decoration:none">Logo Portfolio</a> </li>
<li><a href="coming.html" class="footertext" style="text-decoration:none">Blog Portfolio</a> </li>
<li> <a href="portfolio.html" class="footertext" style="text-decoration:none">Valid xhtml</a> </li>
</ul>
</div>
</div>
<div id"innerleft">
<img src="images2/footlogo4.png" id="footlogo" />
<img src="images2/footline2.png" id="footline" />
</div>
</div>
</body>
</html>
Attached image(s)
This post has been edited by tscott: 07 April 2010 - 09:05 PM
MultiQuote
| 