Tips for transferring this text to a new line

I have come across this text that needs to be moved to a new line,

This is its current appearance,

Here is how I want it to look:

HTML code snippet:

<div id="content">
    <div id="header">
        <p>
        <img class="header-image" src="http://www.nab.com.au/content/dam/nab/personal/credit-cards/apply-for-a-credit-card/images/icon-apply-online.gif" />
        <span id="header-text-1">Hello To</span>
        <span id="header-text-2">FruitLand</span>
        </p>
    </div>
    <div id="body">
        <div id="body-title">Fruit Login</div>
        <div id="box-one"> Radio List with 2 radio buttons</div>
        <div id="box-two"> CheckBox</div>
        <div id="box-three">Textboxes x 2</div>
        <div id="body-footer">Textboxes x 2</div>
    </div>
</div>

CSS styles:

.header-image {
vertical-align: text-top;
}

#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
}

If you want to test this out, here's the link to the FIDDLE which should work on all browsers.

htmlcss

Answer №1

Experiment by using position:relative. Insert the following code:

#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
    position:relative;
    top:34px;
    left:-86px;
}

Then, fine-tune the placement by adjusting the values of top and left

VIEW DEMO

Answer №2

What is the best way to style your images and text in HTML? Here's a tip: display your image as a block, but float it to the left. To clear the float, add overflow:hidden to the paragraph.

If you want your span elements to line up one beneath the other while still clearing the image, try using overflow:hidden again:

#header p{
    overflow:hidden;
}
.header-image {
    vertical-align: text-top;
    display:block;
    float:left;
}
#header-text-1, #header-text-2{
    display:block;
    overflow:hidden;
}

Feel free to add padding to your <span>s for additional styling options.

Check out the JSFiddle example

Answer №3

Give it a shot and finish it

#nav-bar
{
width:100%; 
    float:left ;   
}
.navbar-image {
vertical-align: top;
    float:left;
}
#navbar-text-1
{
       width:50%; 
    float:left;

}
#navbar-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
    width:200px;
}

Answer №4

I really appreciate Omar Sedki's solution. Here is an enhanced version:

.header-image {
    float:left
}
#header-text-2 {
    display:block;
}
#body {
    clear: left;
}

Check out the updated fiddle here!.

#body { clear: left;} ensures that "Fruit Login" stays below the image

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

Angular Tag < with CSS styling

Why should we use the angular tag in CSS? For example: .class << span Typically, we use these types of tags: body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-si ...

htmlcsscss-selectors

Having Trouble Aligning Contents in a Row Horizontally using Bootstrap 5

My Images are refusing to align in a horizontal row no matter what I try. Output: https://i.sstatic.net/echGV.png .img-size-square { width: 100%; height: auto; max-width: 400px !important; max-height: 400px !important; } .container-f ...

htmlcssbootstrap-5

Awesome C# PDF Printing Solution [closed]

This question does not comply with our Q&A standards and guidelines. To maintain the integrity of our platform, we require answers to be factual, supported by references or expertise. However, this question may provoke debates, arguments, polls, or pro ...

c#htmlpdfpdf-generation

Toggle the visibility of text boxes based on the checkbox selection

After doing some research, I decided to revise the question after receiving feedback that it was causing some concern. When a checkbox is clicked, the content of the corresponding div should be visible and vice versa. How can I achieve this? Thank you. JQ ...

javascriptjqueryhtml

Is it possible to combine numerous -webkit-transition animations in my css code without using keyframes?

I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes. I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for s ...

animationcsswebkitcss-animations

Exclusive JQuery Mobile Styles

Although I enjoy using JQuery Mobile, I'm facing compatibility issues with my custom Javascript on the page. Despite everything functioning correctly without JQuery Mobile, adding the library causes problems that I've been unable to resolve. Ess ...

jqueryjquery-uicssjquery-mobile

Create a typing effect in Javascript that mimics the user's input

Trying to simulate a typing effect with the sentence extracted from user input using JavaScript, but encountering some issues. Successfully capturing and displaying the input in the console with console.log(), however, incorporating the typing effect func ...

