Header with h1 formatting

I'm having trouble getting 'by Jackie' to align under the 'Bella' logo without adding excessive space. Does anyone have any suggestions on how to resolve this issue?

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;
}

Check out this reference http://jsfiddle.net/XxEaz/

jqueryhtmlcssheader

Answer №1

To achieve the desired effect, you can set it to display:block without adding any extra HTML elements.

Check out the jsFiddle example here

.header h1 i {
    display: block;
}

Answer №2

Include display:block; in the following CSS code:

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

Answer №3

Here is a helpful code snippet:

Remember to apply this CSS styling:

span{
    display:block;
}

Make sure to update your HTML as follows:

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

Check out the jsFiddle demo here

Answer №4

To start, consider switching the I tag to a SPAN tag for better semantic structure. The intended purpose is for referencing book, magazine, or article titles in bibliography documentation.

Next, put "Bella" and "By Jackie" each within their own individual SPAN tags:

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

Adjust your CSS accordingly:

.header .header-title {display: block}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get the ability to overlay text onto an image by using jQuery for downloading

Currently, I am facing an issue with an online photo editor in my project. The problem is that I am unable to download the image after adding and editing text on it. The texts added are editable but the image cannot be downloaded after the changes. I nee ...

javascriptphpjqueryhtmlcss

json request not functioning properly in Internet Explorer and experiencing difficulties with caching

Unfortunately, the code snippet provided below is compatible only with Firefox and not Internet Explorer. The JSON file breaks when it encounters the text "Meanscoil na mBraithre Criostaí": "2028425":[19, "Awaiting Correction", "", "Meanscoil na mBra ...

javascriptjqueryajaxcachinggetjson

Exploring methods to reload a parent window from a child window using PHP

After opening a popup window from a modal, I am now trying to refresh the page where my modal is located. I have attempted to write some code that I found here, but it doesn't seem to be working. Here is an example of what I have tried: // This fun ...

javascriptphpjqueryajax

The true meaning of CSS3 transition is often misconstr

I'm trying to create a simple linear transition effect, but for some reason it's not working. Any suggestions on what might be causing the issue? HTML <div class="button-modern" style="background-color:#e73032"> <span style="color: ...

jquerycsscss-transitions

Error in Google reCaptcha 2: "a is null" occurs when grecaptcha.reset function is executed

I am currently working on a registration page that utilizes AJAX for validation on both the client and server sides. If the server side validation fails, the AJAX function returns the errors to the screen and tries to reset the reCAPTCHA using grecaptcha. ...

javascriptjqueryajaxrecaptcha

Tips for implementing both an onChange and onSubmit event for a MUI TextField

I'm currently working with React and MUI and have created a form like the following: const handleUserInput = (event) => { set_user_input(event) } const handleSubmitForm = () => { if (user_input == 'help'){ ...

javascripthtmlreactjsformsmaterial-ui

Button activated on second click

As I am working on a project, I encountered an issue with two buttons and one input field. The input field is supposed to take the value of the clicked button, but currently, the function works only after the second click on the button. I have tried using ...

javascriptjqueryvue.js

Is it possible to incorporate both Bootstrap 3 and Bootstrap 4 within the same HTML file for separate div elements on a webpage? If so, what is the best way to achieve this?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Bootstrap 3 and Bootstrap 4 in the Same HTML File</title> </head> <body> <div class="bootstrap3"> Some code her ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing Angular for Webcam Integration

After trying out this code snippet: <video autoplay playsinline style="width: 100vw; height: 100vh;"></video> <script> navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } }) .then(stream =&g ...

htmlangulartypescriptvideogetusermedia

How to Build a Number Spinner Using Angular Material?

Is there a number spinner in Angular Material? I attempted to use the code provided in this question's demo: <mat-form-field> <input type="number" class="form-control" matInput name="valu ...

htmlangularangular-material

What are the steps to implement infinite scrolling in a Vue.js application?

Currently, I am attempting to implement an infinite horizontal scroll section in vuejs for a selection of products. However, I am facing difficulties achieving the infinite effect. My approach so far involved removing the card that goes out of view and add ...

javascriptcssvue.jsnuxt.jscarousel

`problem with moment.js incorrectly identifying the day of a given date`

I'm currently working with a field that has the value 03-01-2020, which is in the DD-MM-YYYY date format. However, when I apply the code moment.utc(document.getElementById('date').value, "DD-MM-YYYY HH:mm:ss").toDate(), I noticed that the re ...

javascripthtmlmomentjs

Using JavaScript to display a line using `document.write`

I'm having trouble displaying a line using the Document.Write function in JavaScript. When I submit the form, the line briefly appears and then disappears Any ideas on why this might be happening? <!DOCTYPE html> <html> <head& ...

javascripthtmlformsfunction

Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

For my current project, I am creating an offline website and would like it to display in full screen when opened. I have been using the Fullscreen API, but it exits fullscreen mode when a user navigates to another page. After researching the issue, it seem ...

javascriptjquerycsshtmlfullscreen

The WebForms feature is failing to include the email input type in the form after autopostback

On my page, I have an input field using asp:TextBox: <asp:TextBox ID="edEmail" runat="server" /> The form submission is done using a standard <asp:Button>: <asp:TextBox ID="edEmail" runat="server" /> <asp:Button ID="bbOK" Text="Save ...

asp.nethtmlwebforms

Once the hidden DIV is revealed, the Youtube video within it begins to load

I currently have a hidden DIV on my website that contains a YouTube clip. My goal is to load the video in the background once the page has fully loaded, so that it's ready to play when the user clicks the button to reveal the DIV. However, at the mo ...

javascriptjqueryyoutubevisibility

Optimizing jQuery scripts by consolidating them to reduce file size

I've created a jQuery script that performs the same task but triggers on different events, including: Page load Dropdown selection change Clicking the swap button Typing in a text field However, I had to write separate scripts for each of these eve ...

javascriptjquery

Tips for adjusting the initial scale to ensure your mobile website fits perfectly on the screen

I'm trying to figure out the best way to adjust the 'initial-scale' so that my website's width fits perfectly on any device screen when first loaded. Check out my website here: While it looks fine on regular browsers, I had some issue ...

htmlcssmobileviewport

When resizing, Bootstrap sidebar causes content overlapping

I am facing a problem that I am unable to resolve. The issue is with the top bar and side bar on my webpage. When the page is resized, the sidebar moves to an absolute position just below the top bar, causing it to overlap my content. Below is my CSS code ...

twitter-bootstrapcsstwitter-bootstrap-3

Ajax fails to transmit data to PHP script

Having encountered an issue with my script that prevents sending data from AJAX to a PHP file, I decided to debug it by logging the form data before running it through the AJAX function. The data obtained was as follows: Form: name=jim&email=info%40te ...

javascriptphpjqueryajax