Hello,
I’m building a coffee shop for a school project html css. I am focusing on the footer right now and would like the desired outcome to look like this:
I have everything down except those dotted lines that helps guide the user’s eye. I am a beginner so I do not know any advanced technique to get what I want. I would like to learn some code that will automatically detect the amount of dots needed to fill the space, if that makes sense. I could just input a bunch of dots in the html but I don’t think that is the efficient method.
Here is what I have now.
HTML
<!--Footer-->
<footer>
<div class="footer-container">
<div class="footer-one">
<p class="footer-title">Opening Hours</p>
<div class="usethisgrid">
<div class="day-week">
<p class="footer-body">
Monday<br>
Tuesday<br>
Wednesday<br>
Thursday<br>
Friday<br>
Saturday<br>
Sunday<br>
</p>
</div>
<div class="hours">
<p class="footer-body">
9:00-5:00<br>
9:00-5:00<br>
9:00-5:00<br>
9:00-5:00<br>
9:00-11:00<br>
9:00-11:00<br>
Closed
</p>
</div>
</div>
</div>
CSS
/* Footer*/
.footer-container {
background-color:#6A281F;
margin-top: 100px;
padding: 30px;
}
.footer-container p {
color: #EBE2E2; /*Off-white color*/
font-weight: 200;
}
.footer-title {
font-family: giulia, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.9rem;
}
div.usethisgrid {
display: grid;
grid-template: (auto, auto);
}
div.day-week {
grid-column: 1;
grid-row: 1;
}
div.hours {
grid-column: 2;
grid-row: 1;
}
address {
font-family: "urbane-rounded", sans-serif; /* set fonts*/
font-weight: 200;
font-style: normal;
color: #EBE2E2; /*Off-white color*/
font-style:italic;
}
.footer-three a {
color: #EBE2E2; /*Off-white color*/
text-decoration: underline;
font-weight: bolder;
}
Any help is appreciated. I am new to the coding community so please be patient. I apologize in advance if I have broken any rules. Thank you very much.
Because I do not have permissions to add multiple images, here’s what the outcome of my code is currently in a reply.
Teller
April 22, 2024, 8:47pm
3
Welcome to the forum @milk349782
You could use:
text-decoration: dotted;
However, then you will need to rewrite your code to add the spacing element.
Here is an interesting article on Medium with a different take.
Happy coding
Funny thing is, there was supposed to be a leader() function for this exact usage.
https://drafts.csswg.org/css-content/#leaders
But it seems no one implemented it (at least not Firefox and Chrome).
opened 09:47PM - 23 Sep 15 UTC
Support data suggestion
CSS3 was supposed to add support for [leader dots](http://www.w3.org/TR/css-gcpm… -3/#leaders).
Thank you so much, I’ve implemented the code and have gotten the desired result.
My only gripe is that the dots aren’t aligned to the bottom of its container, if that makes sense. They’re perfectly centered. I would like them to be aligned to the bottom. Please let me know if there is a method to do that. I’ve tinkered with position, flex box, and it seems it just makes the dots disappear. Code is below. Thanks for the article.
<!--Footer-->
<footer>
<div class="footer-container">
<div class="footer-one">
<p class="footer-title">Opening Hours</p>
<div class="opening-hours-container">
<div class="hours-container">
<div class="day">Monday</div>
<div class="dots"></div>
<div class="hours">9:00-5:00</div>
</div>
<div class="hours-container">
<div class="day">Tuesday</div>
<div class="dots"></div>
<div class="hours">9:00-5:00</div>
</div>
<div class="hours-container">
<div class="day">Wednesday</div>
<div class="dots"></div>
<div class="hours">9:00-5:00</div>
</div>
<div class="hours-container">
<div class="day">Thursday</div>
<div class="dots"></div>
<div class="hours">9:00-3:00</div>
</div>
<div class="hours-container">
<div class="day">Friday</div>
<div class="dots"></div>
<div class="hours">9:00-10:00</div>
</div>
<div class="hours-container">
<div class="day">Saturday</div>
<div class="dots"></div>
<div class="hours">9:00-10:00</div>
</div>
<div class="hours-container">
<div class="day">Sunday</div>
<div class="dots"></div>
<div class="hours">Closed</div>
</div>
</div>
</div>
/* Footer*/
.footer-container {
background-color:#6A281F;
margin-top: 100px;
padding: 30px;
}
.footer-container p {
color: #EBE2E2; /*Off-white color*/
font-weight: 200;
}
.footer-title {
font-family: giulia, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.9rem;
}
div.usethisgrid {
display: grid;
grid-template: (auto, auto);
}
div.day-week {
grid-column: 1;
grid-row: 1;
}
div.hours {
grid-column: 2;
grid-row: 1;
}
address {
font-family: "urbane-rounded", sans-serif; /* set fonts*/
font-weight: 200;
font-style: normal;
color: #EBE2E2; /*Off-white color*/
font-style:italic;
}
.footer-three a {
color: #EBE2E2; /*Off-white color*/
text-decoration: underline;
font-weight: bolder;
}
.facebook {
display:inline-block;
width: 5%;
height: auto;
padding: 5px 0px 5px 0px;
}
.logo-white {
width: 25%;
height: auto;
margin-left: auto;
margin-right: auto;
}
div.copyright-stuff {
text-align: center;
font-size:x-small;
}
.hours-container {
display: flex;
flex-direction: row;
width: 100%;
white-space: nowrap;
color: #EBE2E2; /*Off-white color*/
}
.dots {
width: 100%;
background: radial-gradient(circle at 50% 0.8em, #EBE2E2 8%, transparent 8%);
background-size: 0.5em;
background-repeat: repeat-x;
margin: 0px 10px 0px 10px;
}
div.opening-hours-container {
width: 45%;
font-weight: lighter;
}
I apologize for the messy code, I’m not great at organizing things.
Ah I apologize, the solution was easy I think. I set a margin-top for the div.dots and they were pushed down.
1 Like