javascripthtml

Ways to obtain jquery object for replaced DOM element

Is there a way to select the new content after using the replaceWith function in my plugin? I want to chain my plugin for the new content. $.fn.customPlugin = function() { this.replaceWith('<div>New Content</div>'); }; So, ideal ...

jqueryhtml

Flip elements in jQuery that are overlapping other elements following them

Utilizing the jQuery flip plugin to create image flip animations within an ejs file in a Node environment. The issue arises where any element positioned below the flip element ends up overlapping with it, causing visual discrepancies. Here is a simple co ...

jqueryhtmlnode.jsejs

Inserting a Specific Iframe into a Designated Location in HTML with the Help of Jquery

Currently, I am encountering an issue with placing a dynamically created iframe inside a specific section of my webpage. The iframe is supposed to be contained within a div element named "maps", but instead it is appearing at the bottom of the page.This ma ...

javascriptjqueryhtmldom

Using jQuery, you can activate an onclick function based on specific keywords entered by the user

Within this element, there is a text input field that allows users to search for specific items. Next to the input field is an icon image that can be clicked on to trigger a jQuery onclick event. This event sends an AJAX request to a PHP file, retrieves da ...

javascriptjqueryhtml

The toggle feature of the Bootstrap responsive navbar is not functioning properly

I am currently implementing Twitter Bootstrap in a Rails project, but I'm encountering issues with the responsive navbar. When I resize the screen, the menu toggle button appears along with the navbar options open below it. Upon further shrinking, the ...

jquerycsstwitter-bootstrapnavbar

When setting the form action attribute in jQuery, the parameter being passed may be null

My goal is to redirect my form action to another page with a URL parameter. Here's the code I'm using: ui.setFormActionToTargetPage = function () { $('form').get(0).setAttribute('action', 'myTargetPage.html?id=' ...

javascriptjqueryhtml

Pulling out a particular row from an HTML table with the help of HTML::TreeBuilder

I am a beginner in perl programming and I am facing a major challenge. I need to parse an HTML file that contains a single table, and extract a specific row based on one of its column entries. Here is a snippet of the HTML file: many previous rows descri ...

htmlperlhtml-table

Transform your current website layout from a fixed 960-grid system with 12 columns into a fluid and

As a newcomer to web development, I have successfully created my portfolio website. I initially set the body width to 1600px because that matched the size of my banner background in Photoshop. I'm using a 960gs 12-column grid system, but when I view t ...

htmlcssresponsive-design

What's the best way to create an onclick event for a li element that includes a pseudo-element ::before

I have successfully created a Timeline using HTML and CSS elements. The visual result is as follows: My goal is to enable users to click on the second circle, triggering a color change in the line that connects the first and second circles. This color tra ...

javascriptjqueryhtmlcss

In AngularJS, when a user clicks on a specific element, the program should fetch the corresponding value from a separate dataset and display it

Hello, I am just starting out with angularjs and here is my current js file setup: angular.module("mainModule", []) .controller("mainController", function ($scope) { $scope.ProdMenu = [ {ProductMenuName: "CBS" ...

jqueryhtmlangularjs

The use of dangerouslySetInnerHTML causes the page layout to stretch, expand, or grow in size

I am currently working on my NextJs app, where I'm utilizing CosmicJs as a headless CMS to showcase content on the webpage. Within the layout of my page, I have structured it with 3 columns, and the content pulled from the CMS is meant to be displaye ...

cssreactjsnext.jsflexboxcosmicjs

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

javascriptjqueryhtmlcssfonts

What is the more effective option: utilizing the bootstrap offset feature or inserting an empty div?

<div class="col-xs-3"></div> <div class="col-xs-6 col-sm-6 col-md-6" style="min-width: 320px;"> </div> OR <div class="col-xs-6 col-md-offset-3 col-sm-offset-3 " style="min-width: 320px;">` </div> I would like to remo ...

cssbootstrap-4