hello. been reading different places, yet i still can't figure this out. im practicing with a template from zengarden and trying to modify it. how do i go about setting the height of the whole container that has everything. i don't like that i have different pages with different heights, would like it all to be set to one big enough size to cover them all.
thanks.
/* css Zen Garden default style */
/* css released under Creative Commons ShareAlike License v1.0 - <!-- m --><a class="postlink" href="http://creativecommons.org/licenses/sa/1.0/">http://creativecommons.org/licenses/sa/1.0/</a><!-- m --> */
/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in here, so you'll most likely want to refer to the xhtml as well. */
/* basic elements */
body#main {
font-size:80%;
font-family: Verdana,Aria,Helvetica, sans-serf;
color:#000;
background-color:#fff;
margin:0;
padding:0;
text-align:center;
background-image:url(images/body_bck.gif);
}
p {
margin:1em 1em;
}
h3 {
font-family: Verdana,Aria,Helvetica, sans-serf;
color:#000;
font-weight:bold;
font-size:120%;
}
a:link {
color:#D37C00;
text-decoration:none;
border-bottom:1px solid #D37C00;
}
a:visited {
color:#D37C00;
text-decoration:none;
border-bottom:1px solid #D37C00;
}
a:hover, a:active {
text-decoration:none;
margin-bottom:1px;
border:0px;
}
/* specific divs */
#container {
width:770px;
margin:0 auto;
text-align:left;
color:#000;
background-color:#fff;
border:2px solid #DDE0F1;
background-image:url(images/home_background.gif);
background-repeat:no-repeat;
}
#intro {
width:770px;
position:relative;
}
#pageHeader {
background-color:transparent;
background-image:url(images/header_back.gif);
height:95px;
border-bottom:3px double #D37C00;
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, <!-- m --><a class="postlink" href="http://www.stopdesign.com/articles/css/replace-text/">http://www.stopdesign.com/articles/css/replace-text/</a><!-- m --> */
#pageHeader h1 {
background-color:transparent;
line-height:0px;
margin:0;
padding:0;
background-image:url(images/logo.gif);
height:85px;
width:252px;
}
#pageHeader h1 span {
display:none
}
#pageHeader h2 {
}
#pageHeader h2 span {
display:none;
}
#quickSummary {
font-weight:bold;
font-size:12px;
font-style
blique;
position:absolute;
top:0px;
right:0;
color:#000;
background-color: transparent;
width:400px;
}
#quickSummary p {
}
#table {
border:1px solid #D37C00;
margin-left:220px;
clear:both;
margin-bottom:10px;
margin-top:30px;
background-color:#DDE0F1;
margin-right:10px
}
#table p{
padding:0 10px;
}
#table h3{
position:relative;
background-color:#fff;
border:1px solid #D37C00;
width:75%;
top:-20px;
left:-10px;
padding:10px;
margin:0;
}
#table2 {
margin-left:210px;
}
#table2 h3{
margin:0;
position:relative;
background-color:#fff;
border:1px solid #D37C00;
width:75%;
top:-20px;
left:-20px;
padding:10px;
}
#table2 div {
border:1px solid #D37C00;
padding:0 10px;
margin:30px 10px;
background-color:#DDE0F1;
}
#footer {
background-color:#fff;
text-align:center;
font-size:10px;
padding-right:20px;
}
#footer a:link, #footer a:visited {
color:#D37C00;
font-weight:bold;
}
#linkList {
position:absolute;
top:11em;
width:200px;
}
#linkList2 {
}
#linkList h3.select {
height:20px;
background-image:url(images/select.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.select span {
display:none
}
#linkList h3.favorites {
height:20px;
background-image:url(images/favorites.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.favorites span {
display:none
}
#linkList h3.archives {
height:20px;
background-image:url(images/archives.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.archives span {
display:none
}
#linkList h3.resources {
height:20px;
background-image:url(images/resources.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.resources span {
display:none
}
#linkList .iL {
font-size:80%;
display:block;
border:2px solid #fff;
padding:4px 2px;
background-color:#DDE0F1;
text-align:right;
margin-bottom:1px;
color:#666;
}
#linkList .iL a:link,#linkList .iL a:visited {
color:#D37C00;
}
#linkList .iL a:hover {
}
#extraDiv1 {
clear:both;
}
acronym {
color:#D37C00;
border:0;
cursor:help;
}
look here (<!-- m --><a class="postlink" href="http://www.carmarwholesale.com/test.htm">http://www.carmarwholesale.com/test.htm</a><!-- m -->) for one page and here (<!-- m --><a class="postlink" href="http://www.carmarwholesale.com/test2.htm">http://www.carmarwholesale.com/test2.htm</a><!-- m -->) for the other.anyone? please help. still can't figure this out.
appreciate it.height: 600px;
However, I'm not sure that you'll like that, unless you fiddle with absolute heights for the divs within it, too; otherwise you might end up with lots of empty space on some pages.
thanks.
/* css Zen Garden default style */
/* css released under Creative Commons ShareAlike License v1.0 - <!-- m --><a class="postlink" href="http://creativecommons.org/licenses/sa/1.0/">http://creativecommons.org/licenses/sa/1.0/</a><!-- m --> */
/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in here, so you'll most likely want to refer to the xhtml as well. */
/* basic elements */
body#main {
font-size:80%;
font-family: Verdana,Aria,Helvetica, sans-serf;
color:#000;
background-color:#fff;
margin:0;
padding:0;
text-align:center;
background-image:url(images/body_bck.gif);
}
p {
margin:1em 1em;
}
h3 {
font-family: Verdana,Aria,Helvetica, sans-serf;
color:#000;
font-weight:bold;
font-size:120%;
}
a:link {
color:#D37C00;
text-decoration:none;
border-bottom:1px solid #D37C00;
}
a:visited {
color:#D37C00;
text-decoration:none;
border-bottom:1px solid #D37C00;
}
a:hover, a:active {
text-decoration:none;
margin-bottom:1px;
border:0px;
}
/* specific divs */
#container {
width:770px;
margin:0 auto;
text-align:left;
color:#000;
background-color:#fff;
border:2px solid #DDE0F1;
background-image:url(images/home_background.gif);
background-repeat:no-repeat;
}
#intro {
width:770px;
position:relative;
}
#pageHeader {
background-color:transparent;
background-image:url(images/header_back.gif);
height:95px;
border-bottom:3px double #D37C00;
}
/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, <!-- m --><a class="postlink" href="http://www.stopdesign.com/articles/css/replace-text/">http://www.stopdesign.com/articles/css/replace-text/</a><!-- m --> */
#pageHeader h1 {
background-color:transparent;
line-height:0px;
margin:0;
padding:0;
background-image:url(images/logo.gif);
height:85px;
width:252px;
}
#pageHeader h1 span {
display:none
}
#pageHeader h2 {
}
#pageHeader h2 span {
display:none;
}
#quickSummary {
font-weight:bold;
font-size:12px;
font-style
blique;position:absolute;
top:0px;
right:0;
color:#000;
background-color: transparent;
width:400px;
}
#quickSummary p {
}
#table {
border:1px solid #D37C00;
margin-left:220px;
clear:both;
margin-bottom:10px;
margin-top:30px;
background-color:#DDE0F1;
margin-right:10px
}
#table p{
padding:0 10px;
}
#table h3{
position:relative;
background-color:#fff;
border:1px solid #D37C00;
width:75%;
top:-20px;
left:-10px;
padding:10px;
margin:0;
}
#table2 {
margin-left:210px;
}
#table2 h3{
margin:0;
position:relative;
background-color:#fff;
border:1px solid #D37C00;
width:75%;
top:-20px;
left:-20px;
padding:10px;
}
#table2 div {
border:1px solid #D37C00;
padding:0 10px;
margin:30px 10px;
background-color:#DDE0F1;
}
#footer {
background-color:#fff;
text-align:center;
font-size:10px;
padding-right:20px;
}
#footer a:link, #footer a:visited {
color:#D37C00;
font-weight:bold;
}
#linkList {
position:absolute;
top:11em;
width:200px;
}
#linkList2 {
}
#linkList h3.select {
height:20px;
background-image:url(images/select.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.select span {
display:none
}
#linkList h3.favorites {
height:20px;
background-image:url(images/favorites.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.favorites span {
display:none
}
#linkList h3.archives {
height:20px;
background-image:url(images/archives.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.archives span {
display:none
}
#linkList h3.resources {
height:20px;
background-image:url(images/resources.gif);
border:2px solid #D37C00;
margin:0px;
padding:0px;
}
#linkList h3.resources span {
display:none
}
#linkList .iL {
font-size:80%;
display:block;
border:2px solid #fff;
padding:4px 2px;
background-color:#DDE0F1;
text-align:right;
margin-bottom:1px;
color:#666;
}
#linkList .iL a:link,#linkList .iL a:visited {
color:#D37C00;
}
#linkList .iL a:hover {
}
#extraDiv1 {
clear:both;
}
acronym {
color:#D37C00;
border:0;
cursor:help;
}
look here (<!-- m --><a class="postlink" href="http://www.carmarwholesale.com/test.htm">http://www.carmarwholesale.com/test.htm</a><!-- m -->) for one page and here (<!-- m --><a class="postlink" href="http://www.carmarwholesale.com/test2.htm">http://www.carmarwholesale.com/test2.htm</a><!-- m -->) for the other.anyone? please help. still can't figure this out.
appreciate it.height: 600px;
However, I'm not sure that you'll like that, unless you fiddle with absolute heights for the divs within it, too; otherwise you might end up with lots of empty space on some pages.