How to ensure the right size for your sections in HTML5

I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the section to be smaller than the screen or positioning it a set distance below the header to create a border all around it showcasing the background image. Below is the snippet of HTML5 code I have so far:

    <body>
<header>
    <nav id="nav1">
        <button id="b1"> Goals </button>
        <button id="b2"> Habits </button>
        <button id="b3"> Diary </button>
    </nav>
</header>
<section id="goals">

</section>

And here is the CSS styling for the section:

   section
   {
height: 700px;
background-color:blue; 
overflow:auto;
top:50px;
transform:translateY(20px);

   }

Answer №1

Check out this Fiddle on jsFiddle

Be sure to take a look at the comment from @TylerH as well.

In your code snippet:

top: 50px;

It's important to note that when using this, you will need either position: absolute, relative, or fixed. I would advise against using it unless absolutely necessary.

Answer №2

Try using margin-top: 50px instead of top:50px. The top: 50px property will only be effective if you have a position: rule in place.

The issue with your sizing may be due to the fact that you haven't specified a width for the element.

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

CSS - Layering <divs> on top of clear <div>'s

Is there a method to eliminate the transparency of content/images within a <div> that is transparent? Below is the provided HTML: <div id="main-button-wrapper" class="left"> <div id="button-bg-layer" class="box-bg-layer corner ...

The Google Chart is failing to show up on the screen

I'm having trouble implementing a feature that involves selecting a region from a dropdown list and requesting rainfall data to display in a Google Chart. Unfortunately, I've encountered some issues with it. Could you please help me identify ...

I'm only seeing output on two of my input boxes - what's going on?

Currently in the process of learning JQUERY/HTML, I decided to create a shopping cart. My goal is to display the subtotal, tax, shipping costs, and total cost in input boxes. While I successfully displayed the sub total and shipping cost, I encountered an ...

What are the steps to create a button with similar design using css3?

How can I create a button with the same lower part as shown in this picture? I've already achieved 50% of it with border-radius, but need help expanding the lower part to match. Any suggestions? https://i.sstatic.net/3ZJFS.jpg .list{ height: 280px; ...

CSS: Adjusting alignment differences between local host and server

I've been working on a webpage with rotating background images, and everything looked perfect on my localhost. But once I uploaded it to the server and viewed it in different browsers, some of the people in the images were not positioned as intended, ...

What about a Material UI-inspired homepage design?

Looking at the demo image on the main page for Material UI has me really impressed. I am interested in using a similar theme with MUI for my web application. Can you advise me on how I can achieve this look, or do I have to start from scratch? https://i.s ...

Find images by specific dimensions

A while ago, I received assistance in creating a function that searches for images on Google with specific preset sizes. Now, I am interested in modifying this HTML5 code to allow users to input their desired image size instead of using a preset one. For ...

Show the file name in the email signature instead of displaying the image

I'm facing a unique challenge with images in my HTML email signature. Sometimes the images are replaced by their file names on certain email hosts. Interestingly, I can't replicate this error now as the images are displaying correctly again! He ...

:root variables not being recognized in SCSS and Vue3 with Vite

I am encountering an issue with setting variables in my root SCSS file, as they are not being recognized correctly. Within my Vite configuration, I have included the following to import my styling: css: { preprocessorOptions: { scss: { additio ...

Showcasing Items Within JSON Object in Angular

I am dealing with a JSON database that contains nested Objects: { "characters2": [ { "campaign":"Menagerie Coast", "index": 1, "name": "Mark Whithershmitz", "portrait": "assets/pics/markW.jpg", "affiliation": "Kryn Dynast ...

Methods of using jQuery to conceal table rows according to child class name

I need to filter out rows in a table that do not contain a specific class. For instance: <tr id="game-22590" class="game"> <td class="pos left-edge"> <div>2</div> </td> <td class="cost"> < ...

mobile-friendly sticky footer

Currently working on a website project utilizing Bootstrap 3 (http://www.patrickmanser.ch/fnws) and I am trying to implement a sticky footer. After adapting the code snippets from Bootstrap 3 examples according to my specifications, everything seems to fun ...

Arrange divs in vertical columns

My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...

Writing and altering content within the <code> element in Chrome is unreliable

Utilizing a WYSIWYG Editor with contenteditable functionality allows users to input "code snippets" using a <code> element. Here is an example: <div contenteditable="true"> <p> This is a paragraph with an <code>inline s ...

Not all words are compatible with word-wrap, don't you think?!

I have a situation where I used the following CSS properties for a div: word-wrap: break-word; text-align: justify; When a single word is too long to fit within the width of the div, it wraps or breaks into multiple lines. However, if a second word with ...

Clicking again on the second onclick attribute

I have an image file named image1.png. When the button is clicked for the first time, I want it to change to image2.png. Then, when the button is clicked for a second time, I want it to change to yet another image, image3.png. So far, I've successful ...

Content positioned beside an image with the help of Bootstrap 4 framework

How can I align text to the right of an image, like a table layout? I experimented with grid layout using <div class="span2"> and <div class="span10"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...

What is the best way to align the Storefront Menu in the center?

If you want to reproduce the issue I'm facing, visit the demo page of the storefront here: then remove the node <ul id="site-header-cart" class="site-header-cart menu"></ul> that contains the cart box (located next to the menu) so that on ...

Develop interactive div elements with the help of JavaScript/jQuery

Exploring dynamic div creation using javascript or jquery and looking for guidance. <div id="clickable"> <button class="start">Default</button> <button class="random">Randon</button> <button class="gradient"> ...