Zaloguj | Zarejestruj | FAQ
Anonymous

Header with gradient background and logo.

+ Odpowiedz

Posty: 7 Strona 1 z 1


Header with gradient background and logo.

przez jon267 » Wt sty 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.
Avatar użytkownika

jon267

  • Posty: 4
  • Dołączył(a): Śr sty 12, 2011 11:11 am

Re: Header with gradient background and logo.

przez rswebs » Wt sty 18, 2011 3:24 pm

is there an example of a website, so i can get what you are trying to do?
Avatar użytkownika

rswebs

  • Posty: 77
  • Dołączył(a): Śr lis 24, 2010 6:47 am
--
Thanks Rafael - www.htmltutorialtopics.com

Re: Header with gradient background and logo.

przez frank » Wt sty 18, 2011 4:27 pm

You can do something like this:
Kod: Zaznacz cały
<!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>

Avatar użytkownika

frank

  • Posty: 18
  • Dołączył(a): Wt lis 30, 2010 7:37 pm

Re: Header with gradient background and logo.

przez jon267 » Śr sty 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.
Avatar użytkownika

jon267

  • Posty: 4
  • Dołączył(a): Śr sty 12, 2011 11:11 am

Re: Header with gradient background and logo.

przez frank » Cz sty 20, 2011 1:59 am

That sounds about right.
Avatar użytkownika

frank

  • Posty: 18
  • Dołączył(a): Wt lis 30, 2010 7:37 pm

oo

przez lacroixz » Cz sty 20, 2011 5:10 pm

oo

Ostatnio edytowano Pt wrz 16, 2011 2:46 pm przez lacroixz, łącznie edytowano 1 raz

Avatar użytkownika

lacroixz

  • Posty: 74
  • Dołączył(a): Śr paź 27, 2010 9:26 pm

oo

przez lacroixz » Cz sty 20, 2011 5:12 pm

oo
Avatar użytkownika

lacroixz

  • Posty: 74
  • Dołączył(a): Śr paź 27, 2010 9:26 pm


+ Odpowiedz

Strona 1 z 1