This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to prevent line breaks in list items using CSS
(6 answers)
Closed 3 years ago.
I have a page where links overflow the page.
I wish they would stay on the line below.
I put the follow lines:
display:inline-block; overflow: auto;
But didn't work.
.hashtag {
font-family: 'Titillium Web', sans-serif;
padding: 28px;
font-size: 30px;
width: auto;
text-align: center;
text-decoration: none;
margin: 5px 2px;
background-color: rgb(98,124,169,0.8);
color: white;
display: inline-block;
line-height: 1;
<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a> <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a> PODCASTS
(Sorry my English)
Thanks in advance.
You need to add vertical-align:middle; to .hashtag to stop the first element being dropped down. You can also add white-space: nowrap; to the parent center element to stop the elements wrapping.
center {
white-space: nowrap;
}
.hashtag {
font-family: 'Titillium Web', sans-serif;
padding: 28px;
font-size: 30px;
width: auto;
text-align: center;
text-decoration: none;
margin: 5px 2px;
background-color: rgb(98,124,169,0.8);
color: white;
display: inline-block;
line-height: 1;
vertical-align:middle;
}
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;line-height: 1;" class="hashtag" id="load2">TODAY</a> <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;overflow: auto;" class="hashtag" id="load3">LIVE</a> PODCASTS</span>
Related
For some reason the body tag settings spill into the container div and text in the p tag goes out of the container div boundaries. I don't know why. Adding another div and applying the settings there fixed the issue, but I wanted the settings to apply to the container div.
I was expecting a centered green div with the placeholder text in it aligned like the rest of the elements, and a grey background using the body tag. How can I solve this problem?
body {
width: 100%;
color: #A4A7A5;
}
div #container {
color: #63EC91;
width: 80%;
margin: 0 auto;
padding: 10px;
}
ul {
list-style: none;
background-color: black;
margin: 20px;
text-align: center;
list-style-type: none;
padding: 20px;
}
li {
text-align: center;
font-size: 1.5em;
font-family: Roboto;
display: inline;
color: white;
padding: 20px;
}
li a {
text-decoration: none;
color: lightgrey;
padding: 20px;
}
li a:hover {
background-color: lightgreen;
}
#container .FCR {
width: 20%;
text-align: center;
color: lightgrey;
font-size: 1.5em;
font-family: Roboto, Arial;
}
p {
text-align: center;
color: lightgrey;
font-size: 0.8em;
font-family: Roboto, Arial;
}
h1 {
margin: 20px;
padding: 0;
text-align: center;
color: lightgrey;
font-size: 1.5em;
font-family: Roboto, Arial;
}
<div id="container">
<ul>
<li>Pocetna</li>
<li>O nama</li>
<li>Kontakti</li>
<li>Galerija</li>
</ul>
<h1>Meni stranica</h1>
<hr>
<br>
<p class="FCR"> FCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCR</p>
</div>
I think ur problem is about
FCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCRCR
text that u put inside of p tag.
default browser split the word and put their into new line when there is any space (" ") between words BTW I guess u can use word-wrap: break-word to change this behavior.
Also u can use overflow property to prevent this but it's not a good solution.
This question already has answers here:
How can I align one item right with flexbox?
(5 answers)
How to center-align one flex item and right-align another using Flexbox [duplicate]
(2 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I am trying to build a navbar with a logo to left and some buttons in the middle, but i have some trouble putting the logo. The span with the text is attaching right next to my buttons and if i take it out of my nav the logo is too far to the right and pushing my buttons to the left. This is the CSS:
:root {
--nav-button-color: #ffc300;
--nav-button-transparent: #ffc40093;
--font-color-unselected: #737373;
--font-color-selected: #fff;
--roboto: "Roboto", sans-serif;
--poppins: "Poppins", sans-serif;
--font-bold-600: 600;
--font-bold-700: 700;
--font-bold-800: 800;
--font-bold-900: 900;
}
* {
font-family: var(--roboto);
}
.navigation {
display: flex;
justify-content: center;
}
.btn {
margin: 5px;
width: 110px;
height: 30px;
border: none;
}
.btn-nav {
width: auto;
height: auto;
color: var(--font-color-unselected);
font-size: 16px;
font-weight: var(--font-bold-600);
padding: 10px 15px;
border-radius: 5px;
background: none;
transition: 0.4s;
cursor: pointer;
}
.btn-nav-selected {
color: var(--font-color-selected);
background-color: var(--nav-button-color);
}
.logo {
font-family: var(--poppins);
color: var(--font-color-unselected);
font-weight: var(--font-bold-800);
font-size: 30px;
}
/*=============================*/
.btn-nav:hover {
color: var(--font-color-selected);
background-color: var(--nav-button-transparent);
}
<div class="nav-container">
<nav class="navigation">
<span class="logo">Logo</span>
<button class="btn btn-nav btn-nav-selected">Home</button>
<button class="btn btn-nav">Shop</button>
<button class="btn btn-nav">What We Do?</button>
</nav>
</div>
You can try with css grid:
:root {
--nav-button-color: #ffc300;
--nav-button-transparent: #ffc40093;
--font-color-unselected: #737373;
--font-color-selected: #fff;
--roboto: "Roboto", sans-serif;
--poppins: "Poppins", sans-serif;
--font-bold-600: 600;
--font-bold-700: 700;
--font-bold-800: 800;
--font-bold-900: 900;
}
* {
font-family: var(--roboto);
}
.navigation {
display: grid;
grid-template-columns: auto 1fr;
justify-items: center;
align-items: center;
}
.btn {
margin: 5px;
width: 110px;
height: 30px;
border: none;
}
.btn-nav {
width: auto;
height: auto;
color: var(--font-color-unselected);
font-size: 16px;
font-weight: var(--font-bold-600);
padding: 10px 15px;
border-radius: 5px;
background: none;
transition: 0.4s;
cursor: pointer;
}
.btn-nav-selected {
color: var(--font-color-selected);
background-color: var(--nav-button-color);
}
.logo {
font-family: var(--poppins);
color: var(--font-color-unselected);
font-weight: var(--font-bold-800);
font-size: 30px;
justify-self: flex-start;
}
/*=============================*/
.btn-nav:hover {
color: var(--font-color-selected);
background-color: var(--nav-button-transparent);
}
<>
<div class="nav-container">
<nav class="navigation">
<span class="logo">Logo</span>
<div class="menu">
<button class="btn btn-nav btn-nav-selected">Home</button>
<button class="btn btn-nav">Shop</button>
<button class="btn btn-nav">What We Do?</button>
</div>
</nav>
</div>
</>
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
Good night, I am developing a project and I need that after the text "Malha Suprema - Judas" he should wrap the line for the text "ACERT" to go down, but for some reason the n works. I use the flex display and when I press it for some reason my text "Acert" loses the css. Does anyone know how I can solve this problem?
#import url("https://fonts.googleapis.com/css2?family=Oswald:wght#300;500&display=swap");
:root {
--dark: #333;
--lightDark: #444;
}
*{
margin: 0;
padding: 0;
}
body{
background: var(--dark);
touch-action: none;
}
div.musicPhoto img{
border-radius: 100%;
width: 180px;
height: 180px;
}
.btnPlayer{
display: flex;
align-items: center;
margin-left: auto;
}
div.btnPlayer .playerImg{
font-size: 80px;
color: #FFF;
}
div.btnPlayer .playerBtn{
cursor: pointer;
outline: none;
border: none;
background: transparent;
}
div.musicData{
display: flex;
align-items: center;
margin-left: 15px;
}
div.musicData p{
font-family: "Oswald", sans-serif;
}
div.musicData p:nth-child(1){
font-size: 40px;
font-weight: 500;
color: #FFF;
}
div.musicData p:nth-child(2){
font-weight: 300;
font-size: 33px;
color: #ebebeb;
}
div.musicItem{
cursor: pointer;
border-radius: 15px;
background: var(--lightDark);
width: 93%;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
padding: 15px;
margin: 2% auto;
}
<html>
<head>
<title>SpotCode</title>
<meta charset="utf-8" />
</head>
<body>
<div class="musicItem">
<div class="musicPhoto">
<img src="assets/images/3348986.jpg">
</div>
<div class="musicData">
<p>Malha Suprema - Judas</p>
<p>ACERT</p>
</div>
<div class="btnPlayer">
<button class="playerBtn">
<span class="playerImg">
<i class="far fa-play-circle"></i>
</span>
</button>
</div>
</div>
</body>
</html>
I've got the following issue. I've got a div where I'm unable to vertically align its text and also unable to place it below other divs.
My div:
<div th:text="#{mailContent.resetBtn}" style="
border: 0;
color: white;
height: 25px;
display: table-cell;
background-color: #FD8907;
cursor: pointer;
border-radius: 2px;
outline: 0;
text-align: center;
font-family: 'Rubik', sans-serif;
font-size: 16px;
padding: 50px;
display: table;
margin: 0 auto;
vertical-align: middle;
">
RESET PASSWORD
</div>
It ends up looking like this
I want it to be below the text that says "click on the following button...".
And I also find it impossible to set some padding to the text and centering it.
(Padding there is exaggeratedly set to 50px but it doesn't work anyways).
Full code:
https://pastebin.com/NqgXs4tD
Consider using <td> inside a <tr> instead of div
#title{
font-size: 25px;
font-weight: bold;
}
#pass-content {
font-style: italic;
font-family: 'Rubik', sans-serif;
color: #999;
font-size: 15px;
}
#btn-info {
padding: 20px 0 10px 0;
color: #153643;
font-family: 'Rubik', sans-serif;
font-size: 15px;
line-height: 20px;
}
#btn {
border: 0;
color: white;
height: 25px;
background-color: #FD8907;
cursor: pointer;
border-radius: 2px;
outline: 0;
text-align: center;
font-family: 'Rubik', sans-serif;
font-size: 13px;
padding: 5px;
display: table;
margin: 0 auto;
vertical-align: middle;
}
<table>
<tr id="title">
<td>Password Reset</td>
</tr>
<tr>
<td id="pass-content"> This is an email to reset the password for the account 123#gmail.com. If you don't wish to change your password please ignore this email. </td>
</tr>
<tr id="btn-info">
<td>
Click on the following button:
</td>
</tr>
<tr id="btn">
<td>RESET PASSWORD</td>
</tr>
</table>
Use flex-box as display, so you can align it horizontal and vertical.
Also you use display 2 times. And you should sort ur rules..
And because HTML5 exist you should never ever use table for design and only for tables. Did you validate your file? You open a new table tag while the old one isn't closed.
With display: flex and align-items: center you can vertically align the content elements (and text). And with order: {number} you can re-order the child elements of a flexbox element.
I am working on a website, and I am trying to make a top navigation bar. The far left link should be an image with my logo, and the other ones should navigate to different parts of the site. The button with the image lines up differently that the other ones. How can I fix that?
<div id='topbar'>
<a href='index.html' class='topbar-button-home'>
<img src='camelCaseCo_centered_cropped_notext_bold_small.png'>
</a>
<a href='index.html' class='topbar-button'>Home</a>
<a href='index.html' class='topbar-button'>2</a>
<a href='index.html' class='topbar-button'>3</a>
<a href='index.html' class='topbar-button'>4</a>
</div>
<style>
#topbar {
padding: 0;
margin: 0;
display: inline-block;
font-size: 0;
}
.topbar-button {
width: 200px;
margin: 0px;
padding: 20px;
display: inline-block;
border: solid black 1px;
border-radius: 0px;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
.topbar-button-home {
width: 50px;
margin: 0px;
padding: 8px;
border: solid black 1px;
display: inline-block;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
</style>
Thanks in advance!
What about Flexbox?
#topbar {
padding: 0;
margin: 0;
display: flex;
}
.topbar-button {
width: 200px;
margin: 0px;
padding: 20px;
display: inline-block;
border: solid black 1px;
border-radius: 0px;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
.topbar-button-home {
width: 50px;
margin: 0px;
padding: 8px;
border: solid black 1px;
display: inline-block;
text-decoration: none;
color: black;
text-align: center;
font-family: "Google Sans", sans-serif;
font-size: 14px;
}
<div id='topbar'>
<a href='index.html' class='topbar-button-home'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a>
<a href='index.html' class='topbar-button'>Home</a>
<a href='index.html' class='topbar-button'>2</a>
<a href='index.html' class='topbar-button'>3</a>
<a href='index.html' class='topbar-button'>4</a>
<a href='index.html' class='topbar-button'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a>
</div>
In the example above, all flex children will have the same height regardless of their content.
Remember, images are inline elements and so they are affected by line height. Try setting your image to diasplay block or inline-block. I see you have it on the link— move it to the image.