Design a HTML-CSS layout to center your entire website and create a fixed menu

Created a website in Photoshop and sliced it for the web...currently working on CSS styling.

  1. Need to center the entire site, as it's currently aligned to the left side of the screen.

  2. Want to make the menu freeze or hover as you scroll down the page.

Realizing I'm out of practice with this stuff.

Appreciate any help!

3 Here's the code.

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box">
    <tr>
        <td colspan="14">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_01.gif" width="1000" height="516" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_02.gif" width="44" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/WHEN-&-WHERE.gif" width="190" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_04.gif" width="84" height="29" alt=""></td>
        <td colspan="3">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_05.gif" width="142" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_06.gif" width="116" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_07.gif" width="128" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_08.gif" width="108" height="29" alt=""></td>
        <td colspan="2">
            <img src="images/WHAT-TO-DO.gif" width="158" height="29" alt=""></td>
        <td>
            <img src="images/M&R-Layout----on-2014-03-18-at-53927-PM_10.gif" width="30" height="29" alt=""></td>
    </tr>
    ...
    
<!-- End Save for Web Slices -->
</body>
</html>
javascriptjqueryhtmlcsslayout

Answer №1

Applying CSS for a stylish look.

You have the option to apply it externally or inline:

CSS applied externally

#Table_01 {
    margin: 0 auto;
}

CSS applied inline

<table id="Table_01" style="margin: 0 auto;" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box">

If you have a menu issue, please provide more details as I need clarification.

Answer №2

To enhance the appearance of your table, consider incorporating inline or external CSS with the following code: margin:0 auto; width:960px. Setting the width to 960px is recommended as it provides the best resolution size, ensuring compatibility across all browsers and screens.

If you want the menu to remain fixed or hover as users scroll down the page, you will need to familiarize yourself with jQuery or JavaScript programming languages.

Answer №3

Consider incorporating margin:0 auto; into your inline HTML style for better alignment.

<table id="Table_01" width="1000" height="5761" border="0" cellpadding="0" cellspacing="0" class="box" style="margin:0 auto;">

When setting margins, you have four options available. Using margin:0; will eliminate any margin around the element. On the other hand, 'margin:0 auto; applies a 0 margin to the top and bottom, while aligning the left and right horizontally with auto.

Additionally, consider that margin:0 auto; can also be expressed as follows (remember I mentioned there are four options for margins?):

#Table_01 {
  margin:0 auto 0 auto;
}

This sequence indicates the values for top, right, bottom, and left margins respectively.

Answer №4

To enclose the table within a div, insert an opening div tag before the table and close it after the closing table tag.

