Div_Subsilver

Jens · **Joined:** Sun Oct 17, 2004 9:47 pm **Posts:** 2505

This template has the bug that if the content is not height enough, parts of the navigation get clipped. if the navigation for example has 20 entrys or more and you visit a page with not much information on it.

harteg · **Posted:** Sat Dec 31, 2005 1:40 pm

I was fighting against it for about an hour and gave up - any suggestions how to fix it?

Jens · **Joined:** Sun Oct 17, 2004 9:47 pm **Posts:** 2505

no...i wasted about 5 hours on it

but i think our CSS Master Till has a solution...

am i right?

I wish all CMSimplers a happy new Year! Enough CMSimple for me this year, see you in 2006

till · **Posted:** Sun Jan 01, 2006 7:07 pm

Hi,

there is a CSS property called "min-height". However, it is supported by all browsers but Internet Explorer. To make it work in IE you have to use Javascript, if I remember right.

I am sorry, but in the moment I am in Vienna, far away from my office, and cannot check it.

Till

till · **Posted:** Sun Jan 01, 2006 7:21 pm

javascript see at:
http://www.doxdesk.com/software/js/minmax.html

Till

Jens · **Joined:** Sun Oct 17, 2004 9:47 pm **Posts:** 2505

Thanks till, great script.

mulder · **Posted:** Sun Jan 01, 2006 10:02 pm

why not simply add a resized min height pixel 1 byte weight ?

Jens · **Joined:** Sun Oct 17, 2004 9:47 pm **Posts:** 2505

Quote:

why not simply add a resized min height pixel 1 byte weight ?

I dont see how that should help? You cant know the size of the navigation, because it differs from site to site...

till · **Posted:** Mon Jan 16, 2006 7:44 pm

Hi,

today I checked the CSS of div_subsilver. I made actually only two changes:

1.

Code:

#left{position:absolute;left:0px;width:190px;top:0px;padding:5px}

became

Code:

#left{float:left;width:190px;top:0px;padding:5px}

2.

Code:

#right{background-color:#FFFFFF;width:520px;position:static;margin-left:200px;padding-left:2px;}

became

Code:

#right{background-color:#FFFFFF;width:520px;float:right;padding-left:2px;}

The whole stylesheet can be seen at the bottom.

With these changes the clipping of long menus has been fixed. However, I don't know wether the stylesheet
is supposed to look like that. With long menus but short content the blue bar with the top, forward and
backwards functions moves just below the text and leaves an open grey area with the background-color
of the navbar. To get rid of that, one has to move the blue bar into its own div container and position it
just below the div container called "columns" (in that case do not forget "clear:both"!!!).

Till

stylesheet.css

Code:

body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;scrollbar-face-color:#DEE3E7;scrollbar-highlight-color:#FFFFFF;scrollbar-shadow-color:#DEE3E7;scrollbar-3dlight-color:#D1D7DC;scrollbar-arrow-color:#006699;scrollbar-track-color:#EFEFEF;scrollbar-darkshadow-color:#98AAB1;}

#wrapper1{position:relative;margin-left:auto;margin-right:auto;top:10px;width:726px}

#wrapper2{position:relative;width:726px;background-color:#FFFFFF;border:2px #006699 solid}

#logo{position:absolute;top:0px;left:0px;width:726px;height:100px;padding:0px;background-color:#5493B4;background-image:url(images/top.jpg);background-repeat:no-repeat;background-position:0px 0px}

#sitename{position:absolute;top:60px;left:10px;font-weight:normal;font-size:20pt;letter-spacing:1px;color:#FFA34F;}
#searchbox{position:absolute;top:20px;left:550px;}
#searchbox .text,#searchbox .submit{border:2px solid #5493B4;background-color:white;}

#columns{width:722px;position:relative;top:102px;background-color:#DEE3E7;margin-left:2px;overflow:hidden;}
#left{float:left;width:190px;top:0px;padding:5px}
#right{background-color:#FFFFFF;width:520px;float:right;padding-left:2px;}

#locator{background-color:#DEE3E7;width:510px;position:static;padding:5px}

#content{width:500px;position:static;padding:20px 10px 20px 10px}

#navigator{background-color:#5493B4;width:510px;height:15px;position:relative;padding:5px}

#previouspage{ position:absolute; left:10px; }
#top{ position:absolute; left:50%; }
#nextpage{ position:absolute; right:10px;}

.clear{width:700px;clear:both;height:0px;overflow:hidden;position:relative;margin-top:104px;}

form{margin:0;padding:0px;}
img{border:0;}

