Here is my problem: I am trying to create an incredibly simple web page to get used to how to use HTML5, I had previously used tables for page layout and am now trying to use div tags.
This page is simply 6 blocks of color (see attachment)
I cannot understand how to get rid of white space between the "color blocks" in the web page (attached). I have googled and tried everything I have found and nothing works. The web page passes W3 validation.
If anyone can help I would very much appreciate it. Thank you
PS I love your programs especially editor and calendar maker, I think you are doing a wonderful service in providing high quality software at a reasonable cost.
white space arrrrgh - Post ID 143274
Lewis Williams
Registered User
9 posts
The Philosopher
Registered User
2,038 posts
The whitespace is a natural div break. Here ya go:
<!DOCTYPE HTML>
<html>
<head>
<title>TABLE TEST</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body { margin: 0px; padding: 0px; border: 0px; }
div.xyellow{width: 100% ; background-color: rgb(255,255,0) ; margin: 0px; padding: 0px; border: 0px; }
div.xred{width: 33% ; background-color: rgb(255,00,00) ; float: left; margin: 0px; padding: 0px; border: 0px; }
div.xgreen{width: 33% ; background-color: rgb(00,255,00) ; float: left ; margin: 0px; padding: 0px; border: 0px; }
div.xblue{width: 34% ; background-color: rgb(00,00,255) ; float: left ; margin: 0px; padding: 0px; border: 0px; }
div.xmagenta{width: 100% ; background-color: rgb(255,00,255); margin: 0px; padding: 0px; border: 0px; }
div.xcyan{width: 100% ; background-color: rgb(0,255,255) ; margin: 0px; padding: 0px; border: 0px;}
</style>
</head>
<body>
<div class="xyellow">
<h1>YELLOW</h1>
<h1>YELLOW</h1>
<h1>YELLOW</h1>
<div class="xred">
<h1>RED </h1>
<h1>RED </h1>
<h1>RED </h1>
<h1>RED </h1>
</div>
<div class="xgreen">
<h1>GREEN </h1>
<h1>GREEN </h1>
<h1>GREEN </h1>
<h1>GREEN </h1>
</div>
<div class="xblue">
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
</div>
<div class="xmagenta">
<h1>MAGENTA</h1>
<h1>MAGENTA</h1>
<h1>MAGENTA</h1>
<h1>MAGENTA</h1>
<div class="xcyan">
<h1>CYAN</h1>
<h1>CYAN</h1>
<h1>CYAN</h1>
<h1>CYAN</h1>
</div>
</div>
</div>
</body></html>
<!DOCTYPE HTML>
<html>
<head>
<title>TABLE TEST</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body { margin: 0px; padding: 0px; border: 0px; }
div.xyellow{width: 100% ; background-color: rgb(255,255,0) ; margin: 0px; padding: 0px; border: 0px; }
div.xred{width: 33% ; background-color: rgb(255,00,00) ; float: left; margin: 0px; padding: 0px; border: 0px; }
div.xgreen{width: 33% ; background-color: rgb(00,255,00) ; float: left ; margin: 0px; padding: 0px; border: 0px; }
div.xblue{width: 34% ; background-color: rgb(00,00,255) ; float: left ; margin: 0px; padding: 0px; border: 0px; }
div.xmagenta{width: 100% ; background-color: rgb(255,00,255); margin: 0px; padding: 0px; border: 0px; }
div.xcyan{width: 100% ; background-color: rgb(0,255,255) ; margin: 0px; padding: 0px; border: 0px;}
</style>
</head>
<body>
<div class="xyellow">
<h1>YELLOW</h1>
<h1>YELLOW</h1>
<h1>YELLOW</h1>
<div class="xred">
<h1>RED </h1>
<h1>RED </h1>
<h1>RED </h1>
<h1>RED </h1>
</div>
<div class="xgreen">
<h1>GREEN </h1>
<h1>GREEN </h1>
<h1>GREEN </h1>
<h1>GREEN </h1>
</div>
<div class="xblue">
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
<h1>BLUE </h1>
</div>
<div class="xmagenta">
<h1>MAGENTA</h1>
<h1>MAGENTA</h1>
<h1>MAGENTA</h1>
<h1>MAGENTA</h1>
<div class="xcyan">
<h1>CYAN</h1>
<h1>CYAN</h1>
<h1>CYAN</h1>
<h1>CYAN</h1>
</div>
</div>
</div>
</body></html>
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
sstovert@satx.rr.com
Guest
5,410 posts
First line of styles declaration, add
*{margin:0px}
CoffeeCup... Yeah, they are the best!
Lewis Williams
Registered User
9 posts
Many, many thanks guys, tried both and they work. I am self taught in HTML, and it looks like I need to do a lot more reading.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