Next, apply this CSS. I have assigned the id "wrapper" to the div (although technically the wrapper is not necessary, so just using the #Table_01 CSS would suffice without the div):

#wrapper
{
    width: 100%;
    height: 100%;
}

#Table_01
{
    margin: 0 auto;
}

For creating a sticky menu at the top, you can utilize jQuery as explained here with the help of JSFiddle.

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

Looking to have a countdown begin automatically as soon as the page loads?

Is there a way to create a time counter in jQuery/JS that begins counting when a visitor first enters my website (on page load)? I am looking for a function or similar solution to track the length of time a visitor spends on my website (in seconds) so tha ...

javascriptjquery

Delete the line-height property from the initial line

I have created text that is aligned using the "justify" option, and I would like to add some leading to the text. However, I want the first line of the text to remain at x:0px y:0px. Does anyone know how to remove the line-height from the first line of a ...

htmlcssdom

Sending a multi-dimensional array to the server using PHP via POST

Similar Question: multi-dimensional array post from form I am looking to transfer data from the client to the PHP server using jQuery's $.post() method. Once the data reaches the server, I want the $_POST['myList'] variable to be in one ...

phpjavascriptjqueryajaxpost

Utilizing the outcome of an AJAX call in JavaScript

I am facing an issue with a query that is returning 2 rows. Below is my PHP code snippet: $arr = array(); $stmt = $dbh_conn->prepare("SELECT id,name FROM mytable WHERE id <= 2"); $stmt->execute(); $result = $stmt->fetchAll(); /*Array ( ...

javascriptphpjqueryajax

Issue: The element [undefined] is not recognized as a valid child of the <Routes> component. Only <Route> or <React.Fragment> components are allowed as children of the <Routes

I am facing an issue while trying to upgrade react-router-dom from v5 to v6. The error message I receive is as follows: Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragm ...

javascriptreactjsreact-routerreact-router-dom

Using the ngFor directive, parent and child components can establish communication even with empty arrays

I am working on passing data from a parent component to a child component using the ngFor directive. However, I am facing an issue when some arrays have no length, as I need to indicate to the child component that the array is empty. How can I achieve this ...

javascripthtmlangulartypescript

Obtain the native element of a React child component passed through props, along with its dimensions including height and width

Is there a way in React to access the native HTML element or retrieve the boundaries of an element passed as a child in props? Consider the following component: class SomeComp extends Component { componentDidMount() { this.props.children.forEa ...

javascriptreactjs

Imitating CSS3 features on IE6 and other browsers

Does anyone know of a tool or resource that can replicate all the nice features of CSS3 (like shadow, glow, and round corners) but make them compatible with IE6 or at least emulate its appearance? I tried using this method, but unfortunately it resulted i ...

css

tips for extracting a specific attribute value from an XML document

Within my C program, I am working with the following XML data: <apStats><command chart_num="0">750</command><command chart_num="1">400</command></apStats> . $.ajax({ type: "POST", dataType: "xml", url: ge ...

javascriptajaxxml

What is the best approach to assigning a default value to @Html.EditorFor(model => model.location)?

After attempting to add , new { @Value = "test" } and failing, I then made modifications to the model as follows: private string _location = string.Empty; public string location { get { return _location; } set { _location = value; } } Even when ...

asp.net-mvc-3htmlmodeldefault-value

Styling Divs Beside Each Other Using CSS

I'm attempting to display the "left" and "right" divs side-by-side in the following example. However, they are not appearing next to each other as expected. Can someone point out my mistake? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

htmlcss

Inconsistencies in MongoDB $graphLookup aggregation result order and sorting issues

The way my aggregation operation is structured, it's producing the correct result, but there's a problem with the order. Every time I refresh, the nested array (posteriorThread) switches up the document sequence randomly, and it's baffling! ...

javascriptnode.jsjsonmongodbmongoose

What allows CSS to interact with pseudo-elements?

While experimenting in my class, I made an interesting discovery that CSS can be applied to custom elements. For example: imsocool { color:blue; } <imsocool>HELLO</imsocool> Surprisingly, when my professor noticed me using these custom ...

htmlcss

Prevent the default scroll event triggered by the mousewheel in certain situations. It is not possible to use preventDefault within a passive event

I have a div element with the onWheel attribute. By default, the browser interprets onWheel as scroll behavior. However, I want to prevent the browser's default mouse behavior under certain conditions. Unfortunately, I encountered an error that say ...

javascriptreactjs

The default props defined in the React component's child element are taking precedence over the custom props supplied by the parent component

The font size is being displayed as 20 and the color as 'red', instead of the font size being 12 and the color being 'blue' as specified in the parent component. However, the fontWeight as 'bold' is showing correctly. I have ...

javascriptreactjsreact-nativereact-props

Firmidable with Node.js

I am a beginner in the world of node.js and I have been soaking up knowledge from various resources like bootcamps and websites. My current challenge is with uploading a file using the formidable module within the node.js and express.js framework. Whenever ...

javascriptnode.jsexpressformidable

Troubleshooting: Why isn't setMetadata working in NestJS from authGuards

When I call my decorators, I want to set metadata for logging purposes. Within my controller, the following decorators are used: @Post("somePath") @Permission("somePermission") @UseGuards(JwtAuthGuard) @HttpCode(200) @Grafana( ...

javascriptnode.jsnestjs

Is there a way to verify that a form field has been completed?

Currently, I am grappling with a method to clear a field if a specific field is filled in and vice versa. This form identifies urgent care locations based on the information provided by users. The required entries include the name of the urgent care facil ...

javascriptjquerycss

Obtaining information from a intricate string input

{JSON.stringify(walletData.transactions, null, 2)} My goal is to extract backend data and display it as a table. The response has been converted into an array as shown below. [ { "date": "Nov 07, 2023", "description" ...

javascriptnext.js

Sass compilation failed due to an error in the CSS code provided

Just starting out with sass, I recently downloaded bulma, installed gem, and sass. My attempt to compile a default sass file using sass style.scss style.css resulted in errors. Here is my directory structure: https://i.sstatic.net/0OZSR.png However, I en ...

csssass