Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi I have been looking for tutorials that tell you how to do this technique, but I guess there isent a simple name for it, but how do you make those advanced tables that use three gifs or jpgs to make. eg http://img.photobucket.com/albums/v457/BlueSigma/thing.jpg
-
Are you talking about making a box with rounded corners?
-
No it takes three different picture files to make that box, I just want to know what codeing lets you do it. See here are the three jpgs that make up that box
http://www.csszengarden.com/185/theRoadTo.jpg
http://www.csszengarden.com/185/fondoParagraph1.gif
http://www.csszengarden.com/185/fondoParagraphBottom.gif
Your suppose to repeat the middle one using css, please if any one could show me how to do this, or lead me to a tutorial that has this, it would be very appreciated thank you. -
There are three divs, top has background-image property(theRoadTo.jpg) with no-repeat property.
Middle div has background-image property(fondoParagraph1.gif) with repeat-y.
Bottom div has a background-image property(fondoParagraphBottom.gif) with no-repeat property.
As you can guess you put text into the middle div. -
Thank you Gustavs, would you know how to go about changeing the positioning of the box on the page.
-
You need to set the position of the box to relative(or absolute) and then you can change top, right, left, bottom and so. Also you can use float property.
-
You can make the box easy to manage doing this:
[code]
<div id="box">
<div id="box_top"></div>
<p>text here</p>
<div id="box_bottom"></div>
</div>
[/code]
Or using classes instead of IDs if there are several boxes. -
I do think that Gustavs is on the point. You actually make three different divs and give them all the same positioning in order to stack them on top of eachother.
However I managed this issue some time ago ONLY with absolute positioning, but I am curious if someone can do it with "relative". -
-
CommentAuthoradjustafresh
- CommentTimeJan 2nd 2006
I would go about it a bit differently...
The HTML/XHTML:
<div id="box-container">
<div id="box-top"></div>
<div class="content">
<p>This is the box content</p>
</div> <!-- /content -->
<div id="box-bottom"></div>
</div> <!-- /box-container-->
The CSS:
#box-container {
/* place this anywhere via positioning, floating, etc. */
}
#box-top {
background: url(top.gif) no-repeat;
width: 100px;
height: 20px;
}
#box-container .content {
background: url(bg.gif) repeat-y;
width: 100px;
}
#box-container .content p {
margin: 10px;
}
#box-bottom {
background: url(bottom.gif) no-repeat;
width: 100px;
height: 20px;
} -
-
Thank you adjusta fresh, for adding the css part, me and a friend have been working on the code you distributed. We came up with this, using the files from my second post. My question is how do I get it to be compatibale with firefox, because on the top part of the box, a big white line separates the boarders. And thank you everyone for their input.
#box-container {
position:absolute;
left:10px;
top:10px;
}
#box-top {
background: url('theRoadTo.jpg') no-repeat;
width: 558px;
height: 38px;
}
#box-container .content {
background: url('fondoParagraph1.gif') repeat-y;
width: 558px;
height: 200px;
}
#box-container .content p {
padding: 20px;
}
#box-bottom {
background: url('fondoParagraphBottom.gif') no-repeat;
width: 558px;
height: 40px;
} -
Have you tried making the box as i said?
As i can see, there's no padding in .content, then you can put box-top and box-bottom inside .content, and eliminates the box-container.
Somethin similar happened to me, and i fixed that by adding font-size:0; but i think is not what you need. Try putting your top and bottom inside .content. -
-
CommentAuthoradjustafresh
- CommentTimeJan 3rd 2006
Here's the fix; you need to add padding to the top and bottom of your .content div:
#box-container .content {
background: url('fondoParagraph1.gif') repeat-y;
width: 558px;
height: 200px;
padding: 10px 0;
}
Then use margins on the sides of your p to keep them from butting against the sides of the container div:
#box-container .content p {
margin: 0 20px;
}
That ought to get rid of the gaps and keep things lined up nicely.
Ramm's method will work as well, but I find it easier to keep all of the elements (top, content & bottom) of the box inside a separate container. -
-
Thank you to both of both of you.
1 to 13 of 13