Challenging CSS Design

Currently, I am facing a challenging task of creating a website with a layout that includes four corner images - TL, TR, BL, and BR marked by black blocks. The main content area, highlighted in dark orange (up to 960px wide), is surrounded by the green arrow which represents the browser window. You can view the diagram here.

The narrowest site width should not go below 960px to avoid displaying scrollbars. The positioning of the bottom left and right black block images should always be at the corners unless the width decreases to 960px or lower, causing them to overlap slightly with the main content area. However, when the site is shrinked significantly, such as to 200px, the BR image should not protrude into the corner.

I have attempted to use absolutely positioned divs to achieve this layout, but it falls short of working perfectly without Javascript or highly experimental CSS. While I prefer to avoid relying on JS, I am open to incorporating a bit of it if there are no other viable solutions available.

Your insights and assistance would be greatly valued in solving this dilemma!

Answer №1

No need for Javascript in most modern browsers! By utilizing basic positioning and a single @media query, I was able to achieve the desired effect:

<head>
  <style type="text/css" media="screen">
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: orange;
      text-align: center;
      color: black;
      overflow-x: hidden;
    }
    #content {
      width: 960px;
      margin: 0 auto;
      padding: 20px 0;
      min-height: 800px;
      background: #cc6600;
      z-index: 0;
    }
    .image {
      background: black;
      color: white;
      height: 60px;
      width: 100px;
      padding: 20px 0;
      z-index: 1;
      opacity: .95;
    }
    #top {
      width: 960px;
      margin: 0 auto;
      position: relative;
      overflow: visible;
    }
    #top .image {
      position: absolute;
    }
    #top .left {
      left: -80px;
    }
    #top .right {
      right: -80px;
    }
    #bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 100px;
    }
    #bottom .image {
      position: absolute;
    }
    #bottom .left {
      left: 0;
    }
    #bottom .right {
      right: 0;
    }

    @media all and (max-width:1120px) {

      #container {
        width: 960px;
        margin: 0 auto;
        position: relative;
        overflow: visible;
      }
      #bottom .left {
        left: -80px;
      }
      #bottom .right {
        right: -80px;
      }    

    }
  </style>
</head>
<body>
  <div id="top">
    <div class="left image">left image</div>
    <div class="right image">right image</div>    
  </div>
  <div id="content">
    content
  </div>
  <div id="bottom">
    <div id="container">
      <div class="left image">left image</div>
      <div class="right image">right image</div>
    </div>
  </div>
</body>

Although this approach may be considered "extremely experimental CSS", it surprisingly has good support and could easily be enhanced with a bit of JS by checking the browser width on resize and applying additional CSS when it falls below 1120px.

Answer №2

Is something along these lines suitable? If you prefer, feel free to substitute the JavaScript with comparable JQuery code as I simply wanted to convey how this concept could be implemented.

<html>
<head>
  <title>....</title>

  <style type="text/css">
  html
  { height: 100%; margin: 0; background: white; }
  body
  { height: 100%; width: 960px; margin: 0 auto; background: gray; overflow: hidden; }
  #main
  { margin: 0px; padding: 5px 20px; position: relative; }

  #headLeft
  { position: absolute; top: 0px; left: -80px;
    width: 100px; height: 35px; background: green; }
  #headRight
  { position: absolute; top: 0px; right: -80px;
    width: 100px; height: 35px; background: green; }
  #footLeft
  { position: absolute; bottom: 0px; left: 0px;
    width: 100px; height: 35px; background: green; }
  #footRight
  { position: absolute; bottom: 0px; right: 0px;
    width: 100px; height: 35px; background: green; }
  </style>

  <script type="text/javascript">
  function verifyDimensions ( event )
  {
    var contentWidth = 960;
    var minOuterBoxSize = 60; // only 40 px will fit inside the main region

    if ( window.innerWidth - contentWidth < minOuterBoxSize * 2 )
    {
      var pos = ( ( minOuterBoxSize * 2 ) - window.innerWidth + contentWidth ) / 2;
      document.getElementById( 'footLeft' ).style.left = '-' + pos;
      document.getElementById( 'footRight' ).style.right = '-' + pos;
    }
    else
    {
      document.getElementById( 'footLeft' ).style.left = '0px';
      document.getElementById( 'footRight' ).style.right = '0px';
    }
  }
  </script>
</head>

<body onload="verifyDimensions( event );" onresize="verifyDimensions( event );">
 <div id="main">
  <div id="headLeft">TL</div>
  <div id="headRight">TR</div>

  <p>Regular content</p>
 </div>

 <div id="footLeft">BL</div>
 <div id="footRight">BR</div>
</body>
</html>

Answer №3

The most challenging aspect is the bottom section, while the rest is quite simple:

<body>
    <div id="container">
        <div id="header">
            <div class="right"></div>
            <div class="left"></div>
        </div>

        <div id="footer">
            <div class="right"></div>
            <div class="left"></div>
        </div>
    </div>
</body>

CSS:

#container {
    margin: 0 auto;
    width: 960px;
}

#header {
    position: relative;
}

