登录 | 注册 | FAQ
Anonymous

Header with gradient background and logo.

+ 发表回复

7 篇帖子 分页: 1 / 1


Header with gradient background and logo.

jon267 » 周二 1月 18, 2011 3:00 pm

Hi. As I mentioned in an earlier thread I have just started learning html/css.

Is it possible to have 2 images in a div box? What I am trying to do is have a header with a gradient background, then insert a logo .png on top of the gradient.

The only way I have been able to achieve this up to now is insert the logo .png inside the header box as a image on in the .html doc.

Is it possible to do this on the style sheet instead of having to do it on every html page? Thanks.
头像

jon267

  • 帖子: 4
  • 注册: 周三 1月 12, 2011 11:11 am

Re: Header with gradient background and logo.

rswebs » 周二 1月 18, 2011 3:24 pm

is there an example of a website, so i can get what you are trying to do?
头像

rswebs

  • 帖子: 77
  • 注册: 周三 11月 24, 2010 6:47 am
--
Thanks Rafael - www.htmltutorialtopics.com

Re: Header with gradient background and logo.

frank » 周二 1月 18, 2011 4:27 pm

You can do something like this:
代码: 全选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <style>
   .header {
      height:40px;background:#ccc url(img/gradientbg.png) repeat-x;
   }
   .logo {
      width:150px;height:40px;background:transparent url(img/mylogo.png) no-repeat;
   }
   </style>
</head>

<body>
   <div class="header">
      <div class="logo">
      </div>
   </div>
</body>
</html>

头像

frank

  • 帖子: 18
  • 注册: 周二 11月 30, 2010 7:37 pm

Re: Header with gradient background and logo.

jon267 » 周三 1月 19, 2011 9:48 pm

Thanks for the replies. Frank that has worked.

So to position the logo in the header I have done:
position:relative;
left:90px;
top:30px;

Is this the right/best way to position the logo? Again thanks.
头像

jon267

  • 帖子: 4
  • 注册: 周三 1月 12, 2011 11:11 am

Re: Header with gradient background and logo.

frank » 周四 1月 20, 2011 1:59 am

That sounds about right.
头像

frank

  • 帖子: 18
  • 注册: 周二 11月 30, 2010 7:37 pm

oo

lacroixz » 周四 1月 20, 2011 5:10 pm

oo

最后由 lacroixz 编辑于 周五 9月 16, 2011 2:46 pm,总共编辑了 1 次

头像

lacroixz

  • 帖子: 74
  • 注册: 周三 10月 27, 2010 9:26 pm

oo

lacroixz » 周四 1月 20, 2011 5:12 pm

oo
头像

lacroixz

  • 帖子: 74
  • 注册: 周三 10月 27, 2010 9:26 pm


+ 发表回复

分页: 1 / 1