FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Making an image on the bottom of a "box"

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Diablosblizz
This is hard to explain so please visit http://clan-ik.frih.net. IF you look to the left, and right at the bottom of the boxes there are just squares. I want to replace them with a rounded edge like the top. My CSS for the box is:

Code:
.box
{
   padding: 0;
   margin-bottom: 10px;
   background-color: #026dbd;
}

.box span
{
   display: block;
   font-weight: bold;
   padding: 2.5px;
   background-image: url('../images/box-top.PNG');
}


The .box span is the top of the box but I can't seem to do the same with the bottom. Does anybody have any help? Thanks!
Ghost Rider103
The only square I see is the header and the two middle text boxes there.

What other squares are you talking about?
sonam
Your top rounded corner is result of your span class where is title. In that case you must create one another span class with new bottom image.
CSS:
Code:
.box span.bottom
{
   display: block;
   font-weight: bold;
   padding: 2.5px;
   background-image: url('../images/box-bottom.PNG');
}

HTML:
Code:
<div class="box">
    <span>Navigation</span>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <span class="bottom"> </span>
</div>


Sonam
Diablosblizz
Sonam, this doesn't work. It was a good guess though and it really should work if you think of it.

HTML:
Code:
      <div class="box">
         <span>Navigation</span>
         <a href="#">Link</a>
         <a href="#">Link</a>
         <a href="#">Link</a>
         <a href="#">Link</a>
         <a href="#">Link</a>
         <a href="#">Link</a>
            <span class="bottom"> </span>
      </div>


CSS:
Code:
.box span
{
   display: block;
   font-weight: bold;
   padding: 2.5px;
   background-image: url('../images/box-top.PNG');
}

.box span.bottom
{
   display: block;
   font-weight: bold;
   padding: 2.5px;
   background-image: url('../images/box-bottom.PNG');
}
sonam
It must work. Of course, I am looking in the source of your site, this will not work without your other css definitions. Only what you need is to set height of span.bottom:
Code:
.box span.bottom
{
   display: block;
   font-weight: bold;
   padding: 2.5px;
   background-image: url('../images/box-bottom.PNG');
   height : 15px;
}


Also is good to insert &nbsp; (empty tag) in this span.

Code:
<span class="bottom">&nbsp;</span>


Sonam
Diablosblizz
That worked perfectly, thank you Sonam! Now my next mission. I can't see to get this one working either. I want the content box in the middle to be the same as the "navigation" boxes (or "outer" boxes). But, when I do this:

Code:
#main-content
{
   margin-left: 170px;
   margin-right: 170px;
   float: center;
   background-image: url('../images/content-top.PNG');
   padding: 4px;
   border: 1px solid black;
   margin-bottom: 10px;
}


It just repeats the content-top throughout the box. I just want the "News" part to have the content-top image. Does anybody know how to do this one? I have tried so much but am unable to get it myself.
guitarcrazy087
Think your missing a very simple piece of code.

Code:
{
   margin-left: 170px;
   margin-right: 170px;
   float: center;
   background: url('../images/content-top.PNG') no-repeat;
   padding: 4px;
   border: 1px solid black;
   margin-bottom: 10px;
}


Make sure you take out "background-image" and replace it with "background."

Hope it works for you!
Diablosblizz
Thank you for the help! I apologize for being such an idiot with this stuff, I am more a PHP coder just starting to learn CSS, but now I can't get the bottom. I tried what sonam had told me above but it didn't work. Here is my current CSS:

Code:
#main-content span.bottom
{
   margin-left: 170px;
   margin-right: 170px;
   float: center;
   background: url('../images/content-bottom.PNG') no-repeat;
   background-color: #026dbd;
   padding: 4px;
   margin-bottom: 10px;
   width: 928px;
}


It shows somewhat, but not all the way. Any ideas?
sonam
This what do you want will not work because .box span.bottom is deffinition for div box and span in this div. The second, #main-content span.bottom you can forget, too. If you want to use span deffinition anywhere on your page then you must remove .box e.g.:

Code:
span.bottom
{
   display: block;
   font-weight: bold;
   padding: 2.5px;
   background-image: url('../images/box-bottom.PNG');
   height : 15px;
}


Sonam
Diablosblizz
Now if you look at http://clan-ik.frih.net it just displays it multiple times.
sonam
Ah, I forgot no repeat:
Code:
background: url('../images/content-bottom.PNG') no-repeat;


Also, maybe you will need to deffine different padding for span:

Code:
#main-content span
{
   padding: 0;
}

Sonam
Diablosblizz
Ugh, so many problems and I have no clue how to fix it. Thanks for your help guys, but now it's not showing the correct image. The image is not showing the other corner (to the left).

Any ideas?
sonam
Yeah, your first question is wrong (Making an image on the bottom of a "box"), that is reason why you didn't get right answer. If you want corners anywhere then you must follow different logic. Maybe is much better for this to use float deffinition then background. Here is lot of examples for quick learn of CSS:
http://www.w3schools.com/css/css_examples.asp

Sonam
Diablosblizz
Okay, I can't manage to get the image. I don't know exactly what I am doing, but this is what I am trying. Also, please give me credit for trying as I am attempting my best to learn this:


Code:
#main-content
{
   margin-left: 170px;
   margin-right: 170px;
   float: center;
   background: url('../images/content-top.PNG') no-repeat;
   background-color: #026DBD;
   padding: 4px;
   margin-bottom: 10px;
}

#main-content.bottom
{
   background-color: #026dbd;
   background: url('../images/content-bottom.PNG') no-repeat;
   display: block;
   padding: 4px;
}


And the HTML:

Code:
      <div class="bottom"></div>
<br>
   </div>


The last </div> ends the main-content.
sonam
Ok, no problem. We can start again with new problem. How to insert corners in one div or span. First you need to cut your image in two peaces 15x15 left_bottom.png and right_bottom.png. Then define two css definition:

Code:
.left {
float : left;
}
.right {
float : right;
}


Now we must change your css for #main-content.bottom:
Code:
#main-content.bottom {
   background-color: #026dbd;
   text-align : center; // if you want some text
   display: block;
   height : 15px
}


and on the end your html code:
Code:
<div id="bottom">img class="left" src="../images/left_bottom.png " /><img class="right" src="="../images/right_bottom.png" /> Text here, after both images... </div>


Just little overview in your html:
If you are using # like #something for css deffinition then you must call this css with id="something"
If you are using . like .something for css deffinition then you must call this css with class="something"
<br> is no more in use. Instead use <br />

Sonam
Diablosblizz
Neutral It shows both seperated images (btw, 15x15 is soo small so I did it like 464x19) but they're not aligned. Also, thank you for telling me that # means id and . means class.
escritor
If you want rounded corners, check this article.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.