liquid + scrollbar in div, is it possible?

[Daakuryu]

Hey there,

first off I want to say thanks for the advice I was given the other day;
checking my css and html cleaned up a few things in my code. which made IE work a tad better. I'm still coding specifically for FF for now until if worked out the kinks.


Unfortunately the advice I got did not fix the real issue I had last time; basically the logo in the footer portion of the page will step over the content portion if the display size or browser size goes under a certain size.

site is slightly nsfw due to 2 ladies clad in lingerie
http://www.salonatouchofclass.com


To try and fix the issue I've tried to make modifications to make the site liquid. Unfortunately that still does not fix my issue (so I must be messing up somewhere) and it has disabled the vertical scrollbar that overflow:auto; caused to appear prior to liquid mods.

Same site with liquid modifications
http://daakuryu.boldlygoingnowhere.org


All I want is this;

- Header and Menu are always same height, adjustable width
- Right Bar and Left bar always same width, adjustable height
- Footer always same height, adjustable width.
- Content panel adjust with and height based space it has inside the
header/footer/left/right boundaries and has a vertical scrollbar inside in case there is too much content for the display area.
- Logo stays inside the darn footer, centered to the width of the footer.

I shouldn't be having this much trouble :(

Css of "liquid version"

html {
overflow:hidden;
height:100%;
}

body
{
background-color: #006699;
color: #ffffff
margin:0;
padding:0;
height:100%;
}

ul.Menu
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

a.Menu
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid blue;
}

a.Menu:hover
{
background-color:#ff3300;
}

li.Menu
{
display:inline
}


#Maindiv
{
position: absolute;
height:100%;
width:100%;
Z-index:0;
}

#Container
{
padding-bottom:110px;
}

#Container:after
{
content:" ";
display:block;
clear:both;
}

#Contain {
position:relative;
margin-left:200px;
}

#Banner
{
top:0px;
left:0px;
width:100%;
height:110px;
Z-index:1;
}

#Menu
{
top:110px;
height:1.6em;
width: 100%;
background-color:purple;
Z-index:1;
}

#Leftbar
{
float:left;
height:100%;
width:200px;
text-align:center;
}

#Rightbar
{
float:right;
height:100%;
width:200px;
text-align:center;
}

#Content
{
overflow:auto;

}

#Bottom
{
position:absolute;
bottom:0;
height:110px;
width:100%;
text-align:center;
}


Css code for non liquid version

html {
overflow: hidden;
}

body
{
background-color: #006699;
color: #ffffff
}

ul.Menu
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

a.Menu
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid blue;
}

a.Menu:hover
{
background-color:#ff3300;
}

li.Menu
{
display:inline
}


Div.Maindiv
{
position: absolute;
top:0px;
left:0px;
height:100%;
width:100%;
Z-index:0;
}

Div.Banner
{
position: absolute;
top:0px;
left:0px;
width:100%;
height:110px;
Z-index:1;
}

Div.Menu
{
position: absolute;
top:110px;
left:0px;
height:1.6em;
width: 100%;
background-color:purple;
Z-index:1;
}

Div.Leftbar
{
position: absolute;
top:140px;
left:0px;
height:100%;
width:15%;
Z-index:1;
}

Div.Rightbar
{
position: absolute;
top:140px;
left:85%;
height:100%;
width:15%;
Z-index:1;
}

Div.Content
{
position: absolute;
top:140px;
left:15%;
height:60%;
width:70%;
overflow: auto;
Z-index:1;
}

Div.Bottom
{
position: absolute;
top:78%;
left:0px;
height:100px;
width:100%;
Z-index:1;
}

[Daakuryu]

no one has any ideas? or is it the nsfw part that stops you from having a look?

[oesxyl]

no one has any ideas? or is it the nsfw part that stops you from having a look?

you have invalid markup:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.salonatouchofclass.com%2F

try to fix them first.

regards

[Daakuryu]

Done, all of those were made by two things

one incorrectly closed tag
and humorously enough the code provided for the this is valid css thing which I copied and pasted.

issue is still there though

[oesxyl]

try this:
- remove overflow: hidden from html
- remove position: absolute, left and top from all: Maindiv, Banner, Menu, Leftbar, Content and Rightbar
- add a margin: 0 auto; to div.Content to center the content.

also fix the invalid css:
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.salonatouchofclass.com%2F

regards

[Daakuryu]

try this:
- remove overflow: hidden from html
- remove position: absolute, left and top from all: Maindiv, Banner, Menu, Leftbar, Content and Rightbar
- add a margin: 0 auto; to div.Content to center the content.

also fix the invalid css:
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.salonatouchofclass.com%2F

regards


Thanks, for the help, it broke the site and forced me to rethink how I was doing things but at least I have a partial working site.

I'm not going to remove the overflow: hidden from html because that is not where I want the scrollbar to be. I want the bar to be in the content portion of the site.

Right now the logo is no longer an issue but I have another one issue, the content portion is not taking as much space as it should be, nor are the two side bars, this makes the footer higher than it should be and it also makes the content still not have a scroll bar despite having a overflow: auto;

[oesxyl]

first remove the overflow: hidden, you can't use a biger hammer to fix that, :)
put what you want to be in the scrollable div into a div add a id, let's say #sbox and add this to css

#sbox {
width: 60%;
margin: 0 auto;
height: 80%;
overflow: auto;
}

