What is the best way to implement this header style with code?

Question

What is the best way to implement this header style with code?

I came across this design from a potential client recently, even though we didn't end up working together. I thought it would be a good exercise to try coding the design for practice purposes. Just to clarify, this is not my original design and I have no intentions of using it for anything other than practice. That's why I've edited out the name of the company in the design.

However, I'm facing some challenges with the header/navigation area of this design. The side decorations next to the logo and the fact that the logo spans two divs are making it difficult for me to figure out how to code it. I'm seeking advice on how others would approach coding something like this.

My initial thoughts were to have separate divs for each side decoration and maybe use absolute positioning for the logo. Does this sound like the right solution?

At first, I tried incorporating it into the 960 grid system, but the issue of the logo spanning two divs made it really tricky to work within the grid structure.

html css

Answer 1

Answer №1

To optimize your code, consider using a single list and applying a class to the third item to adjust the margin-right for spacing out a h1 logo. This approach maintains semantic markup without requiring multiple nested div's or lists.

An alternative method is utilizing the nth-child CSS selector instead of adding a specific class.

Answer 2

To optimize your code, consider using a single list and applying a class to the third item to adjust the margin-right for spacing out a h1 logo. This approach maintains semantic markup without requiring multiple nested div's or lists.

An alternative method is utilizing the nth-child CSS selector instead of adding a specific class.

Answer 3

Answer №2

Perhaps you could consider using a font-face for the font if the client has purchased it, as that would simplify things for you.

In addition, I suggest removing the dots between the links and text, utilizing an image for the background, and creating a single UL with each li assigned a class corresponding to the page, such as home, about, galleries. You can then use PHP to add the current_page class dynamically.

Following the galleries section, include another li element with the following markup:

<li class="logo"><a href="/">Logo</a></li>

Add styles like this.

li.logo {
    background: transparent url(....) no-repeat;
    width: width of logo;
    height: height of logo;
    display: block;
    overflow: hidden;
}

li.logo a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

If you need assistance implementing this or want to see examples, feel free to reach out to me.

Answer 4

Perhaps you could consider using a font-face for the font if the client has purchased it, as that would simplify things for you.

In addition, I suggest removing the dots between the links and text, utilizing an image for the background, and creating a single UL with each li assigned a class corresponding to the page, such as home, about, galleries. You can then use PHP to add the current_page class dynamically.

Following the galleries section, include another li element with the following markup:

<li class="logo"><a href="/">Logo</a></li>

Add styles like this.

li.logo {
    background: transparent url(....) no-repeat;
    width: width of logo;
    height: height of logo;
    display: block;
    overflow: hidden;
}

li.logo a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

If you need assistance implementing this or want to see examples, feel free to reach out to me.

Answer 5

Answer №3

To create a more visually appealing layout, consider splitting the design into two separate rows. The first row can feature the "design" elements flanking the logo image at the center. This arrangement allows you to emphasize the logo without overshadowing the designs. For the second row, divide it into sections for navigation elements and the logo placement. It's advisable to enclose everything within a div container with specified dimensions matching the images' sizes. Keep the structure simple yet functional. While individual divs are an option, they may not be necessary in this case. For a cost-effective solution, stick with the current image and apply an image map to incorporate necessary links. Although this method might exclude features like rollover images, it aligns with a budget-friendly approach. As a learning opportunity, experiment with different coding approaches. Try floating elements, absolute positioning, creating columns and rows, overlaying navigation on a large background image, and exploring other creative methods—just avoid using tables! :)

Answer 6

To create a more visually appealing layout, consider splitting the design into two separate rows. The first row can feature the "design" elements flanking the logo image at the center. This arrangement allows you to emphasize the logo without overshadowing the designs. For the second row, divide it into sections for navigation elements and the logo placement. It's advisable to enclose everything within a div container with specified dimensions matching the images' sizes. Keep the structure simple yet functional. While individual divs are an option, they may not be necessary in this case. For a cost-effective solution, stick with the current image and apply an image map to incorporate necessary links. Although this method might exclude features like rollover images, it aligns with a budget-friendly approach. As a learning opportunity, experiment with different coding approaches. Try floating elements, absolute positioning, creating columns and rows, overlaying navigation on a large background image, and exploring other creative methods—just avoid using tables! :)

What is the best way to implement this header style with code?

Answer №1

Answer №2

Answer №3

Similar questions

Strange HTML antics

Retrieve identification details from a button within an ion-item located in an ion-list

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

Skipping every third index in a JQuery .each loop after removing an element

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

What is the best way to line up several elements in a single column?

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Struggles encountered while developing a JavaScript calendar

Reinitializing AngularJS form controls

When utilizing dynamic binding within *ngfor in Angular 4, the image fails to display properly

The li elements in a horizontal menu all have equal spacing between them, filling the width of the ul

Guide to positioning an image at the center across 2 columns using Bootstrap

What could be causing the error.status value to not be displayed on my Embedded Javascript (EJS) page?

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

I am in need of setting up two rows side by side using the display

The specified 'image' identifier has not been defined. There is no such member within 'never'

What is the reason behind individuals choosing to minify assets instead of minifying the HTML

The animation isn't loading

The correct functioning of CSS hyperlinks is currently experiencing issues