Just starting out in the world of CSS - mastering text arrangement and styling

This is my first attempt at writing CSS code. I would like to align all rows of the same block together, but I'm unsure of how to go about it. Here is what I'm attempting to achieve:

If I were using regular HTML, I would simply create a table with as many rows as days and 2 columns. However, since CSS emphasizes separating content from presentation, I believe that approach goes against CSS principles. I'm considering that the necessary code might look like this:

<div>
<div>days</div><div>hours</div>
</div>

However, I'm uncertain about how the CSS should be structured. I'm also confused as to how CSS precisely determines where to position different elements.

Any guidance would be greatly appreciated.

css

Answer №1

It's important to utilize tables for structured data in order to easily apply styling with CSS to achieve your desired look.

Tables are also more visually intuitive for individuals reviewing the source code!

Consider this scenario: what if the developer decides later on to incorporate striped rows, hover effects on rows or columns? Using tables allows for such flexibility while keeping the styling aspects within CSS.

Below is a basic example of HTML and CSS for your reference, accessible through jsfiddle

HTML

<table id="schedule">
    <tbody>
        <tr>
            <td>monday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>tuesday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>wednesday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>thursday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>friday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>saturday</td>
            <td>8am to 6pm</td>
        </tr>
        <tr>
            <td>sunday</td>
            <td>closed</td>
        </tr>
    </tbody>
</table>

CSS

#schedule td:first-of-type
{
    text-transform: capitalize;
    text-align: left;
    padding-right: 10px;

}

#schedule td:last-of-type
{
    text-align: center;
    padding-left: 10px;
}

Answer №2

I've put together a solution in a fiddle that should help address your issue.

You can access the fiddle through this link.

Take a look at the HTML and CSS code below:

HTML

<div id="outer">

    <div class="push-left">Monday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

    <div class="push-left">Tuesday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

    <div class="push-left">Wednesday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

    <div class="push-left">Thursday</div>
    <div class="push-right">8am to 6pm</div>

    <div class="clearfix"></div>

</div>

CSS

#outer{
    width:170px; //width of the container
}

.push-left{
    float:left; //pushes the element to the left
}

.push-right{
    float:right; //pushes the element to the right
}

.clearfix{
    clear:both; //clears any applied floats
}

I hope this solution proves useful for you!

Answer №3

Experiment with

duration in hours

Consider CSS

 .container{
     clear:both;
 }
 .example{
     width:200px;
 }

The container will maintain separation between lines And the example will set the width to 200px or any desired width

Alternatively, tables could be used

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

Top tips for resolving Swiper Js initial loading issues in a Carousel!

After implementing swiper js from , I encountered an issue. The initial loading displays only a single carousel item before the rest start appearing, creating a glitchy effect. To clarify, when the website is loaded, only the first item is visible in the ...

javascriptcsswordpressswiper.js

Creating a Map Using HTML and JavaScript

My current project involves creating a simple map that can be moved with mouse drag functionality, featuring images such as islands. I have successfully retrieved the mouse position by declaring variables posX and e.clientX, as well as for e.clientY. Howe ...

javascripthtmlcss

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old versi ...

htmlcssjsoniframe

Extracting Tailwind color palette through API request

After conducting some research, I have not been able to find a definitive answer to my query. I possess a CMS API that supplies branding colors and other assets for a React application that can dynamically change its appearance using a combination of colo ...

cssreactjstailwind-css

assisting with the transition effect using CSS3, JS, or jQuery

I am looking to alter the background-image of this particular image when transitioning to another one from my images folder, similar to this example. Below is the code that I have: CSS .image { position: relative; overflow: hidden; -webkit-tr ...

javascriptjqueryhtmlcss

Selectize-dropdown menu shines brightly as it opens upwards

In my sleek dashboard design, I have implemented a few dropdown menus using selectizeInput. These menus are currently positioned at the bottom of the page, but I want them to open in an upward direction instead of downward. While I found a workaround for ...

htmlcssrtwitter-bootstrap-3shiny

Issue with Firefox position: absolute not producing the desired outcome

I am working on a webpage where I want to put a label over an image. I was able to achieve this using position: absolute for the label and float: left for the img tag. This method worked perfectly in most browsers, except for Firefox (both version 3 and 4) ...

htmlcssfirefox

Item on the menu has been pushed lower in the list

There seems to be an issue with the layout of my menu as one item is displaying lower than the others without any clear reason. <html> <head> <title> My Website Homepage </title> </head> <body> ...

htmlcss

Prevent scrollbar from appearing while splash page loads

Looking for help with a script to create a splash/intro page loader. $(function(){ setTimeout(function() { $('#splash').fadeOut(500); }, 6000); }); The current script hides the intro page after 6 seconds, ...

javascriptjqueryhtmlcss

What is the best way to include interactive text on an image?

Just starting to learn html and could use some quick guidance. I have this image here: https://i.sstatic.net/kBJEk.png I would like to place clickable text on the image that links to different pages when clicked, similar to this example: https://i.sstatic ...

htmlcss

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it: <table> <thead> <tr> <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th> <th style="font-weight: bold; wi ...

javascripthtmljquerycsslaravel

The toggle function for the hamburger icon is currently malfunctioning

I am facing an issue with the hamburger icon on my website. The toggle functionality associated with it is not working properly. Even though I have a class named change-1 that should be toggled upon clicking the icon, it is not happening. There are no erro ...

javascriptjqueryhtmlcss

Is there a way to avoid overlapping in CSS3 transforms?

Check out my jsfiddle demo: http://jsfiddle.net/WLJUC/ I have noticed that when you click to rotate the larger container, it overlaps the smaller one. This poses a problem as I am attempting to create a picture gallery where users can rotate and enlarge ...

jquerycssz-indextransform

Modify the class's height by utilizing props

Using Vue 3 and Bootstrap 5, I have a props named number which should receive integers from 1 to 10. My goal is to incorporate the number in my CSS scrollbar class, but so far it's not working as expected. There are no error messages, it just doesn&a ...

javascriptcssvue.jsvuejs3bootstrap-5

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

What is the best method for deleting an uploaded image from a box?

My code is quite lengthy, so I'll just showcase the JavaScript portion here. Here is a snippet of my JavaScript code: <script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view- ...

javascriptphpjqueryhtmlcss

What is the best way to showcase a half star rating in my custom angular star rating example?

component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { projectRating ...

javascriptcssangular

Highlight text when the user is scrolling the page - using JQUERY

Can anyone suggest a way to dynamically underline text as the user scrolls down a webpage? The underline should only be visible while the user is scrolling. I've experimented with animate.css and other plugins, but haven't been able to achieve th ...

javascriptjqueryhtmlcss

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

javascriptjqueryhtmlcss