Jump to content

Help making expandable content box


Tunacha

Recommended Posts

Can't? I think many of us can probably do what you are talking about, but we are here to help. Threads like this are good for helping with small problems, but you are asking us to pretty much give you a lesson.

 

If you want some help, try and do something, then show us the code you are having troubles with. We will help with specific stuff, but you are not asking anything specific.

Alright well the code i have has a problem were the left and right images go up past the top corners, it is rounded cornes mind you so i edited the corners to havew a wite background but i ondt want to have to edit them i would like it so the sides dont go up past them

 

Here is the code

<style>
body {
margin:200px auto;
color:#FFF;
background:url url(images/bg.gif)
font-family:verdana;
font-size:12px;
width:400px;
}

.content-fluid {
background:url(./images/core/content-bg.gif);
width:400px;
}

.content-body {
padding:10px;
}

.content-tl {
background:url(./images/top-left-corner.gif) top left no-repeat;
padding:10px;
}

.content-tr {
background:url(./images/top-right-corner.gif) top right no-repeat;
}

.content-bl {
background:url(./images/bottom-left-corner.gif) bottom left no-repeat;
}

.content-br {
background:url(./images/bottom-right-corner.gif) bottom right no-repeat;
}

.content-l {
background:url(./images/left-side.gif) left repeat-y;
}

.content-r {
background:url(./images/right-side.gif) right repeat-y;
}

.content-b {
background:url(./images/bottom.gif) bottom repeat-x;
}

.content-t {
background:url(./images/top.gif) top repeat-x;
}

.style1 {background: url(./images/core/content-bg.gif); width: 400px; color: #FF6600; }
</style>
<div class="style1">
<div class="content-l">
<div class="content-r">
<div class="content-b">
<div class="content-t">
<div class="content-tr">
<div class="content-bl">
<div class="content-br">
<div class="content-tl">
<div class="content-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> 

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.