Modifying header css to include text in two different positions

Question

I have a header with a link to another page on the left hand side. I need to also put a title in the centre of the header, but don't want to use a navbar. Is this possible? Here is my attempt, which is not working:

html:

<div class="header">
    <a href= "#"> Left Side Text </a>
    <p class = "header title">Title Text</p>
</div>

css:

.header {
    height: auto;
    line-height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    font-size: 12px;
    text-align: left;
    padding-left: 50px;
}


.header .title {
    font-size: 18px;
    text-align: center;
}

fiddle: http://jsfiddle.net/Qf3w7/

When you say center do you mean centered exactly, without regard for the space that the left side takes up? Or centered in the remaining space? — Matt Pileggi
– Matt Pileggi, Commented Mar 7, 2014 at 16:09
<i> is till a valid tag although <em> is now more common. <i> is now used by some for icon fonts etc. — Paulie_D
– Paulie_D, Commented Mar 7, 2014 at 16:10

José Barbosa · Accepted Answer · 2014-03-07 16:13:58Z

3

Here is your jsfiddle

You just need a header with:

.header {
    height: auto;
    line-height: 50px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    top: 0;
    font-size: 12px;
    text-align: center;
    position: absolute;
}

And the left link with:

.header a{
    float: left;
    z-index: 1;
}

Update: actually you need position: absolute to set the title right on center

answered Mar 7, 2014 at 16:13

José Barbosa

9038 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Pileggi · Accepted Answer · 2014-03-07 16:28:24Z

2

You can also set them to inline-block rather than floats.

Two block elements next to each other in the DOM will then flow the same as two words next to each other. This has the added benefit of stretching the height of the containing elements to the height of the children without worrying about clearing floats or setting overflows. One caveat is that the DOM element tags have to appear right next to each other, no space between, so that they do not have spacing issues

<aside>...</aside><!-- no spaces here --><article>...</article>

http://jsfiddle.net/cVJBW/

answered Mar 7, 2014 at 16:28

Matt Pileggi

7,2364 gold badges19 silver badges20 bronze badges

Comments

bernhardw · Accepted Answer · 2014-03-07 16:42:43Z

1

In your simple situation I would position your title absolute inside your header and make sure that your link stays on top with z-index.

HTML:

<div class="header">
    <a href="#" class="link">
        <i class="fa fa-angle-left icon-white arrow"></i> 
        Left Side Text
    </a>
    <div class="title">Title Text</div>
</div>

CSS:

.link {
    position: relative;
    z-index: 1; /* Important, otherwise your link wouldn't be clickable. */
}

.title {
    font-size: 18px;
    text-align: center;
    border: 1px solid green;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

JSFiddle here.

But please note that in case your title or left-side text get too long, they will overlap each other.

edited Mar 7, 2014 at 16:42

answered Mar 7, 2014 at 16:14

bernhardw

3,2693 gold badges22 silver badges17 bronze badges

Comments

Erik · Accepted Answer · 2014-03-07 16:20:42Z

1

assuming you are looking to do something that resembles a mobile nav, try positioning your link at absolute 0 top and left, and your title absolute top 0 and right and left equal values that is atleast greater than the width of the back link.

<div class="header">
   <a class="back-link" href= "#"><i class="fa fa-angle-left icon-white arrow"></i> Left Side Text </a>
   <p class = "header title">Title Text</p>
</div>

.header .title {
    text-align:center;
    position:absolute;
    left:200px;
    right:200px;
    margin:0;
 }
.back-link{
      position:absolute;
      left:0;
 }

you can take a look at the fiddle: http://jsfiddle.net/P2n4G/

answered Mar 7, 2014 at 16:20

Erik

6441 gold badge5 silver badges13 bronze badges

Comments

Mauro Cifuentes · Accepted Answer · 2014-03-07 16:23:58Z

1

look at this fiddle: http://jsfiddle.net/mLP82/

<div class="header">
<div class="titleContainer">TitleText</div>
<div class="linkContainer">Link</div>
</div>

and CSS

.header {
height: auto;
line-height: 50px;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
font-size: 12px;
text-align: left;
padding-left: 50px;
}

.titleContainer {
text-align: center;
width: 100%;
font-size: 24px;    
position: absolute;
border: 1px solid red;
}

.linkContainer {
position: relative;
left: 10px;
top: 10px;
border: 1px solid green;
width: 50px;
height: 20px;
line-height: 20px;
padding: 0;
}

I change a little your code Hope this help you!

answered Mar 7, 2014 at 16:23

Mauro Cifuentes

765 bronze badges

Collectives™ on Stack Overflow

Modifying header css to include text in two different positions

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related