Designing a webpage using CSS

the design I'm aiming for I am attempting to create a header layout as depicted in the image below using HTML and CSS. I have managed to place the logo in the center, but I am facing difficulties in aligning the business list to the corner. I have tried using text-align, but it did not yield the desired result. I believe using float might solve the issue, but I am uncertain about the specific code to implement. Below is the code I have written:

body {
  margin: 0;
  font-weight: 800;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #ffe9e3;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  text-align: center;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;
  position: relative;
}
<header>
  <div class="container">
    <h1 class="logo"><i>LOGO</i></h1>

    <nav>
      <ul>
        <li><a href="#">List Your Business</a></li>
      </ul>
    </nav>
  </div>
</header>

htmlcsslayoutheader

Answer №1

To center the logo, consider using a flexbox for the header with align and justify properties. Then, utilize absolute positioning for the nav to place it in the top right corner.

body {
  margin: 0;
  font-weight: 800;
}

.container {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

header {
  background: #ffe9e3;
  height: 100px;
}

.logo {
  text-align: center;
  margin: 0;
  display: block;
}

nav {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}
<header>
  <div class="container">
    <h1 class="logo"><i>LOGO</i></h1>

    <nav>
      <ul>
        <li><a href="#">List Your Business</a></li>
      </ul>
    </nav>
  </div>
</header>

Answer №2

To achieve the desired result, one approach would be to modify the structure of your HTML and CSS. Without the specific details of your code, it's difficult to provide precise guidance. If you're not utilizing flexbox or grid, consider setting the parent element (header container) to position relative, and the logo container to position absolute. This allows for fine-tuning of the positioning as needed.

#headerContainer {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: skyblue;
}

#logo {
  position: absolute;
  color: white;
  font-size: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid white;
  padding: 10px 12px;
}

<div id="headerContainer">
  <div id="logo">Logo</div>
</div>

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

Conceal picture when clicked

My goal is to hide an image upon clicking and then show it again by clicking a specific tag. I've attempted various codes, but none have been successful. Every time I click, the image continues to add to the page. <body> <a href="#" class= ...

jqueryhtml

Using both PHP and HTML to create a select tag

I'm new to PHP and HTML and I'm trying to create a form with three drop-down lists (select tags). However, when I select an option from one list, the values in the other two lists disappear. Should I save the selected values when submitting the f ...

phphtmltags

Challenges with iFrame Resizing on Internet Explorer

After following a method highlighted in a forum post to set up an iframe on my webpage, I encountered some issues. To display just a section of the page within the iframe, I utilized the zoom/scale feature available in different browsers. To target a spec ...

cssinternet-exploreriframeinternet-explorer-8scale

The :root selector has encountered a malfunction within the Angular component

I'm interested in experimenting with CSS variables in my Angular 11 component. <div class="main-content"> <a>Test Link</a> </div> Here is my app.component.css: div.main-content{ --main-color: red } a{ color: v ...

cssangular

Expression fragment in Thymeleaf

In splitting my templates into head/main/footer parts using thymeleaf, I have found a method to include stylesheets and javascript on certain pages while excluding them from others. This is achieved through the use of fragment expressions outlined here. M ...

javascriptjqueryhtmlthymeleaf

Enhance and Modify feature using Javascript

I'm facing two issues with my product information form. Firstly, after I submit the data, I want the input fields to be cleared automatically. Secondly, the edit function doesn't seem to work at all. I'm quite stuck on how to resolve these p ...

javascripthtmljavascript-objectsdom-events

How to create dynamic transition effects in modal using AngularJS

My modal includes a next button for easy navigation. Initially, the modal showcases content within: <div ng-show="step1"></div> Upon clicking the next button, the modal transitions to display different contents in 'step2' within th ...

cssangularjs

What is the best way to show an image within a div using HTML and fetching data from an API response?

I am attempting to showcase an image within a div using HTML. I utilized fetch to retrieve the JSON data from the following API: . The response contains JSON data with the image URL labeled "primaryImage". While I can display it as text, I am encounterin ...

javascripthtmlcssjson

Exploring the art of JSON interpretation within Highcharts

Below is an example snippet that utilizes static data: Highcharts.chart("container", { title: { text: "Highcharts pie chart" }, xAxis: { categories: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Ju ...

javascripthtmlcssjsonhighcharts

Modify the width measurement from pixels to percentage using JavaScript

Looking for some help with a content slider on my website at this link: . I want to make it responsive so that it adjusts to 100% width. I managed to make it responsive by tweaking some code in the developer tools, but now I'm stuck. The bottom two p ...

javascriptjqueryhtmlcssresponsive-design

How can an external style sheet be inserted into an iframe?

My website features an editor on one side and an iframe on the other. Currently, anytime HTML code is entered into the editor and a keyup event occurs, the iframe updates automatically. I am looking to add default styling to the code entered in the editor ...

javascripthtmlcssiframe

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Hello there! I've integrated full calendar into my Angular project and I'm facing a challenge. I want to restrict users from defining the duration of an event by holding click on an empty schedule in the weekly calendar, where each date interval ...

javascripthtmlangulartypescriptfullcalendar

Issues with interpreting PHP within HTML documents

I'm having trouble using PHP on my HTML page. I've added AddType application/x-httpd-php .html to the .htaccess file as recommended, but when I try to access the page in a browser, a dialog box pops up asking if I want to save the file or open it ...

phphtml

Creating a banner using four grid elements, with each element containing four child elements, is a simple process that can

Can you assist me in recreating my idea from an image? I am having trouble understanding how to select and place other elements, and then return them to their original positions after deselecting... I attempted to use a grid but it did not work properly. ...

javascripthtmlcssgrid

Place a drop-down menu inside the input box

Struggling with this issue, I've come across various messy solutions, but I'm determined to find a cleaner one. What I'm looking for is an input field that includes a dropdown selection on the left side. This is essentially what I have in m ...

javascriptcsshtml

Utilizing Multiple Carousels on a Single Bootstrap 5 Page

I am facing a challenge in making multiple Bootstrap carousels work correctly on a single page. According to Bootstrap guidelines, each carousel should have a unique ID. However, I am struggling to implement this and only one carousel functions properly ...

htmltwitter-bootstrapbootstrap-5bootstrap-carousel

What is preventing relative paths from functioning with xsl:include?

I am working with an XSL file that converts to PDF. The top of the page contains a lengthy CSS style declaration: <xsl:attribute-set name="Header"> <xsl:attribute name="font-size"> <xsl:value-of select="$font-size"/> < ...

cssxmlxslt

I am having trouble with the CSS and Bootstrap not being applied after printing

Once the submit button is clicked on the initial output page, the CSS styling disappears and only a simple default form page is displayed. This does not meet my requirements. Using inline CSS allows it to work, but external CSS does not. Can someone please ...

javascripthtmljquerycssbootstrap-4

Ways to ensure that an element is aligned within a parent div with a 100% bottom position

I am facing a small issue that I need help with. My problem is aligning an element to the top of a percent div with bottom: 100%, and I just can't seem to make it work within the parent div. Essentially, I want bottom: 0% to align with the bottom of ...

css

Insert the picture into an HTML document and retrieve the image file location

I successfully used <input type="file" accept="image/*"> to upload an image and then applied base64 encoding of the image in the onload callback function of a FileReader instance. However, I encountered a problem when trying to assign this base64 enc ...

javascripthtmlvue.js