In need of assistance with adding a divider within a box using HTML/CSS

As a beginner, I may have messy code but I'm working on creating a job search page with a bar displaying the results like this:

I've almost got it, except I can't figure out how to add that divider between PREV, 1 to 100, and NEXT. My current setup looks like this:

Take a look at my code:

HTML:

<div class="results">
    <a href="https://gregslist--farahgus10.repl.co/">Prev<a/>
    <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 179<a/>
    <a href="https://gregslist--farahgus10.repl.co/" >Next<a/>
  </div>

CSS:

.results {
    color: black;
    border: 1px solid lightgrey;
    width: 300px;
    padding: 5px;
    margin-top: 25px;
    margin-left: 60px;
    margin-bottom: 30px;
}

I attempted to create a results class for each link, but ended up with one large box instead of individual boxes around each link.

htmlcss

Answer №1

.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
  display:flex;
}

.results a {
  color:#000;
  text-decoration:none;
  font-family:sans-serif;
}

.a, .c {
  flex:1;
  padding: 5px 0px;
  text-align:center;
}

.b {
  flex:2;
  padding: 5px 0px;
  text-align:center;
  border-right:1px solid lightgray;
  border-left:1px solid lightgray;
}
<div class="results">
    <div class="a"><a href="https://customlink--example.repl.co/">&lt; Previous<a/></div>
   <div class="b"> <a href="https://customlink--example.repl.co/" >1 to 100 of 179<a/></div>
   <div class="c"> <a href="https://customlink--example.repl.co/" >Next ><a/></div>
  </div>

Answer №2

You might consider presenting this information in a simple table format. It should suffice for your requirements.

Here is an example illustrated on JSFiddle

<table>
<tr>
  <td>
    <a href="https://gregslist--farahgus10.repl.co/">Prev</a>
  </td>
  <td>
    <a href="https://gregslist--farahgus10.repl.co/" >1 to 100 of 17</a>
  </td>
  <td>
    <a href="https://gregslist--farahgus10.repl.co/" >Next</a>
  </td>
</tr>
</table>

Apply CSS styling similar to this:

.results {
color: black;
border: 1px solid lightgrey;
width: 300px;
padding: 5px;
margin-top: 25px;
margin-left: 60px;
margin-bottom: 30px;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
}

Answer №3

Your situation is quite straightforward, no need for any fancy flexbox techniques.

.results {
  color: black;
  border: 1px solid lightgrey;
  /* width: 300px; removed */
  display: inline-block;  /* Added */
  /* padding:5px; moved to the children (<a>) */
  margin-top: 25px;
  margin-left: 60px;
  margin-bottom: 30px;
}


/* Added */
a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
}


/* applying left and right border to second child to simulate dividers */

.results>a:nth-child(2) {
  border-right: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
}
<div class="results">
  <a href="https://gregslist--farahgus10.repl.co/">Prev</a>
  <a href="https://gregslist--farahgus10.repl.co/">1 to 100 of 179</a>
  <a href="https://gregslist--farahgus10.repl.co/">Next</a>
</div>

Answer №4

It appears that the closing tags on your <a> links are incorrect. The correct format should include a slash before the letter "a", like so: </a>. Once you make this adjustment, you can place each of the <a> links into their own individual divs:

HTML:

<div id="container">
  <div><a href="https://gregslist--farahgus10.repl.co/">Prev</a></div>
  <div><a href="https://gregslist--farahgus10.repl.co/">1 to 100 of 179</a></div>
  <div><a href="https://gregslist--farahgus10.repl.co/">Next</a></div>
</div>

CSS:

div {
  float: left;
}

#container {
  border: 1px solid lightgrey;
}

#container div {
  padding: 8px 24px;
  border-right: 1px solid lightgrey;
}

#container div:last-child {
  border-right: none;
}

Answer №5

There are multiple crucial factors to consider:

  1. Your elements were not properly closed.
  2. You should provide more specific details on which elements the CSS should be applied to.

These are just a few key points, but further CSS information is necessary for success.

.results {
  display: flex;
  width: 100%;
  padding: 5px;
}

.results a {
  max-width: 300px;
  min-width: 150px;
  color: black;
  text-decoration: none;
  border: 1px solid lightgrey;
  padding: 8px;
  text-align: center;
}
<div class="results">
    <a href="#">Prev</a>
    <a href="#" >1 to 100 of 179</a>
    <a href="#" >Next</a>
  </div>

<div class="results">
    <a href="https://example.com/">Prev<a/>
    <a href="https://example.com/" >1 to 100 of 179<a/>
    <a href="https://example.com/" >Next<a/>
</div>

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

Is it possible to manipulate a modal within a controller by utilizing a certain attribute in HTML, based on specific conditions (without relying on any bootstrap services), using AngularJS?

