Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS - Position image on same line as H3 2

Status
Not open for further replies.
Stretchwickster

Stretchwickster

Programmer
Apr 30, 2001
1,746
GB
Hi there,

A while ago I created a noticeboard page on one of my websites using the equivalent of the following code. I now want to add a little RSS image (16 x 16 pixels) and link neatly into the top-right of a noticeboard-item so that it lines up with the text of the h3 tag. I've tried several ways, but it always looks a bit messy. How would you approach this? I've highlighting the new line of code in red.

Your advice would be much appreciated!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
  <title></title>
<style type="text/css">
  #noticeboard {
    margin-top: 5px;
    margin-right: 0;
    padding-top: 0;
    padding-right: 0;
  }
  #noticeboard .noticeboard-item {
    background-color: #F4F3FB;
    /*border: 1px solid #D9B0F2;*/
    float: left;
    margin-top: 0;
    padding-top: 0;
    margin-right: 13px;
    margin-bottom: 10px;
    /*height: 230px;*/
    width: 220px;
  }
  #noticeboard .noticeboard-item h3 {
    border-bottom: 1px solid #D9B0F2;
    background-color: #D9B0F2;
    color: #FFFFFF;
    font-size: small;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
  }
  #noticeboard .noticeboard-item ul {
    list-style-position: outside;
    list-style-type: none;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0;
    padding-top: 0;
    padding-left: 0;
  }
  #noticeboard .noticeboard-item li {
    margin-bottom: 0;
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #D9B0F2;
  }
</style>
</head>

<body>
<div id="noticeboard" style="height: 375px;">
  <div class="noticeboard-item" style="height: 200px;">
    <h3>Announcements</h3>
    [COLOR=red]<a href="rss/rss_announcements.xml"><img src="rss.jpg" title="RSS Announcements Feed" alt="RSS Feed Image"></a>[/color]
    <ul class="notices">
      <li><strong>NEW!</strong> Major announcement<br /><a href="info.php" target="_blank">View Info</a><br /></li>
      <li>Please send us any enquiries via the contact form</li>
    </ul>
  </div>
</div>
</body>

</html>

Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Sort by date Sort by votes
Here's some changes I made to get this to look how you want:

Code: 
 [!] a#rssAnchor {
     display:block;
     border:0px;
     float:right;
     
  }
  
   a#rssAnchor img {
       vertical-align:bottom;
       border:0px;
      
  } [/!]
</style>
</head>

<body>
<div id="noticeboard" style="height: 375px;">
  <div class="noticeboard-item" style="height: 200px;">
    [!]<h3><a id="rssAnchor" href="rss/rss_announcements.xml"><img src="rss.jpg" title="RSS Announcements Feed" alt="RSS Feed Image"></a>Announcements</h3>[/!]

[monkey][snake] <.
 
Upvote 0 Downvote
Since there will probably be more of these items on the same page, you should opt for class rather than id. And as long as you have float, you do not need to define display as well, since display is ignored (except in some cases with IE6), when elements are floated.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Many thanks both for your input. Vragabond, I've removed the display line and all appears fine - thanks for that.

I actually implemented it without an id or class, see below:
Code: 
#noticeboard .noticeboard-item h3 a {
  border: 0px;
  float: right;
}
#noticeboard .noticeboard-item h3 a img {
  vertical-align: bottom;
  border: 0px;
  padding-right: 3px;
}
Code: 
  <div class="noticeboard-item" style="height: 200px">
    <h3>
      <a href="rss.xml"><img src="rss.jpg" title="RSS Feed" alt="RSS Feed Image" /></a>
      Announcements
    </h3>
    <ul class="notices">
      <li>NEW! Major announcement<br /><a href="info.php">View Info</a><br /></li>
      <li>Please send us any enquiries via the contact form</li>
    </ul>
  </div>


Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
750
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
600
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top