I need assistance with creating an HTML design similar to the image below:
This is what I have tried so far:
<div style="display:table-cell; width:100px;"></div><img src="" width="50px";/>
<div style="display:table-cell; margin-left:151px; width:100px;"></div><img src="" width="50px";/>
<div style="display:table-cell; margin-left:230px; width:100px;"></div>
I am struggling to figure out how to achieve this... any advice would be greatly appreciated.
Have you considered using a table? Take a look at this JS Fiddle Example for reference.
Although it might seem overwhelming initially, once you give it a try, adding new branches will become much simpler. Plus, it reduces the complexity associated with absolute positioning.
HTML Code:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="border-right: 3px solid black;"></td>
</tr>
<tr>
<td></td>
<td style="border-top: 3px solid black; border-left: 3px solid black;"></td>
<td style="border-top: 3px solid black; border-right: 3px solid black;"></td>
<td style="border-bottom: 3px solid black;"></td>
<td style="border-bottom: 3px solid black; border-right: 3px solid black;"></td>
</tr>
<tr>
<td></td>
<td style="border-bottom: 3px solid black; border-left: 3px solid black;"></td>
<td style="border-bottom: 3px solid black; border-right: 3px solid black;"></td>
<td></td>
<td style="border-right: 3px solid black;"></td>
<td style="border-bottom: 3px solid black;"></td>
<td style="border-top: 3px solid black; border-left: 3px solid black;"></td>
<td style="border-top: 3px solid black; border-left: 3px solid black;"></td>
<td style="border-top: 3px solid black; border-right: 3px solid black;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="border-right: 3px solid black;"></td>
<td></td>
<td></td>
<td style="border-bottom: 3px solid black; border-left: 3px solid black;"></td>
<td style="border-bottom: 3px solid black; border-right: 3px solid black;"></td>
</tr>
</table>
Upon reviewing your reference, I observed that there may be an issue with the vertical positioning of the boxes overlapping. If this is not a specific requirement, my suggestion would be to utilize a single unordered list element () and apply the classes "left" or "right" to the list items along with corresponding "floats". However, if vertical overlapping is essential, then consider utilizing two separate unordered lists styled as shown below:
<ul class="left">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Furthermore, the styling for the above structure would be:
ul {
list-style:none;
margin:0;
padding:0;
}
.left {
float:left;
}
.right {
float:right;
padding-left:50px;
border-left:1px solid black;
}
li {
padding:10px 20px;
border:1px solid black;
width:100px;
margin:5px;
display:block;
position:relative;
}
li:after {
content:"";
position:absolute;
width:50px;
height:1px;
background:black;
top:50%;
}
.left li:after {
left:100%;
}
.right li:after {
right:100%;
}
To achieve greater flexibility with the positioning of elements, consider creating a container with a defined position property and then placing divs within it using top, left, bottom, and right properties.
To start, create the lines using a graphic design software like Photoshop and then insert the image of the lines into your document at the desired location. Next, use the CSS properties position:absolute; along with top:value; left:value; for each div element to adjust the positioning by changing the values accordingly.
For instance:
<div style="display:table-cell; width:100px; position:absolute; top:100px; left:200px;">
Check this out, simply substitute the images with your own image locations
[http://jsfiddle.net/ZMzyZ/]Your answer should include the use of position:absolute;
On my HTML page, the body includes a table with data in each cell. I also have another similar page, but this one doesn't have any data in its table cells. Whenever I add a value to a cell on the first page, it sends a POST call to update the data in ...
I have a challenge with using textarea to capture book descriptions because textarea does not have a "value" attribute. How can I pass the value to the bean? However, the method below to capture the value does not appear to be working <textarea cols=" ...
My datatable is causing me trouble as I try to add more rows in the td after the Name column. The rows are not aligning properly, and I need a solution. I want these new rows to be aligned with each other, but the number of rows may vary based on user inp ...
Seeking expert advice on the best way to style this HTML structure: <body> -Some content- <div class="parent" style="height:50%;"> <div class="child" style="background-color:#FF9999;">An image</div> <div class="child" style="bac ...
Currently, I am implementing a feature to scan QR codes using a web camera. If you are interested, you can find the library instascan. In my project, I have an index.html file where I call the function app.js(instascan/docs/..). However, I am facing an is ...
Despite this question being asked multiple times before, I am struggling to find a solution that fits my specific scenario. Initially, I have a static radio button that I create. The HTML code is as follows: <body> &l ...
Recently, I encountered the following HTML code: <div><h6>abc/h6><p>date</p></div> Using Selenium, I managed to locate this element based on text. However, the issue arises when <h6> can contain various words like "d ...
I am attempting to automate the process on this particular webpage by inputting data into a checkbox that has a unique @id. Even though I have tried utilizing code snippets I discovered online, my attempts keep falling short due to the element not being f ...
In my React app using Material UI table, I needed a custom event on the action button that displayed text instead of the usual icons for Add, Update, or Delete. Instead of creating my own icon, I opted to use text for the button like so... <MaterialTabl ...
While using an "accordion" jQuery to show a contact list, I have encountered a challenge that may seem simple to someone experienced in this. Here is the code snippet: <!doctype html> <html lang="en> ... (Code continues) I am looking to add ...
After following the official Bootstrap tutorial, I attempted to set up a carousel containing three images. Despite changing the links for demonstration purposes, the issue persisted. While the navigation arrows seemed functional, the image itself remained ...
My project requires internationalization support for right-to-left languages like Arabic and Hebrew, so I need to modify some Bootstrap classes (such as col) to float right instead of left. I am using create-react-app with babel/webpack and react-bootstra ...
Recently, I've taken to using sublime text 2 and I'm on the lookout for a quick method to generate relative path references to use for creating hrefs or src links. For instance, imagine I have the following file structure: myfolder |-->css | ...
Using reCAPTCHA on a sign-up form can get frustrating on mobile devices, with constant dictionary word suggestions while typing. I am aware of how to disable this feature for normal input fields by adding attributes through JavaScript, but shouldn't ...
I'm having some trouble creating a signup form with SVG logos. The colors seem to clash and no matter what I do, the color doesn't change from white. My goal is to have the actual SVG logo remain white while the background behind it is black. He ...
What is the best way to scroll to the top when a route changes in react router dom v6? In the past, I used a solution from this StackOverflow post to make my page automatically scroll to the top every time a route changed with react-router-dom v5. However ...
I am facing an issue with my Angular app that uses the bootstrap framework. I am currently developing this app on my mobile phone using the spck code editor. The problem lies in routing from one component to another when a button is clicked, and I cannot s ...
After uploading my website, I noticed that one of the tabs (more info) is displaying in Chinese for some unknown reason. I'm not sure why this is happening. Here is the URL: You can also check out the code here: http://pastebin.com/jFBUV1ga ...
I'm currently experimenting with a parallax website using Skrollr. My goal is to achieve a curtain effect where two divs slide open left and right as I scroll down. The issue I'm facing is that when I scroll, the divs extend beyond the 100% widt ...
Currently, I am utilizing Angular Drywall to construct my website. By default, the alignment is centered which does not suit the template requirements that call for it to occupy the full 100% body width. body{ width:100%; margin-left:0; paddin ...