https://i.sstatic.net/nDrxq.png
Trying to replicate the layout from this image for my blog, but struggling with the source code. Any suggestions on how to achieve a similar design without using divs within table rows? Looking for a cleaner solution.
https://i.sstatic.net/nDrxq.png
Trying to replicate the layout from this image for my blog, but struggling with the source code. Any suggestions on how to achieve a similar design without using divs within table rows? Looking for a cleaner solution.
It appears that your request is relatively straightforward. The design choices in the example provided, such as font, weight, and color, are quite pleasing; however, the actual markup does not have to be overly complex.
Essentially, it consists of multiple 2-column rows, with the first column of each row containing the header and date, and the second column containing the abstract. You can see an implementation of this in the following jsfiddle: https://jsfiddle.net/cxmgLctq/
The HTML:
<div class="container">
<div class="row">
<div class="left">
<h1>
test
</h1>
</div>
<div class="right">
<h2>
more information here.
</h2>
</div>
</div>
<div class="row">
<div class="left">
<h1>
test
</h1>
</div>
<div class="right">
<h2>
more information here.
</h2>
</div>
</div>
</div>
And the CSS:
.row {
border-bottom: 1px solid black;
border-top: 1px solid black;
width: 100%;
height: 100px;
}
.left {
float: left;
width: 200px;
}
.right {
float: left;
width: 400px;
}
.container {
width: 600px;
height: 600px;
margin: 20px
display: block;
}
I have intentionally refrained from applying any styling in this example. The visual appeal in the example you shared comes from the styling, while the one I created may appear lackluster. There are many libraries available to help achieve this layout or even using a table as you suggested. However, it is entirely possible to accomplish this using only div elements. Your choice will depend on your specific circumstances.
Currently, I have a unique custom skin that I personally created. It is implemented on multiple portals that I am responsible for managing. My goal is to incorporate the ability for the header image to change based on the specific page being viewed. The he ...
I've been working on a CSS toggle for a div with className toggling. My approach involves using redux to manage the boolean state. Using the redux chrome extension, I can see that the state is indeed changing but the div remains invisible. If you have ...
When attempting to add HTML code within an iframe to showcase data, everything works as expected. However, the issue arises when trying to include any JavaScript within the iframe, as it doesn't seem to be recognized locally. Below is the example cod ...
Facing an issue with creating a vertical line separator in the navigation menu. While trying to add a vertical line separator to my navigation, I noticed that it does not get covered by the hover effect when hovering over the menu items. Please refer to t ...
My goal is to dynamically set the minimum height of each section to match the height of the window. Here is my current implementation... HTML <section id="hero"> </section> <section id="services"> </section> <section id="wo ...
I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox. Here is the URL: http://linco.com.py/beta/multiplaza/cartelera.php The styling for the main container is as fol ...
This puzzle may seem easy to some, but it's been quite challenging for me. I've encountered a discrepancy in how Firefox and Chrome render images (specifically technical drawings). Despite my attempts to use image-rendering: -webkit-optimize-cont ...
Have you ever noticed how websites like Heroku.com and dropbox.com automatically display a full-screen homepage tailored to your browser size? They have a clever button at the bottom that smoothly scrolls you down the page for more information. Have you wo ...
Imagine you have: <div class="home"> <input type="checkbox"/>.... </div> I am trying to add margin-left:3px to the checkbox. This is my CSS code: .home+input[type=checkbox]{ margin-left:3px; } Can anyone assist me with this? ...
I am fairly new to object-oriented PHP and PHP in general. I have a class where I assign array values in the constructor, but later when I try to access the array, it shows as null. Any ideas why this might be happening? Could it be an issue with scope? c ...
Check out this JSFiddle example. I'm facing a challenge in horizontally centering the div class="filter-group" between two floated buttons within the given example. I've tried various methods but haven't been successful so far. Any assistan ...
Looking to select a specific block of code to wrap with a class using the jQuery .wrapAll method. I need to target the <h2> element and the two elements that follow it. Unfortunately, the elements before and after this block are inconsistent, ruling ...
Trying to grasp WebRTC has been quite the journey for me. In an attempt to troubleshoot my failed video transfer between computers, I uploaded what I have so far onto a temporary github repository: https://github.com/stevendesu/webrtc-failure My goal is ...
I am struggling to align the labels of options in the AutoComplete component with their respective column headers in the popper component: https://i.stack.imgur.com/0VMLe.png const CustomPopper = function (props: PopperProps) { co ...
I am a beginner in VBA and coding, seeking assistance from the community. The purpose of this VBA code is to automate the following steps: Open Internet Explorer Enter user ID and password to login Select the current date Select a specific option (X1) fr ...
I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...
My React code is very straightforward and it runs smoothly: function Columns(){ return ( <React.Fragment> <li>Hello</li> <li>World</li> </React.Fragment> ); } function Example(){ ...
I recently came across a helpful post that showed me how to append a fragment to the URL. Angular2 Routing with Hashtag to page anchor Although the fragment is successfully added, I'm encountering an issue where the page does not scroll to the speci ...
I am currently working on a wordpress site and I am trying to create a link that directs to a specific section on the same page. This is the code I am using: <a href="#offer" target="_self">test</a> And here is the code for the landing secti ...
I'm looking for a way to display an image on my simple website for 3 seconds and then prompt the user to indicate if they recognized the image or not by clicking a button. I don't need help with the button, just how to create the timer. While I ...