#header .right, #header .left {
    position: absolute;
    width: 100px;
}

#header .right {
    left: 940px; /* leaves 20px inside the #header */
    background: url(images/header_right.gif) no-repeat;
}

#header .left {
    left: -80px; /* leaves 20px inside the #header */
    background: url(images/header_left.gif) no-repeat;
}

You will need to implement a similar structure for the #footer, but you may have to utilize some JavaScript to adjust the positioning based on window width.

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

The issue of the flex: 1 view not expanding to its full height persists, along with the KeyboardAvoidingView functioning unre

My concern lies with a ScrollView that is not occupying the full remaining height, as shown here. The red-bordered view should extend all the way down, but it fails to adjust properly when the keyboard is visible like in the case of selecting the 5th item ...

Summernote - When validating text, it is shown as raw HTML

I have integrated Codeigniter with Summernote on the frontend. In a form, if certain fields are left empty, the same page reloads for validation checking. The JavaScript and CodeIgniter code I am using is as follows: $(window).load(function(){ &l ...

Conceal the message using star symbols

I need help figuring out how to hide a certain type of string input from the user, and then use Angular data binding to display it in another component with part of the data masked with asterisks. I'm not very skilled in JavaScript, so I'm wonder ...

Viewport height-responsive image not functioning as expected in Firefox browser

Is there a way to set an image to the 100% height of the browser window, with a small padding at the bottom, and have it centered on the page? I created an example in codepen that works well in Chrome and Safari, but not in Firefox. In Firefox, the image ...

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

How can I dynamically change the height of a .test div based on the browser width and height? I want the value to update whenever the browser is resized. $(document).ready( function() { window.onresize = function(event) { resizeDiv(); ...

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

An issue with excess whitespace appearing below the footer while adjusting the size of the webpage

I have a database table on my website that I am styling with the help of bootstrap. Check out this screenshot for the issue: https://i.sstatic.net/CUkjz.jpg For the HTML code, you can view it here: And for the relevant CSS, click on this link: I used pa ...

Is it possible to achieve a capsule shape using border-radius without specifying a fixed width or height?

Can a capsule shape be created using border-radius without specifying a width or height? I am looking to have the left and right sides of the capsule fully rounded while keeping the horizontal length straight. Setting the radius to 50% does not achieve th ...

What steps can be taken to eliminate the 1-pixel line between the background and gradient?

https://i.sstatic.net/nbtkK.png How can I remove the line that appears between the block and the gradient background when zooming in, especially noticeable in Safari (After zooming a couple times, Cmd +) For more details, please refer to this jsfiddle li ...

Tips for accurately determining the byte count of text within a TextArea

I am trying to figure out how to accurately calculate the byte size of text within a specific textarea. Although I have access to .Net libraries, I am looking for a Javascript solution instead. How many bytes does each character represent? What is the most ...

The play button on the video control appears blurry in iOS 9.3.2

My iPhone running iOS 9.3.2 is experiencing a display issue when I try to open an HTML page with a video tag. There seems to be a blurry initial play button as shown in the image. Any suggestions on how to fix this? https://i.sstatic.net/RmLMI.png .vid ...

Utilizing the "like" operator in queries for an HTML5 database

I have a great html5 query that is functioning perfectly in this format: tx.executeSql('SELECT * FROM bdreminders WHERE firstname = IFNULL(?, firstname) AND lastname = IFNULL(?, lastname) ...

Active Arrow Link

I'm currently working on customizing the appearance of my WordPress site's categories sidebar by adding an arrow to the left side of the active link. After tweaking the CSS to achieve the desired behavior and making some color adjustments for te ...

Customizing Material UI: Adjusting the visibility of slider thumb upon user interaction and value changes in the slider

In my application, I have implemented a Material UI Slider and I am looking to keep the thumb invisible until the user interacts with it. Once the user changes the slider value, I want the thumb to remain visible at that specific value. By using the CSS pr ...

Fixed width for the last column in DataTables

Here's the scenario: I have a jQuery script that loads DataTables, and I know how to set the "aoColumns" : "sWidth" parameter to fix the width of a specific column, which is working fine. However, my issue arises from having multiple tables with var ...

Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet : <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"> ...

The text appears larger than the surrounding 'element'

I've noticed that when I set the font size of a specific p tag to 55px, the actual element containing the font appears smaller than the font itself. As a result, the font ends up overlapping the elements above it. While I can add padding to fix this ...

Validating button using Java's jsoup library

Looking to determine if a page has a next button for scrolling. The approach is simple: extract the current link, remove the index at the end, replace it with a new index, attempt to connect to the updated link, and if an IOException is thrown, then ther ...

Creating personalized buttons with Bootstrap

I'm looking to create custom buttons using Bootstrap. The "Get Quote" button should have a magnifying glass symbol on its left, and the "Clear" button should have a symbol on its left as well, like shown in the image below. Additionally, I want to cha ...

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Utilizing Google Firebase Firestore for data storage and the Open Movie Database (OMD) in combination with Axios to retrieve movie information. I am currently developing a website that allows users to add movies to collections. On the collections page, al ...