CODEWITHSUNDEEP
jqueryhtmlcssheader
user2402731
user2402731

Reputation: 3

formatting h1 in header

I am having problem with getting 'by Jackie' under the 'Bella' logo. The only way I can get it to go under is by using a line break which causes a lot of space to be added. Anyone have any suggestions on how to fix this problem.

HTML:

<div class="header">
 <div class="wrapper">
  <h1><a href="#">Bella<i>by Jackie</i></a></h1>
  <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="whatwedo.html">What We Do</a></li>
     <li><a href="features.html">Features</a></li>
     <li><a href="benefits.html">Benefits</a></li>
     <li><a href="#">Gallery</a></li>
     <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

CSS:

.header h1 {
float: left;
line-height: inherit;
background: #969;
padding: 0px 30px 0px 30px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 0px 0px 2px 2px;
margin-top: 0px;
}

.header h1 a {
margin-bottom:-20px;
}

.header h1 i {
font-family: 'Lobster', cursive;
font-size: medium;
font-style: normal;
padding-left: 0.5em;
padding-top: -10px;
}

.header h1 a {
font-family: 'Lobster', cursive;
font-size: 36px;
}

Here is a reference http://jsfiddle.net/XxEaz/

Upvotes: 0

Views: 113

Answers (4)

Juan
Juan

Reputation: 5060

add display:block; to 

.header h1 i {
    font-family:'Lobster', cursive;
    font-size: medium;
    font-style: normal;
    padding-left: 0.5em;
    padding-top: -10px;
    display:block;
}

Upvotes: 1

Roralee
Roralee

Reputation: 548

First: change the I tag to a SPAN tag if you can. Its semantic purpose is for bibliography documentation: book/magazine/article titles.

Second: Wrap "Bella" and "By Jackie" each in a SPAN of their own:

<h1>
  <a href="#" title="">
    <span class="header-title org">Bella</span>
    <span class="header-title owner">By Jackie</span>  
  </a>
</h1>

Now your CSS just needs to:

.header .header-title {display: block}

Upvotes: 0

Mohsen Safari
Mohsen Safari

Reputation: 6805

use this code:

add this CSS class:

span{
    display:block;
}

and edit your html like this:

<div class="header">
        <div class="wrapper">
            <h1><a href="#">Bella<i><span>by Jackie</span></i></a></h1>
        </div>
</div>

jsFiddle is here

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241198

You can simply set it to display:block, achieving the desired effect. No need to add more HTML.

jsFiddle here

.header h1 i {
    display: block;
}

Upvotes: 2

Related Questions