Irishjugg
08-20-2008, 01:35 PM
Hello,
I have been working with a certain page layout for a while and got some wonderful help with images from another member.
Right now I have a problem where when I add text to my div id=inner inside my content div (separate inner div to have correct padding for image and text lineup) the content div doesn't extend to fit the content. I have it as a position: relative element which is what I think is the problem and wont properly let the div grow. When I make the elements any different positions I lose my layout and/or the sections.
Some help with how to fix these issues, one or the other would be greatly appreciated, and probably help my (mis)understanding of CSS positioning and block element expansion.
Current page with dummy text is at:
http://eatechsolutions.vndv.com/bb/home.htm
two code chunks are used:
home.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>ND Best Buddies</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="scheme.css" />
</head>
<body>
<div id="topstripe"></div>
<div id="center">
<div id="tspacer"></div>
<div id="wrapper">
<div id="header">
<div id="lspacer"></div>
<ul>
<li class="lcapend"></li>
<li>Home</li>
<li>My Buddy</li>
<li>Friendship Updates</li>
<li>Event Schedule</li>
<li>Event Feedback</li>
<li>Associate Buddies</li>
<li class="rcap"></li>
</ul>
<ul id="admin">
<li class="lcap"></li>
<li>Admin</li>
<li class="rcap"></li>
</ul>
<img src="images/headertopbg.png" class="headtop" />
<img src="images/headerbottombg.png"
class="headbottom" />
</div>
<div id="vspacer"></div>
<div id="content">
<div id="inner"> <!-- USED FOR PADDING LEFT -->
<p>TEST TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<br>tryTEST TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<TEST TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<br>trybr>try</p>
</div>
<img src="images/contenttopbg.png" class="contop" />
<img src="images/contentbottombg.png"
class="conbottom" />
</div> <!-- CLOSE FOR CONTENT DIV -->
</div> <!-- WRAPPER CLOSE, FOR ALIGNMENT -->
</div> <!-- Close CENTER -->
<img src="images/bottomcap.png" class="bottomcap" />
</div>
</body>
</html>
and scheme.css
body {
text-align: center;
font-family: calibri, arial;
font-size: 16px;
background-color: white;
margin: 0px;
color: black;
}
p {
color: black;
z-index: 10;
position: absolute;
}
#topstripe {
/*background-color: #FFAE5E;*/
background-image: url('images/orangish.png');
background-repeat: repeat-x;
text-align: left;
height: 168px;
width: 100%;
position: absolute;
left: 0px;
top: 40px;
}
#center {
margin: 0 auto;
width: 1020px;
text-align: left;
position: relative;
top: 0px;
/*background-color: gray;*/
background-image: url('images/yellowness.png');
background-repeat: repeat-y;
overflow: hidden;
}
#tspacer {
width:100%;
height: 88px; /* 88 */
}
#vspacer {
width: 100%;
height: 20px;
clear: both;
}
#lspacer {
height: 1px;
width: 40px;
float: left;
}
#header {
width: 980px;
height: 154px;
position: relative;
/*background-color: white;*/
background-image: url('images/panelsmiddle.png');
background-repeat: repeat-y;
background-position: right;
/*background-attachment: fixed;*/
float: right;
padding-right: 14px;
z-index: 1;
}
img.headtop {
position: absolute;
top: 0px;
right: -1px;
z-index: 0;
}
img.headbottom {
position: absolute;
bottom: -12px;
right: 0px;
z-index: 1;
}
img.bottomcap {
position: relative;
bottom: 0px;
right: 0px;
z-index: 1;
}
#header ul {
height: 27px;
/*background-color: lightblue;*/
color: white;
font-weight: bold;
margin: 0;
padding: 0;
position: relative;
float: left;
top: 128px;
padding-left: 24px;
z-index: 2;
}
ul#admin {
float: right;
padding-left: 0px;
padding-right: 24px;
}
li {
list-style: none;
float: left;
text-align: center;
padding-left: .5em;
padding-right: .5em;
height: 27px;
line-height: 25px;
background-image: url('images/orangebar.png');
background-repeat: repeat-x;
/*border-right: 1px inset black;*/
}
li:hover {
background-image: url('images/purple.png');
}
#admin li {
width: 80px;
padding-left: 0;
padding-right: 0;
/*background-image: url('images/orangebar.png');*/
}
li.lcapend {
width: 15px;
line-height: 25px;
/*background-color: gray;*/
padding-left: .3em;
padding-right: 0;
background-image: url('images/leftendcaporg.png');
background-repeat: no-repeat;
background-position: right;
}
li.rcap {
width: 14px;
/*background-color: gray;*/
padding-left: 0;
padding-right: .3em;
background-image: url('images/rightmidcaporg.png');
background-repeat: no-repeat;
background-position: left;
}
#admin li.lcap {
width: 15px;
padding-left: .3em;
padding-right: 0;
background-image: url('images/leftmidcaporg.png');
background-repeat: no-repeat;
background-position: right;
z-index: 3;
}
#admin li.rcap {
width: 15px;
/*background-color: gray;*/
padding-left: 0;
padding-right: .3em;
background-image: url('images/rightendcaporg.png');
background-repeat: no-repeat;
background-position: left;
}
#content {
width: 980px;
min-height: 350px;
height:auto !important;
height:450px;
position: relative;
clear: right;
float: right;
padding-left: 0px;
background-image: url('images/panelsmiddle.png');
background-repeat: repeat-y;
background-position: right;
}
#inner {
float: left;
padding-left: 54px;
padding-top: 4px;
}
img.contop {
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
img.conbottom {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
}
#wrapper {
width: 980px;
position: relative;
float: right;
background-image: url('images/wrappermiddle.png');
background-repeat: repeat-y;
background-position: right;
}
img.containtop {
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
img.containbottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 0;
}
I have been working with a certain page layout for a while and got some wonderful help with images from another member.
Right now I have a problem where when I add text to my div id=inner inside my content div (separate inner div to have correct padding for image and text lineup) the content div doesn't extend to fit the content. I have it as a position: relative element which is what I think is the problem and wont properly let the div grow. When I make the elements any different positions I lose my layout and/or the sections.
Some help with how to fix these issues, one or the other would be greatly appreciated, and probably help my (mis)understanding of CSS positioning and block element expansion.
Current page with dummy text is at:
http://eatechsolutions.vndv.com/bb/home.htm
two code chunks are used:
home.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>ND Best Buddies</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="scheme.css" />
</head>
<body>
<div id="topstripe"></div>
<div id="center">
<div id="tspacer"></div>
<div id="wrapper">
<div id="header">
<div id="lspacer"></div>
<ul>
<li class="lcapend"></li>
<li>Home</li>
<li>My Buddy</li>
<li>Friendship Updates</li>
<li>Event Schedule</li>
<li>Event Feedback</li>
<li>Associate Buddies</li>
<li class="rcap"></li>
</ul>
<ul id="admin">
<li class="lcap"></li>
<li>Admin</li>
<li class="rcap"></li>
</ul>
<img src="images/headertopbg.png" class="headtop" />
<img src="images/headerbottombg.png"
class="headbottom" />
</div>
<div id="vspacer"></div>
<div id="content">
<div id="inner"> <!-- USED FOR PADDING LEFT -->
<p>TEST TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<br>tryTEST TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<TEST TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<br>tryTEST
TEXT<br>213<br>324<br>trybr>try</p>
</div>
<img src="images/contenttopbg.png" class="contop" />
<img src="images/contentbottombg.png"
class="conbottom" />
</div> <!-- CLOSE FOR CONTENT DIV -->
</div> <!-- WRAPPER CLOSE, FOR ALIGNMENT -->
</div> <!-- Close CENTER -->
<img src="images/bottomcap.png" class="bottomcap" />
</div>
</body>
</html>
and scheme.css
body {
text-align: center;
font-family: calibri, arial;
font-size: 16px;
background-color: white;
margin: 0px;
color: black;
}
p {
color: black;
z-index: 10;
position: absolute;
}
#topstripe {
/*background-color: #FFAE5E;*/
background-image: url('images/orangish.png');
background-repeat: repeat-x;
text-align: left;
height: 168px;
width: 100%;
position: absolute;
left: 0px;
top: 40px;
}
#center {
margin: 0 auto;
width: 1020px;
text-align: left;
position: relative;
top: 0px;
/*background-color: gray;*/
background-image: url('images/yellowness.png');
background-repeat: repeat-y;
overflow: hidden;
}
#tspacer {
width:100%;
height: 88px; /* 88 */
}
#vspacer {
width: 100%;
height: 20px;
clear: both;
}
#lspacer {
height: 1px;
width: 40px;
float: left;
}
#header {
width: 980px;
height: 154px;
position: relative;
/*background-color: white;*/
background-image: url('images/panelsmiddle.png');
background-repeat: repeat-y;
background-position: right;
/*background-attachment: fixed;*/
float: right;
padding-right: 14px;
z-index: 1;
}
img.headtop {
position: absolute;
top: 0px;
right: -1px;
z-index: 0;
}
img.headbottom {
position: absolute;
bottom: -12px;
right: 0px;
z-index: 1;
}
img.bottomcap {
position: relative;
bottom: 0px;
right: 0px;
z-index: 1;
}
#header ul {
height: 27px;
/*background-color: lightblue;*/
color: white;
font-weight: bold;
margin: 0;
padding: 0;
position: relative;
float: left;
top: 128px;
padding-left: 24px;
z-index: 2;
}
ul#admin {
float: right;
padding-left: 0px;
padding-right: 24px;
}
li {
list-style: none;
float: left;
text-align: center;
padding-left: .5em;
padding-right: .5em;
height: 27px;
line-height: 25px;
background-image: url('images/orangebar.png');
background-repeat: repeat-x;
/*border-right: 1px inset black;*/
}
li:hover {
background-image: url('images/purple.png');
}
#admin li {
width: 80px;
padding-left: 0;
padding-right: 0;
/*background-image: url('images/orangebar.png');*/
}
li.lcapend {
width: 15px;
line-height: 25px;
/*background-color: gray;*/
padding-left: .3em;
padding-right: 0;
background-image: url('images/leftendcaporg.png');
background-repeat: no-repeat;
background-position: right;
}
li.rcap {
width: 14px;
/*background-color: gray;*/
padding-left: 0;
padding-right: .3em;
background-image: url('images/rightmidcaporg.png');
background-repeat: no-repeat;
background-position: left;
}
#admin li.lcap {
width: 15px;
padding-left: .3em;
padding-right: 0;
background-image: url('images/leftmidcaporg.png');
background-repeat: no-repeat;
background-position: right;
z-index: 3;
}
#admin li.rcap {
width: 15px;
/*background-color: gray;*/
padding-left: 0;
padding-right: .3em;
background-image: url('images/rightendcaporg.png');
background-repeat: no-repeat;
background-position: left;
}
#content {
width: 980px;
min-height: 350px;
height:auto !important;
height:450px;
position: relative;
clear: right;
float: right;
padding-left: 0px;
background-image: url('images/panelsmiddle.png');
background-repeat: repeat-y;
background-position: right;
}
#inner {
float: left;
padding-left: 54px;
padding-top: 4px;
}
img.contop {
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
img.conbottom {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
}
#wrapper {
width: 980px;
position: relative;
float: right;
background-image: url('images/wrappermiddle.png');
background-repeat: repeat-y;
background-position: right;
}
img.containtop {
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
img.containbottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 0;
}