What are some ways to create a color background that extends beyond the confines of the 960 grid system?

Looking to achieve a header design similar to stackoverflow, where the background color expands and takes over both sides of the page while keeping the text centered. However, unsure about the correct technique to do this using the 960grid system. Here is my HTML:

<body> 
  <div class="container_24">
     <div id="header-top-border" class="grid_24"></div> # occupies top of page.
     <div id="header-background" class="grid_24"></div> # occupies top of page.
     <div id="logo" class="grid_5">
       <h1>Logo</h1>
     </div>        
  </div>
</div>

Wanting the Logo on top of the header-background, but uncertain whether it should be within the header-background div or not based on the CSS here. How can I achieve this?

Appreciate any guidance.

htmlcss960.gs

Answer №1

If you want the header-background to be positioned outside of the container_24 div, it's because the latter serves as a container that limits the width of the page. To place the logo on top of the header-background, you have a couple of options. You can either include the logo within the header-background or place it outside and adjust its position using negative margins, absolute positioning, and z-index. It is recommended to simply place it inside the header-background.

Your code snippet could resemble something like this:

<body>
  <div id="header-background" class="banner">
    <div class="container_24"> # Consider using this for easier positioning within the banner
      <div id="logo" class="grid_5"><h1>Logo</h1></div>
    </div>
  </div> # spans the full width of the window
  <div class="container_24"> # only occupies 24 columns in width
    # rest of your content...
  </div>
</body>

Answer №2

Remove it from the original container and establish a new container specifically for the header:

<body> 
  <div id="header-background">
     <div id="header-top-border" class="container_24"></div>
  </div> # occupies entire width
  <div class="container_24">
     <div id="logo" class="grid_5">
       <h1>Logo</h1>
     </div>        
  </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

Creating a multi-column ordered list that spans multiple pages is a great way to organize and

My goal is to showcase a numbered list in a three-column format, following the guidelines presented in this particular query. However, I am looking to maintain the continuity of the list across different pages by ensuring that the subsequent item on the ...

htmlcss

Gradually eliminate the background color in one smooth motion

When new messages appear, I want them to be subtly highlighted as users hover over them. The background color will slowly disappear on hover thanks to the CSS code provided below. However, this effect should only happen once, which is why I need to remov ...

javascriptjquerycss

Height and Width Dilemma in Visuals

Can you help with changing image resolution using jQuery? I have a background image applied to the body using CSS/PHP. My goal is to make the image fill the entire window by applying the screen height and width, without using repeat style. The code I am c ...

phpjavascriptjqueryhtmlcss

Using an onClick event along with jQuery to change the CSS class style of another div

After searching extensively without success, I decided to register and ask my first question here. Hopefully, someone can provide a solution: My goal is to create a set of five buttons (divs) with onClick events that will show five different divs. I' ...

javascriptjquerycssfunctionclass

Seeking help with a Javascript regex inquiry

I am currently utilizing JavaScript regex for the following task: I have gathered the HTML content from a page and stored it within a string. Now, I aim to identify all URLs present on this page. For instance, if the document includes-- <script src = ...

javascripthtmlregexstring

Having difficulty parsing HTML with JSoup

I am currently trying to fetch HTML data from a website in order to download a 480p video. However, I am facing issues with the process when using an Async Class. Below is my doInBackground Method: @Override protected Void doInBackground(Void... v ...

javaandroidhtmlandroid-studiojsoup

How can the HTML email width be adjusted on Outlook 2016?

When I send out HTML emails, I encounter an issue where the content takes up the full width no matter what. I have tried adjusting the width of table, tr, td, div, and body elements, but it still persists. This problem occurs on Outlook 2016 across all W ...

htmlcssemailoutlookoutlook-2016

Tips for customizing pagination in Core UI smart table styling

Is it possible to modify the color of pagination buttons in Core UI smart table for Angular? Below is a snapshot of my code: ...

cssangularpaginationcore-ui

Easy peasy PHP AJAX HTML glitch

Struggling with a simple task that most would find easy, as a beginner in PHP and jQuery+Ajax: how can I update my index.html with different HTML code, requested through an Ajax call from a PHP file? index.html <!DOCTYPE html> <html> <head ...

phpjqueryhtmlajax

Tips for incorporating animation/effects for altering HTML content?

I'm trying to implement a fade-in effect for the new content of #myform's HTML after sending an email. However, I'm struggling with adding an animation to prevent the new HTML from just abruptly appearing. I've experimented with using " ...

javascriptjqueryhtml

Ways to expand the play and pause buttons and adjust the height of an HTML audio player

It's clear that the PLAY/PAUSE icons are smaller than intended, and the entire player is thinner than desired, making it difficult for some viewers to see. How can I enlarge the entire player? I have read that we do not have access to individual contr ...

javascripthtmlcsshtml5-audio

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

One way to create dynamic function parameters in JavaScript is by using

Currently, I am in the process of implementing a payment API checkout feature on my order.html page. However, I have encountered an issue where I need to add a script in the head of the HTML document. This script requires me to specify the subtotal amoun ...

javascripthtml

Upon clicking a link, the webpage will automatically scroll to a specific point

As I work on creating my website, I have come across a specific need: I currently have a menubar with a dropdown menu. Inside this dropdown, there are 4 different options. These options are all located on the same page. What I would like to achieve is tha ...

htmlwebanchorhref

Tips on utilizing the PHP json_decode() function with an array of JSON objects

I am having some trouble with an array of PHP objects that are json_encoded. I want to display these objects in a table in HTML, using the object's attributes as rows in the table. However, when I decode the JSON objects one by one in a for loop and d ...

phphtmljson

Tips for implementing vertical scrolling in a Windows 8 app when in snapped view

Currently, I am developing a Windows 8 application using Html, CSS, and JavaScript. Upon entering snapped view, certain screens are unable to display the entire content, leading me to seek a solution for vertical scrolling. Is there a way to address this ...

javascripthtmlcssmicrosoft-metrovertical-scrolling

extract element from a string with the help of jquery

When using AJAX to request HTML from a page, the process involves sending a request like this: function getHTML() { //set ajax call var options = { url: '/Controller', type: 'GET', d ...

javascriptjqueryhtmlajaxtypes

The JSON ticker for BTC/LTC has stopped functioning

I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...

javascriptjqueryhtmljsonbitcoin

When a HTML table is generated from imported XML, DataTables will be applied

I am facing a challenge with my code and would appreciate some help. I am trying to load an XML file using jQuery and then use DataTables on my HTML table. However, the plugin doesn't seem to be functioning correctly. When I manually create an HTML ta ...

javascripthtmlajaxxmldatatables

How about adding various colors in the background with layers?

I was recently given a task by a client to convert their picture art into CSS code. While I have successfully completed most of the task, I am facing difficulty in coloring the div similar to the example provided by the client. Here is the client's ve ...

htmlcss