Positioning inside header and divisions

Question

Since the code is long I have fiddle for it

<header>
    <div>
    </div>
</header>

FIDDLE: http://jsfiddle.net/9zWm9/34/

Q: Can you please tell why my list items are not aligning to the navigation inside header-box.

Requirement: I want my list items

to be exactly in center of header-box with the line-height of 3em.

Thanks in advance.

line-height is your problem you write it as more difficult way simply put `line-height` which is equal to your `header height` or `vertical-align:middle` for `inline-blocks` — Vivek Vikranth, Apr 01 '14 at 07:40
how? its 3em which is less than the height of nav? Can you please explain and correct it — Haris Mehmood, Apr 01 '14 at 07:43
No its not, if i change it, its still not in the middle of ul or nav — Haris Mehmood, Apr 01 '14 at 07:44
that was my mistake, i want line-height: 3em; Thats typo and really bad one : — Haris Mehmood, Apr 01 '14 at 07:45
Better [check this](http://stackoverflow.com/questions/15132671/ems-for-line-height) — Vivek Vikranth, Apr 01 '14 at 07:48
thats not the problem i am facing vivek. I want li to be in center of ul — Haris Mehmood, Apr 01 '14 at 07:49
@HarisMehmood, do you mean horizontal and vertical align or only horizontal??? — Karim AG, Apr 01 '14 at 08:00

Karim AG · Accepted Answer · 2014-04-01T08:46:44.070

3

To align your ul horizontally you need to clear the float, I've done that using a br element with class="clear"

.clear { clear:both; }

and to position the

s vertically I used position:relative; with top:15%; check out this fiddle

And here's another way if you don't want to set position on the li elements, this way you should set a line-height on your ul element (instead of height).

check out this fiddle

edited Apr 01 '14 at 08:46

answered Apr 01 '14 at 08:36

Karim AG

2,166
15
29

:) That did it for me. Can you please explain clear:both; and in your mind is there any other way of aligning li's vertically ? Thanks a lot though. – Haris Mehmood Apr 01 '14 at 08:46
1

check out [this link](http://stackoverflow.com/questions/12871710/why-clear-both-css) to get you familiar with clear:both – Karim AG Apr 01 '14 at 08:48

score 0 · Answer 2 · answered Apr 01 '14 at 07:49

0

Remove the position:relative for the .header-box and add overflow: hidden. Remove the height specified for .header-box, header nav and header nav ul and add padding to header nav ul

Check this fiddle

CSS changes

.header-box {
    /* top: 40px; */
    width:100%;
    /* height: 81px; */
    /* position: relative;  */  
    overflow:hidden;
}

header nav{
    border: 1px solid black;
    /* height: 81px; */
}
header nav ul{
    width:100%;
    /* height: 81px; */
    margin:0px auto;
    /* padding:0px; */
    padding:15px 0px;
    text-align:center;
}

answered Apr 01 '14 at 07:49

James

4,540
1
18
34

I want the navigation header box at the bottom of COMPANY NAME, by changing it it will go to the top. – Haris Mehmood Apr 01 '14 at 07:52
In the fiddle i posted "Secure Access Control" comes above the navigation box. Isn't this what you want? Did you check my fiddle? – James Apr 01 '14 at 07:55
yes I did and its showing beside "Username" i.e. HARIS – Haris Mehmood Apr 01 '14 at 07:56
So you want "Secure Access Control" above every thing, then Username below it and then navigation box. Is that what you want? – James Apr 01 '14 at 07:59
SECURE ACCESS CONTROL to the left of top, USERNAME to the right of top both in same line, float left and float right, then Header navigation below it. Like it is in the fiddle i posted. I WANT
's of

Haris Mehmood

Apr 01 '14 at 08:01

Ok add `overflow:hidden` to `#container` – James Apr 01 '14 at 08:02

Have you seen the fiddle i posted. ? Overflow: hidden will only hide the overflow, it will not align it to the center vertically. btw I did this and still the same result. – Haris Mehmood Apr 01 '14 at 08:04

score 0 · Answer 3 · answered Apr 01 '14 at 07:49

0

Yes, problem is the line-height. A possible solution is changing the line-height to 1:

font: 18px Verdana;
display: inline-block;
list-style-type: none;  
text-align:center;
line-height: 1;    
border: 1px solid red;

http://jsfiddle.net/9zWm9/35/

answered Apr 01 '14 at 07:49

user3483982

393
1
3
6

I want the line height to be 3em so that I can apply my image to it. Thats not my requirement and this also is not in the center of header – Haris Mehmood Apr 01 '14 at 07:51

Mayur Borad · Answer 4 · 2014-04-01T08:03:01.140

0

Set your following class to "line-height: 1em;"

header nav ul li {
    border: 1px solid #FF0000;
    display: inline-block;
    font: 18px Verdana;
    list-style-type: none;
    text-align: center;
    line-height: 1em;
}

edited Apr 01 '14 at 08:03

answered Apr 01 '14 at 07:54

Mayur Borad

1,295
9
23

Positioning inside header and divisions

4 Answers4