I have a header in which I want to add 3 elements, Title, Logo and Menu. All these elements have a margin on the top and on the side (left for title, right for menu). So far, I worked with Title and Logo. Here is the layout I want to achieve:
| Title Logo Menu |
As you can see, I have a margin on the left and on the top. I tried using this code:
width: 940px; /* Set to % when possible */
height: 240px; /* Set to % when possible */
margin: 0px auto;
My problem comes from the margin-top. I had a lot of trouble to find an explanation why 100% margin-top would put my title out of my screen, then I found out that the margin-top inherit from its parent WIDTH (940px). So I went ahead and tried with a very low percentage and it worked fine... On my screen.
Now, I am wondering if there are not better way to achieve this result, because I must admit that I have no real trust in my solution at the moment.
I tried using Position: Relative along with Top and Left, however when I placed the Logo it ignored the Left value of my Title. I guess I could fix it by adding the same Left value to the Logo, but once again I am not sure that this is the right way to do things.
I want my website to be as standardized as possible and respect the good practice of the web designing. I am pretty much starting in the web design area and want to do things right Wink
Thanks a lot for your time !
Not sure if I've understood the problem correctly, but have you tried putting
(2em chosen just for an example, vary this as you need to make it appropriate for the design).
This is adding a margin to the whole header... I want to add a margin only inside my header and make it respond to the screen of the viewer.
That's why I left the "Set to % when possible" comment, I want my header to be flexible on the screen being used. But the elements inside also have to be flexible to the header height, which is why I was trying to use margin-top with percentage value.
Thanks for your input