Within my application, I have a modal that is triggered by clicking on a button (ng-click) based on certain conditions. Here is the HTML code: <button type="button" class="btn btn-outlined" ng-click="vm.change()" data-modal-target="#add-save-all-alert ...

javascriptangularjshtmlmodal-dialog

Unfold an HTML element and reveal a sneak peek of its content with the aid of JQuery

I need a way to organize and display a set of 5 lines of text vertically. Specifically, I want them arranged like this: 1) Line one 2) Line two 3) Line three 4) Line four 5) Line five However, I have a special requirement where only the first ...

jquerycss

Performing JavaScript functions after fetching an XSLT page via AJAX

Is there a way to trigger JavaScript at a particular time without relying on setInterval() or onClick()? The issue I'm facing is that when I click to load an XSLT page using Ajax, the JavaScript within it does not execute even though it's writt ...

javascriptjqueryhtmlajaxxslt-2.0

Struggling to make the grunt.js task for postcss with autoprefixer function properly

I am currently facing issues with using postcss in conjunction with autoprefixer-core. Even though the css is being generated correctly, autoprefixer doesn't seem to be applying any prefixes. I have already installed postcss and autoprefixer via NPM ...

javascriptcssjsongruntjsautoprefixer

Stack three DIVs vertically on the entire screen with a fixed page margin, ensuring no need for a scroll bar

I need help creating a layout with 3 DIVs stacked vertically, each taking up one third of the screen without causing a scroll-bar to appear. I also want an 8px margin around all three of them. Here's an image for reference... example image Ultimatel ...

htmlcssfrontendweb-deployment

Troubleshooting a Navigation Styling Issue in HTML and CSS

I'm struggling to position my drop-down menus correctly in my WordPress theme navigation. They are appearing far away from the nav bar and end up near the top left corner of the screen when I hover over a ul li >. Here is the CSS code I am using: # ...

htmlcsswordpressthemes

I am facing an issue where the inline CSS is not being applied in my

I recently integrated tcpdf in my CodeIgniter project and encountered an issue with applying inline CSS to td. This is a snippet of my code: <table style="float:left;width:100%; border:1px solid #c2c2c2; margin-top:10px;"> <tr style="float:l ...

htmlcsspdf

utilizing the entire string rather than just a portion

I was attempting to create a JavaScript jQuery program that vocalizes numbers based on some previously saved data. However, I encountered an issue where only the last number in the sequence was being played (the final character in the string). Below is t ...

javascriptjqueryhtml

When creating a dynamic page number using JavaScript during a print event, the height of an A4 page is not taken into

While creating my A4 invoice using HTML, CSS, and JS, everything appears correctly in the print preview. However, I am encountering an issue where the page number is not aligned properly and extra empty pages are generated automatically. Below is a snippe ...

javascripthtmlcssprint-preview

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

I am facing an issue with an array that includes displayName with HTML tags: this.topicsList = [ {id: "173", name: "Discussion1", displayName: "Discussion1", status: 1}, {id: "174", name: "discussion123", displayName: "discussion123", status: 1}, {id: "19 ...

javascripthtmlangular2-templateangular2-formsinnerhtml

Using PHP's header function to alter directories

So I am currently diving into PHP and facing a challenge with using headers. My setup involves using xampp for development purposes. I have a basic form where users can log in on "index.php". Upon successful login, the header function kicks in to redirect ...

phphtmlcss

CSS animations can make the navigation bar vanish into thin air

I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...

jquerycssanimationcss-animations

Strategies for styling the contents within <details> while excluding <summary> in CSS

I'm attempting to apply a 10px padding to the Story box using CSS, without introducing any additional HTML elements into the website code. Is there a way to include the padding in the Story box without incorporating a new HTML element? To clarify: H ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

cssreactjsmaterial-ui

PHP mail function does not properly align HTML table outputs

After fetching data from the database and inserting it into an HTML table, everything appears fine. However, upon pressing the send button to email the content, sometimes the alignment of the HTML table is disrupted in the email. It seems like specific col ...

phphtmlcssphpmailer

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

csssass

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click

Retrieving HTML table data using PHP

In the scenario where I have an HTML form with a table like the one below: <form method="POST" action="a.php"> <table name="dataTable"> <tr> <td>row one col one</td> <td>row one col two</td> <td>row o ...

phphtml

Can the individual headers of an ag-grid column be accessed in order to apply an on-mouseover event with a specific method?

In my current project, I am utilizing ag-grid to create a dynamic web-application that combines tools from various Excel files into one cohesive platform. One of the Excel features I am currently working on involves displaying a description when hovering ...

angularhtmlcssag-grid

Grab the webpage's URL by collecting the link from the src attribute of the script tag using XSLT

Can XSLT be used to extract a URL link specified within the src attribute of a script tag in an HTML file? Here is an example of the HTML file: <HTML> <BODY> <SCRIPT language="javascript" src="http://myspace.com" type="text/javascript"> ...

javascripthtmlxmlxslt