Novice Design Question for CSS webpage titlebar

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

Post 3+ Months Ago

Hi

I have been using dreamweaver for years and decided it was time to start enterting the real world of webdesign

I have some very good names in websites but i am starting with one of my smaller ones

When I try and enter my title pic and align it in CSS it does not appear.

Here is the page in html
Code: [ Select ]
<html>
<img style="width: 186px; height: 102px" alt="" width="186" height="102" src="pics/title1.jpg">
</body>
</html>
  1. <html>
  2. <img style="width: 186px; height: 102px" alt="" width="186" height="102" src="pics/title1.jpg">
  3. </body>
  4. </html>


Now using CSS
Code: [ Select ]
<html>
<style type="text/css">
<img src="pics/title1.jpg" alt="power4sports" id="titlebar" />
img#titlebar {
/* Titlebar */
}
</style>
</html>
  1. <html>
  2. <style type="text/css">
  3. <img src="pics/title1.jpg" alt="power4sports" id="titlebar" />
  4. img#titlebar {
  5. /* Titlebar */
  6. }
  7. </style>
  8. </html>

Now I no longer see the title at all

Thx

Kent
Moderator Remark: Use [code][/code] tags to increase readability
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You need to move the image tag outside of your style section. You're also missing some very basic HTML tags that should go into any page. Try it as such:

Code: [ Select ]
<html>
<head>
<style type="text/css">
img#titlebar {
/* Titlebar */
}
</style>
</head>
<body>
<img src="pics/title1.jpg" alt="power4sports" id="titlebar" />
</body>
</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. img#titlebar {
  5. /* Titlebar */
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <img src="pics/title1.jpg" alt="power4sports" id="titlebar" />
  11. </body>
  12. </html>
  • kentga
  • Newbie
  • Newbie
  • kentga
  • Posts: 9

Post 3+ Months Ago

Thx

So you put your CSS styles and placements first then followed by the HTML files huh?

I just put the minimum amount of code in and took out the others parts ( title- etc). Is that the HTML code you said I was missing?

THANKS again

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

Post 3+ Months Ago

I have now put a title under my "title bar image". But I used CSS relative positioning and had to keep trying till I got it where I wanted under the image.

Is that the correct way to do it or should I use the div command.

Code: [ Select ]
<html>
<head>
<title></title>
<style type="text/css">
img#titlebar {
position: absolute;
top: 2px;
left: 2px;
}
h1 {
  position: relative;  
  top: 145px;
  left: 3px;
  font-family: Helvetica, Geneva, Arial,
     SunSans-Regular, sans-serif
}

</style>
</head>
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type="text/css">
  5. img#titlebar {
  6. position: absolute;
  7. top: 2px;
  8. left: 2px;
  9. }
  10. h1 {
  11.   position: relative;  
  12.   top: 145px;
  13.   left: 3px;
  14.   font-family: Helvetica, Geneva, Arial,
  15.      SunSans-Regular, sans-serif
  16. }
  17. </style>
  18. </head>

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 80 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.