a:link,a:active,a:visited{color:#006699;}
a:hover{text-decoration:underline;color:#DD6900;}
hr{height:0px;border:solid #D1D7DC 0px;border-top-width:1px;}

H1,H2,H3{font-size:16pt;font-weight:normal;margin-bottom:6px;}
H4{font-size:12pt;font-weight:normal;margin-bottom:6px;}

ul.menulevel1,ul.menulevel2,ul.menulevel3,ul.sitemaplevel1,ul.sitemaplevel2,ul.sitemaplevel3,ul.submenu,ul.search{padding-left:0;margin-left:0;list-style:none;}

li{line-height:1.5;}

li.doc{padding-left:15px;background-image:url(menu/doc.gif);background-repeat:no-repeat;}

li.docs{padding-left:15px;background-image:url(menu/docs.gif);background-repeat:no-repeat;}

li.sdoc{padding-left:15px;background-image:url(menu/sdoc.gif);background-repeat:no-repeat;}

li.sdocs{padding-left:15px;background-image:url(menu/sdocs.gif);background-repeat:no-repeat;}

.menulevel1,.menulevel2,.menulevel3,#locator,#navigator,.sitemaplevel1,.sitemaplevel2,.sitemaplevel3,.submenu{font-weight:bold;font-size:9pt;color:#5493B4;}
.menulevel1 a:link,.menulevel1 a:visited,.menulevel1 a:active,.menulevel1 a:hover,.menulevel2 a:link,.menulevel2 a:visited,.menulevel2 a:active,.menulevel2 a:hover,.menulevel3 a:link,.menulevel3 a:visited,.menulevel3 a:active,.menulevel3 a:hover,#locator a:link,#locator a:visited,#locator a:active,#locator a:hover,#navigator a:link,#navigator a:visited,#navigator a:active,#navigator a:hover,.sitemaplevel1 a:link,.sitemaplevel2 a:link,.sitemaplevel3 a:link,.sitemaplevel1 a:visited,.sitemaplevel2 a:visited,.sitemaplevel3 a:visited,
.sitemaplevel1 a:active,.sitemaplevel2 a:active,.sitemaplevel3 a:active,.sitemaplevel1 a:hover,.sitemaplevel2 a:hover,.sitemaplevel3 a:hover,.submenu a:link,.submenu a:visited,.submenu a:active,.submenu a:hover{text-decoration:none;}

.menu{font-weight:bold;font-size:8pt;color:#5493B4;margin-bottom:5px;}
.menu a{text-decoration:underline;font-weight:bold;}

#lastupdate{font-weight:bold;font-size:8pt;color:#5493B4;margin-bottom:5px;}

.search a{font-weight:normal;color:black;}
.search a:link,.search a:visited{color:black;}
.search a:active,.search a:hover{color:black;}

.edit{font-size:7pt;color:black;background-color:#E5E5E5;}
.edit a:link,.edit a:visited,.edit a:active,.edit a:hover{font-weight:normal;text-decoration:none;color:black;}

#loginlink,#loginlink a,#loginlink a:link,#loginlink a:visited,#loginlink a:active,#loginlink a:hover{font-weight:normal;font-size:8pt;color:#5493B4;text-decoration:none;margin-top:5px;margin-bottom:10px;}

input,select{font-size:8pt;text-indent:2px;}
textarea{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:8pt;background-color:white;width:98%;}

.copyright{font-size:10px;color:#444444;letter-spacing:-1px;padding:10px;}
.copyright a,.copyright a:link,.copyright a:visited{color:#444444;text-decoration:none;}
.copyright a:hover,.copyright a:active{color:#000000;text-decoration:underline;}

harteg · **Posted:** Mon Jan 16, 2006 10:08 pm

Added to the list at http://www.cmsimple.dk/?Downloads:Future_development

Clem · **Posted:** Tue Feb 28, 2006 12:07 am

Till- but why does this work?

What does clear:both do?

mulder · **Posted:** Tue Feb 28, 2006 7:55 am

clear:both is to avoid adjacent side block left & right, so next adjacent block will be placed down

till · **Posted:** Tue Feb 28, 2006 9:35 am

Clem wrote:

Till- but why does this work?

Hi Clem,

there are two div-containers (#left, #right) inside a wide div-container called #columns.
#left is 190 px wide, #right is 520px wide. They both fit well side by side in the #columns container which is
722px wide. Before I fixed it, #right had a left margin of 200px, so that the content, which is placed in this
container, startet 200 px from the left border. This gave room for #left (190px) which "smuggled" itself
(because of "position:absolute") on top of the left margin of #right (200px). However, #columns, the
surrounding div-container, thought that #right is below #left (where it normaly should have been),
since div-containers follow one after the other from top to bottom. And since #columns thought that,
it orientated its own height according to the height of #right. As a consequence, long menus in
the left container #left were cut off.

But if you tell #columns that #left has to "float" left and #right has to "float" right, you get the same
effect without "smuggling" and #columns orientates its own height according to the height of the
longest of the div-containers it holds side by side.

Clear:both has been explained by mulder already. It abolishes the "float:left" and "float:right" effect.
However, here I made a mistake in my previous statement. If you place the blue bar in its own container
below #columns, float:left and float:right should not effect the positioning of the blue bar anymore, since
float is inheritated downwards, but not into parent elements. That means, clear:both shouldn't be necessary
(but you never know in this business :wink:

).

Till

Archived CMSimple Support Forum

Div_Subsilver

Who is online