3 replies [Last post]
Kaigen
Kaigen's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-5
Joined: 2011-09-29
Posts: 10
Points: 12

Hello everybody,

I have a header in which I want to add 3 elements, Title, Logo and 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:
CSS -
#globalContainer{
	width: 100%;
	height: 100%;
}
 
#header-out{
	width: 100%;
	height: 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 -

<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 !

Kaigen
Kaigen's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-5
Joined: 2011-09-29
Posts: 10
Points: 12

Are there any information I

Are there any information I could add to clarify my problem ?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's pretty hard to grasp

It's pretty hard to grasp what you are trying to achieve. You need to better explain what happens in the header. All those 100% heights are meaningless and won't do anything as it stands.

You only show one element and only styles for one element how are the other two meant to work?
If you simply want them side by side you float them or inline-block them.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Kaigen
Kaigen's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-5
Joined: 2011-09-29
Posts: 10
Points: 12

Hi there, First of all,

Hi there,

First of all, thanks for your reply. Second, I did not know that 100% was the default value, so thank you for pointing this out, it makes my code lighter Laughing out loud

As for what you are asking, it's pretty simple actually. I have a header with 3 elements, title on the left, logo next to it, then menu on the right. They are inside the header, but are positioned with a margin on the left (for title) and right (for menu). So far so good, a simple "Float: left" seems to be perfect for my title and logo, and "Float: right" for my menu.

However, these elements also share a common margin on the top, creating an empty space above them. This is where it gets troublesome, I was trying to use a margin-top of 70%, but since this property inherit from the parent width (940px), it puts all of my elements at the bottom of the screen instead of the bottom of the header. So I tried using much lower values of percentage to achieve the desired result, but I do not trust this method at all. So I was wondering if there were some alternatives to simply using smaller margin values to achieve my goal.

I also tried to make my elements as "Position: relative", the margin-top seemed to apply correctly to the header height, however the margin-left of my title was forgotten, so I had to add it to my logo too... It did not seem like a good idea to do so, so I retracted.

I've learned over time that simply "getting the results" was usually a bad idea with tons of surprise for later, so I am trying to make sure that everything I do is the best way to do it.

Thanks a lot for your time !