Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Horizontal Colors

Posted on 2006-05-18
5
Medium Priority
?
221 Views
Last Modified: 2012-05-05
Hello,
  I'd like to have a page with two horizontal colors on it.

The top 40% white and the bottom 60% blue

Easiest way to do this?
0
Comment
Question by:lrbrister
  • 3
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16713174
Hi lrbrister,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
html,body {
      height: 100%;
}

.top {
      background-color: white;
      margin: 0px;
      padding: 0px;
      height: 40%;
      width: 100%;
}
.bottom {
      background-color: blue;
      height: 60%;
      width: 100%;
}
-->
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>

Depending on the browser, YMMV a little.  The <DOCTYPE> declaration also matters, so this may not a) work in HTML and/or b) validate.
0
 

Author Comment

by:lrbrister
ID: 16717514
jason1178
  The bottom section still shows a white border on left and right.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16719777
I didn't tweak the CSS all the way out.  You can certainly add more options to the html,body declaration so that there are no margins or padding anywhere in the document.
0
 

Author Comment

by:lrbrister
ID: 16719852
jason...I know.  How can I do that with your code?
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 16720128
<style type="text/css">
<!--
html,body {
     height: 100%;
     margin: 0px;
     padding: 0px;
}

.top {
     background-color: white;
     margin: 0px;
     padding: 0px;
     height: 40%;
     width: 100%;
}
.bottom {
     background-color: blue;
     margin: 0px;
     padding: 0px;
     height: 60%;
     width: 100%;
}
-->
</style>
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
Suggested Courses
Course of the Month20 days, 17 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question