Currently, I am engrossed in the book Agile Web Development With Rails and have encountered a slight hitch on page 96.
Following the instructions meticulously from the book, but unfortunately hitting an obstacle as shown below:
I am aware that using a table could potentially solve this issue. However, before opting for that approach, I am eager to explore alternative solutions if available.
To better organize these comments, I recommend using divs as containers. The first div will hold both the image and comment, the second one will contain the image, and the third will house the comment.
Here's the HTML structure:
<div class="comment-container">
<div class="comment-img">
<!-- Insert code to fetch images from the database -->
</div><!ENDcomment-img>
<div class="comment-field">
<!-- Add code to retrieve comment content from the database -->
</div><!ENDcomment-field>
</div><!ENDcomment-container>
For styling, you can use this CSS:
.comment-container{
padding: 5px;
border-bottom: 1px dashed #009fe4;
margin: 2px 0 5px 0;
}
.comment-img{
float: left;
width: 80px;
height: auto;
}
.comment-field{
width: 700px;
height: auto;
padding: 0 0 0 10px;
}
I hope this clarifies things for you.
@subm0ral
The reason why the image appears above the text is due to the position: absolute; property in the img rule of your CSS. You can find more information on this topic by visiting this link
Using md-sidenav without md-toolbar works fine. The sidenav opens correctly, as shown in the image below. https://i.sstatic.net/PjsPp.png However, when a toolbar is added before the sidenav or its containing section, opening the sidenav causes the page t ...
I'm currently designing a website at www.50s.co and everything seems to be working fine in Chrome. However, when I check it in Firefox or IE, the background images appear to be sized differently. Even though the image sizes are supposed to be the same ...
Currently, I am exploring unit test exercises with a HTML5/JS game that I created and JSUnit test runner. The simplicity of the setup impresses me, but I have noticed that even the documentation lacks a clear explanation of what assertEquals() truly does. ...
Hey there, I'm in need of some assistance. I have a Codepen page where I am working on displaying 4 random shapes (Square, Triangle, Circle, and Cross) one at a time, with the computer speaking the name of each shape when clicked. I want to pull these ...
Struggling with my Bootstrap Navbar on a website I'm working on. Can't seem to change the color of all the links, only one changes. Tried switching class names and removing unnecessary classes without any luck. HTML: <nav class="navbar navb ...
Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...
When I apply the CSS properties -fx-border-radius and -fx-border-width to a basic GridPane, the background in the corner does not get "cut off". The following is the CSS code being used: .payload { -fx-hgap: 20px; -fx-padding: 40px; -fx-back ...
As a newcomer to webpack, I am looking to compress and reference linked CSS files in HTML. Below is the code snippet I am working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" ...
I have a total of 12 divs that are configured to display a thumbnail along with some text dynamically retrieved from a database query. When displayed individually, they appear fine in a column format with a border around them showcasing the thumbnail and t ...
I'm currently working on a next.js app and dealing with the _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme } from '@arwes/design' import { ThemeProvider, Global ...
I'm currently trying to extract information from the specific element shown here: snapshot of HTML layout This element has a structure like div class="css-exfvnn excbu0ji", which was relatively easy to access at first, but the middle part appears to ...
I'm facing an issue with my ExpressJS web app where only the HTML files are loading but the CSS rules are not being applied. I have linked the HTML file with the CSS file and also included express.static(path.join(__dirname, 'css')) in my ap ...
I have a user registration form (Bootstrap 4 - in Razor Template) Depending on the user's selections, I will hide certain parts of the form. The registration form consists of two steps, and this is the second step. If a user selects a country withou ...
After making some adjustments to Bootstrap using a custom -theme.css file, I successfully altered the appearance of the dropdown menu. By removing the borders from the navbar and wrapping a header around it set to be fixed on top, everything seemed to be w ...
Here is a collection of items: <div class="wine"> <H1>Title</H1> <div class="promotion"></div></div> <div class="wine"> <H1>Title</H1> </div></div> <div class="wine"> <H1>Title& ...
Is there a way to hide the footer section from my webpage without affecting the rest of the content? For example, using something like: "div class="poweredby" display: none", but I'm unsure of the correct method... Here is the spe ...
My goal is to create an underline that perfectly fits the width of the text on the bottom row, without extending beyond it. The desired effect is shown in Figure 1. Figure 1 Here is the HTML I am currently using: <h2><span class="inline-block"& ...
I am a beginner when it comes to using APIs and I am facing an issue with counting the data and displaying it in an HTML view. When I use count($data) to count it in the HTML view, the result is different from the actual data received from the API. Below a ...
After implementing the Handsontable plugin in multiple tables, everything appears as expected on the parent page. However, when attempting to open a dialog containing a table, the tables do not display properly (only in IE). A demonstration of this issue c ...
My TextField element is defined like this: <TextField id="standard-with-placeholder" label="First Name" className={classes.textField} margin="normal" /> It currently appears as shown in the image below: https://i.sstatic.net/aYi1a.png How ...