Vertical navigation image 100%
Hi,
I am trying to make the left-hand navigation column on this page extend 100 % of the vertical space.
I have tried adding min-height to the body and to the elements which contain the sidebar div.
I would love it if someone had a solution!
The attached jpg shows how we would like the page to look...
Thanks,
Josh
I am trying to make the left-hand navigation column on this page extend 100 % of the vertical space.
I have tried adding min-height to the body and to the elements which contain the sidebar div.
I would love it if someone had a solution!
The attached jpg shows how we would like the page to look...
Thanks,
Josh
/* here is the sidebar div /*
.sidebar {
background-image:url(images/left-sidebar.gif);
float:left;
margin-right:9px;
padding-bottom:49.9%;
padding-top:3px;
width:100px;
Yes but the CONTAINING divide for the entire page is the HTML and BODY itself, so why not try this --
HTML, BODY {height:100%; min-height:100%; width:100%; min-width:100% }
That says, make the page fill the entire browser window.
Then do the same coding for the left DIV you want full height. Now if the other DIVs on the page are not also full height, they will / can limit the height of the left DIV.
There are 2 ways around this -- 1) make a big container DIV for everything on the page, and put the left DIV under that, both styled like body, above.
or 2) -- float left the LEFT DIV to pull it out of the page context, so it is not limited by the other DIVs.
HTML, BODY {height:100%; min-height:100%; width:100%; min-width:100% }
That says, make the page fill the entire browser window.
Then do the same coding for the left DIV you want full height. Now if the other DIVs on the page are not also full height, they will / can limit the height of the left DIV.
There are 2 ways around this -- 1) make a big container DIV for everything on the page, and put the left DIV under that, both styled like body, above.
or 2) -- float left the LEFT DIV to pull it out of the page context, so it is not limited by the other DIVs.
ASKER
Can you please explain exactly what you mean in this paragraph?
Then do the same coding for the left DIV you want full height. Now if the other DIVs on the page are not also full height, they will / can limit the height of the left DIV.
I can force the center content div (div class="entries") to be the same height as the sidebar div.
Would that negate the necessity for the alternatives you outline in the last paragraph?
Thanks!
-Josh
Then do the same coding for the left DIV you want full height. Now if the other DIVs on the page are not also full height, they will / can limit the height of the left DIV.
I can force the center content div (div class="entries") to be the same height as the sidebar div.
Would that negate the necessity for the alternatives you outline in the last paragraph?
Thanks!
-Josh
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
of course the comments above only apply if all three columns are wrapped in one container DIV. If they are independent, as in float, or separate positioning, then the height of one will not affect the height of another.
if the two (or three) columns are "floating divs" I think it's impossibile to link their height.
The only thing to do in that case is to apply the background of sidebar to the main div.
The only thing to do in that case is to apply the background of sidebar to the main div.
#main {
background-image:url(images/left-sidebar.gif) left top repeat-y;
}
ASKER
Thanks for the ideas!
I have added min-height attributes to the divs in question.
I also tried to add the background-image to the main div, but it is not being accepted by Firebug and it is not rendering when I make the change in the CSS... not sure why.
The resulting page is 100% of the screen width but the two columns are still not 100% in length.
Can you please see whether I have executed your suggestions correctly or if there is something else affecting the page?
Thanks!!
-Josh
I have added min-height attributes to the divs in question.
I also tried to add the background-image to the main div, but it is not being accepted by Firebug and it is not rendering when I make the change in the CSS... not sure why.
The resulting page is 100% of the screen width but the two columns are still not 100% in length.
Can you please see whether I have executed your suggestions correctly or if there is something else affecting the page?
Thanks!!
-Josh
ASKER
I have made a number of changes (too many to detail here). I have taken many of the concepts outlined here, but none in total.
I have a home page which works fairly well in Sarafi and Firefox, but looks funky in IE.
Does anyone have suggestions for an IE hack?
(Attached are screen shots from each browser)
Thanks,
Josh
IE7.png
firefox.jpg
safari.jpg
I have a home page which works fairly well in Sarafi and Firefox, but looks funky in IE.
Does anyone have suggestions for an IE hack?
(Attached are screen shots from each browser)
Thanks,
Josh
IE7.png
firefox.jpg
safari.jpg
you proabably will have to apply a positioning hack for IE say +10PX or so -- but with correct cross browser code, this should not be necessary. THere is no reason why IE cannot render the popup menu in the correct position. Try using relative positioning for the popup DIV --
DIV.menu1 position:relative 10px vertical 3 px horizontal, both positive. That is a guess from the pics.
DIV.menu1 position:relative 10px vertical 3 px horizontal, both positive. That is a guess from the pics.
ASKER
Thanks!
What DIV exactly are you referring to? Neither column is a pop-up... not sure if that changes your thoughts or not. (It's the Home column which is not appearing correctly in IE.
Thanks again,
Josh
What DIV exactly are you referring to? Neither column is a pop-up... not sure if that changes your thoughts or not. (It's the Home column which is not appearing correctly in IE.
Thanks again,
Josh
It looks like your popup menu is it its own DIV to me -- at least without seeing the code. That is the DIV I was referring to, the first image shows it out of position.
ASKER
Okay!
I have spent the morning validating my CSS, and it is mostly complete. I still get these errors and I am wondering how to fix them, and whether they are to blame for the IE problems:
28 sup Property _position doesn't exist : static
363 .wp-caption Property -moz-border-radius doesn't exist : 3px
364 .wp-caption Property -khtml-border-radius doesn't exist : 3px
366 .wp-caption Property -webkit-border-radius doesn't exist : 3px
367 .wp-caption Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 3px
Thanks again for your help... I think it's appropriate to raise the value of this question...
I have spent the morning validating my CSS, and it is mostly complete. I still get these errors and I am wondering how to fix them, and whether they are to blame for the IE problems:
28 sup Property _position doesn't exist : static
363 .wp-caption Property -moz-border-radius doesn't exist : 3px
364 .wp-caption Property -khtml-border-radius doesn't exist : 3px
366 .wp-caption Property -webkit-border-radius doesn't exist : 3px
367 .wp-caption Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 3px
Thanks again for your help... I think it's appropriate to raise the value of this question...
/*
Theme Name: Xeiro
Theme URL: http://www.blogsdna.com/xeiro-wordpress-theme
Description: Three column, Search engine optimized, Widget Ready, Adsense optimized, Supporting tags & Gravatars, Lightweight WordPress v2.6 Professional Wordpress Theme from <a href="http://www.blogsdna.com">BlogsDNA</a>.
Author: blogsdna
Author URI: http://www.blogsdna.com
Version: 1.1
The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
Tags: widget ready, fixed width, three columns, 3 colums, widgets, adsense, seo, adsense ready, custom header, gravatar support, sidebar left, sidebar right, widget sidebar, seo adsense
*/
div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin:0; padding:0; }
HTML, BODY {height:100%; min-height:100%; width:100%; min-width:100% }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size:1em; font-weight:normal; font-style:normal; }
ul,ol { list-style:none; }
fieldset,img { border:none; }
caption,th { text-align:left; }
table { border-collapse:collapse; border-spacing:0; }
img.left { float:left; margin:2px 20px 16px 0; }
img.right { float:right; margin:2px 0 16px 20px; }
.clear { clear:both; height:0; overflow:hidden; line-height:1px; font-size:1px; }
/* default type */
strong,b { font-weight:bold; }
em,i { font-style:italic; }
sup { padding-left:1px; font-size:10px!important; font-weight:normal!important; vertical-align:baseline; position:relative; bottom:.33em; color:#76797c; _position:static!important; }
h1 { font-weight:bold; font-size:24px; line-height:36px; margin-bottom:18px; }
h2 { font-weight:bold; font-size:16px; line-height:18px; margin-bottom:18px; }
h3 { font-weight:bold; font-size:1em; line-height:18px; }
h4 { font-weight:bold; font-size:10px; line-height:18px; }
p { margin-bottom:18px; }
p.more { text-align:right; }
p.more a { font:bold 11px Verdana; text-decoration:none; }
ul { margin-bottom:18px; margin-left:2em; list-style:disc outside; }
ol { margin-bottom:18px; list-style:decimal; margin-left:25px; }
ul ul { margin-top:4px; margin-bottom:5px; }
/* layout */
body {
text-align:center;
background: #585858 none repeat-x scroll 0 0;
font:12px/18px "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif; color:#333;
min-height: 100%;
}
a {
color:#ffffff;
}
#wrap {
width:100%;
border:1px solid #B8B9BC;
margin:0 auto;
text-align:left;
height:520px;
width:900px;
padding-bottom:1px;
}
.cap {
line-height:1px;
font-size:1px; }
object {
margin-left:20px;
}
/*Pages*/
#pages {
position:relative;
background:url(images/page_top.gif) no-repeat;
margin-top:10px;
padding-left:2px;
padding-top:10px;
height:100%;
color:#FFFFFF;
font-weight: bold
}
#pages a {
color:#FFFFFF;
padding:1px 5px;
text-decoration:none;
font-weight:bold;
}
#pages ul {
display:inline;
width:800px;
margin-left:5px;
float:left;
}
#pages li {
display:inline;
margin-right:0px;
}
#main {
background-image:url(images/left-sidebar.gif);
background-repeat: repeat-y;
max-height:348px;
}
/*Footer*/
#footer_link {
position:relative;
background:url(images/page_top.gif) no-repeat;
margin-top:10px;
padding-left:10px;
padding-top:10px;
height:30px;
color:#FFFFFF;
text-align:center;
}
#footer_link a {
color:#FFFFFF;
padding:1px 5px;
text-decoration:none;
font-weight:bold;
}
/* header */
#header {
position:relative;
background:url(images/header.gif) no-repeat;
height:160px;
margin:0 0 5px; }
#header h1 {
position:absolute;
top:85px;
left:123px;
color:#fff;
font:bold 18px georgia,Arial, sans-serif;
margin:0; }
#header h1.title {
top:103px;
font-size:20px;
line-height:23px;
font-weight:bold; }
#header h1 a {
color:#fff;
text-decoration:none; }
#header h1 small {
display:block;
font-weight:normal;
font-size:14px;}
#header h2 {
position:absolute;
top:120px;
left:123px;
color:#fff;
font:bold 16px Arial, sans-serif;
margin:0; }
/* content */
#content {
float:left;
width:180px;
height:319px; }
#content .entries {
background-image:url(images/right-sidebar.gif);
margin-left:-12px;
margin-top:-9px;
height:312px;
padding-bottom:9.5px;
}
#content .entries h1,#content .entries h2 {
padding-top:3px;
margin-bottom:2px;
font:bold 15px/1.3 Arial, sans-serif;
min-height:100%;
color:#333; }
#content .entries h1.title { margin-bottom:15px; }
#content .entries h2 a { text-decoration:none; color:#333; }
#content .entries h3.heading {
margin:0;
margin-bottom:10px;
margin-bottom:10px;
margin:9px 0 10px;
padding:1px 20px 3px;
font-size:18px;
line-height:22px;
color:#FEB931; }
#content .entries h3.heading a{
text-decoration:none;
border-bottom:1px dotted #000099;
}
#content .entries h3.heading a:hover{
border-bottom:1px solid #3f697c;
}
#content .enteries img {margin:2px 2px 2px 2px;}
#content .entries .cap { background:url(images/entries_bgbottom.gif) no-repeat; margin-top:-8px; height:12px; font-size:1px; line-height:1px; }
#content .entries .cap.top { background-image:url(images/entries_bgtop.gif); margin:0 0 -7px; }
#content .entries .cap.top.noheader { height:25px; }
#content .post {
color: #585858;
padding:0 20px 8px;
min-height:100%;
}
#content .post.bio { padding-top:15px; }
#content .post p { color:#fff; margin-bottom:7px;}
#content .post p.info { font-size:11px; margin-bottom:7px; float:left; width:470px;}
#content .post p.info a { font-weight:bold; text-decoration:none; color:#2F6681; }
#content .post a.more { font-weight:bold; text-decoration:none; color:#2F6681; }
#content .post a.more.inline { margin-left:5px; }
#content .post .actions p { width:47%; float:left; margin-bottom:11px; font-size:10px; color:#666; }
#content .post .actions p.tags { float:right; }
#content .post .more a{
text-decoration:none;
}
#content h3.title {
font-size:14px;
margin:0 5px 18px;
padding:6px 16px;
background:#e6e6e6;
border-bottom:1px solid #d6d6d6;
color:#000; }
#content .comment { padding-bottom:10px; }
#content .comment h4.posted { font-size:11px; font-weight:normal; color:#888; margin-bottom:2px; }
#content .comment h4.posted strong { font-size:13px; font-weight:bold; color:#2F6681; margin-right:5px; }
#content .comment h4.posted a { color:#2F6681; }
#content .comment p { margin-bottom:12px; font-size:12px; color:#444; }
#content #comment_form { padding-bottom:16px; background:url(images/post_bgbottom.gif) no-repeat left bottom; }
#content #comment_form table { margin:0 20px 12px; }
#content #comment_form table td input { margin:3px 0; width:320px; }
#content #comment_form table th { padding-right:9px; color:#666; }
#content #comment_form p { margin:0 20px 12px; color:#666; }
#content #comment_form textarea { width:370px; height:145px; }
#content .paginate { padding:10px 20px; font-size:12px; color:#666; }
#content .paginate .pagecount { margin-right:10px; }
#content .paginate b { padding:3px 6px; color:#333; }
#content .paginate a { padding:3px 6px; }
#content .paginate a:hover { color:#fff; background:#2f6782; text-decoration:none; }
#content .more-entries { margin-right: 3px; font-size: 11px; text-align: right; }
#content .more-entries .calignleft
{float:left;
}
#content .more-entries .calignright
{float:right;
}
.commenttext-admin{background-color:#FFFFE0; min-height:20px}
.commenttext-admin img{float:right}
.commenttext{min-height:20px}
.commenttext img{float:right}
#horizontalbar {
background-color:#B8B9BC;
height: 20px;
width: 100%;
margin-top: -5px;
text-align:center;
text-transform:uppercase;
}
/* sidebars */
.sidebar { background-image:url(images/left-sidebar.gif); background-repeat:no-repeat; float:left; margin-right:9px; margin-bottom:5px; padding-top:3px; width:100px; height:319px;}
.sidebar.last { float:left; margin-right:0px; padding-top:3px; width:100px; }
.sidebar .box { width:100px; margin-bottom:8px; background-repeat:repeat-y; min-height:100%; }
.sidebar .box .cap { height:5px; }
.sidebar .box .cap.top { background:url(images/sidebar_box_bgtop.gif) no-repeat; }
.sidebar .box p { color:#2f6782; font-size:12px; font-weight:bold; display:inline; margin:0 5px 0 10px; }
.sidebar .box h3 {
background-image: url(images/sidebar-left.gif);
font-size:12px;
padding:4px 10px 8px;
color:#fff; }
.sidebar .box h4 { font-size:12px; font-weight:bold; padding:2px 0 0 14px; }
.sidebar .box ul { list-style:none; margin:0 15px 8px; text-transform:uppercase; }
.sidebar .box ul li { font-size:13px; line-height:15px; margin-top:6px; padding-bottom:4px; }
.sidebar .box ul li ul { list-style:none; margin:0 15px 0px; }
.sidebar .box ul li ul li{ font-size:11px; line-height:15px; padding-bottom:0px; }
.sidebar .box ul li ul li ul{ list-style:none; margin:0 15px 0px; }
.sidebar .box ul li ul li ul li { font-size:11px; line-height:15px; padding-bottom:0px; }
.sidebar .box ul li.current_page_item a {
color:#FDBA31; }
.sidebar .box form { padding:4px 15px 6px; }
.sidebar .box form select { width:151px; font-size:11px; }
.sidebar .box form select option { color:#444; }
.sidebar .box#featured ul { margin-bottom:12px; padding-top:3px; }
.sidebar .box#featured li { background:url(images/arrow_dotted.gif) no-repeat 0 .41em; padding:0 0 0 10px; margin-bottom:6px; }
.sidebar .box#subscribe li { background:url(images/arrow_dotted.gif) no-repeat 0 50%; padding:0 0 0 11px; margin-bottom:8px; }
.sidebar .box#subscribe li a { display:block; text-indent:-9999px; height:13px; outline:0; }
.sidebar .box#subscribe li#s-yahoo a { background:url(images/sub_yahoo.gif) no-repeat; }
.sidebar .box#subscribe li#s-google a { background:url(images/sub_google.gif) no-repeat; }
.sidebar .box#subscribe li#s-bloglines { margin-bottom:6px; }
.sidebar .box#subscribe li#s-bloglines a { background:url(images/sub_bloglines.gif) no-repeat; }
.sidebar .box#subscribe li#s-newsgator a { background:url(images/sub_newsgator.gif) no-repeat; height:18px; }
.sidebar .box#subscribe li#s-rss a { background:url(images/sub_rss.gif) no-repeat; height:12px; }
.sidebar .box#mailinglist h3 small { font-size:11px; font-weight:normal; margin-left:3px; color:#ddd; }
.sidebar .box#mailinglist h3 small a { color:#fff; }
.sidebar #mailinglist form { padding:3px 11px; }
.sidebar .box#mailinglist input.email { float:left; width:120px; height:18px; }
.sidebar .box#mailinglist #mailinglist-info { position:relative; display:none; }
.sidebar .box#mailinglist #mailinglist-info.selected { display:block; }
.sidebar .box#mailinglist #mailinglist-info .hidden { position:absolute; top:-4px; left:-136px; width:300px; background:url(images/mailinglist_arrow.gif) no-repeat 50% 0; padding:12px 0 0; }
.sidebar .box#mailinglist #mailinglist-info .content { background:#ffc; border:1px solid #ccc; border-width:0 1px 1px; padding:10px 15px; }
.sidebar .box#mailinglist #mailinglist-info .content p { display:block; color:#222; font-weight:normal; font-size:11px; line-height:15px; margin:0 0 8px; }
.sidebar .box#mailinglist #mailinglist-info .content ol { color:#222; margin-bottom:8px; }
.sidebar .box#mailinglist #mailinglist-info .content li { font-size:11px; color:#222; }
.sidebar .box#mailinglist #mailinglist-info #hide { font-size:11px; color:#333; text-align:right; margin-bottom:2px; }
.sidebar .box .row { margin:3px 0pt; clear:both; float:left; width:183px; }
.sidebar .box .row input.search { width:120px; height:18px; float:left; margin-left:10px; }
.sidebar .box .row input#submit { margin:0; float:left;}
.sidebar .box .row label { margin-left:7px; position:relative; bottom:1px; color:#2f6782; }
.sidebar .box#tagcloud ul { margin:3px 11px; padding-bottom:1px; }
.sidebar .box#tagcloud li { display:inline; padding:4px 4px 0 0; }
.sidebar .box#tagcloud a { text-decoration:none; color:#2f6782; }
.sidebar .button { width:183px; margin-bottom:8px; }
.sidebar .button a { display:block; text-indent:-9999px; outline:0; width:183px; height:31px; }
.sidebar .button#bookmark a { background:url(images/button_bookmark.gif) no-repeat; }
.news .sidebar ul li#news a { background:url(images/arrow_dotted_white.gif) no-repeat 5px 50%; font-weight:bold; height:100%; }
.news #header {background-image:url(images/header.gif);}
/* footer */
#footer { padding:3em 0 1em; font-size:11px; color:#444; clear:both; }
#footer a { text-decoration:none; color:#2F6681; }
/* Must Required CSS CLASS for Wordpress 2.5 onwords check out http://codex.wordpress.org/CSS */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}*/
if you put to the sidebar height: 100% it gets the height of the main div.
You have some choices:
- consider table layout only for the two columns (I don't like this, but It's a solution)
- use absolute layout, so the sidebar will get 100% of the body area
- use fake column, in your case you should put:
background-image:url(imageto the main div, not to the sidebar, and the job is done.
Fake columns are explained very well in this article of alistapart:
http://www.alistapart.com/
Extract: