force text and image to stay on one line

  • kc0tma
  • o|||||||o
  • Web Master
  • User avatar
  • Posts: 3318
  • Loc: Trout Creek, MT

Post 3+ Months Ago

I am making a page for my work website that has a google map on it, then some color coded poly lines on the map. I am making a map legend, with a little colored square and a description that correspond to a colored line on the map. Here is the source for that map legend:

Code: [ Select ]
  <div id="key" style="background-color: #cccccc; float: right; width: 250px; height: 300px;">
   <img src="img\red.png" />&nbsp;&nbsp;<h3>Section A</h3>
   <img src="img\green.png" />&nbsp;&nbsp;<h3>Section B</h3>
   <img src="img\blue.png" />&nbsp;&nbsp;<h3>Section C</h3>
   <img src="img\yellow.png" />&nbsp;&nbsp;<h3>Section D</h3>
   <img src="img\pink.png" />&nbsp;&nbsp;<h3>Section E</h3>
   <img src="img\white.png" />&nbsp;&nbsp;<h3>Section F</h3>
  </div>
  1.   <div id="key" style="background-color: #cccccc; float: right; width: 250px; height: 300px;">
  2.    <img src="img\red.png" />&nbsp;&nbsp;<h3>Section A</h3>
  3.    <img src="img\green.png" />&nbsp;&nbsp;<h3>Section B</h3>
  4.    <img src="img\blue.png" />&nbsp;&nbsp;<h3>Section C</h3>
  5.    <img src="img\yellow.png" />&nbsp;&nbsp;<h3>Section D</h3>
  6.    <img src="img\pink.png" />&nbsp;&nbsp;<h3>Section E</h3>
  7.    <img src="img\white.png" />&nbsp;&nbsp;<h3>Section F</h3>
  8.   </div>


And here is how it looks:

Image

What I am trying to make happen is to get the little squares and the text to stay on the same line, but that isn't working. I've tried playing around with putting the <img>'s in their own div elements and floating them left, then the <h3>'s in their own div and floating them right, but that looks more awkward that it does now. What would you do to make it straighten out?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

You could move the img elements inside the h3 elements & alter the vertical-align for the img elements.

However.

It's a good idea to avoid using images when CSS properties can be used so everyones' browser doesn't have to ask the server for all those images.
6 images times 25,000 isitors per day is 150,000 "questions" the server doesn't need to answer each day.
What about somthing like this ?
Code: [ Select ]
<html>
<head>
    <title>Title</title>
    <style type="text/css">
    #key div h3{
        padding: 0 0 0 0.25em;
        margin: 0.25em 0 0 1em;
        background-color: #ccc;
    }
    </style>
</head>
<body>
<div id="key" style="background-color: #cccccc; float: right; width: 250px; height: 300px;">
    <div style="background-color:red;"><h3>Red One</h3></div>
    <div style="background-color:green;"><h3>Green One</h3></div>
    <div style="background-color:blue;"><h3>Blue One</h3></div>
</div>
</body>
</html>
  1. <html>
  2. <head>
  3.     <title>Title</title>
  4.     <style type="text/css">
  5.     #key div h3{
  6.         padding: 0 0 0 0.25em;
  7.         margin: 0.25em 0 0 1em;
  8.         background-color: #ccc;
  9.     }
  10.     </style>
  11. </head>
  12. <body>
  13. <div id="key" style="background-color: #cccccc; float: right; width: 250px; height: 300px;">
  14.     <div style="background-color:red;"><h3>Red One</h3></div>
  15.     <div style="background-color:green;"><h3>Green One</h3></div>
  16.     <div style="background-color:blue;"><h3>Blue One</h3></div>
  17. </div>
  18. </body>
  19. </html>
  • kc0tma
  • o|||||||o
  • Web Master
  • User avatar
  • Posts: 3318
  • Loc: Trout Creek, MT

Post 3+ Months Ago

Ugh, why didn't I think to make it like this? It is only obvious with what is possible with the CSS. Thanks for your super quick help joebert, very much appreciated!

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.