Can you help me adjust the height of my banner and center its content vertically?

Looking to create a custom banner for my website, specifically at the top with dimensions of 700px width and 80px height.

The code snippet is as follows:

      <div class="container-narrow" style="heigth: 80px;">

        <img src="#" width="52" height="52" alt="my logo" />

        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

      </div>

Css:

    .container-narrow
    {
      margin: 0 auto;
      max-width: 700px;
      background: yellow;
    }

    ul
    {
      float: right;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    a
    {
      float: right;
      width: 6em;
      color: black;
      text-decoration: none;
      padding: 0.2em 0.6em;
    }

    a:hover {color: #ccc; text-decoration: none;}

    li {display: inline;}

My goal is to align the image and horizontal menu vertically in the center of the 80px container, with the logo on the left and the menu on the right.

I have attempted to set the height and adjust margins/padding to achieve this, but it doesn't feel like the optimal solution...

htmlcss

Answer №1

Solution:

When the ul element has a width:100%; and a black border, it takes up the full width of the page, leaving no space for it to fit beside the logo in the yellow header.

By removing this width, you can see the difference in this updated example: http://jsfiddle.net/YBVe6/

With the fixed max width of 700px for the header, there are multiple ways to center both the logo and the menu.

One quick method is to set the ul to display: inline-block; (instead of using float: right;) and then apply text-align: center; to the header. This produces the following layout: http://jsfiddle.net/YBVe6/1/

If you prefer the menu to be aligned at the top, simply add vertical-align: top;.

Answer №2

Before diving in, it's crucial to maintain an external CSS file and avoid adding extra CSS within your HTML elements:

<div class="container-narrow">

Ensure the height styling is included in your CSS stylesheet since you already have a designated class for your div.

Furthermore, accuracy matters when it comes to typing out CSS properties. For instance, replace heigth with height to set your div's height to 80px accurately.

In addition, optimizing margins helps position elements effectively. Don't forget to leverage them!

.container-narrow
    {
        height: 80px;
        margin: 0 auto;
        max-width: 700px;
        background: yellow;
    }
img
    {
        margin-top:14px;
    }

ul
    {
        float: right;
        padding: 0;
        margin: 0;
        list-style-type: none;
        margin-top:25px;
    }

a
    {
        width: 6em;
        color: black;
        text-decoration: none;
        padding: 0.2em 0.6em;
    }

a:hover {color: #ccc; text-decoration: none;}

li {display: inline;}

Edit

This advice mainly pertains to vertical alignment. If you're aiming for horizontal centering, you can employ the margin:auto technique. This approach works well since a page's width cannot exceed the browser window (unlike height, which can extend with scrolling enabled by default).

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

How to create a scrollable table using HTML and CSS

I created a Dashboard, but I'm having trouble making my mailPage scrollable. If you have some time to spare, could you please take a look at my website and help me with this issue? Here is my code: window.addEventListener("load", function () { ...

htmlcsshtml-tablescrolloverflow

Is it normal not to see </head> and <body> tags in the page source code?

Looking at the source code of the page, you'll find something like this: <link rel="stylesheet" href="http://..."> <!-- analytics --> <script> ... Make sure the closing </head> tag and the opening <body> tag are positio ...

html

Restrict the duplication of div elements with JQuery

Here is the structure I'm working with: <div class="checkmark-outer"> <div class="checkmark-33"> <div class="fa-stack fa-1x checkmark-icon"> <i class="fa fa-circle fa-stack-2x icon-background"></i> ...

javascriptjqueryhtmlcsslimit

Capybara - Navigating a page by clicking on a link related to another value

I'm currently facing a challenge in locating and selecting a particular link on a web page. All links within an HTML table contain the term 'Edit' (it's a link for editing configuration settings). However, the exact link changes depend ...

htmlcssxpathhyperlinkcapybara

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

javascriptjqueryhtmlcss

How can I utilize JavaScript to retrieve the background color of a table cell upon clicking?

I am trying to create a function where an alert pops up displaying the background color of a table cell whenever it is clicked. Unfortunately, I am having trouble accessing and retrieving the background color value. The table cell in question is defined a ...

javascripthtmlbackground-color

What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despit ...

htmltwitter-bootstrapcssflexbox

Trouble with Bootstrap CSS buttons: color consistency problem persists

I am facing an issue with my Bootstrap button, which currently looks like this: https://i.sstatic.net/MWHYP.png The HTML code for the button in question is as follows: <button type="button" class="btn-primary.custom-btn" data-bs-to ...

htmlcsstwitter-bootstrapbootstrap-4

Using HTML and CSS to Trigger Animation of Gif (or video) Upon Mouse Hover, Depending on Mouse Position

Is there a way to create an animation for a gif or video that changes based on the position of the mouse relative to the frame? For example, if the gif shows someone turning around 360 degrees, I would like the person to be facing forward when the mouse i ...

htmlcssanimationvideogif

Contrast the schedules of two different calendars

Attempting to compare two timetables for a college project in order to identify available time slots in one timetable and concurrently check for events happening in the other. For instance, if a student has an open period from 4-5 on a Tuesday, the code sh ...

pythonhtmlpandasselenium

How about wrapping a large amount of text three times and including a "read more" link?

I am tasked with creating an HTML element that automatically detects when text has wrapped three times, truncates the content, and adds a "more..." link at the end of the third line. Can this be achieved? If yes, what is the process to implement it? ...

javascripthtmlcssword-wrap

What is the best way to incorporate an exception for the printThis() element?

Is there a way to exclude a specific div from being printed when using the printThis() function? For example: <div id="print-it"> <div>hello</div> <div id="no-print-this"> <button>must be show on page but not print</but ...

javascriptjqueryhtmlpluginsprintthis

Tips for positioning a delete button at the start of the row I am transferring to a different table

Displayed below are the contents of the initial table. <% for(int i = 0; i < result.length; i++) { %> <tr id='player-listing-<%=i %>'> <td style="vertical-align: top;"><button onclick="myFunction2(<%=i%> ...

javascripthtmljsp

jQuery causing trouble with AJAX in Rails

Currently, I am fetching a list of users from the controller side and generating the HTML code to append it. This is how I wrote the code: $.ajax({ type : "get", contentType : "application/json; charset=utf-8", url : "/users/sear ...

javascriptjqueryhtmlruby-on-railsajax

Select element's width decreases by 2 pixels following the application of width adjustment via jQuery

After browsing through numerous pages, I finally managed to adjust the width of my textbox and select element using jQuery 2.0. Snippet of Code from my Project: $(document).ready(function(){ $("#Text2").css('width','20 ...

jqueryhtmlcss

what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...

htmlcssreactjsfontstailwind-css

This particular JavaScript function is only designed to operate on the initial input box in the provided

I have a question regarding echoing rows of $data inside input boxes. I am using a JavaScript function that is supposed to copy the input value to the clipboard when the input box is clicked. However, I am encountering an issue - the function only works ...

javascripthtmldom

Can text be formatted differently based on its length and whether it wraps onto multiple lines?

Looking to display book titles on a webpage with varying lengths. Some are short enough to fit in one line, while others are longer and wrap onto two lines. Is it possible to apply different styles (such as color or line-height) for these two cases using ...

css

Use CSS Grid to anchor the final element to the right side of a horizontal navigation menu

I am facing an issue with my horizontal navigation bar that contains a dynamic number of links. In this specific case, there are 3 links displayed below: My goal is to keep the first two links in their original position and move the third link all the way ...

htmlcssflexboxcss-grid

Choose and output all the tables contained within the database

I've checked my code and I don't see any errors, but for some reason, no data is being displayed on my page. Can anyone offer some help or insight into what may be wrong with my code? Thank you in advance! <?php if(logged_in() === tru ...

phphtmlmysql