TheScribe
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!
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
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Images Top and Bottom
Hi Scribe
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.
|
4/29/2008, 12:34 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
TheScribe
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
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Images Top and Bottom
Thanks.
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. 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.
|
4/29/2008, 1:17 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
TheScribe
Citizen
Registered: 02-2003
Province: Sydney, Australia
Posts: 41
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re: Images Top and Bottom
Thank you.
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. 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
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Images Top and Bottom
You're welcome, Scribe.
Sorry I skipped the background color. Yep, you did it right. It looks like you've been studying CSS, and you're doing quite well with it. 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.
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!
|
4/30/2008, 2:39 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
TheScribe
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.
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
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Images Top and Bottom
Is this not what you're seeing now and what you saw before?
|
5/1/2008, 3:04 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
TheScribe
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.
--- 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
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Images Top and Bottom
Yikes! 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
|
5/2/2008, 1:30 am
|
Link to this post
PM Lesigner Girl
Read Blog
|