Solved

Vertical navigation image 100%

Posted on 2008-10-01
12
935 Views
Last Modified: 2011-10-19
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
/*  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;

Open in new window

C-R-995895-2008-MicroSite-plain.jpg
0
Comment
Question by:fialkoff
  • 5
  • 5
  • 2
12 Comments
 
LVL 2

Expert Comment

by:lorenzodalcol
Comment Utility
It is not possibile to do that thing: the floating div (sidebar) "does not know how much is content height".
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(images/left-sidebar.gif) left top repeat-y;

to 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/articles/fauxcolumns/

Extract:
One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a <div>, the <div> will only expand down the page 200 pixels.
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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.
0
 

Author Comment

by:fialkoff
Comment Utility
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
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 250 total points
Comment Utility
"Can you please explain"

If you have three DIVs side by side, as in a 3 column page layout, restricting the height of some DIVs can also limit the height of the others.  If they are all at 100% height with HTML and BODY likewise, no problem.

What you need to do here is experiment and see.  Set all to 100% and if all are full height, fine, then try one at 50% and see what you get in Mozilla - FF, and IE 6 or 7.  It depends on the way you structure the DIVs.

You should always keep the options in the last 2 paragraphs in mind, either may be needed in some cases.
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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.
0
 
LVL 2

Expert Comment

by:lorenzodalcol
Comment Utility
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.
#main {

    background-image:url(images/left-sidebar.gif) left top repeat-y;

}

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:fialkoff
Comment Utility
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
0
 

Author Comment

by:fialkoff
Comment Utility
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
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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.
0
 

Author Comment

by:fialkoff
Comment Utility
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
0
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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.
0
 

Author Comment

by:fialkoff
Comment Utility
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...
/* 

	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;

}*/

Open in new window

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now