I have an image of a square diagram and I want to include URL links describing its content at the 12, 3, 6, and 9 o'clock positions. I can easily place the links at the top and bottom, but I'm unsure how to center them on the left and right sides of the image as well.
The challenge is ensuring that all the URL descriptions are centered along the top, middle left, middle right, and bottom of the image.
To position elements precisely, consider using absolute positioning. Start by creating a relatively positioned div. Use an image as the background for this div and then position all other elements within it using absolute positioning. This method should help you achieve the desired layout!
One of the simplest ways to achieve this is by using tables, but in my example, I opted for a list and nested-list approach. You can view a demonstration on jsbin. Here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
ul {
text-align: center;
}
ul li {
line-height: 1.2em;
}
ul li ul
{
}
ul li ul li
{
display: inline-block;
vertical-align: middle;
}
ul li ul li img
{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrap">
<ul>
<li><a href="#linkOne">top link text</a></li>
<li>
<ul>
<li><a href="#linkTwo">left link text</a></li>
<li><img src="http://image.bayimg.com/jaccdaabo.jpg" /></li>
<li><a href="#linkThree">right link text</a></li>
</ul>
</li>
<li><a href="#linkFour">bottom link text</a></li>
</ul>
</div>
</body>
</html>
#menu { position: fixed; width: 500px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } I've searched high and low for a solution to my problem, but nothing seems to work ...
Currently, I am trying to retrieve the HTML code of a specific webpage located at . My initial attempts using HttpClient were unsuccessful due to exceeding request processing time. It seems like this website may have anti-bot protection in place. I attempt ...
I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...
Is there a way to create a scalable CSS slideshow for text divs without using images? Here is the current HTML structure: <div class="mb-panel-container cf"> <div class="mb-panel-section mb-slider"> <div class="mb-panel active" ...
Looking for assistance with passing a variable from a number input to a PHP page. HTML CODE <input type="number" class="count count-disco" name="quantity_disks" autocomplete="off" placeholder="0"> https://i.sstatic.net/BK3X9.png PHP and JQUERY CO ...
My code and the package.json are provided below. I have reviewed similar issues, but the error codes I encountered differ from mine. How can I prevent crashing and successfully run the app? The goal is to have a local site that opens a home page allowing ...
Is it possible to create a simple alert pop-up using jQuery if the user does not enter the correct email address in the second email input form? Below is my current code: <div id="reservation-request"> <form method="post" action="test.php ...
As I work on styling existing documents with CSS, I find myself using a variety of adjacent sibling selectors (such as item1 + item2) to add spacing between elements. However, some of the documents contain <style> tags at different points in the page ...
I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...
Today is one of those days where I just can't seem to figure out why there is a space appearing to the left of each LI tag in the code below. Hover over the menu items and you'll see what I mean. Visit this link for more information <div id= ...
Currently, I am tackling the task of customizing a sidebar menu using CSS. This menu structure involves nested <ul> and <li> elements. The issue at hand is that when sub-menu items are hovered over, their parent elements also become activated. ...
As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...
To have the label and input elements side by side: <div class="container"> <div class="row mt-2"> <div class="form-group"> <div class="dates"> <label class="d-inline-block" for="arrival">Check-in Date:< ...
When dynamically generating a page with various types of content, I am experiencing an issue where the "post" content is displaying above the static content that is being generated. I would like it to appear in the opposite order. Do you see anything in ...
On my webpage, I have a headerbar that changes size (from 120px to 70px) when the user scrolls down. I successfully implemented this transition using Tailwind classes and a height transition. Now, I am trying to make the site logo resize along with the hea ...
Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this: This obviously isn't what I want, so I'm trying t ...
I've written a snippet of code in my views.py file where I defined a class called Pizza. from django.shortcuts import render from .models import Pizza def index(request): pizzas = Pizza.objects.all() return render(request, 'menu/index. ...
I'm intrigued by the layout shown in the image attached. My attempts to recreate it using a combination of columns and rows have been unsuccessful. Could it be that I'm going about this the wrong way? ...
Using @for to generate multiple box-shadow arguments: .myclass { $bxsw : ""; @for $i from 1 through 10 { $bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ","; } box-shadow: #{$bxsw}; } This results in: .myclass { bo ...
I am new to HTML and PHP programming. I have been struggling with an issue where the data submitted from a form is not being fetched by $POST, resulting in empty values being sent via email. I have spent a considerable amount of time trying to solve this p ...