What is the best way to display an icon and text side by side in the header of a Phonegap app

____________________________________________________________
| logo_image             page_Title                       |
------------------------------------------------------------

I am looking to create a header for my PhoneGap app similar to the one shown here. I want to have a logo (image) on the left side of the header and the page title (text) centered. I have already attempted to do this using the following code:

<div data-role="header" >
            <div class="logo"  > <img src="img/logo.png"  /> </div>
            <h1 id="title">Main Page</h1>
            <a href="" data-role="button" data-icon="delete" class="ui-btn-right"  data-transition="fade" onclick="exitButtonClick()">Exit</a>          
        </div>

Here is the CSS used for styling:

.logo {
    vertical-align: left;
}
.title{
    text-align: center;
    display: inline-block; 
    vertical-align: middle;
}

Can someone please guide me on how to make this work? I am new to CSS and would appreciate any help.

htmlcsscordova

Answer №1

<div data-role="header" class="header" >
        <div class="logo"  > <img src="img/logo.png"  /> </div>
        <h1 id="tittle">Main Page</h1>
        <a href="" data-role="button" data-icon="delete" class="ui-btn-right"    data-transition="fade" onclick="exitButtonClick()">Exit</a>          
    </div>

the css:

     .header{display:inline-block;
             padding:5px 15px;
             text-align:center;
             width:100%;
             }

     .logo{float:left;}

     .header h1 {font-size:15px;
                 width:80%;
                 text-align:center;}

To improve the layout, simply set the text alignment of the header div to center and assign a float property of left to the logo element.

Feel free to check out the js fiddle link for more details :)

http://jsfiddle.net/Q2Hkj/

Answer №2

Here is a solution that may suit your needs:

.brand {
    float:left;
}
.header{
    text-align: center;
    width:75%; margin:0 auto;
    vertical-align: middle;
}

Answer №3

I suggest using a combination of percentage size and position in your css, along with a JavaScript function to center elements based on window size. I've also prepared a JSFiddle demo for reference.

Here is the HTML code:

<div id="top_bar">
    <img id="logo_top_bar" src="../img/logo_top_bar.png">
    <section id="title">App title</section>
</div>

And here is the CSS code:

html,body{
    position: relative;
    padding: 0px;
    margin: 0px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-width: 100%;
    overflow:hidden;
}

#top_bar{
    position:relative;
    float:left;
    height: 60px;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    background-color: rgb(46, 42, 42);
}

#logo_top_bar{
    position:absolute;
    height: 30px;
    width: 70px;
    left: 4%;
    top: 15px;        
}

#title{
    position: absolute;
    left: 45%;
    top: 16px;        
    font-size: 1.5em;
    color: white;
}

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

My Angular Router is creating duplicate instances of my route components

I have captured screenshots of the application: https://ibb.co/NmnSPNr and https://ibb.co/C0nwG4D info.component.ts / The Info component is a child component of the Item component, displayed when a specific link is routed to. export class InfoComponent imp ...

javascripthtmlangulartypescriptroutes

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

jquerycssrazordelegates

My Testimonial Slider seems stuck in its current position and won't budge to the left

As an aspiring web designer, I took a template from CodePen and crafted a testimonial slider for my website. To seamlessly merge it with the background, I've been trying to shift the entire testimonial to the left. Despite attempting the float-left p ...

htmlcssslider

Locate grandchildren elements using getElementById

My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...

javascripthtml

Generating various header graphics through PHP's header include feature

I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...

phphtmlcss

What is the best method for gracefully opening external links in a reusable new tab?

Here is the progress I have made so far: <script> var win; function OpenInNewTab(url ) { // var win; if (win) { win.close(); } win =window.open(url, 'myWin'); win.focus(); } </script> My links are structured like ...

htmljavascripthyperlinkanchor

Modifying SVG gradients with JavaScript

My goal is to modify the stop color of a gradient displayed in an SVG element. I've been trying to adjust the stop-color attribute, but so far, my attempts have not been successful: <svg><defs> <linearGradient gradientTransform="rotat ...

javascripthtmlsvggradient

What is the best way to connect added elements together?

I am currently utilizing Plupload to upload files. Due to specific requirements, I need to place FilesAdded "inside" init as demonstrated below. The issue I'm facing is the inability to utilize jQuery.remove() on elements that have been appended usin ...

jqueryhtmlplupload

What is the best way to change a date from the format DD/MM/YYYY to YYYY-MM-DD

Is there a way to use regular expressions (regex) to convert a date string from DD/MM/YYYY format to YYYY-MM-DD format? ...

javascripthtmljsonregex

Issue encountered: difficulty with vertical alignment in table cell containing both text input and image

I am facing an issue with aligning two items (an input text and an image) within a cell of a table. Despite trying various methods like using vertical-align:middle, margin top, padding, and setting height to 100%, I haven't been able to achieve the de ...

htmlcssvertical-alignmentcss-tables

Resolving the Blank Space Problem in DataTable CSS Styling

I encountered an unusual issue while working with DataTable in my project. Here's a link to view my DataTable example I have also attached a picture illustrating the problem I am facing. Is there a way to remove the blank space containing filter but ...

jqueryhtmlcssdatatable

Minimizing the gap between icon and label text

I have a React form that I need help with. The issue is that I want to reduce the space between the list icon and the label. Here is the CSS I am using: .form__container { display: flex; flex-wrap: wrap; } .form__container input { color: rgb(115, 0, ...

javascripthtmlcssreactjstwitter-bootstrap

Converting dynamic text enclosed in asterisks (*) into a hyperlink on a webpage with the use of JavaScript

I'm facing a unique situation where I need to transform specific text on an HTML page into anchor tags using JavaScript/jQuery. The text format is as follows: *www.google.co.uk/Google* *www.stackoverflow.com/StackOverflow* The desired outcome should ...

javascripthtmljqueryhyperlink

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

Struggling to create an HTML header with a title and image positioned on the right side, but facing issues with the image shifting over the title when screen size changes. How can I ensure the image stays in place? Have tried various solutions without succ ...

htmlcssimageposition

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui

Creating a custom transition rule in Stylus: A step-by-step guide

I need help creating a generic transition rule in Stylus. My current function is only working in specific cases, where it returns a string 'all ease-in-out 0.2s' instead of a proper CSS rule. This approach is not effective when trying to use it i ...

cssgenericsstylus

Is storing HTML tags in a database considered beneficial or disadvantageous?

At times, I find myself needing to modify specific data or a portion of it that originates from the database. For instance: If there is a description (stored in the DB) like the following: HTML 4 has undergone adjustments, expansions, and enhancements b ...

c#asp.nethtmlcssdatabase

Creating a div that expands to occupy the entire width, even when hidden and requiring a scroll mechanism

I am facing a challenge with my webpage that has two panels. The second panel includes a large table that does not fit within the width of the window, even with wrapped content. To address this issue, I added a horizontal scroll, but the div still does not ...

htmlcsspanel

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style. If anyone knows of a jQuery plugin that cou ...

jqueryhtmlcssjquery-pluginsparallax

Dynamic drop-down navigation with rearranging menu

I am attempting to design a drop-down navigation bar with 2 rows. Initially, only 1 row is visible. Upon clicking the visible row, both rows should appear. Subsequently, when one of the 2 rows is clicked, only that specific row should be displayed. Below a ...

javascripthtmlcssdrop-down-menunavigation