CSS Float Question

  • kentga
  • Newbie
  • Newbie
  • kentga
  • Posts: 9

Post 3+ Months Ago

Well thanks to the help here I have been pretty successful creating a webpage in CSS. But the float command is driving me nuts

I am trying to float a image under my menu bar (#nav) on this page. But while my image and text appear I cannot
    Control the top margin of my picture - to put it right under the (#nav)line 18
    In my float line 35 the text under my image keeps going across the page forever - I do not seem to be able to set a margin

I cannor tell if I am trying to see a text margin in the CSS or the HTML for the float



Code: [ Select ]
<style type="text/css">
body {background-color: blue;}
pic {
top: 0px;
left: 0px;
margin-bottom: 0px;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
color: white;
background-color:black;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
}

#nav {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
padding:5px;
margin:0px;
background-color:#71B8D5;
color:#fff;
border-bottom: 1px solid #6F8C8F;
}

#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
.floatleft
{
float: left;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px
}
</style>
</head>
<img src="pics/title1.jpg" alt="title" id="pic" />
<h1>Power4sports </h1>
<div id="nav">|<a href="http://www.url/bio.htm">bio</a>|
|<a href="http://www.url/maillist.htm">newsetter</a>|
 |<a href="http://www.url">contact</a>|
  |<a href="http://www.url/mission">mission</a>|
  </div>
  <p>
<img class="floatleft" src="pics/alex.jpg" alt="" width="100" height="100">This is a test
to see how far this code will go and if it will stop into a new para
</p>
</body>
</html>
  1. <style type="text/css">
  2. body {background-color: blue;}
  3. pic {
  4. top: 0px;
  5. left: 0px;
  6. margin-bottom: 0px;
  7. }
  8. h1 {
  9. margin-top: 0px;
  10. margin-bottom: 0px;
  11. text-align: center;
  12. color: white;
  13. background-color:black;
  14. font-family: Helvetica, Geneva, Arial,
  15. SunSans-Regular, sans-serif;
  16. }
  17. #nav {
  18. font-family: Verdana, Arial, sans-serif;
  19. font-size: 20px;
  20. padding:5px;
  21. margin:0px;
  22. background-color:#71B8D5;
  23. color:#fff;
  24. border-bottom: 1px solid #6F8C8F;
  25. }
  26. #nav a {
  27. color:#fff;
  28. text-decoration:none;
  29. }
  30. #nav a:hover {
  31. text-decoration:underline;
  32. }
  33. .floatleft
  34. {
  35. float: left;
  36. margin: 0 0 10px 10px;
  37. border: 1px solid #666;
  38. padding: 2px
  39. }
  40. </style>
  41. </head>
  42. <img src="pics/title1.jpg" alt="title" id="pic" />
  43. <h1>Power4sports </h1>
  44. <div id="nav">|<a href="http://www.url/bio.htm">bio</a>|
  45. |<a href="http://www.url/maillist.htm">newsetter</a>|
  46.  |<a href="http://www.url">contact</a>|
  47.   |<a href="http://www.url/mission">mission</a>|
  48.   </div>
  49.   <p>
  50. <img class="floatleft" src="pics/alex.jpg" alt="" width="100" height="100">This is a test
  51. to see how far this code will go and if it will stop into a new para
  52. </p>
  53. </body>
  54. </html>


Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 684
  • Loc: ATL-GA

Post 3+ Months Ago

So you want the text to go under the image? Or just for the text to be a specific width? The image currently has a 10px margin on the bottom and left.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 71 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
 
cron
 

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