Runboard.com
Слава Україні!



🙂       Use the black navigation bar to log in or create your account.

Jump to Page:  1  2 

 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Images Top and Bottom


Hi, it's been a while since I needed help...but I'm back! emoticon

I'm changing the template on my board again. I want to have the 'content' area to have rounded corners. I have two images to achieve this - one will be used at the top of the content area and the other at the bottom. Thing is, I don't know how to code this.

background:  url(http://blahblah.com/image.gif) no-repeat left top;


OK, that might (if I've got the coding right) make the top image appear in the right place, but how do I get the image to appear at the bottom too?

If I'm totally wrong, please put me on the right path.

---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
4/28/2008, 11:32 pm Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Images Top and Bottom


Hi Scribe emoticon

Please post a link to the page so I can see its source code. I need to know what the HTML looks like before I can help you with the CSS part.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/29/2008, 12:34 am Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Images Top and Bottom


Sorry. I forgot about linking to the board. The test board is looking quite shabby right now, so please excuse the mess, but here's the link:

http://www.runboard.com/bscribestestboard

The image area at the top is being used as a placer. Then you'll notice a small gap between where the banner will go and the start of the 'content' section. This 'content' area is where I want the rounded corners - top and bottom.

---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
4/29/2008, 12:40 am Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Images Top and Bottom


Thanks. emoticon

From what you said in your other post, it sounds like you have one image that goes all the way across the top of the content area. Correct?

If so, the thing to do would be to add another div inside your content div, and define the bottom image and any padding you may add to that inner div.

You currently have:
<div class="content">

You could change that to, for example:
<div class="content"><div class="content2">

Don't forget to close that 2nd div as well, in the same place where the first content div is closed.

You were right about the CSS for the 1st div. emoticon The 2nd div is just like it, except the image will go at the bottom and this is also where you add any padding you'll need to clear both images.

.content {
  background: url(http://blahblah.com/topimage.gif) left top no-repeat;
}

.content2 {
  background: url(http://blahblah.com/bottomimage.gif) left bottom no-repeat;
  padding: 30px 0;
}


I used shorthand for the padding, where the first value (30px) takes care of top and bottom, and the 2nd value (0) takes care of left and right. The padding on the top and bottom is to make your content clear those background images, and can be adjusted to work with those images. Looking at your test board now, you probably won't need padding on the sides. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/29/2008, 1:17 am Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Images Top and Bottom


Thank you. emoticon

Will the background for the rest of the content sections remain white (the area between topimage and bottomimage)?

Edit: I discovered the answer to my question. It didn't put white in so I added the word "white", like so:

.content {

  background: white url(http://blahblah.com/topimage.gif) left top no-repeat;
}


It worked, but is this the correct way to do it?

Also, two more tweaking questions.

1. How do I get the dark background colour to show up at the bottom of the page? In IE6 it looks fine, but the page ends directly after the footer in Firefox (meaning there's no green below it).

2. There's a slight gap between the tabs at the top and the banner. I don't like it. emoticon How do I get rid of that?

Last revised by TheScribe, 4/29/2008, 10:40 am


---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
4/29/2008, 3:20 am Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Images Top and Bottom


You're welcome, Scribe. emoticon

Sorry I skipped the background color. Yep, you did it right. emoticon It looks like you've been studying CSS, and you're doing quite well with it. emoticon You even seem to have the shortened shorthand for the padding down pat (defining 3 sides, knowing the left will match the right), which I don't show most people due to the confusion it might cause. emoticon


Ok, the other tweaks...

1) Add margin-bottom to .content. You can actually get rid of the #footer div completely if you don't plan on adding anything below the white content area.

2) Not enough padding to expose the bottom of the tabs. But... using padding alone can cause other problems when someone resizes their text, as is possible with Firefox. You could try (delete the line in gray, add the lines in bold):

#menu ul li a {
    display: block;
    padding: 14px 20px 10px;
    padding: 4px 20px 0;
    height: 40px;
    line-height: 36px;
    text-decoration: none;
    background: url(http://members.optusnet.com.au/karen.lee/runboard/forum_tab_left.gif) no-repeat left top;
    color: #006600;
}


It's looking good! emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/30/2008, 2:39 am Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Images Top and Bottom


The coding for point 2 didn't work. I've left the page how it appeared after inserting the coding you recommended, as you might know what to change just by looking at it. It's probably something simple. It usually is. emoticon

And yes I'm learning more about css as I think it's the right way to go.

---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
4/30/2008, 3:45 am Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Images Top and Bottom


Is this Image not what you're seeing now and what you saw before?

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/1/2008, 3:04 am Link to this post PM Lesigner Girl Read Blog
 
TheScribe Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen

Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
ReplyQuote
Re: Images Top and Bottom


This is what I see in IE6.

Image

---
Karen Lee Field
Author of The Land of Miu series
Available from: Smashwords or Kayelle Press
5/1/2008, 3:26 am Link to this post PM TheScribe
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Images Top and Bottom


Yikes! emoticon I don't have IE6 for testing (maybe someday I'll take the time to figure out how to install multiple versions), but defining a width on
#menu ul li might fix the problem. I would use "em" units instead of pixels, for anyone who adjusts the size of their text.

If that works, you might also want to get rid of the left and right padding in those links and use
text-align: center; there instead.

Last revised by Lesigner Girl, 5/2/2008, 1:30 am


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/2/2008, 1:30 am Link to this post PM Lesigner Girl Read Blog
 


Add to this discussion

Jump to Page:  1  2 



You are not logged in (login)
Back To Top

This board's time is GMT.