Hello everyone, I'm currently working on a website and struggling to create a header similar to the image shown above. I want the header to span the full width of the page. Can anyone provide guidance on achieving this using HTML5/CSS3 without relying on the image as a background?
To create a fully flexible design, it is important to code everything at 100% capacity. You can test this by following the code provided in the DEMO link.
This demonstration aims to illustrate how you can achieve this level of flexibility.
CSS
body { background: #ccc; margin:0; padding: 0;}
header {background: #fff; width:100%; float:left; height:60px; position:relative;}
nav {background: red; height:30px; width:100%; float:left; margin-top: 30px;}
.logo {
position:absolute;
width:150px; height:80px; background: #fff;
border-radius: 0 0 3px 0; left:0; top:0;
}
.triangleDown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 35px solid transparent; border-top: 81px solid #fff; left: 98px; position: absolute;}
HTML
<header>
<div class="logo"></div>
<div class="triangleDown"></div>
<nav></nav>
</header>
Hello there, I suggest utilizing CSS3 properties, specifically the gradient feature. I have created a demo for you to customize as needed.
To achieve the desired design, adjust the containing div to 100% width and set a background image that is 1px wide and set to repeat. Above this, position the original main image with a margin of 0 auto.
Following these steps will give you the desired outcome.
Give this a shot, it showcases various examples that may interest you:
Here is an example of code that you can use:
*{margin:0; padding:0;}
html, body{height:100%; width:100%;}
header{width:100%; background:#ccc;}
I am in search of an example that demonstrates similar functionality to the HTML5 File API using Angular-js. While researching directives for Angular 1.0.4, I found outdated examples that heavily rely on DOM manipulation. Here is a snippet of the pure Ja ...
When hovering over the upper left button, a div with sample description slides down. However, I am facing two challenges that I cannot seem to resolve. The description is supposed to merge with the second button but instead merges with the first one. I a ...
I need to create a dynamic table of questions depending on the user's selection from a dropdown menu. When the user chooses a category, I want to pass that information to an API using the GET method. My controller is built using AngularJS. However, I ...
Here is the code I've been working on: http://jsfiddle.net/7cXZj/ var callback = function () { $('.progress-bar').width($('.progress-bar').parent().width() - 190); $(".mainpart-background").animate({ width: "80%" }, 80 ...
https://i.sstatic.net/EsDAE.png Up to this point, I've only been able to make it this far. I'm using a sample code from w3school https://i.sstatic.net/G1FcQ.png I've been attempting to get the year in the same position as in the image, bu ...
I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...
I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...
I need assistance with running an HTML file along with its source files that I downloaded from the server. The HTML file is located in NSCachesDirectory and here is the code snippet I am using. Can someone please help me figure this out? NSArray *paths ...
Two divs are positioned next to each other with a width of 50% each. One of the divs contains more text, causing it to be longer than the other div. A javascript function adjusts the height of the shorter div to match the height of the longer div, ensuring ...
Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...
Is there a way to dynamically apply CSS styles to an element that has an ng-if condition, even if the condition fails? It currently works fine when the condition is true, but I'm looking for a solution that allows me to modify the element regardless o ...
Currently, I am exploring the world of website layout creation using Tailwind Flexbox Grids as I believe it can add significant value. However, I have encountered some queries: How does one go about constructing a layout like this? Referencing this speci ...
As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...
I'm having trouble with syntax highlighting for code fetched from GitHub. fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/AutomationAcc/test1.ps1") .then(response => response.text()) .then(data => document.getElem ...
When it comes to navigation, I have developed two methods that involve obtaining the elements' offsets: $("#selector").contents().find('#'+list1).each(function(){ var offset= $(this).offset(); }); $("#selector").find('#&apos ...
I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look: https://i.sstatic.net/Nau98.png The B and C cards should oc ...
I am working on an ASP page with a Masterpage element on my website. The specific functionality I am trying to implement involves having multiple labels with an edit hyperlink next to each one. When the user clicks on the Edit hyperlink, I want the label t ...
I have created a partial view to show the page header, which takes in two variables - an Icon and a title. The code for pageHeader.blade.php is as follows: <div class="page-header"> <div class="row"> <!-- Page header, center on small sc ...
I encountered an issue where the code was working perfectly on IE7 but not on Safari (5.0.5). I would like to find a solution without relying on jQuery. The ultimate goal is for this functionality to work seamlessly on iPad, but currently, I am testing it ...
I'm currently venturing into the world of jQuery animate() and decided to create a presentation-style project for practice. However, I've hit a roadblock when attempting to alter the text within my div element in the midst of an animation utilizi ...