Styling a HTML div element with a header and footer, while also ensuring that the

My goal is to create a div that features a header with a unique background design.

The content within the div should have a background consisting of a one-pixel repetition at y, or maybe something different?

I also want a footer with its own distinctive background style.

The end result should look similar to the correct example provided below:

It's important that this look can be achieved with either 5 lines or 50 lines of text.

Currently, my HTML code looks like this:


    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
    <body>
    <div id="header"></div>
<div id="content">Text goes here
</div>
<div id="footer"></div>
    </body>
</html>

And the associated CSS code is as follows:

#header {
    width: 959px;
    height: 169px;
    margin:0 auto;
    padding:0;
    background: url(header.jpg);
}
#content {
    width: 959px;
    margin:0 auto;
    background: url(content.jpg);
    color: white;
}
#footer {
    width: 959px;
    height: 158px;
    margin:0 auto;
    padding:0;
    background: url(footer.jpg);
}

However, the current output does not match the intended design - see "Wrong result" example.

I hope this clarifies the issue at hand. Thank you!

Answer №1

Would you mind giving that a shot?

Code Snippet:

<div id="container_outer">
    <div id="container_inner">
        <div id="content">
             Insert your text here
        </div>
    </div>
</div>

And here is the corresponding CSS:

#container_outer {
    background:url(images/body.png) repeat-y center center;
}
#container_inner {
    background:url(images/footer.png) no-repeat center bottom;
    padding-bottom:10px;
}
#content {
    background:url(images/header.png) no-repeat center top;
    padding-top:10px;
} 

Answer №2

To achieve the desired effect of pulling the #content up over the header and the #footer under the content, consider adding a negative margin to both elements.

#header{
    margin-bottom:-169px;
}

#content{
    margin-bottom:-158px;
}

However, be cautious with this approach as having minimal content may cause the footer to overlap with the header. To prevent this, you can set a min-height on the #content element. You can see an example in action on this jsfiddle link.

Answer №3

.header {
margin:0 auto;
padding:0;
background: url(images/header.png);
}


.content {
margin:0 auto;
padding:0;
background: url(images/body.png);
}



.footer {
margin:0 auto;
padding:0;
background: url(images/footer.png);
}

Answer №4

Add a background image with repeat-y to the #content element, featuring only the central portion of the image.

#content {
    background: url(images/body.png) repeat-y;
}

Answer №5

#content p{
padding:10px;
width:939px;
}

Include the above CSS code in your stylesheet and ensure that any text inside the content div is wrapped within

tags.

For example:

<div id="content"><p>Your text goes here</p></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

Adjustable ember count within Intercom HTML using Selenium and Python

My goal is to automate tasks at my workplace, but I am facing some challenges. Due to the lack of admin access on my work Intercom App, I have resorted to using Selenium. I need to input "Hey" into the chat box on Intercom and send the message successfull ...

The significance of the "$=" or "?=" symbols in lit-element illustrations

I'm struggling to comprehend the purpose of ?= or $= in these two instances: First Example: Lit-Element README <div id="box" class$="${this.uppercase ? 'uppercase' : ''}"> <slot>Hello World</slot> </div> ...

After the ajax request finishes loading, use jQuery to insert a value into an input text element

I am developing an application that utilizes multiple forms loaded through AJAX requests. Let's say my main file is index.html. Within this file, various forms are dynamically loaded using AJAX calls. My goal is to determine if a specific text input ...

What steps should be taken to transform this Jquery Ajax code into Pure Javascript Fetch?

I am looking to convert this Jquery Ajax snippet to Fetch using Pure Javascript. Can you provide assistance? I attempted this previously, but my code did not function properly. I even posted a question about it here. That is why I am hoping for your help ...

Creating URLs dynamically in jQuery ajax

$(document).ready(function () { $(".linkDelete").click(function () { var userid = $(this).attr("id"); console.debug("saurabh userid", userid); var url = "/delete?id=" + userid; var s = "SpringHibernateAnnotations"; ...

Unexpected behavior observed with LitHTML when binding value to input type range

Currently, I am working on an implementation that involves using range inputs. Specifically, I have two range inputs and I am trying to create a 'double range' functionality with them. The challenge I am facing is related to preventing one slider ...

Using Ajax to preview images results in displaying a broken image icon

I am currently working on implementing an image preview function using Ajax. As I was experimenting, a couple of questions came to my mind: Once the Ajax has been executed, is the actual image uploaded to the server or just an array containing strings l ...

CSS changes triggered by JQuery are ineffective

Having trouble modifying the CSS of a class in my HTML file. I've been struggling with this for quite some time and can't figure out what I'm doing wrong. (I've already attempted multiple versions, but nothing seems to work) Here' ...

Struggling to access your account on the Django website?

I'm having trouble creating a login page in Django. I have completed the views, HTML, and everything, but the problem is that when I try to log in, it doesn't work. After some debugging, I found that the user value is None, but I don't under ...

If there are no spaces, text will be removed from my list group

While working on developing a forum, I encountered an issue where if I repeatedly input letters or words without any spaces, it causes everything to overlap. Below is an example highlighting this problem: https://i.sstatic.net/KStNq.png Although there is ...

Ensuring the same height for the navigation bar and logo with aligned vertical text

I'm in the process of recreating a simple navigation menu and I've reached the section where I am encountering an issue with the list items. The orange li element is not filling up 100% of the width, and I also need the links to align in the midd ...

Tips for Implementing Color-coded Manchu/Mongolian Script on Your Website

My journey began with a seemingly straightforward task. I had a Manchu word written in the traditional script and I wanted to change the color of all the vowels in the word (ignoring ligatures). <p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p> < ...

Transferring ipywidgets to a web platform

I've developed a Python program in Jupyter Notebook that leverages the interact function from the ipywidgets module. interact(my_func, filter_by=filter_by_list, format_type=format_dict.keys()) I am looking for a way to share this interactive widget ...

Mixing React with jQuery in Gatsby: Incorporating jQuery Plugins into Your Gatsby Site

Previous description has been omitted as it is no longer relevant. I recently set up a new gatsby site and successfully integrated jquery, bootstrap, wow, and owl carousel. layout.js import './expose' import './main' expose.js impo ...

Effect on Label in WordPress Contact Form 7 When Input Field is Populated

Currently, I am attempting to achieve the floating label effect on Contact Form 7 and have encountered an issue. Although I have successfully implemented the label effect on input:focus, I am struggling to make it persist once text has been entered and foc ...

Using jQuery to check if a value exists in a PHP array

I am encountering an issue with handling an array in PHP and using it in my jQuery code. Previously, I was able to successfully work with the array when it was a string, but now that it is more complex, the comparison of elements is not functioning properl ...

What is the reason behind the addition of '.txt' by the Next.js `Link` Component when redirecting to `href='/'` on GitHub pages?

My website is hosted on github-pages, and I am using the Link Component from Next.js to navigate within it. However, when I click on a component with the href="/", it adds .txt to the end of the URL. My website follows the /app structure. I have ...

What is the process for dynamically checking in a node in jstree?

I am utilizing Jstree from https://github.com/vakata/jstree. I have successfully loaded the tree structure, and now I want to bind checked checkboxes from an array of data. By default, the nodes have unique ids. I will check the id of each node in the arra ...

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

Tips for managing JSON.stringify information within Laravel

Trying to retrieve data from Ajax in Laravel controller for storage, but encountering an error as shown in the image below. Need help identifying the mistake. Laravel Controller@ajaxstore public function ajaxstore(Request $request) { //Event::create ...