how to add padding around logo

[Candace]

My logo looks kind of scrunched up there in the left-hand corner.  How do I add some padding without messing everything else up??

http://www.quuf.org


header code:

div#header {
  background-image: url(images/cms/bg_header.jpg);
  background-repeat:repeat-x;
  width:100%;
  height: 120px;
  position: relative; 
   
}

div#header h1 {
  background-image: url(images/cms/logo.jpg);
  background-repeat:no-repeat;
  background-position:top left;
  display: block;
  height: 120px;
  width: 324px; 
  position:absolute;
  top:0;
  left: 0;

  }

div#header h1 a {
  /* you can set your own image here */
  background-image: url(images/cms/logo.jpg);
  background-repeat:no-repeat;
  background-position:top left;
  display: block;
height: 120px;    /* adjust according your image size */
    text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#header h1 a:hover {
  background:none;
}

div#logotext {
color:#696d6;
text-align:center;
padding-top:  40px;

}



/* position for the search box */
div#search {
  float: right;
  width: 27em;    /* enough width for the search input box */
  text-align: right;
  margin: 0 1em;
  white-space:nowrap;
}

[owr_bgld]

double post?


There are more different ways:

1)
Change div#header h1 { the backgound (no background picture) an make from your existing textlink an img-link with the logo, then you can make the padding: ....; in css.

2)
you also can make padding for the background:
  background-position:5px 10px; -> says 5px away from left and 10px from top

3)
you can put an margin: .....; in your div#header h1

If it doesn't work in this way - maybe you think about my last tipp putting the logo in an div

[Peciura]

As long "images/cms/bg_header.jpg" height is 120px only padding i can think of is indent from left.

div#header h1 {
   background-image: url(images/cms/logo.jpg);
   background-repeat:no-repeat;
   background-position:top left;
   display: block;
   height: 120px;
   width: 324px;
   position:absolute;
   top:0;
   left: 20px;

   }

If you want padding  from top you need higher image "images/cms/bg_header.jpg".

This is a example how it can be done:

    ...
    ...    
   ....

div#header {
   background-image:url(images/cms/bg_header.jpg);
   background-repeat:repeat-x;
   float:left;
   width:100%;
}

div#search {
   float:right;
   margin:100px 1em 0;
   text-align:right;
   white-space:nowrap;
   width:27em;
}

div#header h1 {
   display:block;
   float:left;
}

div#header h1 a {
   background-image:url(images/cms/logo.jpg);
   background-position:left top;
   background-repeat:no-repeat;
   display:block;
   height:120px;
   margin:20px;
   text-decoration:none;
   text-indent:-999em;
   width:324px;
}

/* color:#696d6; does not look valid */
div#logotext {
   margin:auto;
   padding-top:40px;
   text-align:center;
   width:200px;
}

div#content {
   margin:0 auto 2em 0;
   float:left;
   width:100%;
}

/*there is non need to have this one
div#header h1 a:hover{
  ...
}
*/

div#sidebar {
   display:inline;
   float:left;
   width:240px;
}

If it doesn't work in this way - maybe you think about my last tipp putting the logo in an div

Generally i agree. I your case there is no advantage of  having "" over "".


There is handy site you may have a look at http://matthewjamestaylor.com/blog/ulti ... xel-widths
to cut long story short:
   absolute positioning works relatively to window unless parent element have style "position: relative" and
   floated element is resized to  contain child element and it also takes dimension that is longer (or/and wider) than necessary .

[owr_bgld]

double post?

With the aboe i ment this post: http://forum.cmsmadesimple.org/index.ph ... #msg200090