Text-indent is the clever trick of shifting elements (specifically anchor tags) out of view on

Question

Text-indent is the clever trick of shifting elements (specifically anchor tags) out of view on

I'm facing an issue with my navigation list that uses images instead of text. It seems like the images have moved to the background, making it difficult for me to fix. I want the images to be clickable and redirect me to another page, but I'm quite new to this. I was attempting to use CSS to resolve this problem.

<div id="navigation">
    <ol>
    <li class="news"><a href="news.html">news</a></li>
    <li class="review"><a href="review.html">Review</a></li>
    <li class="contact"><a href="contact.html">Contact</a></li>
    <li class="photos"><a href="photos.html">Photos</a></li>

    </ol>
</div>

Below is the CSS code:

#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
text-indent: -9999px;}

#navigation li.news {
background: url( "news.png" );
display:block;
width: 308px;
height: 80px;
list-style:none;}

#navigation li.review {
background: url( "review.png" );
width: 308px;
height: 80px;
list-style:none;}

#navigation li.contact 
{
background: url( "contact.png" );
width: 308px;
height: 80px;
list-style:none;}

#navigation li.photos 
{
background: url( "photo.png" );
width: 308px;
height: 80px;
list-style:none;}

I would appreciate any assistance with this matter.

html css

Answer 1

Answer №1

text-indent is causing the <a> tags to be pushed off the page as <a> has a default setting of display: inline. It behaves like text in this scenario and becomes indented. An alternative approach would be:

#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

It's unclear why you would want the text there in the first place.

Take a look at this demo: http://jsbin.com/ejeGufa/2/edit

You can verify that the <a> tags are now correctly positioned by observing the cursor change (or using the inspect element tool).

Additionally, to prevent code repetition, you could consolidate it like so:

#navigation li {
  list-style: none;
  float: left;
  margin: 0;
  display:block;
  width: 308px;
  height: 80px;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

#navigation li.news {
  background: red;
}

#navigation li.review {
  background: blue;
}

Answer 2

text-indent is causing the <a> tags to be pushed off the page as <a> has a default setting of display: inline. It behaves like text in this scenario and becomes indented. An alternative approach would be:

#navigation li {
float: left;
height: 30px;
margin: 0 0px 0 0;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

It's unclear why you would want the text there in the first place.

Take a look at this demo: http://jsbin.com/ejeGufa/2/edit

You can verify that the <a> tags are now correctly positioned by observing the cursor change (or using the inspect element tool).

Additionally, to prevent code repetition, you could consolidate it like so:

#navigation li {
  list-style: none;
  float: left;
  margin: 0;
  display:block;
  width: 308px;
  height: 80px;
}

#navigation a {
  display: block;
  text-indent: -9999px;
  height: 100%;
}

#navigation li.news {
  background: red;
}

#navigation li.review {
  background: blue;
}

Answer 3

Answer №2

You can try this approach, it may suit your needs. Make any necessary adjustments.

#menu a {
    display: inline;  
    width: 320px;   
    height: 90px;   
}

Answer 4

You can try this approach, it may suit your needs. Make any necessary adjustments.

#menu a {
    display: inline;  
    width: 320px;   
    height: 90px;   
}

Text-indent is the clever trick of shifting elements (specifically anchor tags) out of view on

Answer №1

Answer №2

Similar questions

Unable to render canvas element

What are some techniques for managing scrolling within a particular element?

Incorporating a fixed header title when creating a customizable table

Creating an HTML button that will execute JavaScript code when clicked

Mastering the art of manipulating Div elements using CSS for the optimal Print View experience

Is the JavaScript Base64 image data damaged or compromised?

Output MySQL information into an HTML form with radio buttons and an additional text field

What is the best way to bring in an external webpage using Jquery and Custom variables into an Iframe?

Creating a PHP form

AngularJS - Unchecked radio button issue

It's proving difficult for me to align my header and navbar on the same line

How can I move one of the multiple input fields to the top right side?

Numerous textareas fail to function properly according to JQuery's standards

Issues with Bootstrap offsetting columns within a fluid row

In AngularJS, I've created a collection of checkboxes with a submit button ready to go

How can I adjust the border opacity in a React application?

Leveraging ajax for showcasing page content in a floating div container

Easily move a group of HTML elements at the same time with a simple

employing iframes dynamically to overlay a webpage

Tips for choosing and deselecting data using jQuery