Jump to content

I got the nested element blues (aka border replacement issues...)

Derleek

By Derleek
in CSS Help

 Share

Recommended Posts

Derleek Advanced Member

Derleek

Posted
Posted

So i've been trying to figure out the best way to attempt to replace a border with images.

 

I needed to use two different images, one for the top/bottom and one image for the left/right sides.

 

I was running under the assumption here that i could just place two four individual div's using some positioning and what not and that would be the end...  Like so...

 

(for simplicity i'll only show the left border...)

Here it is live

HTML:

	<div id="container">
	<div id='left_border'></div>
	<p>blah blah blah blah</p><p>blah blah blah blah</p><p>blah blah blah blah</p>
</div>

 

CSS:

	#container {
	background: #FCF5E3 url('images/elephant.png') no-repeat top left;
	width: 870px;
	margin-bottom:50px;
	margin: 0 auto;
	text-align: center;
	}
#left_border {
	position: absolute;
	background: transparent url('images/frame_right.jpg') repeat-y top left;
	width: 10px;
	height: 100%;}

 

Its pretty clear this is an inheritance issue.  The div 'left_border' is setting its height to the document.

 

Now i am clearly no css guru, but i was under the impression that setting the height to 100% it should set the height to 100% of the containing element.  Is there a way to do this simply?

 

My Solution: warning: it aint pretty

 

So i had the idea to essentially have three containers.  One for the entire display of the website.  Another for the borders.  And a third for the content of the website.

 

(**note** I also added a header for this one) - **live demo**

HTML:

<div id="container">
<div id="header">
	<img id='name' alt='Chy Thai Cuisine' src='images/chythaicuisine.png' width="227" height="36" />
</div>
<div id='border'>
	<div id='content'>
	</div>
</div>
</div>

CSS: (this includes some additional styles not mentioned)

#container {
width: 870px;
margin-bottom:50px;
margin: 30px auto;
}
#border{
background: #B59892 url('images/frame_right.jpg') repeat top left;
width: 870px;
margin-top: -10px;
margin-bottom: -10px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
#content
{
background: #FCF5E3 url('images/elephant.png') no-repeat top left;
padding-left:12px;
padding-right: 12px;
padding-bottom: 12px;

height: 1800px;
}
#header {
position: relative;
background: transparent url('images/frame_top.jpg') repeat-x bottom left;
padding-bottom: 15px;
margin-left:10px;
z-index: 5;
}

 

I know it aint pretty and non of this is compatibility tested...

 

can some one help me with this little issue... how do i set the div of an element to 100% of its parent element?

 

Am i mistaken in thinking that a nested div who's height is set to 100% should be set to 100% of its parent element?

 

ugh...

 

-thanks in advance for any help offered... if I need to clarify any points please let me know

Link to comment
Share on other sites
Axeia Member

Axeia

Posted
Posted

You need to set the height of EVERY parent element to 100%, including html and body.

 

so html, body{ height: 100%; }

Following css worked for me:

/* CSS Document */
html {
  height: 100%;
}
body {
background-color: #6E2F21;
background-image: url(images/bg.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
width: 870px;
margin-bottom:50px;
margin: 30px auto;
}
#border{
background: #B59892 url('images/frame_right.jpg') repeat top left;
width: 870px;
margin-top: -10px;
margin-bottom: -10px;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
#content
{
background: #FCF5E3 url('images/elephant.png') no-repeat top left;
padding-left:12px;
padding-right: 12px;
padding-bottom: 12px;

height: 1800px;
}
#header {
position: relative;
background: transparent url('images/frame_top.jpg') repeat-x bottom left;
padding-bottom: 15px;
margin-left:10px;
z-index: 5;
}

