SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alternative to margin-top ?

    Hello everybody,

    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:

    Code:
    ----------------------------------
    |                                |
    |                                |
    |                                |
    |   Title   Logo        Menu     |
    |                                |
    ----------------------------------

    As you can see, I have a margin on the left and on the top. I tried using this code:
    CSS -

    Code:
    #globalContainer{
    	width: 100%;
    }
     
    #header-out{
    	width: 100%;
    	background-color: black;
    }
     
    #header{
    	width: 940px; /* Set to % when possible */
    	height: 240px; /* Set to % when possible */
    	margin: 0px auto;
    	background-color: white;
    }
     
    #header .title{
    	margin-top: 12%;
    	margin-left: 5%;
    	width: 250px;
    	height: 100px;
    }
    HTML -

    Code:
    <body>
    	<div id="globalContainer">
    		<div id="header-out">
    			<div id="header">
    				<div class="title">Test</div>
    			</div>
    		</div>
    	</div>
    </body>
    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 !

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Not sure if I've understood the problem correctly, but have you tried putting
    #globalContainer {padding-top:2em;}?
    (2em chosen just for an example, vary this as you need to make it appropriate for the design).

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •