Thu, 2012-07-26 14:22
I'm a beginner, so my HTML structure might not be the best and my CSS is definitely isn't so a clear and simple answer is much appreciated.
I want to have a header div where I'll have a Luke and at the right a navigation bar. All in one div
Here's my HTML :
<div id="header"> <div id="luke"> <h1>Luke</h1> </div> <div id="navbar"> <ul> <li><a href="#">Sign In</a></li> <li><a href="#">Sign Up</a></li> </ul> </div> </div>
Here's my CSS:
#header { height: 70px; background-color: #383838; color: white; } #header h1 { line-height: 70px; margin-left: 60px; }
I don't know how to style my navbar ? Because at the moment it doesn't even belong to the #header.Please help.
Thu, 2012-07-26 16:57
#1
Some help, at least
The div element is used to group related elements. There is no need to use the element tag to wrap everything.
<div id="header"> <h1>Luke</h1> <ul> <li><a href="#">Sign In</a></li> <li><a href="#">Sign Up</a></li> </ul> </div>
#header {} #header h1 {} #header ul {} #header li {}
I didn't add any style rule sets because I don't know how you want the header to look. Provide more info, and we can go further.
cheers,
gary
Fri, 2012-07-27 05:44
#2
Thanks alot for your reply
Thanks alot for your reply Gary
I want my navbar to be in the same baras my navigation bar. My <h1> would be on the left, and my navbar on the right.
I'd just like to know what to write in CSS to have my navigation bar in the header container on the right , and my <h1> on the left.
Thanks again,
Luke.
//mod edit: Luke, please read the sticky posts at the top of the forum. They will explain what info we need from you in order to best be of help. ~gt
Fri, 2012-07-27 06:26
#3
Try this
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test</title> <style type="text/css"> html, body { background-color: white; color: black; font: 100%/1.25 sans-serif; margin: 0; padding: 0; } p { font-size: 1em; } #wrapper { border: 1px dotted gray; margin: 20px auto 0; width: 90%; } #header { overflow: hidden; } #header h1 { float: left; margin-left: 60px; } #header ul { padding: 0; text-align: right; } #header li { border: 1px solid black; display: inline-block; margin: 1em .5em; text-align: left; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Luke</h1> <ul> <li><a href="#">Sign In</a></li> <li><a href="#">Sign Up</a></li> </ul> </div> </div> </body> </html>
cheers,
gary
Fri, 2012-07-27 06:44
#4
Thanks GaryBut there's one
Thanks Gary
But there's one thing I don't understand, why did you use overflow: hidden ?
Without it, I discovered that the header container has a smaller height. But the function of overflow: hidden to hide from sight everything that "overflows" form that container.
I didn't find any thing overflowing from it.
So, why did you use it ?
Luke
Fri, 2012-07-27 06:48
#5
And another thing, why did
And another thing, why did you style the same thing to the html and body ?
Isn't that a bit redundant ?
No offense intended, I'm a beginner and I'm very curious about CSS,
Thanks again
Luke
Fri, 2012-07-27 14:15
#6
loukmaster wrote: … But
…
But there's one thing I don't understand, why did you use overflow: hidden ?
Without it, I discovered that the header container has a smaller height. But the function of overflow: hidden to hide from sight everything that "overflows" form that container.
The {overflow: hidden;} acts to trigger a new block formatting context, which causes #header to enclose its float content. As you noticed, without it, #header is shorter due to #logo, a float, not being fully enclosed. #header can "see" only the non-float ul.
Since there is no explicit height on #header, it simply expands as needed and nothing can actually overflow. See Containing Float Elements.
cheers,
gary
Fri, 2012-07-27 14:19
#7
loukmaster wrote: And another
And another thing, why did you style the same thing to the html and body ?
Isn't that a bit redundant ?
Yes, it is. Back in olden times, before IE8, I think it was, there were browsers that used padding on the html element, and others that used margin on the body element. As far as I know now, all browsers have defaulted to an 8px margin on body.
So tally this as an old habit. 
cheers,
gary
Sat, 2012-07-28 10:58
#8
Another way of doing it
Thanks again Gary
I haven't really understood why you typed overflow:hidden, sorry
But I've found another way of doing this, and I want you to tell me what you think of it, why and why not I should use the following method
#header { background-color: #383838; color: white; height: 70px; } #header h1 { margin-left: 50px; float: left; margin: 0; line-height: 70px; } #header ul { list-style-type: none; float: right; }
And if I continued to style the links of the ul:
#header li a { display: block; float: left; }
There seems to be a problem with the two floats here (ul float and a float). Because What I get isn't a normal inline box but block boxes. But I had floated them left!
I'm asking you a lot here, you are currently helping my future here 
I want to become a web developer but have a hard time learning it without any help
What is the difference between display: inline;and display:block; float: left; ??
- Luke
Sat, 2012-07-28 11:20
#9
If you do that, you will
If you do that, you will never see the header's bg color. Go back and read the containing floats article again. There are important concepts there, concepts you must understand in order to understand what you're doing, and why you must do it.
The editor of the html5 spec has this to say regarding how to read a specification:
This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references.
See Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.
When I can, I prefer to float one element and leave the other in the flow. I think it is generally a more robust solution.
cheers,
gary
Sat, 2012-07-28 11:46
#10
Display property
What is the difference between display: inline;and display:block; float: left; ??
First, go to the above linked css2.1 specs and study the display property.
Many times people will add {display: inline;} to a floated element without a clue as to why. In IE6, this incongruously fixed a bug that doubled float margins in some case. Of course most 'developers', if they knew of the hack, didn't know what or why they were doing it, so continued to add it after MSFT had fixed the damned thing.
Any float element is block display by default. Still, there are those who will add it to a float element. I don't know where this silliness originated.
cheers,
gary
Sat, 2012-07-28 13:13
#11
You're a good guy Gary,
You're a good guy Gary, thanks for replying every time I will read the links you've sent me, and thank you again.
Luke
Sun, 2012-07-29 07:11
#12
But now, what if I wanted my
But now, what if I wanted my header to be 50px of height?
By adding height: 50px; to the #header wouldn't work.
Sun, 2012-07-29 14:20
#13
Why would you want that? What
Why would you want that? What are you trying to accomplish?
g