I have a problem with making CSS Sprite. This is the first time I'm using sprite so I am not pro with it.
This is HTML code:
<div class="dfeature-box">
<div class="icon"><img class="multi" src="images/sprite.jpg"></div>
<div class="title">Title</div>
<div class="details">description.</div>
</div>
And this is CSS code:
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}
.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
}
.dfeature-box .icon .multi{
background-position:126px 9px;
height:47px;
width: 64px;
And this is the image I want to use (3 icons in one image) - in my codes, I've used the last image (two people)
And this is the result (as you see all 3 images stuck together):
I have an important question too:
How can I use the image in CSS instead of using it in HTML (class=icon)? as you see "img" is used within "class=icon".
==>> First update:
Please check these new codes based on your suggestion:
Here is the result:
enter image description here
CSS:
.sprite-bg{
background: url("images/sprite.jpg");
}
.bg-1{
width:62px;
height:62px;
background-position: 0px 0px;
}
HTML:
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-1"></div></div>
<div class="title">Title</div>
<div class="details">Description</div>
</div>
Look at this HTML code:
Are you sure about red marked part? What should I put there?
enter image description here
Also, please take a look at my codes in my first post. I want to use sprite into my codes.
==>> Second update:
.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}
.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sprite-bg{
background: url("https://i.imgur.com/VO1dBBA.jpg");
}
.bg-1{
width:62px;
height:62px;
background-position: 0px 61px;
}
.bg-2{
width: 64px;
height: 62px;
background-position: 62px 61px;
}
.bg-3{
width: 64px;
height: 62px;
background-position: 127px;
}
.dfeature-box .icon i {
font-size: 50px;
background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
background: linear-gradient(to bottom, #45b35e, #6ad56a);
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hustbee</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-1"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-2"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-3"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
</body>
</html>
Check the Below Example:
There are several things you need to check on :
Sprite image always called on backgound:url(path to image)
create 3 classes for icons.
call the different positions of image.
.sprite-bg{
background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
}
.bg-1{
width:110px;
height:110px;
background-position: 0px 0px;
}
.bg-2{
width: 58px;
height: 60px;
background-position: 194px 89px;
//border: 2px solid red;
float:right;
}
<div class="sprite-bg bg-1"></div>
<div class="sprite-bg bg-2"></div>
You must split your image into 3 separate files. if you want to use them individually since you cannot split images using html/css
I have an important question too: How can I use the image in CSS instead of using it in HTML (class=icon)? as you see "img" is used within "class=icon".
Yes, you can add the background property to your class and load a image using url("...")
background: url("img/sprite.jpg");
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
In my photographic portfolio, I display a series of images of different ratio in tracks that automatically fill the width of the display. That is working perfectly... after receiving some help.
My ultimate objective is to permanently display a little heart over the top-left corner of each image AND display a semitransparent strip over the bottom of each image containing the caption only on mouseover the image.
I have almost achieved that result but I can not figure out after hours of trying how to overlay the 2 elements as explained above... so for now trhey are together on top of the image... which is not optimal.
So I would appreciate some help to achieve that result if possible.
Here is part of the code in question and a sample can be found on my website : TwoOverlaysOnImage.
CSS code
.my-flex-item {
background-color: #1d1d1d;
border: 2px solid #1d1d1d;
height: 100px;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder p {
position: absolute;
display: inline-block;
text-align: left !important;
font-size: 0.7em !important;
width: 100%;
}
.img-holder:hover > p {
background-color: rgba(60,60,60,0.7);
text-align: center !important;
}
.img-holder span {
margin-top:40px;
color: white !important;
left: 30px;
}
HTML code
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="img-holder">
<p>
<img src="heart0.png" style="margin-left:6px; margin-top:4px;"/>
<span class="thumbCaption">caption</span>
</p>
<a href="modal...">
<img class="my-flex-item" src="imagepath..." alt="caption..." />
</a>
</div>
</div>
Try this:
html:
<div style="width: 100%; display: flex; justify-content: center;">
<div id="img-cont" class="img-cont">
<img class="heart" src="path/to/heart/icon">
<div class = "hover">
<p>Sample Text</p>
</div>
</div>
</div>
CSS:
.img-cont{
position: relative;
width: 420px;
height: 300px;
cursor: pointer;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588876315093-ce09afb34028?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.img-cont .heart{
position: absolute;
color: white;
top: 15px;
left: 15px;
cursor: pointer;
}
.hover{
clip-path: url(#img-cont);
position: absolute;
height: 0;
width: 100%;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.img-cont:hover .hover{
height: 50%;
}
.hover p{
color: white;
}
I can't fix an issue am having with centering a block of content in IE9.
I tried various stuff from the web, didn't work. If possible, I'd appreciate if this could be hosted somewhere where I can see it working.
I have defined doctype:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<![endif]-->
I tried adding this in head section also, before the commented "[if IE]" or even replaced "EmulateIE7" with "edge", didnt work:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Firefox/Chrome:
IE 9:
CSS:
.zone {
width: 0;
height: 0;
border: solid transparent;
}
.container {
border: 4px solid #666;
position: relative;
float: left;
margin: 2px;
}
.zone-label {
background-color: #666;
color: white;
font-size: 25px;
font-weight: bold;
padding: 0 5px;
position: absolute;
margin: 0 -50% 0 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.layout {
/*position: relative;*/
}
.clear {
clear: both;
}
.zone-green-949 {
border-width: 120px 475px;
border-color: black green;
}
.container-green-949 {
width: 949px;
}
.zone-blue-308 {
border-width: 76px 154px;
border-color: black blue;
}
.container-blue-308 {
width: 308px;
}
.zone-purple-629 {
border-width: 159px 315px;
border-color: black purple;
}
.container-purple-629 {
width: 629px;
}
Html:
<div class="layout">
<div class="container container-green-949">
<div class="zone zone-green-949">
<span class="zone-label">Zone 12</span>
</div>
</div>
<div class="clear">
<div>
<div class="container container-purple-629">
<div class="zone zone-purple-629">
<span class="zone-label">Slider</span>
</div>
</div>
<div class="container container-blue-308">
<div class="zone zone-blue-308">
<span class="zone-label">Zone 1</span>
</div>
</div>
<div style="clear: right;">
<div class="container container-blue-308">
<div class="zone zone-blue-308">
<span class="zone-label">Facebook Fan</span>
</div>
</div>
</div>
</div>
Edit: Answer is to add this (see Hashem Qolami's comment below): -ms-transform:translate(-50%, -50%);
Answer is to add this (see Hashem Qolami's comment): -ms-transform:translate(-50%, -50%);
Though I'm unable to reproduce the effect, my guess would be that you need to set a transform origin:
.zone-label {
background-color: #666;
color: white;
font-size: 25px;
font-weight: bold;
padding: 0 5px;
position: absolute;
margin: 0 -50% 0 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Set the origin for different browsers */
-ms-transform-origin: 50% 50%; /* IE 9 */
-webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
transform-origin: 50% 50%;
}
This makes sure that all browsers use the middle as transform orientation point.
Let me know if this works out for you.
I have 3 divs which I want them to display at the same height left center and right but that isnt happening right now.
Proof of concept:
https://dl.dropboxusercontent.com/u/51736887/Untitled.png (must have 10 rep to post images ughh)
The problem is that the sidebars and the main content are the one bellow the other and stuck to the side not just under the navbar like I want them.
Image of what happens: https://dl.dropboxusercontent.com/u/51736887/Untitled%20-%20Copy.png
This is my current code(includes only 1 of the 2 sidebars):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h3 align="center"><img src="afterlogo.png" alt="" height="358" width="339"></h3>
<div id="nav">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Donations</li>
<li>Vote</li>
</ul>
</div>
<div class="content">
<p><b> test </b> 0000-00-00 00:00:00<br><b> test 2 </b> 0000-00-00 00:00:00<br>test3 0000-00-00 00:00:00<br>test4 0000-00-00 00:00:00<br>test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br /> </p>
</div>
<div class="sidebar"> test </div>
<div class="footer">
<br />
Test footer
<br />
</div>
</html>
and heres the css:
body {
background-image:url('../bg.png');
background-attachment: fixed;
background-position: bottom;
}
#nav a:link{
text-decoration: none;
color: #000000;
font-size: 2em;
}
#nav a:visited {
color:#000000;
}
#nav a:hover {
color: #00FF00;
}
#nav {
border-radius: 15px;
background-size: cover;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
word-spacing: 2em;
}
.nav {
text-decoration: none;
}
li {
display: inline;
}
.content {
border-radius: 15px;
background-size: cover;
/*background-image:url('../content.png');*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin-left: auto ;
margin-right: auto ;
width: 500px;
background-repeat: no-repeat;
}
.sidebar {
border-radius: 15px;
/*background-size: cover;*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: left;
overflow: hidden;
margin-left: 120px;
margin-right: auto;
width: 220px;
float: left;
}
.footer {
clear:both;
border-radius: 500px;
text-align: center;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
}
I believe you are looking to achieve equal height columns - here's an excellent writeup by Chris Coiyer detailing the different techniques you can use.
p/s: It would be good if you can include the actual HTML output of the final layout (not in separate PHP files) ;)
Edit: After having a look at your code, it seems that you are positioning the sidebar absolutely. Is there any reason why you are doing so? You could have easily floated the sidebar and the content, so they will sit side by side.
Update: First of all, you should avoid using deprecated HTML features, such as the align="center" property. You should delegate all attributes that dictate layout to your CSS file instead.
You cannot combine both float and position: absolute on the same element. They are conflicting properties, and both will take your element out of the normal document flow. What I would suggest is wrapping your content and sidebar in a common parent element, say, <main>, <section> or <div>, and them floating them.
Here's the revised markup:
<section class="main">
<div class="content">
<p>Content</p>
</div>
<div class="sidebar">test</div>
</section>
And CSS:
.main {
margin: 0 6em;
/* or you can set width using "width: ..." */
overflow: hidden; /* Prevent parent from collapsing */
}
.content, .sidebar {
background-color: rgba(76, 92, 70, 0.7);
border-radius: 15px;
float: left;
}
.content {
}
.sidebar {
width: 250px;
}
http://jsfiddle.net/2X7pv/
I have a page with fixed width and I am trying to put borders on it, left and right without success.
I know how to show borders but I cannot make them to reach the bottom of the page and stay there, unlees I set my divs to position:fixed which is not desired for my content div since I want it to scroll. is there a way to get around it?
Here is my css file (the code as shone below makes my borders go until 1/3 of my window even if I set body height:100%) - Thank you in advance:
body {
margin: 0 auto;
padding: 0 0 0 0;
width: 1024px;
/*height: 100%;*/
min-width: 50%;
font-family: calibri;
background-color: #999;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
overflow-y: scroll;
overflow-x: auto;
border-right: solid;
border-right-width: 5px;
border-left: solid;
border-left-width: 5px;
border-color: #1d687b;
}
div#all {
position: relative;
width: 1024px;
height: 100%;
margin: 0 auto;
/*padding: 0 0 5px 0;
border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
div#top {
position: fixed;
margin: 0 auto;
width: 1024px;
height: 145px;
background-image: url("images/bg_ttl.jpg");
/*border-right: solid;
border-right-width: 5px;*/
border-bottom: solid;
border-bottom-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
z-index: 1;
}
div#top_left {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: left;
text-align: left;
vertical-align: middle;
}
div#top_right {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: right;
text-align: center;
vertical-align: middle;
}
div#top_center {
position: absolute;
left: 200px;
width: 624px;
height: 135px;
padding: 5px 0;
float: right;
font-family: metalord;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
div#left_menu {
position: fixed;
top: 150px;
float: left;
width: 185px;
height: 100%;
padding: 15px 5px 15px 5px;
border-right: solid;
border-right-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
}
div#content {
position: relative;
top: 150px;
left: 205px;
width: 784px;
height: 100%;
padding: 15px 15px 5px 15px;
/*border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
HTML
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arserus.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div id="top">
<div id="top_left">
<span class="ttl_sd_l">
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> network
<br />
& support
<br />
<br />
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> creative ideas
<br />
& organization</span>
</div>
<div id="top_center">
<span class="ttl_txt">ARSERUS</span>
</div>
<div id="top_right">
<div>
<span class="ttl_sd_r">
<u>e-mail:</u>
<br />
info#arserus.com
<br />
<br />
<u>phone No. (cy):</u>
<br />
7000 17 37</span>
</div>
</div>
</div>
<div id="left_menu">
<div align="right">
<span class="mn_lnk"><a id="p_home" class="lnk">home</a></span>
<br />
<br />
<span class="mn_lnk"><a id="p_about" class="lnk">about us</a></span>
</div>
<div id="cp_rght">
<span class="txt_cr">© 2012 ARSERUS</span>
</div>
</div>
<div id="content">
<?php
require_once('p_home.php');
?>
</div>
</div>
</body>
</html>
The old school answer to this problem is to use Faux Columns -
http://www.alistapart.com/articles/fauxcolumns/
The idea is that you actually use a background image on your body element that is 1px tall, and as wide as you want, including the 'border' as part of the image, and to tile the image vertically.
True, it doesn't rely on CSS borders, and making changes involves image editing, but it is reliable.
For the most part, I've found approaching web design with the idea of a fixed height to be problematic, and I try to avoid it.
It sounds like there is another css rule conflicting with your border rule. So what I would do to begin with, is:
remove all css rules.
apply your css border rule.
Re-add your other rule one at a time till the styles break over the problem rule.
This will narrow down the problem, and make the solution easier to find.
Aside from that, you could try applying the border styles to the <html> tag. Hope this helps!
You might try setting a static height:
height: 768px;
If you are looking to make a fluid (% - based) height scheme in CSS, that is really tough. You might try using jQuery to get the window height and style your elements according to that:
var divHeight = $(document).height();
$('#yourDivId').height(divHeight);