/*
img, div { behavior: url(iepngfix.htc) }

body {
background-color: #6E2F21;
background-image: url(images/bg.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
width: 850px;
height: auto;
margin-bottom:50px;
margin: 30px auto;
}
#content
{
background: #FCF5E3 url('images/elephant.png') no-repeat top left;
padding-left:12px;
padding-right: 12px;
padding-bottom: 12px;
}
#header {
background: transparent url('images/frame_top.jpg') repeat-x bottom left;
padding-bottom: 15px;
}
#logo {
height: 210px;
width: 210px;
top: 10px;
margin-left:4px;
}

#name {
}
#left_column {
	float: left;
	width: 200px;
}
#dishmenu_img {
position: absolute;
margin-top: -48px;
margin-left: 385px;
}
#dish_menu {
margin-top: -48px;
padding-right: 7px;
padding-left: 7px;
padding-top: 5px;
border-color: #ae9d81;
border-left-width: 1px;
border-bottom-width: 0px;
border-right-width: 1px;
border-top-width: 0px;
border-style: solid;
margin-left: 255px;
background: transparent url('images/white.png') repeat top left;
position: relative;
}
#menu {
position: absolute;
height: 500px;
width: 200px;
margin-left:7px;
}
#submenu{
position: absolute;
margin-top: -135px;
margin-left: 304px;
}
#home_slideShow
{
position: relative;
margin-left: 207px;
width: 631px;
height: 390px;
background: transparent url('images/frame_top.jpg') repeat top left;
}
#border_top{
position: absolute;

width: 894px;
height: 10px;
margin-top:-10px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#border_bottom{
position: absolute;

width: 100%;
height: 10px;
margin-top:-40px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#border_left {
position: absolute;
background: #B59892 url('images/frame_right.jpg') repeat-y top left;
width: 10px;
height: 100%;
margin-left: -22px;
}
#border_right {
position: absolute;
background: #B59892 url('images/frame_right.jpg') repeat-y top right;
width: 10px;
height: 100%;
margin-left: 862px;
}
#highlights
{
margin-top: 50px;
position: relative;
margin-left: 210px;
height: 418px;
}
#head {
position: absolute;
height: 250px;
width: 600px;
left: 300px;
top: 0px;
}

#home {
position: relative;
height: 390px;
width: 631px;
left: 309px;
top: 60px;
}

#music {
position: absolute;
height: 22px;
width: 120px;
left: 845px;
top: 25px;
}
#highlight1
{
float:left;
}
#highlight2
{
position: absolute;
margin-left: 210px;
}
#highlight3
{
position: absolute;
margin-left:420px;
}
.bg_elephant {
height:1000px;
width:880px;
background-image: url(images/elephant.png);
background-position: bottom right;
background-repeat: no-repeat;
}

.textBrown {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #584301;
}
A.textBrown:visited {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #584301;
text-decoration: underline;
}
A.textBrown:hover  {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #584301;
text-decoration: none;
}
A.textBrown:link {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #584301;
text-decoration: underline;
}

.textGray {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #CCCCCC;
}
A.textGray:visited {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #CCCCCC;
text-decoration: underline;
}
A.textGray:hover  {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #CCCCCC;
text-decoration: none;
}
A.textGray:link {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #CCCCCC;
text-decoration: underline;
}

.textWhite {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #FFFFFF;
}
A.textWhite:visited {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-decoration: underline;
}
A.textWhite:hover  {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
}
A.textWhite:link {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #FFFFFF;
text-decoration: underline;
}

.inputPage {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #663300;
border: 1px solid #996600;
background-color:#FFFFFF;
height: 16px;
width: 20px;
}

.inputBrown {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #663300;
border: 1px solid #996600;
background-color:#FFFFFF;
height: 16px;
width: 150px;
}

.inputFree {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #663300;
border: 1px solid #996600;
background-color:#FFFFFF;
height: 16px;
}

.inputAddress {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #663300;
border: 1px solid #996600;
background-color:#FFFFFF;
}

.inputGray {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #000000;
border: 1px solid #FFFFFF;
background-color:#CCCCCC;
height: 16px;
width: 120px;
}

.searchGray {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #000000;
border: 1px solid #FFFFFF;
background-color:#CCCCCC;
height: 16px;
width: 200px;
}

.listBrown {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 14px;
color: #663300;
border: 1px solid #663300;
background-color:#FFFFFF;
height: 16px;
}

Link to comment
Share on other sites
Axeia Member

Axeia

Posted
Posted

As I posted, it needs to be in EVERY parent element (and the element you want to stretch obviously) so besides html that's body as well.. and whatever else I changed, it's in the code field 2 posts above.

Link to comment
Share on other sites
Derleek Advanced Member

Derleek

Posted
  • Author
Posted

Ahhh... ok i understand what you were saying... I guess i left out a key element of my problem.

 

I am trying to get the height of the border to adjust to the content, along with the container (which does so automatically, as the height property is not defined).  In short the height of the container needs to be fluid.  I need it to adjust to the height of whatever content i put into it.  I think the term commonly used is to 'shrink-wrap' the content.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.