13 replies [Last post]
loukmaster
loukmaster's picture
Offline
Regular
Last seen: 10 years 13 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

loukmaster
loukmaster's picture
Offline
Regular
Last seen: 10 years 13 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

loukmaster
loukmaster's picture
Offline
Regular
Last seen: 10 years 13 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

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

loukmaster
loukmaster's picture
Offline
Regular
Last seen: 10 years 13 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

loukmaster wrote: … But

loukmaster wrote:

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

loukmaster wrote: And another

loukmaster wrote:

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. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

loukmaster
loukmaster's picture
Offline
Regular
Last seen: 10 years 13 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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:

§1.7.1 How to read this specification wrote:

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Display property

Luke wrote:

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

loukmaster
loukmaster's picture
Offline
Regular
Last seen: 10 years 13 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

You're a good guy Gary,

You're a good guy Gary, thanks for replying every time Smile I will read the links you've sent me, and thank you again.

Luke

loukmaster
loukmaster's picture
Offline
Regular
Last seen: 10 years 13 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Why would you want that? What

Why would you want that? What are you trying to accomplish?

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.