I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code:
I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code:
Uncertain if you wish for the sublist to be visible on hover or not. I have made modifications to your code so that the sublist appears on hover. You must determine when to remove display:none. While this can also be accomplished in JavaScript, using only CSS is a simpler approach.
If the images are not displaying, it is because I do not have access to your images. Random images from the internet were used instead. If there are issues with image display, double-check the paths and image locations :) (A helpful tip - when viewing the source code of your website, clicking on the src URL should open it in your browser if properly linked)
<head>
<style>
.toolbar{
text-align: right;
}
.toolbar-menu{
display: inline-flex;
position: relative;
list-style: none;
}
.toolbar-menu li{
margin: 5px;
padding: 5px;
}
.toolbar-img{
max-width: 20px;
}
.toolbar-tool ul{
display:none;
}
/* New addition */
.dropdown:hover .toolbar-tool ul{
display:block;
}
</style>
</head>
<body>
<div class="container toolbar py-1 mw-100 px-5 ">
<ul class="toolbar-menu">
<li class="dropdown"><a href="#" id="color" data-bs-toggle="tooltip" title="Font Color"><image class="toolbar-img" src="http://cdn.onlinewebfonts.com/svg/img_231353.png"></image></a>
<div class="toolbar-tool">
<ul>
<li>Above ALl</li>
</ul>
</div>
</li>
<li><a href="#" id="Size" data-bs-toggle="tooltip" title="Font Size">
<!--Using the img tag and leaving the alt attribute empty because the icon doesn't convey anything https://www.w3.org/WAI/tutorials/images/ -->
<img class="toolbar-img" alt="" src="http://cdn.onlinewebfonts.com/svg/img_231353.png">
</a></li>
<li><a href="#" data-bs-toggle="tooltip" title="Lock Note"><image id="lock" class="toolbar-img" src="http://cdn.onlinewebfonts.com/svg/img_231353.png"></image></a></li>
</ul>
</div>
</body>Side note:
For best practice you probably want to use the img tag and add an alt attribute as follows:
<img src="sushi.jpg" alt="Salmon sushi" width="500" height="600"> My goal is to programmatically download the contents of a website, but it seems like this content is being loaded through ajax calls. Interestingly, when I disable javascript in my browser, only one request is made by the page and all the content is displa ...
Is there a way to have a div with an opacity of 40%, but make the text inside the div show with an opacity of 100%? #box { Background-color:#000; Opacity:40%; } ...
After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...
I need some assistance with WordPress and CSS. By default, WordPress applies CSS to all posts and pages. However, I want to disable specific CSS styles for certain objects on the page. For example: When I insert a table, it automatically inherits the CSS ...
When there are more than two (li) tags, the ul tag should have the class "col_3"; otherwise it should have the class "col_2" For instance: If there are two columns <div class="container"> <ul class="col_2"> <li>One</li> ...
I am facing an issue where the height:100% property is not working to fill the remaining area on the screen. A red outlined area represents the border radius, while the highlighted yellow space should have been filled: https://i.stack.imgur.com/ZQNkw.png ...
I seem to be missing something simple... I've copied the code for an nvd3 example exactly, but I'm getting a blank page without any error messages. Both the nvd3 and d3 libraries are showing up when I check in the console by typing "nv" or "d3", ...
Could someone help me achieve an input box like the one shown in the image below? https://i.stack.imgur.com/XtVNj.png Since I am new to CSS, I am not sure how to put text inside the border of an input box. Should I style the input directly or create a di ...
My horizontal form is dynamically generated using JavaScript, with each input field having a jQuery autocomplete that retrieves data from a database using the $.get method. I'm looking to automatically populate the second input field with the corresp ...
I am encountering an issue while trying to select the parent and its children in the select option. The concept is to have one select option for the parent and another for the child. I have parent objects and nested objects as children, which are subCatego ...
I am in the process of developing a straightforward web application that allows users to customize their settings. On the settings page, there are several toggle buttons that need to have their state changed during the page load to align with the preferenc ...
My home page features a full screen image header that I'm working to make responsive. The width of the image is being cut off on various screen sizes. I've attempted adjusting the height and width settings, but I want the image itself to resize ...
If my website URL is: http://example.com/path/to/dir/index.html And I decide to proxy this page through: http://proxyserver.com/path/to/dir/index.html. I would like all relative URLs on the page to be resolved by proxyserver.com instead of example.com. Wh ...
I stumbled upon the website recently, particularly noticing the Social News section on the side. I am curious about how to create rotated divs (around 10 degrees) that span the full width of a webpage. Is it possible to make this responsive so that it wor ...
Thank you for taking the time to read this, any feedback is greatly appreciated. The current script on my website is only partially functional (click "i" in the bottom right corner). Currently, the script will focus on the first link AFTER pressing the T ...
Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...
Below is the code snippet I am working with utilizing the Text and Button components provided by react-native-paper: <Text>See also </Text> <Button mode="text" compact onPress={this.nav( name )}>Compass</Button> <Text&g ...
I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...
I have incorporated a CSS file to introduce animations on the website I am currently developing. You can find it here: The premise of this CSS file is straightforward - by adding specific class names to div elements, you can animate them as you scroll up ...
I am currently exploring online tutorials that involve using a single index.html file and app.js file to create just one page. However, I am interested in creating multiple pages that can link back and forth with the click of a button. How can I achieve th ...