Website design with a central vertical alignment and a subtle shadow effect

Yesterday I inquired about a website design featuring a shadow, but I have since created a better example and would like to pose the question again.

My requirements are as follows:

  • A vertically centered website;
  • A shadow on the content block which may have varying heights;
  • A horizontal scrollbar that only appears when the browser window is smaller than the content block (excluding the shadow block);
  • Everything should remain aligned with a background.

Currently, everything looks good except for the movement of the <div> elements when the browser window size is adjusted. This issue is likely due to differing <div> widths.

Is there a solution for this problem?

http://jsfiddle.net/NaSwF/17/

htmlcss

Answer №1

To achieve a more stable layout, consider updating the CSS for #content as follows:

#content{
    width:656px;
    margin:0px 22px;
    background:#fff;
}

With these changes, the content div and its surrounding elements will remain in place.

If you find the spacing between the content border and text to be too narrow (i.e. zero pixels), try avoiding the use of the padding property. Instead, consider nesting the text in another div within the content div, adjusting the margin as needed.

Answer №2

Important Points

  • #global_wrapper {} has max-width:; set to 1000px because of the image width
  • I typically use the .setwidth {} method for such layouts, but in this case, I also included min-width:; in #global_wrapper
  • There are more efficient ways to handle this layout, but it would require starting from scratch
  • Demonstrated examples using methods like margin-top:; to position elements, ensuring the outer container's dimensions are static
  • Added a <h1> tag to .contentbox_top for placing the current page's title on top of the content
  • Contentbox structure is flexible for multiple uses on a page
  • Redesigned the full code including menu styling with current and hover features that can be fully customized via CSS
  • Introduced #logo with an example of using margin-top:;
  • Alternative method suggested for positioning footer content using #global_wrapper {height: 96px;} instead of 
    #footer {position: absolute; bottom: 0px;}
  • The shadow on the contentbox cannot be hidden due to cutting the layout incorrectly; the current design works well with visible shadows
  • Explained the recreation of the entire code from scratch

Live Demo: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Vertical centered website with shadow - Answer by Kalle H. Vära</title>
    <base href="http://www.uniground.net/test/" />
    <style>
        [CSS styling goes here]
    </style>
</head>
<body>
    [HTML structure provided]
</body>
</html>

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 React JSX error message "Maximum update depth exceeded" occurs when there

It appears that I am facing an issue of creating an infinite loop while passing props from one class to another. Despite ensuring that the buttons are correctly bound and trigger only once, the problem persists without any solution in sight after thorough ...

javascripthtmlreactjsloopsjsx

Click the button to send the form without including any hidden HTML element array value

My main goal is to create a dynamic dropdown menu for users when they click a button. Each click triggers a new dropdown to appear. To achieve this, I have been cloning a hidden div each time the button is clicked. Here's an example of how I am accom ...

javascriptjqueryhtmlarrays

Ionic ion-view missing title issue

I'm having trouble getting the Ionic title to display on my page: http://codepen.io/hawkphil/pen/oXqgrZ?editors=101 While my code isn't an exact match with the Ionic example, I don't want to complicate things by adding multiple layers of st ...

javascripthtmlcssangularjsionic-framework

Automatically showcase images from a directory upon webpage loading

Is there a way to modify my code so that the images from the first directory are displayed on the page when it loads, instead of waiting for a menu option to be clicked? The page looks empty until a menu option is selected, and I would like the images to s ...

javascriptjqueryhtmlcss

The React popup window refuses to close on mobile devices

I am currently facing an issue with a site (a react app) deployed on GitHub pages. The site features cards that, when clicked on, should open a modal/dialog box. Ideally, clicking on the modal should close it. However, I have encountered a problem specific ...

javascripthtmlreactjsmobileresponsive-design

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

An error has occurred: sendEmail function is not defined

There seems to be a simple issue here that needs my attention before diving into PHP tasks. I plan on using PHPMailer this time around. I've been attempting to learn how to submit a form on localhost for the past week, and now I'm going to try i ...

javascriptjqueryhtml

Hiding a div using swipe gestures in Angular

What am I trying to achieve? I aim to hide a div when swiped right. This specific action will close the pop-up that appears after clicking a button. What tools are at my disposal? I am utilizing Ionic framework for this task. Within my app.js, I have i ...

javascriptcssangularjsionic-framework

The Slim POST function is not successfully uploading data to MySQL database

I have encountered a strange issue. Despite receiving no errors or console messages, everything appears to return a 200 status successfully. I am utilizing the Slim framework to POST data into my database. When I access existing data via the URL, everythi ...

phphtmlmysqlrestslim

The Material-ui Drawer does not function properly when used with an external CSS file

For my project, I'm working on a Sidebar design that is inspired by the Mini Variant drawer demo available at this link. However, the project requirements mandate that all CSS styling should be done in a separate CSS file rather than directly within t ...

javascriptcssreactjsmaterial-ui

The output from the xpath query is: [object Text]. Ideally, it should be a valid element

I am currently experiencing an issue with the text "Access my account" at the end of the page that has been causing errors <p class="breadcrumb"> <a href="http://www.examplewebsite/comm/index-eng.html" title="Titleblock">Home</a>& ...

phphtmlcssxpath

Utilize jQuery to apply a CSS class to the element that is clicked and inject additional content into a designated div

Here is a link to a page where I am experimenting with creating an interactive choose-your-own-adventure story: My goal is to add the class "disabled" to the element when a user clicks on the word "stairs" and then continue the story. Below is the relevan ...

jqueryhtmlcss

Options in Joomla Back-end Plugin

Just started diving into Joomla programming and I managed to create a plugin that functions perfectly. However, there's one small issue that's been bothering me all day. The configuration options in the back-end are shifted by a 180px left margin ...

htmlcssjoomla

What is the process of initializing divs in DataTables?

My application has a DataTable installed, but I encountered an error message stating "DataTables warning: Non-table node initialisation (DIV). For more details about this error, please visit http://datatables.net/tn/2". I'm aware that DataTables is d ...

javascriptjqueryhtmlcssdatatables

Creating custom CSS for Styled Components in ReactJS

I'm struggling with CSS in React using styled components. Below is the code snippet I am working with: import React from 'react'; import { Navbar, Container, Row, Col } from 'reactstrap'; import styled from 'styled-components& ...

javascriptcssreactjsjsxstyled-components

Add space between the first and second rows in the grid gallery display

.gallery{ display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) ); } view grid image here Could you assist me with identifying the spacing issue between the first and second ...

csscss-grid

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

Animating links with multi-line effects on :before.orEnhancing

As per the given query, I have a code snippet Is there any way to apply this effect to multiple lines of text instead of just one line? Currently, the effect only appears on one of two text lines (as shown in the example). :root { --00a3a3: #00a3a3; ...

cssanimation

Creating a scrollable table body in Bootstrap 4

I am struggling to make a large table mobile-friendly using Bootstrap 4. The table can have up to 10 columns and 100 rows. I need a CSS solution that achieves the following: A fixed header with each column having the same width as its respective row An x/ ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Updating class with jQuery based on dynamically changing content

I am using countdown.js to create a custom countdown timer. My goal is to replicate the countdown timer seen on the homepage, but with the ability to change the target date (which I have already accomplished). Here is an example of what I currently have f ...

javascriptjqueryhtmldomjquery-countdown