HTML formatting for text

I recently created an HTML website using Dreamweaver. I faced an issue while trying to design a section within an article using tables to incorporate both text and images. Unfortunately, the tables did not have rounded edges as I desired. I am reaching out for assistance in determining the proper code to achieve the desired look showcased in the image.

In the image provided, the left side displays what I aim to create, while on the right side you can see the elements I have at my disposal. My goal is to somehow replicate the middle elements to create a cohesive background for the text and images. Additionally, I want this background to accommodate text content similar to what is shown in the image.

htmlcsshtml-tableformatting

Answer №1

It is important to note that tables should not be used to create layouts. Instead, the recommended method is to use <div> elements:

HTML:

<div class="article">
    <h1>Title</h1>
    <div>
        <img src="a.jpg">
        <p>
            Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

CSS:

div.article {
    /* Shadow around the whole box */
    -webkit-box-shadow: 0px 0px 5px black;

    /* Repeat rounder borders here, so shadow will be rounded as well */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

img {
    width: 100%;
}

h1 {
    margin: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    /* Background gradient. In browser with no gradient support, fallback to orange */
    background: orange;
    background: -webkit-linear-gradient(90deg, orange, yellow);
}

div.article > div {
    padding: 10px;
    background-color: gray;
}

JSFiddle with example.

Important: please be aware that the shadow and gradient effects in this example may only render correctly in Chrome/Safari (and other webkit browsers) as I have omitted other vendor prefixes for simplicity. Make sure to include them to ensure compatibility with other browsers.

Answer №2

<style>
table#specificTableId tr:first-of-type {
 -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
} 
</style>

This code snippet adds a 20px border radius to the top left and top right corners of the first row of a specified table.

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

Adjust text size automatically to fit into a container with a fixed size

Looking to dynamically adjust the font size of user-entered text to fit within a fixed-size div. The goal is to have the text fill the box as much as possible. For example, if the div is 400px x 300px and the user enters "ABC", the font will be very large ...

jqueryhtmlcss

Tips for preventing a child div from moving when scrolling towards it and creating an internal scroll with a smooth animation using either JavaScript or jQuery

Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example. I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of cer ...

javascripthtmljquerycsscss-animations

Angularjs directive retrieves infowindow DOM element from Google Maps

In order to apply some style fixes to the Infowindow, I am trying to select the element with the class 'gm-style-iw'. This selection process is taking place within an angularjs directive. <div ui-view="full-map" id="full-map" class="mainMap c ...

javascriptjqueryhtmlcssangularjs

Pass information to a PHP file using JavaScript when the form is submitted

Essentially, I am looking to extract values from various inputs and spans using JavaScript when the submit input is clicked. These values will then be sent to PHP using $post in order to ultimately send them via email. Previously, I tested replacing all of ...

javascriptphphtmlpostform-submit

How can I transfer CSS styles from one class to another using JQuery?

Is it possible for me to create a timepicker that matches the style of the datepicker in the current UI Theme? I am looking to replicate the CSS properties from the datepicker for my timepicker without copying any behavioral aspects. (Although there are o ...

jquerycssjquery-ui

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

An abundant array of options spread across numerous dropdown menus

I have been tasked by a client to do something new that I haven't done before, so I am seeking the best approach. The project involves creating a form with three dropdown menus where users can select from thousands of options. For instance: Users mu ...

phpjavascripthtmlajaxdrop-down-menu

How can I create multiple vertical lines in an SVG format?

How can I achieve an effect similar to this https://i.sstatic.net/ulZFR.png? I have attempted using strokeDashoffset and strokeDasharray, but I am still unable to achieve the desired result. I know that I can draw multiple lines, but I need a script that ...

htmlcsssvg

The function you are trying to use is not a valid jQuery function

Although I've come across this issue in previous posts, none of the solutions worked for me and it's really frustrating. I'm a newbie to javascript and I'm sure the answer is probably simple. I'm attempting to incorporate the rapt ...

javascriptjqueryhtmlfunction

What is the method for superimposing a div with a see-through input field?

I am currently designing a compact upload feature. It consists of a responsive element (actually a vue/quasar card) that adjusts in size according to the window dimensions and viewport. Within this element, there is a form containing an input field and a ...

csshtml

What is the best way to confirm checkbox selection based on MySQL data?

Writing this question feels challenging, but I have a collection of checkboxes with their data stored as JSON in my PHP database. What I'm trying to achieve now is to dynamically load the JSON data on the page without refreshing it, checking specific ...

javascriptphphtmlajax

How to apply CSS classes to dynamically injected HTML in Angular 7

One of the challenges I'm currently facing is how to assign a CSS class based on a calculation in my component. Here's a snippet from my component class: @Component({ selector: 'app-render-json', template: `<div [innerHtml ...

cssangularangular7

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

javascripthtmlcss

Include text for both the button label before and after a bootstrap toggle button

Is there a way to change the button label on a bootstrap toggle switch/button before and after clicking it without using jquery or javascript? It seems like there should be a feature in bootstrap for this. Initially, the label reads: Show list After clic ...

cssbootstrap-5

Saving and retrieving user input as a variable using Javascript and HTML local storage

This is the foundation of my HTML page. When the "remember text" paragraph is clicked, the data in the input text box is saved to local storage as a string. Clicking the "recall text" paragraph loads the stored data into the "recalled text" paragraph. I am ...

javascriptandroidhtmlcordovalocal-storage

A step-by-step guide to effectively removing special characters generated by an array while populating the name field of an email in PHP

I have developed a custom email application and I want to implement a filter that removes special characters (e.g. !@£$%^) when a user submits the form. Here's my current implementation: <?php $name = $_POST['name']; $to = "<a ...

phphtml

What is the best way to make my page headers resize with a responsive layout?

Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifica ...

csstwitter-bootstrap

What steps should I take to create a collapsible Bootstrap navbar?

I'm attempting to recreate the scrolling functionality seen here: It seems like they might be using a customized Bootstrap Navbar, so I've taken one from here: and tailored it to my needs. How can I achieve the effect where the navigation bar ...

javascriptcsstwitter-bootstrapnavbar

Learn how to apply CSS styles from one component to another in Angular

I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the back ...

cssangularangular12

Tips on eliminating the top margin on my webpage

I am in need of assistance with removing the margin at the top of my page. Take a look at the screenshot for reference: As shown in the image, there is a red arrow pointing to the problematic margin. Can someone guide me on how to eliminate this margin? B ...

htmlcssmargin