...

View Full Version : Background help



p90pts
04-30-2011, 12:22 AM
Hey folks,

This is probably going to be really easy but i've been working on this all night and just can't see what's wrong!

Supposed to look like this:

http://i809.photobucket.com/albums/zz11/bigval3/screen-capture-1-3.png

But instead looks like this:

http://i809.photobucket.com/albums/zz11/bigval3/screen-capture-2-2.png

I can upload code where required!

Help?

Cheers!

bullant
04-30-2011, 12:56 AM
Looks like you are creating a fluid box for your white and yellow backgrounded containers.

Maybe use this demo as a guide. I have attached the border images the demo uses. You can add content that causes the bordered container to expand horizontally and/or vertically and the borders compensate accordingly.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid Box</title>
<style type="text/css">
.container {
width: 300px;
color: rgb(0,0,255);
background: url("roundedRight.jpg") top right no-repeat}
.container a {
font-size: 12pt}
.desc {
font-size: 18pt;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 20px;
background: url("roundedLeft.jpg") top left no-repeat}
.link {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 20px;
background: url("roundedLeft.jpg") bottom left no-repeat}
.link div {
display: block;
padding: 0px 20px 20px 0px;
font-style: normal;
background: url("roundedRight.jpg") bottom right no-repeat}
</style>
</head>
<body>
<div class="container">
<div class="desc">This box is:</div>
<div class="link">
<div>
Indestructable because it is expandable both X and Y directions.
<p>Even more text</p>
<p>Some paragraph text</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
</div>
</body>
</html>

p90pts
04-30-2011, 01:00 AM
It's a bit more complex than that as the yellow container contains show/hide divs and also a lightbox for images!...

bullant
04-30-2011, 01:03 AM
It shouldn't matter because I can put whatever content and javascript functionality I like in the child div of the link with class="link" and the borders will be elastic in both X and Y directions if the content changes or you change the width of the outer div.

Anyway, that is the basic setup I use when I need an "elastic" box with image borders.

oesxyl
04-30-2011, 04:01 AM
It's a bit more complex than that as the yellow container contains show/hide divs and also a lightbox for images!...
can you post a link to a test page?

best regards

p90pts
04-30-2011, 10:24 AM
Entire site is here:

http://0902761.studentweb.abertay.ac.uk/CE0832A/top5.html

amitsh
04-30-2011, 11:24 AM
u need to add one div around ur #content div

like...



<div id="contentwrapper">
<div id="content">
---------- rest content goes here ------------
</div>
<!--- content div ends here --->
</div>
<!--- contentwrapper div ends here --->


css code for above



#contentwrapper {
background: url(border/image/path) 0 0 repeat-y;
margin: 0 10px;
}
#content {
background: urcolor;
margin: 0 10px;
}
.left {
background: urcolor;
----- rest code-----
}


here is catch in above code if ur right-side is bigger than ur left-side ur left-side will show right-side color below where left-side content ends... if u want ur left side shud not show right-side color whether it's bigger or smaller than right-side than u need to add backgroung-image image in ur #content style with right-side bgcolor, which will be 1px high & just 5px above the left-side color wide...

hope u understand what i have explained here... :)

oesxyl
04-30-2011, 03:09 PM
Entire site is here:

http://0902761.studentweb.abertay.ac.uk/CE0832A/top5.html
you have a id "textcontent" defined multiple times.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2F0902761.studentweb.abertay.ac.uk%2FCE0832A%2Ftop5.html

looking to what you done i guess you know that ids must be uniq but for some reason and from your css declarations seems that you intend to use it as class.

another problem is that some declarations in css are ignored because of some syntax errors:

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2F0902761.studentweb.abertay.ac.uk%2FCE0832A%2Ftop5.html

but the main problem is that:


<div class="content">

must be:


<div id="content">


best regards

p90pts
05-01-2011, 01:20 AM
Done it!

THANKS TO ALL WHO HELPED!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum