Page layout: HTML trouble

[Cutter]

Hello!

I have some trouble with HTML. I don't know how to make the title of the site vertically centered in the header. I removed the "text-indent -999" parameter, then the title appears too high (it touches the top border of the page). The title of the site is a h1 header with the #header class. I centered the logo with a margin, but I don't know how to vertically center a text. I'm using the default template ("Layout: Left sidebar + 1 column"). Please help.

I also want to have two images in the header of my pages (the logo on the left, one image on the right). I tried to apply this tutorial, but I screwed things up (the right image appeared below the header etc...). Please can someone post a simple and complete example with image1.jpg and image2.jpg? Thanks in advance.

[khyros]

put the full margin sentence


margin: 20px 0 0 10px;


(it goes  clockwise like this margin: top right bottom left)

[Cutter]

put the full margin sentence


margin: 20px 0 0 10px;


(it goes  clockwise like this margin: top right bottom left)

Thanks but this doesn't work like I would. It applies a margin to the whole header: the title moves, the logo moves and the background color also moves. I applied the margin to "div#header h1 a".

Here is the CSS code:

Code: Select all

div#header h1 a {
   margin: 1em 0 0 102px;
/* you can set your own image here */
   background: #333 url(uploads/images/logoweb.png) no-repeat 20px 10px; 
   display: block;
   height: 87px;             /* adjust according your image size */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Please help, I'm allergic to HTML.

[Cutter]

Please help, I still can't figure it out.

[KO]

Is this site online somewhere?

[Cutter]

Yes.
http://arcenciel93.free.fr

[KO]

What about:

div#header h1 a {
/* you can set your own image here */
  background: #333 url(uploads/images/logoweb.png) no-repeat 20px 10px;
  display: block;
      height: auto;            /* adjust according your image size */
  text-indent: 0em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
padding:40px 0px;
text-align:center;
color:white;
}

But you should test this with IE as well.

Br, K

[Cutter]

Do I have to use padding to center a text? Is this the only solution?

Edit: sorry, your solution works great if I keep a specified height of 87px (instead of auto), and put padding only on top (instead of putting 40px on top AND bottom).
Thank you.

Now I would like to add a little line under the title of the site. If I put a line break in the it screws everything up. Do you know there a simple way to do that?

Thanks in advance.

[KO]

You might want to try adding Your text around your title text and giving css paddings etc. for that. Then you might be able to keep your heigh for tag.

The thing there is that the whole header is link and it's dimensions are given somewhere. If you give height and add padding then total height is height + top-padding + bottom-padding. If you don't give height then there is no padding for text.

What if you make background image size of your header that has exactly as you want it? Then you use your previous setting with text-indent:-999 etc. to hide normal text if you to keep it for search engines.

[Cutter]

Thanks I found the solution somehow.