To view the related code snippet, click on this link: http://jsfiddle.net/Ws8ux/
Is there a way to position the text under the logo without hiding it through display:none or text-indent? I am aiming to bring the image up while keeping the logo in the background, similar to layers in PSD. Additionally, I prefer not to use the logo image as a CSS background.
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" />Logo Text
</a>
Did you come across something similar on this coding platform?
Here is the HTML code provided:
<a href="/" title="Return to the homepage" id="logo">
<img src="http://lorempixum.com/100/100" alt="Nike logo" /><span>Logo Text</span>
</a>
And here is the corresponding CSS code:
a { display: block; position: relative; }
a span {
display: block;
position: absolute;
top: 40%;
}
Why keep text hidden if it serves no purpose? If your intention is to conceal text below an image for accessibility reasons, consider using the alt attribute on your image instead. Most search engines won't penalize you for this approach. However, using techniques to deliberately hide content may have a negative impact on your SEO efforts.
If you need both the image and text visible, consider wrapping the text in a <span>, applying an accessible style, and then disabling it in your print stylesheet to ensure it is present but not visible on screen.
@jitendra; It could be beneficial to experiment with CSS styles:
CSS Styles:
a { position:relative; }
img { position:absolute; top:0; left:0 }
HTML Markup:
<a href="/" title="Go back to the main page" id="logo">
Company Logo Text<img src="http://lorempixum.com/100/100" alt="Nike logo" />
</a>
Feel free to refer to this JSFiddle link for further assistance.
To achieve this effect, set the image to have a position: absolute. It's also important to ensure that the anchor element has the same dimensions as the image to prevent any layout issues with surrounding elements.
img {
position: absolute;
}
a {
display: inline-block;
height: 100px;
position: relative;
width: 100px;
}
Check out the updated code on this fiddle: http://jsfiddle.net/Abc123/4/
Is there a way to use purgeCSS with component level .scss files (filename.module.scss) in order to remove unused CSS? The hashed classnames make it tricky, especially in a next.js app that heavily relies on module.scss files for styling. This thread here ...
My web-hosted server has a PHP file in a specific folder. I want to send data from an HTML form using Jquery AJAX and view those variables in the PHP code on the server side. Here is my Jquery AJAX code: function sendtoServer() { $.ajax({ ur ...
I've encountered an issue with resizing the window causing the logos to overlap the portrait image. Is there a way to fix the logos relative to the portrait? Below is the code: /* Defaults for Main Part of Pages */ body, div, h1, p { margin: 0; ...
Is there a way to select the grandparent element of a child in Javascript without having to chain the .parentElement method twice? Specifically, I am looking for a method that can substitute .parentElement.parentElement when selecting the desired element, ...
I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...
I have been developing websites using HTML for nearly 3 years now, but since I had to teach myself, there are still a few things I am unsure about. One question that has recently become important is whether it is possible to create groups within the <h ...
Utilizing the Jumbotron Example from Bootstrap Examples has led to a peculiar issue when adding multiple icons to the navbar. After inserting anything following the first icon, a significant portion of the "container" class mysteriously disappears, as if i ...
Screenshot of Endpoints I've been facing challenges while attempting to get my NGROK domain operational. Despite completing all the necessary setup steps and successfully running multiple tunnels simultaneously with NSSM, as well as having a business ...
Working on a small tech challenge and implementing flexbox. Despite setting display: flex; on the parent div, using justify-content with space-evenly in the same CSS property doesn't seem to have any effect. CSS snippet: .relatedFlex { display: f ...
I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...
In the process of scraping this html with code, my main objective is to extract the link from it using Selenium driver. html = driver.page_source soup = BeautifulSoup(html) file_link = soup.select(".inpfilelink") return file_link print file_upload("/hom ...
I've been struggling with this issue for a few days and finally decided to seek some assistance. My goal is to have a scrollable box at a specific location on my website containing an image. Below is the code I currently have: <html> < ...
I built a Movie Search Page with the OMDB API. My current issue is that the API returns an error when searching for a movie with more than one word because the API URL requires a + key between each word. I am looking for a way to automatically add the + ke ...
I've encountered an issue with a hidden div that is supposed to show on page load with a transition. While it works fine in Firefox, Chrome seems to be struggling to display the div. If you'd like to try it out yourself, here's the link for ...
Is there a way to close the current browser window using JavaScript or another language that supports this functionality? I've tried using the window.close() function, but it seems to only work for windows opened with window.open(). Thank you in adv ...
In my application, I have implemented a Material UI Slider and I am looking to keep the thumb invisible until the user interacts with it. Once the user changes the slider value, I want the thumb to remain visible at that specific value. By using the CSS pr ...
After creating a chart using d3.js, I noticed that the chart does not resize when zooming in or out on the web browser window. Below is the code snippet of what I have attempted so far: <!DOCTYPE html> <html> < ...
I don't have much experience with scripting languages. I am attempting to hide buttons within a SAP Fiori app by using the "Inspect element" tool in the Mozilla browser. When I delete the HTML code, the button disappears, but I would like to accomplis ...
I'm currently facing an issue while trying to create a signup form using HTML/PHP. When I enter my password, it gets replaced with a previously saved password upon submission, and I'm unsure about the reason behind this. Here is the code for my ...
After setting up an apache webserver on Linux Debian and successfully creating an intranet, I encountered a challenge. The intranet is designed to display tables with data from sql queries using php and mysql. However, I wanted to include a hyperlink withi ...