adjust the value to what you want.

regards

[Daakuryu]

first remove the overflow: hidden, you can't use a biger hammer to fix that, :)
put what you want to be in the scrollable div into a div add a id, let's say #sbox and add this to css

#sbox {
width: 60%;
margin: 0 auto;
height: 80%;
overflow: auto;
}

adjust the value to what you want.

regards



html {
height:100%;
}

h1, h2, h3, h4, h5, h6
{
line-height: 100%;
padding:0;
margin:0;
}

body
{
background-color: #006699;
color: #ffffff;
margin:0;
padding:0;
padding-right:6px;
height:100%;
}

ul.Menu
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

a.Menu
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid blue;
}

a.Menu:hover
{
background-color:#ff3300;
}

li.Menu
{
display:inline
}


#Maindiv
{
position:relative;
margin:0;
}


#Banner
{
width:100%;
height:110px;
border: medium solid rgb(0,250,0);
}

#Menu
{
height:1.6em;
width: 100%;
background-color:purple;
Z-index:1;
border: medium solid rgb(0,0,255);
}


#Leftbar
{
position:relative;
float:left;
height:100%;
width:200px;
margin:0 0 0 0;
text-align:center;
border: medium solid rgb(0,0,0);
z-index:100;
}

#Rightbar
{
position: relative;
float:right;
height:100%;
width:200px;
margin:0 0 0 0;
text-align:center;
border: medium solid rgb(255,255,255);
}

#Content
{
width: 67%;
height: 80%;
margin-right:200px;
overflow:auto;
margin: 0 auto;
border: medium solid rgb(255,100,255);
}

#Bottom
{
height:110px;
width:100%;
text-align:center;
border: medium solid rgb(0,250,255);
}


http://daakuryu.boldlygoingnowhere.org/Salon/test.shtml


Html Validated (http://validator.w3.org/check?uri=http%3A%2F%2Fdaakuryu.boldlygoingnowhere.org%2FSalon%2Ftest.shtml)

Css Validated (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdaakuryu.boldlygoingnowhere.org%2FSalon%2F&profile=css21&usermedium=all&warning=1)


Removed the overflow: hidden; not sure where the hammer comes in.
added sizes; and as you can see the browser just completely ignores me and stretches the thing as much as it can without putting a scrollbar in the div

[oesxyl]

css is not valid:

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fdaakuryu.boldlygoingnowhere.org%2FSalon%2Ftest.shtml

you don't clear the float:

http://positioniseverything.net/easyclearing.html

regards

[Daakuryu]

css is not valid:

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fdaakuryu.boldlygoingnowhere.org%2FSalon%2Ftest.shtml

you don't clear the float:

http://positioniseverything.net/easyclearing.html

regards

I was wondering why you kept getting errors and I didn't when I validate my css, you validate vs 2, i validate vs 2.1.

Anyway theres only one type of error left in css2 and it's a line that comes straight out of that site you gave me.

What you gave me pushed me in a good direction so thank you for that, I finaly have things working the way I want in FF


html {
height:100%;
}

h1, h2, h3, h4, h5, h6
{
line-height: 100%;
padding:0;
margin:0;
}

body
{
background-color: #006699;
color: #ffffff;
margin:0;
padding:0;
height:100%;
}

ul.Menu
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

a.Menu
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid blue;
}

a.Menu:hover
{
background-color:#ff3300;
color:#000000;
}

li.Menu
{
display:inline;
}


#Maindiv
{
position:relative;
margin:0;
height:70%;
width: auto;
}


#Maindiv:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#Maindiv {display: inline-block;}

/* Hides from IE-mac \*/
* html #Maindiv {height: 1%;}
#Maindiv {display: block;}
/* End hide from IE-mac */


#Banner
{
width: auto;
height:110px;
border: medium solid rgb(0,250,0);
}

#Menu
{
height:1.6em;
width: auto;
background-color:purple;
color:#000000;
Z-index:1;
border: medium solid rgb(0,0,255);
}


#Leftbar
{
position:relative;
float:left;
height:100%;
width:200px;
margin:0 0 0 0;
text-align:center;
border: medium solid rgb(0,0,0);
z-index:100;
}

#Leftbar:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#Leftbar {display: inline-block;}

/* Hides from IE-mac \*/
* html #Leftbar {height: 1%;}
#Leftbar {display: block;}
/* End hide from IE-mac */

#Rightbar
{
position: relative;
float:right;
height:100%;
width:200px;
margin:0 0 0 0;
text-align:center;
border: medium solid rgb(255,255,255);
}

#Rightbar:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#Rightbar {display: inline-block;}

/* Hides from IE-mac \*/
* html #Rightbar {height: 1%;}
#Rightbar {display: block;}
/* End hide from IE-mac */

#Content
{
width: auto;
height: 100%;
overflow:auto;
margin: 0 auto;
border: medium solid rgb(255,100,255);
min-width: 200px
}

#Content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#Content {display: inline-block;}

/* Hides from IE-mac \*/
* html #Content {height: 1%;}
#Content {display: block;}
/* End hide from IE-mac */

#Bottom
{
height:150px;
width: auto;
text-align:center;
border: medium solid rgb(0,250,255);
}


http://daakuryu.boldlygoingnowhere.org/Salon/test.shtml

Of course now IE is being a little ***** and saying "I don't feel like rewarding your hard work" :eek: