3 Replies - 929 Views - Last Post: 29 April 2009 - 01:10 PM

#1 ForeverUnique  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 26-April 09

CSS LAYOUT

Posted 28 April 2009 - 01:07 PM

I am beyond frustrated. lol I honestly feel like giving up. I searched all over the web for a solution and found nothing that worked. I am creating a layout using CSS (DIV) only. I always used tables but I wanted to start building wordpress layouts.... which uses CSS only. So, I set out to do that and ran into this problem. I want to know how to get the sidebar, content, and footer to touch the bottom of the page/browser.

I really need someones help.

This is my css code
/*  
Theme Name: Card Craft
Theme URI: http://www.foreverunique.net/blog/
Description: Based on Home Made Craft Cards.
Version: 1.0
Author: Godz Girl
Author URI: http://www.foreverunique.net/
*/

/*BODY*/
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #FFFFFF url('images/bolly01.jpg');
	color: #000000;
}

a:link, a:visited, a:active {
	text-decoration: underline;
	color: #336699;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

p {
	padding: 10px 0 0 0;
}

#wrapper{
	background: #FFFFFF;
	margin: 0 auto 0 auto;
	width: 750px;
	height: 100%;
	text-align: left;
}

#header {
	float: left;
	width: 750px;
	height: 250px;
	background: #FFFFFF url('images/header.png') no-repeat;
	margin: 0 0 0 0;
}

#navigation {
	float: left;
	width: 750px;
	height: 50px;
	background: #FFFFFF url('images/navBack.png') no-repeat;
}

#container {
	position: relative;
	float: left;
	width: 500px;
	background: #FFFFFF url('images/brdLeft.png') repeat-y;
}

#footer {
	float: left;
	position: relative;
	bottom: 0;
	width: 750px;
	height: 30px;
	background: #FFFFFF url('images/navBack.png') no-repeat;\
	color: #FFFFFF;
}

/*POSTING*/
.post {
	padding: 10px 10px 10px 10px;
}

.post h2 {
	font-family: Georgia, Sans-serif;
	font-size: 18px;
}

.entry {
	line-height: 18px;
	text-align: justify;
	color: #333333;
}

p.postmetadata {
	background: #FFFFCC;
	border-top: 1px solid #330000;
	border-bottom: 1px solid #330000;
	margin: 10px 0 10px 0;
	padding: 0 0 3px 0;
}

p.postmetadata a:link, a:visited, a:active {
	text-decoration: none;
	color: #336699;
}

p.postmetadata a:hover {
	text-decoration: none;
	color: #FF0066;
}

.pnNav {
	margin: 0 10px 10px 10px;
}

#postAvatar {
	float: left;
	width: 100px;
	height: 100px;
}

#postTitleDate {
	float: left;
	width: 380px;
	height: 100px;
	text-align: center;
	vertical-align: middle;
	margin: 0 0 10px 0; 
}

#postTitleDate a:link, a:visited, a:active {
	text-decoration: none;
	color: #663333;
}

#postTitleDate a:hover {
	text-decoration: none;
	color: #CC3399;
}


#postTitleDate h1 {
	font-family: Georgia, Sans-serif;
	font-size: 24px;
	padding: 22px 0 0 0;
	color: #663333;
	text-transform: uppercase;
}

#postTitleDate h2 {
	font-family: Georgia, Sans-serif;
	font-size: 14px;
	padding: 0 0 0 0;
	color: #006666;
}

/*SIDEBAR*/
#sidebar {
	position: relative;
	display: inline;
	float: left;
	width: 250px;
	background: #FFFFFF url('images/brdRight.png') repeat-y;
	background-position: top right;
}

#sidebar ul {
	list-style-type: none;
	margin: 0 0 15px;
	padding: 0;
}

#sidebar ul li {
	padding: 15px 20px 0;
	margin: 0 0 20px;
}

#sidebar ul li h3 {
	font-family: Georgia, Sans-serif;
	font-size: 14px;
	color: #CC9999;
	text-transform: uppercase;
	border-top: 1px #330000 dashed;
	border-bottom: 1px #330000 dashed;
	background: #663333;
	padding: 5px;
	text-align: center;
	posotion: relative;
}

#sidebar ul ul {
	margin: 6px 0 0;
	line-height: 18px;
}

.sBody {
	background: #FFFFCC;
}

#sidebar ul ul li {
	padding: 6px 0 5px;;
	margin: 0;
	line-height: 24px;
	border-bottom: 1px #CCCCCC solid;
}
	
/*COMMENTS*/
.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #ccc;
	padding: 10px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 15px;
	list-style: none;
}

.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
	font-family: Georgia, Sans-serif;
	font-size: 16px;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}

This post has been edited by ForeverUnique: 28 April 2009 - 01:09 PM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS LAYOUT

#2 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: CSS LAYOUT

Posted 28 April 2009 - 01:40 PM

May want to look into min-height for the div as well as you are going to have to use a clear:both to get it to work

Just my 2 cents but i think thats what you are looking for

http://lazurous.com/test.php

if it makes a difference there is something to look at ... hope this is what your after


edit: IE 6 doesnt like the min-height you have to put a height in there for it to be recognized .. IE6 sucks... :D

