I have a CGI script that creates a "navigation aid" consisting of arrow icons and text label like this:
Obviously it would look much better if the text baseline would align with the bottom of the arrow icons.
The arrow icons were copied from GNOME 16x16 arrow actions a few years ago.
The HTML code is this:
<div><a title="Erster Eintrag" href="#A0"><img alt="|<" src="/ig16a/go-first.png" class="toolbar"></a> <img src="/ig16a/go-previous.png" alt="<" class="toolbar"> <span class="navaid">2 von 29</span> <img src="/ig16a/go-next.png" alt=">" class="toolbar"> <img alt=">|" src="/ig16a/go-last.png" class="toolbar"></div>
The CSS used is:
body {
color: black;
}
.navaid, .toolbar {
font-size: small;
font-family: sans-serif;
background: #fffab7;
margin-top: 1ex;
margin-bottom: 1ex;
}
If someone wonders about the different classes:
The idea was to hide the arrow icons when printing the page...
In case someone needs the arrow icons (Sorry for the length!):
# tar czf - icons | uuencode icons.tar.gz
begin 644 icons.tar.gz
M'XL(`````````^R<"3B4:\/'QQ;'DK%ES1I)Q>Q#62=.=#F)VI;$/LK<-
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
5````````````^/?X$XK8#%``H```
`
end
Use vertical-align: top | middle | bottom; in your CSS to align vertically.
Also ensure you use display: inline-block; in your CSS to align to the top / bottom of your images correctly.
Note: You can also use display: inline-flex | inline-grid;. See MDN for details of display options.
body {
color: black;
}
.navaid,
.toolbar {
font-size: small;
font-family: sans-serif;
background: #fffab7;
margin-top: 1ex;
margin-bottom: 1ex;
}
.nav a {
text-decoration: none;
}
.nav-top .navaid,
.nav-top .toolbar {
vertical-align: top;
display: inline-block;
}
.nav-middle .navaid,
.nav-middle .toolbar {
vertical-align: middle;
}
.nav-bottom .navaid,
.nav-bottom .toolbar {
vertical-align: bottom;
display: inline-grid;
}
<p>Align Top</p>
<div class="nav nav-top">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Align Middle</p>
<div class="nav nav-middle">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Align Bottom</p>
<div class="nav nav-bottom">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Some text</p>
Remove side note concerning frameworks
maybe try adding this to your CSS:
.toolbar{
margin-bottom: 0;
}
I am trying to move my image a bit up to align with the x axis but i have tried position relative and padding but it doesnt seem to move but when i change width it works. I am making the change in .luxxreno img but it is not working does anyone know why and how i will adjust its position? I just want to move it up a bit because it is not aligned in my div/
CSS
.container {
padding: 2.5em 1.25em 0;
margin: 0 auto;
border-bottom: 0.125em solid rgb(105, 105, 105);
border-width: 100%;
padding-bottom: 1.25em;
}
h1 {
margin: 0;
text-align: center;
font-size: 3.125em;
overflow: hidden;
line-height: 1;
color: white;
}
h1 span {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.meet-the-owner h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 1.5625em;
font-family: "BatmanForeverAlternate";
}
.meet-the-owner-top h3 {
text-align: center;
color: rgb(255, 215, 0);
font-size: 1.5625em;
font-family: "BatmanForeverAlternate";
padding: 2.5em;
}
.luxxreno {
text-align: center;
width: 100%;
padding-bottom: 2.5em;
}
.luxxreno img {
border-radius: 50%;
top: 3em;
}
.meet-the-owner {
padding: 3.125em;
border-top: 0.125em solid rgb(105, 105, 105);
}
.q-l {
color: white;
display: inline-block;
text-align: left;
font-size: 1em;
padding-left: 10%;
padding-top: 2em;
}
.questions p {
padding: 0.625em;
padding-left: 0;
font-size: 1.4em;
}
.luxx-name {
font-family: "BatmanForeverAlternate";
left: 0.2em;
font-size: 3.125em;
top: 1.9em;
padding-bottom: 10px;
}
.owner {
font-family: "BatmanForeverAlternate";
color: red;
padding-bottom: 25px;
}
.luxx-socials {
padding-top: 30px;
}
HTML
<section class="player-bios">
<div class="container">
<h1>
<span>Players</span>
</h1>
</div>
<div class="meet-the-owner-top">
<h3>Meet the Owner</h3>
</div>
<div class="luxxreno">
<img src="images/luxx.jpg">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">LUXX RENO</h2>
<h2 class="owner">OWNER</h2>
<p>Real Name: <b>Cory George</b></p>
<p>Online Name: <b>Luxx Reno</b></p>
<p>First Game Played as a Kid: <b>Duck Hunter/Super Nintendo</b></p>
<p>Game I'm Best At: <b>Fortnite</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br><b>Mimicry, so I'd be able to mimic and super power I see.</b></p>
<p>Favourite Artist of All Time: <b>Billy Raffoul</b></p>
<p>Hidden Talents: <b>Won lots of medals for swimming!</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCPqsHNuWTAbckHg4R3WAJIg" target=”_blank”><li>487 # YouTube</li></a>
<a href="https://www.instagram.com/luxxreno/?hl=en" target=”_blank”><li>2.6k # Instagram</li></a>
<a href="https://www.twitch.tv/luxxreno" target=”_blank”><li>3k # Twitch</li></a><br>
<a href="https://twitter.com/LuxxReno" target=”_blank”><li>2.5k # Twitter</li></a>
<a href="https://www.tiktok.com/#luxxxreno?lang=en&is_copy_url=1&is_from_webapp=v1" target=”_blank”><li>657k # TikTok</li></a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Creator</h3>
</div>
<div class="luxxreno">
<img src="images/abz-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">ABZZINO</h2>
<h2 class="owner">Content Creator</h2>
<p>Real Name: <b>Abdullah Khan</b></p>
<p>Online Name: <b>Abzzino</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty</b></p>
<p>Game I'm Best At: <b>Call Of Duty (all of them)</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
<p>Hidden Talents: <b>They're hidden for a reason.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/c/Abzzino/featured" target=”_blank”><li>360 # YouTube</li></a>
<a href="https://www.instagram.com/_abzzino_/" target=”_blank”><li>193 # Instagram</li></a>
<a href="https://www.twitch.tv/abzzinok" target=”_blank”><li>2.6k # Twitch</li></a><br>
<a href="https://twitter.com/_Abzzino_" target=”_blank”><li>142 # Twitter</li></a>
<a href="https://www.tiktok.com/#abzzinoyt?lang=en" target=”_blank”><li>23.6k # TikTok</li></a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>COMPETITIVE PLAYER</h3>
</div>
<div class="luxxreno">
<img src="images/kyran-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">KEEZO</h2>
<h2 class="owner">COMPETITIVE PLAYER</h2>
<p>Real Name: <b>Kyran Garden</b></p>
<p>Online Name: <b>KEEZO</b></p>
<p>First Game Played as a Kid: <b>Call Of Duty 3</b></p>
<p>Game I'm Best At: <b>Warzone</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br> <b>Flying</b></p>
<p>Favourite Artist of All Time: <b>Drake</b></p>
<p>Hidden Talents: <b>I'm good at football.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.twitch.tv/LKeezo" target=”_blank”><li>400 # Twitch</li></a>
<a href="https://twitter.com/KEEZZ0" target=”_blank”><li>1.2k # Twitter</li></a>
<a href="https://www.tiktok.com/#kkeezo?lang=en" target=”_blank”><li>1.1k # TikTok</li></a>
</ul>
</div>
</div>
</div>
<div class="meet-the-owner">
<h3>Content Manager</h3>
</div>
<div class="luxxreno">
<img src="images/brad-c.png">
<div class="q-l">
<div class="questions">
<h2 class="luxx-name">SPODERBRAD</h2>
<h2 class="owner">Content Manager</h2>
<p>Real Name: <b>Brad</b></p>
<p>Online Name: <b>SpoderBrad</b></p>
<p>First Game Played as a Kid: <b>Metal Gear Solid</b></p>
<p>Game I'm Best At: <b>Splitgate</b></p>
<p>If You Were a Superhero, What Would Your Power Be?: <br><b>Honestly don’t want a super power just wanna <br> be Iron Man.</b></p>
<p>Favourite Artist of All Time: <br> <b>Drake or Eminem can’t decide</b></p>
<p>Hidden Talents: <b>Best Free Kick Taker on Twitch.</b></p>
</div>
<div class="luxx-socials">
<ul>
<a href="https://www.youtube.com/channel/UCnqgXWWmmg1F3L919lzT6aQ" target=”_blank”><li>353 # YouTube</li></a>
<a href="https://www.instagram.com/spoderbrad/?hl=en-gb" target=”_blank”><li>115 # Instagram</li></a>
<a href="https://www.twitch.tv/SpoderBrad" target=”_blank”><li>2.1k # Twitch</li></a><br>
<a href="https://twitter.com/SpoderBrad" target=”_blank”><li>392 # Twitter</li></a>
<a href="https://www.tiktok.com/#spoderbrad?lang=en" target=”_blank”><li>60k # TikTok</li></a>
</ul>
</div>
</div>
</div>
</section>
I am not absolutely certain that this is what you are talking about, but in this CSS
.luxxreno img {
border-radius: 50%;
top: 3em;
}
the top setting will be ignored because there is no position set on the element. And when you do set it, make sure whatever ancestor element you want it positioned relative to also has a position set, otherwise CSS will hunt up the DOM til it finds such an ancestor.
A couple questions:
How do I make the text in <div class="mh-top-links"> align left?
How do I make the social media links in <div class="mh-social-icons"> display in a row?
How do I make the links in <div class="mh-bottom-links"> display in a row?
Overall, how would you arrange the divs in the footer to make it appear the way it does on the original website? See photo for reference.
I've messed around with Chrome DevTools and tried everything I can think of, but I'm still very new to this and don't know what I'm doing. If you can please provide an explanation along with your answer so I can apply the logic on my own next time, that'd be greatly appreciated!
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #222326;
background-color: #FFF;
margin: 0;
}
/* Footer */
footer {
background: #000;
}
footer .mh-top-links {
width: 50%;
display: flex;
flex-direction: row;
}
footer .mh-top-links dt{
color: #919496;
margin-bottom: 20px;
font-size: 12px;
font-weight: 900;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
}
footer .mh-top-links dd {
padding: 3px 0 15px;
}
footer .mh-top-links a {
color: #fff;
font-size: 16px;;
text-decoration: none;
}
footer .mh-social-icons a{
color: #fff;
text-decoration: none;
border: 1px solid #fff;
padding: 10px;
border-radius: 50%;
display: inline-block;
}
footer .mh-social-icons {
list-style: none;
}
footer .mh-country a {
color: #fff;
text-decoration: none;
}
footer .mh-bottom-links li{
list-style: none;
}
footer .mh-bottom-links a {
color: #919496;
text-decoration: none;
font-size: 14px;
}
footer a:hover {
color: #1ED760;
}
footer .footer-logo {
margin: 0;
display: inline-block;
color: #fff;
text-decoration: none;
}
<body>
<footer id="mh-footer" class="mh-footer-hover">
<nav>
<div class="mh-brand">
<a href="#" class="mh-footer-primary">
<span class="footer-logo">
Spotify
</span>
</a>
</div>
<div class="mh-top-links">
<dl class="empresa">
<dt>Empresa</dt>
<dd>
<a href="#">
Acerca de
</a>
</dd>
<dd>
<a href="#">
Empleo
</a>
</dd>
<dd>
<a href="#">
For the Record
</a>
</dd>
</dl>
<dl class="comunidades">
<dt>Comunidades</dt>
<dd>
<a href="#">
Para artistas
</a>
</dd>
<dd>
<a href="#">
Desarrolladores
</a>
</dd>
<dd>
<a href="#">
Publicidad
</a>
</dd>
<dd>
<a href="#">
Inversores
</a>
</dd>
<dd>
<a href="#">
Proveedores
</a>
</dd>
</dl>
<dl class="enlaces">
<dt>Enlaces Útiles</dt>
<dd>
<a href="#">
Ayuda
</a>
</dd>
<dd>
<a href="#">
Reproductor web
</a>
</dd>
<dd>
<a href="#">
App gratis para móvil
</a>
</dd>
</dl>
</div>
<div class="mh-social-icons">
<ul>
<li>
<a href="#" title="Instagram">
<span>IG</span>
</a>
</li>
<li>
<a href="#" title="Twitter">
<span>TW</span>
</a>
</li>
<li>
<a href="#" title="Facebook">
<span>FB</span>
</a>
</li>
</ul>
</div>
<div class="mh-country">
<a href="#">
España
<img src="https://country-flags.scdn.co/flags/es.svg" alt="Spanish flag" class="flag">
</a>
</div>
<div class="mh-bottom-links">
<ul>
<li>
Legal
</li>
<li>
Centro de Privacidad
</li>
<li>
Politica de Privacidad
</li>
<li>
Cookies
</li>
<li>
Informacion sobre los anuncios
</li>
</ul>
<span class="copyright">© 2020 Spotify AB</span>
</div>
</nav>
</footer>
</body>
In my experience, Flexbox is the best thing to use to layout things like this. There are lots of other ways of doing it (floats, CSS Grid, tables etc..), but Flexbox allows you to do it with the least amount of hacks, the least amount of code, and is also pretty much universally supported, as long as you don't need to support IE. CanIUse demonstrates the support, so be sure to check first and make a decision based on your requirements.
In my example, I have simplified the code somewhat and added some HTML colors to make it clearer what is going on. I have also created a JSFiddle of it.
The general solution is to separate the content into two main rows and apply display:flex to each of these. I have had to rearrange the HTML a bit to facilitate this. justify-content: flex-start makes the content align to the left. align-items: flex-start; prevents the elements stretching across the height of the row. The social media icons have been forced to align right by the trick of adding margin-left: auto to their containing element.
Flexbox is also used to layout content in some of the nested containers, such as for the legal links and the social media icons to force them to display in a row.
Some of the alignment problems you have are due to browser styling defaults, for example the dd element has a default margin set on it, so it's a good idea to use a CSS reset stylesheet to remove all of these in order to prevent unwelcome surprises. I happen to like Meyer's because it just blasts everything away, but it should be said that some people prefer something less drastic.
Another problem you have is that the circular borders round your social media icons are a bit skewed. This happens because the elements themselves are not perfectly square. The solution is to force them to be so by setting a width and height on them.
<footer id="mh-footer" class="mh-footer-hover">
<nav>
<div class="row-1">
<div class="mh-brand">
<a href="#" class="mh-footer-primary">
<span class="footer-logo">
Spotify
</span>
</a>
</div>
<div class="mh-top-links">
<dl class="mh-top-links__list">
<dt>Empresa</dt>
<dd>
<a href="#">
Acerca de
</a>
</dd>
<dd>
<a href="#">
Empleo
</a>
</dd>
<dd>
<a href="#">
For the Record
</a>
</dd>
</dl>
<dl class="mh-top-links__list">
<dt>Comunidades</dt>
<dd>
<a href="#">
Para artistas
</a>
</dd>
<dd>
<a href="#">
Desarrolladores
</a>
</dd>
<dd>
<a href="#">
Publicidad
</a>
</dd>
<dd>
<a href="#">
Inversores
</a>
</dd>
<dd>
<a href="#">
Proveedores
</a>
</dd>
</dl>
<dl class="mh-top-links__list">
<dt>Enlaces Útiles</dt>
<dd>
<a href="#">
Ayuda
</a>
</dd>
<dd>
<a href="#">
Reproductor web
</a>
</dd>
<dd>
<a href="#">
App gratis para móvil
</a>
</dd>
</dl>
</div>
<ul class="mh-social-icons">
<li>
<a class="mh-social-icon" href="#" title="Instagram">
<span>IG</span>
</a>
</li>
<li>
<a class="mh-social-icon" href="#" title="Twitter">
<span>TW</span>
</a>
</li>
<li>
<a class="mh-social-icon" href="#" title="Facebook">
<span>FB</span>
</a>
</li>
</ul>
</div>
<div class="row-2">
<ul class="mh-legal-links">
<li>
Legal
</li>
<li>
Centro de Privacidad
</li>
<li>
Politica de Privacidad
</li>
<li>
Cookies
</li>
<li>
Informacion sobre los anuncios
</li>
</ul>
<div class="mh-country-copyright">
<div class="mh-country">
<a href="#">
España
<img src="https://country-flags.scdn.co/flags/es.svg" alt="Spanish flag" class="flag">
</a>
</div>
<span class="copyright">© 2020 Spotify AB</span>
</div>
</div>
</nav>
</footer>
/* reset browser styles in one place */
body,
dl,
dt,
dd,
ol,
ul,
li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol,
ul {
list-style: none;
}
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
}
.row-1 {
display: flex;
justify-content: flex-start;
align-items: flex-start;
background: pink;
}
.mh-brand {
background: chartreuse;
padding: 0 50px;
}
.mh-top-links {
display: flex;
background: orange;
width: 50%;
}
.mh-top-links__list {
margin: 0 5px;
background: purple;
width: 200px;
flex-shrink: 0;
}
.mh-social-icons {
display: flex;
background: chocolate;
margin-left: auto;
}
.mh-social-icon {
color: #fff;
text-decoration: none;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
display: inline-block;
margin: 5px;
border-radius: 50%;
border: 1px solid #fff;
background: grey;
}
.row-2 {
display: flex;
background: coral;
}
.mh-legal-links {
background: green;
display: flex;
align-items: flex-start;
}
.mh-legal-links > li {
margin: 5px;
background: blanchedalmond;
}
.mh-country-copyright {
margin-left: auto;
}
See the below code for Question 1 - 3
You can just add the properties to your existing classes.
First line is for question 1. The second line of code is for Question 2 & 3
.mh-top-links{align-items: flex-start}
.mh-social-icons li , .mh-bottom-links li{ display:inline;}
The fourth question HTML layout as per below
<footer id="mh-footer" class="mh-footer-hover">
<nav class="navclass">
<div class="mh-brand svelte-1cgydzu">LOGO</span></a></div>
<div class="mh-top-links">
<dl class="classname">
<dt class="classname">Company</dt>
<dd class="classname">About </dd>
<dd class="classname">Jobs </dd>
<dd class="classname">For the Record </dd>
</dl>
<dl class="classname">
<dt class="classname">Communities</dt>
<dd class="classname">For Artists </dd>
<dd class="classname">Developers </dd>
<dd class="classname">Advertising </dd>
<dd class="classname">Investors </dd>
<dd class="classname">Vendors </dd>
</dl>
<dl class="classname">
<dt class="classname">Useful links</dt>
<dd class="classname">Help </dd>
<dd class="classname">Web Player </dd>
<dd class="classname">Free Mobile App </dd>
</dl>
</div>
<div class="mh-social-icons">
<ul class="classname">
<li class="classname"><span class="mh-social-icon-instagram"></span></li>
<li class="classname"><span class="mh-social-icon-fb"></span></li>
<li class="classname"><span class="mh-social-icon-tw"></span></li>
</ul>
</div>
<div class="mh-country">
Coutry
</div>
<div class="mh-bottom-links">
<ul class="yourclass">
<li class="yourclass">Legal </li>
<li class="yourclass">Privacy Center </li>
<li class="yourclass">Privacy Policy </li>
<li class="yourclass">Cookies </li>
<li class="yourclass">About Ads </li>
</ul>
<span class="class">© 2020 Spotify AB</span>
</div>
</nav>
</footer>
Just add your own class names :)
selected-works div's last lines's alignmet is not proper. It's text-align property has value of justify but there is a problem in last line. It is like left based not justify. Other lines have no any problem. How can I solve this problem?
* {
margin: 0;
padding: 0;
}
body {
background: #000;
text-align: center;
color: rgb(231, 231, 231);
}
#wrapper {
width: 60%;
margin: 0 auto;
}
#hello {
padding: 50px;
border-bottom: 3px double rgb(185, 185, 185);
}
#avatar {
border-radius: 50%;
width: 130px;
height: auto;
margin-bottom: 15px;
}
#hello-header {
margin-bottom: 15px;
font-size: 45px;
}
#header-p {
font-size: 36px;
}
.link {
text-decoration: none;
color: rgb(241, 225, 1);
}
.link:hover {
color: gray;
transition: 0.2s;
}
#selected-works {
width: 100%;
margin: 50px 0;
padding-bottom: 50px;
text-align: justify;
border-bottom: 1px solid gray;
}
#sw-header {
margin-bottom: 35px;
text-align: center;
}
.work {
width: 32%;
display: inline-block;
text-align: left;
}
.work img {
width: 100%;
height: auto;
}
.work img:hover {
opacity: .5;
transition: opacity .3s linear;
}
<div id="wrapper">
<div id="hello">
<img id="avatar" src="https://jonchretien.com/img/avatar.jpg">
<h2 id="hello-header">Hello</h2>
<p id="header-p">
My name is Jon Chretien. I’m a <a class="link" href="https://en.wikipedia.org/wiki/New_York_City">NYC</a> based front end engineer currently working on web apps for artists at <a class="link" href="https://www.spotify.com/">Spotify</a>. I previously
built editorial & marketing projects at <a class="link" href="https://www.nytimes.com/">The New York Times</a>.
</p>
</div>
<div id="selected-works">
<h1 id="sw-header">Selected Works</h1>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
<div class="work">
<a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists"><img src="https://jonchretien.com/img/work_s4a.jpg"></a>
<h2><a class="link" href="https://artists.spotify.com/blog/fan-insights-is-now-spotify-for-artists">Spotify for Artists</a></h2>
<p>Fan insights for artists & managers to discover more about their audience.</p>
</div>
</div>
</div>
selected-works div's last lines's alignmet is not proper. It's text-align property has value of justify but there is a problem in last line. It is like left based not justify. Other lines have no any problem. How can I solve this problem?
By default,
text-align: justify;
justifies all lines, except last one. If you also want the last line justified, you have to use text-align-last:
text-align-last: justify;
Note: This property is part of CSS text module 3 and current browser support sits at 77.98%.
To add support for it in legacy browsers, one would need to use a polyfill.
I have this HTML structure:
.subject{
width: 50px;
}
<div>
<span class = "subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class = "subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">+9400321532</span>
</div>
As you see, those columns aren't in the same line. I want this output:
/*
Name: John
Age: 23
cell phone: +9400321532
How can I do that?
Actually I need a fixed-width for span.subject the size of biggest content length which is cell phone in this case.
Here is my code in reality:
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>
You can use display:table, display:table-row and display:table-cell to make span as table
Use display: table-cell;
.subject {
display: table-cell;
width: 80px;
}
div {
display: table-row;
}
<div>
<span class="subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class="subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">+9400321532</span>
</div>
Please try this:
.subject{
width: 82px;
display: table-cell;
float: left;
}
You can make use of display table-row and table-cell to achieve this. Below code you can see that the width of the longest content is taken as the width if not it will take a min-width of 50px;
Hope this is what you are expecting :
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
display: table;
}
.notifications_list div, .notifications_list ul{
display: table-row;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>
Try this also:
.subject{
width: 50%;
float:left;
}
.content{width: 50%;
float:right;
}
<div>
<span class = "subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class = "subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">+9400321532</span>
</div>