Currently, I am trying to work on aligning a dotted line span, and I am struggling to figure out how to keep it

  dl {
     width: 480px;  
  }

  dt {
     float: left;
     clear: right;
     width: 100%;   
     background: url(http://galeon.sourceforge.net/twiki/pub/TWiki/TWikiDocGraphics/dot_lr.gif) repeat-x 0 180%;   
  }

  dt span {
     background: #fff;   
  }

  dd {
     float: right;
     width: auto;   
  }


  <dl>
      <dt><span>Phone</span></dt>
      <dd>123-4567</dd>

      <dt><span>Email</span></dt>
      <dd><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ff6f1f9f0dffaf2fef6f3b1fcf0f2">[email protected]</a></dd>    
  </dl>

I am facing a challenge trying to ensure that there is a dotted line cutting through the center of my text, but I am struggling with adjusting the width of the dots. The issue arises where the text keeps moving to the next line after the dots.

You can take a look at what I mean by visiting the following link:

http://jsfiddle.net/MUqYn/16/

htmlcss

Answer №1

Perhaps consider implementing a solution like this: http://jsfiddle.net/abc123/4

While it may not align perfectly with your initial expectations in terms of structure, it appears to function effectively across all primary browsers. The concept essentially revolves around the utilization of tables:

HTML:

<div class='description'>
    <span class='category'>Car</span>
    <span class='dots'></span>
    <span class='info'>Sedan</span>
</div>

CSS:

.description {display:table; width:480px;}
.description > span {display:table-cell; white-space:nowrap;}
.description > span.dots {width:100%; background: url(http://example.com/images/dot.png) repeat-x 0 180%;}

Answer №3

The current issue is caused by setting the dt to have a 100% width, which pushes the dd to the next line...

To resolve this, you can keep the left-floated dt with its original width and only apply the 100% width and background to the dd. Check out this example for clarification:
http://jsfiddle.net/aneves_sw/meKhe/

A simple solution would be to create a new image with a dot and white-space next to it, allowing you to avoid adjusting the background position.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the recommended image size for Next.js websites?

According to documentation: The width of the image, in pixels. Must be an integer without a unit. The height of the image, in pixels. Must be an integer without a unit. https://nextjs.org/docs/api-reference/next/image Different devices come in various ...

cssnext.jsimage-optimizationnextjs-image

Attempting to insert a dynamic variable into a jQuery click event selector

I'm facing an issue where I am attempting to use a variable as a selector within a click event for a dynamically generated row in a table. When I manually enter the class name, the row click event works perfectly. However, when I try to use the variab ...

javascriptjqueryhtmlvariablesselector

Is there a way to navigate to a specific div when clicking on it?

Need help with scrolling after running code function scrollFunction() { document.getElementById('insert').scrollIntoView(); } I have a button that triggers some code and I want the page to scroll afterwards. Currently, it scroll ...

javascripthtmlasp.netvb.net

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

Tips on eliminating excess white space or margins beneath a flexible video player

My issue is with a video and some content underneath. When I reduce the height of the video on mobile, there is too much white space below it. @media only screen and (max-width: 600px) { video { height: 80%; } Instead of adding margin-bottom ...

htmlcssvideomobileresponsive

Is the hover effect malfunctioning, even though the correct style has been applied?

I'm currently working on a simple design, but I've encountered an issue. When I hover over the number blocks (1, 2, etc.), my hover effect doesn't seem to work. My intention is to hover over the list item and change the entire digit text fro ...

htmlcss

Tips for making a standout testimonial card?

Apologies for the simplistic inquiry. As a fresh student of a full stack web developer bootcamp, I find myself grappling with this particular challenge. How can I go about creating a testimonial card similar to this one? I've attempted to write code ...

htmlcss

Deploying a React application to Heroku or GitHub pages can sometimes alter the appearance of styles and CSS

As a newbie to coding, I've managed to create multiple full-stack apps, but I've encountered a frustrating issue each time I deploy them to Heroku or GitHub Pages. Every element on the page seems to shrink in size compared to what it was on my lo ...

cssreactjsgithubherokuresponsive

Strange occurrence of blank space problem. The enigma within HTML, CSS, and Angular

I am encountering a puzzling issue with the code below: After saving text input from a textarea to a SQL database without any leading or trailing white spaces present, I notice that when displaying the text within a div using angular {{ model.text }}, str ...

htmlcssangularjs

Truncate text on a dynamic button positioned above a fluid container

Looking for a CSS-only solution to manage text within an image-defined box? The challenge is to place a button in the center if the text is shorter than the image, or cut it with ellipsis if longer. Also, the text should not exceed the box width. Any ideas ...

htmlcssjsfiddle

Utilizing jQuery to implement the functionality of closing a lightbox div when clicking on a

Is there a way to include a function in my confirm function that will close a specific lightbox div .productInformation? Snippet of jQuery Code: $('body').on("click", "#product_delete_product", function (e) { e.preventDefault(); var box ...

jqueryhtml

Removing Swipe Transition with CSS

Currently working on customizing a Wordpress Template and aiming to implement specific effects using CSS. Take a look at the link: I am trying to remove the Swipe Effect that occurs when hovering over the pictures, but I am struggling to identify the cor ...

csswordpresstemplatesanimationeffect

Can someone assist me with troubleshooting why my background-image is not displaying in the browser?

I am having trouble displaying an image in the browser. My HTML code is simple and straightforward, but for some reason, the image is not showing up. I placed the image in a folder named "image" and it worked when I tried the same code in a different folde ...

htmlcssweb

The presence of double quotes in stringified JSON is undesired

I am currently working on a weather forecasting website where the API returns pure JSON data. However, when I convert this data to a string and add it to an element in order to display it on the webpage, I encounter a problem with double quotes appearing. ...

javascriptjqueryhtmljsonstringify

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Is it possible to change the background color of the active NavItem element to green using inline CSS in React Bootstrap and React Router Dom? I am currently using TypeScript 2.2 and React. If not, should I create a CSS class instead? Here is the code sni ...

csstwitter-bootstrapreactjstypescriptreact-bootstrap

Troubleshooting Problem with CSS3 Transition Rotation

Can someone help me with my CSS3 transitions issue? I'm working on a new website and trying to rotate some images. It's working fine in a new HTML document, but when I try to add it to my actual website, nothing happens. Any advice or tips would ...

cssrotationtransition

Use JavaScript to load and set a background image for a div

When it comes to loading different images onto an "img" tag by printing their URLs using JavaScript and then letting CSS manipulate the content in the tag, I have a code snippet that does just that. $(window).load(function() { var randomImages = [&apo ...

javascriptjquerycssbackgroundonload

What is the best way to dynamically populate a dropdown menu in JavaScript?

I am currently working on populating a dropdown list. Initially, I had manually entered each variable into the array, but now I would like to use a loop to add items to the array dynamically. As a beginner in javascript, any help or pointers would be grea ...

javascripthtml

How come my Bootstrap container columns are not remaining evenly divided into four parts?

Struggling to split a section of my project into 4 equal parts using the bootstrap col attribute. Unfortunately, every time I try, the last container ends up breaking and shifting below the other 3, creating an unsightly code layout. index.html <sec ...

htmlcssbootstrap-5

Styling text using SVG in HTML

I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with: <svg id="svg" viewBox="0 0 300 ...

javascripthtmlcsssvgtext-decorations