This post has been edited by RPGonzo: 28 April 2009 - 02:02 PM

Was This Post Helpful? 0
  • +
  • -

#3 ForeverUnique  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 26-April 09

Re: CSS LAYOUT

Posted 28 April 2009 - 02:05 PM

Thank you so much. I did the min-height before and the clear: both; but I didn't know you had to do height: 100%; and min-height: 100%; I only thought you needed min-height.

Again, thank you.
Was This Post Helpful? 0
  • +
  • -

#4 ForeverUnique  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 26-April 09

Re: CSS LAYOUT

Posted 29 April 2009 - 01:10 PM

Okay... it didn't work. look at this link -- Forever Unique

Look what the sidebar does. My new CSS looks like this:
  
Theme Name: Card Craft
Theme URI: http://www.foreverunique.net/
Description: Based on Home Made Craft Cards.
Version: 1.0
Author: Godz Girl
Author URI: http://www.foreverunique.net/
*/

/*BODY*/
html, body {
	height: 100%;
	min-height: 100%;
}

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: top;
	background: #FFFFFF url('images/bolly01.jpg');
	color: #000000;
}

a:link, a:visited, a:active {
	text-decoration: underline;
	color: #336699;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

p {
	padding: 10px 0 0 0;
}

#wrapper{
	margin: 0 auto 0 auto;
	width: 750px;
	height: 100%;
	min-height: 100%;
	text-align: left;
}

#header {
	float: left;
	width: 750px;
	height: 250px;
	background: #FFFFFF url('images/header.png') no-repeat;
	margin: 0 0 0 0;
}

#navigation {
	float: left;
	width: 750px;
	height: 50px;
	background: #FFFFFF url('images/navBack.png') no-repeat;
}

#container {
	clear: both;
	float: left;
	width: 500px;
	height: 100%;
	min-height: 100%;
	background: #FFFFFF url('images/brdLeft.png') repeat-y;
}

#footer {
	clear: both;
	float: left;
	bottom: 0px;
	width: 750px;
	height: 30px;
	background: #FFFFFF url('images/navBack.png') no-repeat;\
	color: #FFFFFF;
}

/*POSTING*/
.post {
	padding: 10px 10px 10px 10px;
}

.post h2 {
	font-family: Georgia, Sans-serif;
	font-size: 18px;
}

.entry {
	line-height: 18px;
	text-align: justify;
	color: #333333;
}

p.postmetadata {
	background: #FFFFCC;
	border-top: 1px solid #330000;
	border-bottom: 1px solid #330000;
	margin: 10px 0 10px 0;
	padding: 0 0 3px 0;
}

p.postmetadata a:link, a:visited, a:active {
	text-decoration: none;
	color: #336699;
}

p.postmetadata a:hover {
	text-decoration: none;
	color: #FF0066;
}

.pnNav {
	margin: 0 10px 10px 10px;
}

#postAvatar {
	float: left;
	width: 100px;
	height: 100px;
}

#postTitleDate {
	float: left;
	width: 380px;
	height: 100px;
	text-align: center;
	vertical-align: middle;
	margin: 0 0 10px 0; 
}

#postTitleDate a:link, a:visited, a:active {
	text-decoration: none;
	color: #663333;
}

#postTitleDate a:hover {
	text-decoration: none;
	color: #CC3399;
}


#postTitleDate h1 {
	font-family: Georgia, Sans-serif;
	font-size: 24px;
	padding: 22px 0 0 0;
	color: #663333;
	text-transform: uppercase;
}

#postTitleDate h2 {
	font-family: Georgia, Sans-serif;
	font-size: 14px;
	padding: 0 0 0 0;
	color: #006666;
}

/*SIDEBAR*/
#sidebar {
	display: inline;
	float: left;
	width: 250px;
	height: 100%;
	min-height: 100%;
	background: #FFFFFF url('images/brdRight.png') repeat-y;
	background-position: top right;
}

#sidebar ul {
	list-style-type: none;
	margin: 0 0 15px;
	padding: 0;
}

#sidebar ul li {
	padding: 15px 20px 0;
	margin: 0 0 20px;
}

#sidebar ul li h3 {
	font-family: Georgia, Sans-serif;
	font-size: 14px;
	color: #CC9999;
	text-transform: uppercase;
	border-top: 1px #330000 dashed;
	border-bottom: 1px #330000 dashed;
	background: #663333;
	padding: 5px;
	text-align: center;
	posotion: absolute;
}

#sidebar ul ul {
	margin: 6px 0 0;
	line-height: 18px;
}

.sBody {
	background: #FFFFCC;
}

#sidebar ul ul li {
	padding: 6px 0 5px;;
	margin: 0;
	line-height: 24px;
	border-bottom: 1px #CCCCCC solid;
}
	
/*COMMENTS*/
.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #ccc;
	padding: 10px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 15px;
	list-style: none;
}

.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
	font-family: Georgia, Sans-serif;
	font-size: 16px;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}


If someone can help me, please do. It will be well appreciated.

The footer does not touch the bottom. The sidebar goes over and past the sidebar.

This post has been edited by ForeverUnique: 29 April 2009 - 01:12 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1