This website that I've been working on is giving me some problems. Whenever I give it a <a href> tag, it repositions it (the link) and changed how the text is formatted. I've excluded a lot of code from the main of the website and just added the menu bar, so it should be easier to read.
Wihtout the link:
With the link:
Here's the code:
body{
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
.menuBar {
position: sticky;
top: 0;
z-index: 1;
background-color: rgb(168, 123, 81);
}
.fa-brands, .fab{
font-size: 30px;
margin: 10px;
}
.fa-solid, .fas{
font-size: 30px;
margin: 10px;
margin-left: 10px;
}
.menuIcons{
display: flex;
flex-wrap: wrap;
flex-direction:row;
justify-content: center;
align-items: center;
}
.facebook{
font-size: 25px;
}
.menu{
font-size: 25px;
}
a.fbLink{
text-decoration:none;
color:inherit
}
<script src="https://kit.fontawesome.com/a590c06ed2.js" crossorigin="anonymous"></script>
<body>
<div class = "menuBar" id = "menuBar">
<div class = "menuIcons">
<a href = "https://www.facebook.com/benniecharmthai" class = "fbLink">
<i class="fa-brands fa-facebook"></i>
<p class = "facebook">Facebook</p>
</a>
<i class="fa-solid fa-bowl-food"></i>
<p class = "menu">Menu</p>
</div>
</div>
</body>
p elements go to the new lines (display: inline-block; by default), and you added flexbox for menuIcons to align them. The main problem is you wrap Facebook's child elements into a which makes your flexbox not work for them.
For the fix, you should add flexbox for .menuIcons > a too.
One side note, to make all containers consistent (not required), I added div to wrap Menu's elements as well
body{
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
.menuBar {
position: sticky;
top: 0;
z-index: 1;
background-color: rgb(168, 123, 81);
}
.fa-brands, .fab{
font-size: 30px;
margin: 10px;
}
.fa-solid, .fas{
font-size: 30px;
margin: 10px;
margin-left: 10px;
}
.menuIcons{
display: flex;
flex-wrap: wrap;
flex-direction:row;
justify-content: center;
align-items: center;
}
.facebook{
font-size: 25px;
}
.menu{
font-size: 25px;
}
a.fbLink{
text-decoration:none;
color:inherit
}
/* The fix is here */
.menuIcons > a, .menuIcons > div {
display: flex;
align-items: center;
}
<script src="https://kit.fontawesome.com/a590c06ed2.js" crossorigin="anonymous"></script>
<body>
<div class="menuBar" id="menuBar">
<div class="menuIcons">
<a href="https://www.facebook.com/benniecharmthai" class="fbLink">
<i class="fa-brands fa-facebook"></i>
<p class="facebook">Facebook</p>
</a>
<div>
<i class="fa-solid fa-bowl-food"></i>
<p class="menu">Menu</p>
</div>
</div>
</div>
</body>
If you don't prefer using flexbox for the fix, you can consider to use span (display: inline;) instead of p (display: inline-block;)
body {
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
.menuBar {
position: sticky;
top: 0;
z-index: 1;
background-color: rgb(168, 123, 81);
}
.fa-brands,
.fab {
font-size: 30px;
margin: 10px;
}
.fa-solid,
.fas {
font-size: 30px;
margin: 10px;
margin-left: 10px;
}
.menuIcons {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}
.facebook {
font-size: 25px;
}
.menu {
font-size: 25px;
}
a.fbLink {
text-decoration: none;
color: inherit
}
<script src="https://kit.fontawesome.com/a590c06ed2.js" crossorigin="anonymous"></script>
<body>
<div class="menuBar" id="menuBar">
<div class="menuIcons">
<a href="https://www.facebook.com/benniecharmthai" class="fbLink">
<i class="fa-brands fa-facebook"></i>
<span class="facebook">Facebook</span>
</a>
<i class="fa-solid fa-bowl-food"></i>
<span class="menu">Menu</span>
</div>
</div>
</body>
The thing which makes formatting different is both i tag and p tag are block-level elements.Which means it takes whole line to the each elemnt.And after an element it takes into a new line.
So in order to solve this you have to use a In-line element.An inline element does not start on a new line.
body{
margin: 0;
font-family: HebrewRegular;
background-color: white;
}
.menuBar {
position: sticky;
top: 0;
z-index: 1;
background-color: rgb(168, 123, 81);
}
.fa-brands, .fab{
font-size: 30px;
margin: 10px;
}
.fa-solid, .fas{
font-size: 30px;
margin: 10px;
margin-left: 10px;
}
.menuIcons{
display: flex;
flex-wrap: wrap;
flex-direction:row;
justify-content: center;
align-items: center;
}
.facebook{
font-size: 25px;
}
.menu{
font-size: 25px;
}
a.fbLink{
text-decoration:none;
color:inherit
}
<script src="https://kit.fontawesome.com/a590c06ed2.js" crossorigin="anonymous"></script>
<body>
<div class = "menuBar" id = "menuBar">
<div class = "menuIcons">
<a href = "https://www.facebook.com/benniecharmthai" class = "fbLink">
<i class="fa-brands fa-facebook"></i>
<span class = "facebook">Facebook</span>
</a>
<i class="fa-solid fa-bowl-food"></i>
<p class = "menu">Menu</p>
</div>
</div>
</body>
use span instead of p like below code:
....
<span class="facebook">Facebook</span>
....
because span has inline display style
Related
I've been coding for a while. then use Bootstrap later make me see the problem by only my first section(home) background turns white but in html background-color is black. Maybe I've used Bootstrap before, it's causing the error.enter image description here
html {
background-color: #222831;
font-size: calc(60% + 0.8vmin);
width: 100%;
height: 100%;
height: 1000px;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
.home {
display: relative;
max-width: 1000px;
min-height: 100vh;
margin-top: calc(6rem + 2rem);
margin-left: auto;
margin-right: auto;
padding: 4rem 2rem;
text-align: center;
}
.home-container {
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.home-container .media {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.home-container .media a {
font-size: 1.5rem;
}
.home-container .media a :hover {
color: #ff6768;
}
.home-container .me {
margin: 0 10px;
}
.home-container .me h2 {
font-size: 3rem;
color: #FD7013;
font-weight: 600px;;
}
.home-container .me h3 {
font-size: 1.5rem;
color: #F3AA29;
font-weight: 600px;;
}
.home-container .me p {
max-width: 380px;
font-size: 2rem;
color: #EEEEEE;
font-weight: 500px;
}
.home a {
font-size: 1.5rem;
}
.home .scroll-down i{
color: #ff6768;
font-size: 1.5rem;
margin-top: 30px;
animation: scroll-down 2s ease infinite;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<section class="home" id="home">
<div class="home-container">
<div class="media">
<a href="https://www.facebook.com/webbalaka/" target="_blank"
><i class="fa-brands fa-facebook-f"></i
></a>
<a href="https://www.instagram.com/web.wafu/" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
<i class="fa-brands fa-twitter"></i>
</div>
<div class="me">
<h2>Pasit Khumsena</h2>
<h3>SCiUS Student</h3>
<p>"Don't worry about what you can't control"</p>
</div>
<div class="pic-me">
<!-- <img src="/AnotherPort/img/IOIOIOIO.JPG" alt="" /> -->
<div style="background-color: red; width: 350px; height: 400px"></div>
</div>
</div>
<a href="#about" class="scroll-down"
>Scroll Down <i class="fa-solid fa-angles-down"></i
></a>
</section>
or perhaps caused by nav-bar high over section.
.nav-bar {
position: relative;
height: calc(4rem + 1rem);
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 0 1.25rem;
transition: 0.5s ;
}
.nav-item {
justify-content: space-around;
display: flex;
column-gap: 2rem;
}
.nav-bar h1{
font-size: 3em;
color: #ff6768;
}
.nav-item a {
font-size: 1.2em;
font-weight: 500px;
color: #EEEEEE;
}
.nav-item a:hover {
color: #F3AA29;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
<header>
<div class="nav-bar">
<div class="Portfolio">
<h1>Portfolio</h1>
</div>
<div class="nav-item">
Home
About
Education
Skill
Contact
</div>
</div>
</header>
I am currently working on a Forum website, and can't figure out how to place elements that won't be influenced by other elements' content.
For example, if I change the element content text, the other elements that are next to it will change position.
Example:
HTML and CSS from the first image:
.staff-show {
float: right;
margin-right: 10em;
margin-top: 10em;
}
.staff-show .title-staff {
font-family: Poppins-SemiBold, FontAwesome;
display: flex;
align-items: center;
justify-content: center;
}
.staff-show .title-staff i {
margin-right: 1em;
}
.staff-show .title-staff h2 {
right: 5%;
}
.staff-show .staff-list h3,
p {
margin: 0.1em;
padding: 0.1em;
}
.staff-show .staff-list .icon-border {
border: 2px solid #212e38;
border-radius: 10px;
width: 4em;
height: 4em;
display: inline-block;
}
.staff-show .staff-list i {
padding: 1.3em 0.9em;
text-align: center;
}
.staff-show .staff-list ul li {
margin: 1.2em;
}
.staff-show .staff-list .staff-info {
float: right;
margin-left: 1.5em;
}
<div class="staff-show">
<div class="staff-list">
<ul>
<li>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>Johnny Games</h3>
<p>System Admin</p>
</div>
</li>
<li>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>John Lenon</h3>
<p>Service Founder</p>
</div>
</li>
</ul>
</div>
</div>
Second image HTML and CSS:
.forum-list button {
border: 2px solid #212e38;
border-radius: 20px;
padding: 10px 40px;
width: 77em;
height: 8.5em;
font-family: Poppins-SemiBold, FontAwesome;
color: white;
margin-right: 1em;
margin-bottom: 1.5em;
display: grid;
}
.forum-list-border {
border: 2px solid #172129;
border-radius: 20px;
width: 5.7em;
height: 5.7em;
margin-top: 0.3em;
}
.forum-list i {
margin-top: 1.5em;
width: 100%;
}
.forum-list-header {
display: flex;
align-items: center;
}
.forum-list h2 {
margin-left: 2em;
}
.forum-list .forum-list.btn {
margin-bottom: 2em;
}
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
}
.forum-list-info-numbers {
display: flex;
align-items: center;
}
.forum-list-info-text {
display: flex;
align-items: center;
}
.forum-list-info-numbers h3 {
margin-right: 6.3em;
}
.forum-list-info-text p {
margin-right: 5em;
}
<div class="forum-container">
<div class="forum-list-container">
<div class="forum-list">
<button class="forum-list-btn">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers"><h3>5.1k</h3><h3>50.3k</h3></div>
<div class="forum-list-info-text"><p>Posts</p><p>Messages</p></div>
</div>
</button>
</div>
</div>
</div>
Sorry for this long code, I just want to make this as explicit as possible, so it's easier to solve.
You can use the display: flex property to achieve both results. I have added another wrapper div for the first image and added a new class on button for the second one.
.staff-show {
float: right;
margin-right: 10em;
margin-top: 10em;
}
.staff-show .title-staff {
font-family: Poppins-SemiBold, FontAwesome;
display: flex;
align-items: center;
justify-content: center;
}
.staff-show .title-staff i {
margin-right: 1em;
}
.staff-show .title-staff h2 {
right: 5%;
}
.staff-show .staff-list h3,
p {
margin: 0.1em;
padding: 0.1em;
}
.staff-show .staff-list .icon-border {
border: 2px solid #212e38;
border-radius: 10px;
width: 4em;
height: 4em;
display: inline-block;
}
.staff-show .staff-list i {
padding: 1.3em 0.9em;
text-align: center;
}
.staff-show .staff-list ul li {
margin: 1.2em;
}
.staff-show .staff-list .staff-info {
float: right;
margin-left: 1.5em;
}
.another-div {
display: flex;
}
<div class="staff-show">
<div class="staff-list">
<ul>
<li>
<div class='another-div'>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>Johnny Games</h3>
<p>System Admin</p>
</div>
</div>
</li>
<li>
<div class='another-div'>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>John Lenon</h3>
<p>Service Founder</p>
</div>
</div>
</li>
</ul>
</div>
</div>
.forum-list button {
border: 2px solid #212e38;
border-radius: 20px;
padding: 10px 40px;
width: 77em;
height: 8.5em;
font-family: Poppins-SemiBold, FontAwesome;
color: white;
margin-right: 1em;
margin-bottom: 1.5em;
display: grid;
}
.forum-list-border {
border: 2px solid #172129;
border-radius: 20px;
width: 5.7em;
height: 5.7em;
margin-top: 0.3em;
}
.forum-list i {
margin-top: 1.5em;
width: 100%;
}
.forum-list-header {
display: flex;
align-items: center;
}
.forum-list h2 {
margin-left: 2em;
}
.forum-list .forum-list.btn {
margin-bottom: 2em;
}
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
}
.forum-list-info-numbers {
display: flex;
align-items: center;
}
.forum-list-info-text {
display: flex;
align-items: center;
}
.forum-list-info-numbers h3 {
margin-right: 6.3em;
}
.forum-list-info-text p {
margin-right: 5em;
}
.d-flex-between {
display: flex !important;
justify-content: space-between;
}
<div class="forum-container">
<div class="forum-list-container">
<div class="forum-list">
<button class="forum-list-btn d-flex-between">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers">
<h3>5.1k</h3>
<h3>50.3k</h3>
</div>
<div class="forum-list-info-text">
<p>Posts</p>
<p>Messages</p>
</div>
</div>
</button>
<button class="forum-list-btn d-flex-between">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Account Boost</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers">
<h3>5.1k</h3>
<h3>50.3k</h3>
</div>
<div class="forum-list-info-text">
<p>Posts</p>
<p>Messages</p>
</div>
</div>
</button>
</div>
</div>
</div>
Your first example does this because the .staff-show .staff-list .staff-info rule is set to float: right. So, when the content in div.staff-info gets smaller, the right side of the div will remain flush with the right side of its container.
Assuming you won't have enough content to force it to wrap, you could simply do the following to keep it left-aligned with the bordered box:
.staff-show .staff-list .staff-info {
display: inline-block;
vertical-align: top;
margin-left: 1.5em;
}
However, I would suggest using a grid layout or a similar technique so that it's less likely to break if your content size or container size changes.
In your second example, just add justify-content: space-between to the .forum-list button rule.
You need to differentiate the class names for example in the first image you have both classes named as staff-info, meaning if you style the staff-info class both divs will change simultaneously.
I started a new electron project(angulat 9 : using scss), currently stuck at making custom title bar. Here is my code:
app.component.html
<div class="container">
<app-titlebar></app-titlebar>
<div id="router_outlet">
<router-outlet></router-outlet>
</div>
</div>
titlebar.component.html
html, body{
margin: 0 ;
padding: 0 ;
width: 100% ;
height: 100% ;
}
.titlebar {
display: flex;
position: relative;
border: 1px solid black ; /* for reference*/
top: 0;
left: 0;
justify-content: space-between;
height: 3rem;
flex-direction: row;
}
.window-button,
.back-button {
font-size: 12pt;
font-weight: lighter;
-webkit-app-region: no-drag;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.window-button {
padding-left: 15px;
padding-right: 15px;
}
.back-button {
padding-left: 17px;
padding-right: 17px;
}
#restore {
transform: rotate(180deg);
}
.window,
.navigation {
display: flex;
align-items: center;
}
.normal:hover {
background-color: rgba(0,0,0,0.2);
}
.danger:hover {
background-color: red;
color: white;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
<div class="navigation">
<a class="back-button normal material-icons">arrow_back</a>
<span class="apptitle">Electron-App</span>
</div>
<div class="window">
<a class="window-button normal material-icons">remove</a>
<a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
<!-- <ng-template #showRestore>
<a class="window-button normal material-icons" id="restore">flip_to_front</a>
</ng-template> -->
<a class="window-button danger material-icons">clear</a>
</div>
</div>
My question is how to fill these <a> tag entirely to their parent div element height so that on hovering these link the background area filled fully to the .titlebar height.
Set their height to full and make them flex too to allow vertical positioning of their content (they are already set to inline-block:
html, body{
margin: 0 ;
padding: 0 ;
width: 100% ;
height: 100% ;
}
.titlebar {
display: flex;
position: relative;
border: 1px solid black ; /* for reference*/
top: 0;
left: 0;
justify-content: space-between;
height: 3rem;
flex-direction: row;
}
.window-button,
.back-button {
font-size: 12pt;
font-weight: lighter;
-webkit-app-region: no-drag;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
height: 100%;
display: inline-flex !important;
align-items: center;
}
.window-button {
padding-left: 15px;
padding-right: 15px;
}
.back-button {
padding-left: 17px;
padding-right: 17px;
}
#restore {
transform: rotate(180deg);
}
.window,
.navigation {
display: flex;
align-items: center;
}
.normal:hover {
background-color: rgba(0,0,0,0.2);
}
.danger:hover {
background-color: red;
color: white;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
<div class="navigation">
<a class="back-button normal material-icons">arrow_back</a>
<span class="apptitle">Electron-App</span>
</div>
<div class="window">
<a class="window-button normal material-icons">remove</a>
<a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
<!-- <ng-template #showRestore>
<a class="window-button normal material-icons" id="restore">flip_to_front</a>
</ng-template> -->
<a class="window-button danger material-icons">clear</a>
</div>
</div>
You could make the anchor tags use display: flex:
.titlebar a,
.window a {
height: 100%;
display: flex;
align-items: center;
}
Here's the working snippet:
html, body{
margin: 0 ;
padding: 0 ;
width: 100% ;
height: 100% ;
}
.titlebar {
display: flex;
position: relative;
border: 1px solid black ; /* for reference*/
top: 0;
left: 0;
justify-content: space-between;
height: 3rem;
flex-direction: row;
}
.titlebar a,
.window a {
height: 100%;
display: flex;
align-items: center;
}
.window-button,
.back-button {
font-size: 12pt;
font-weight: lighter;
-webkit-app-region: no-drag;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.window-button {
padding-left: 15px;
padding-right: 15px;
}
.back-button {
padding-left: 17px;
padding-right: 17px;
}
#restore {
transform: rotate(180deg);
}
.window,
.navigation {
display: flex;
align-items: center;
}
.normal:hover {
background-color: rgba(0,0,0,0.2);
}
.danger:hover {
background-color: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="titlebar">
<div class="navigation">
<a class="back-button normal material-icons">arrow_back</a>
<span class="apptitle">Electron-App</span>
</div>
<div class="window">
<a class="window-button normal material-icons">remove</a>
<a *ngIf="showMaximizeButton ; else showRestore" class="window-button normal material-icons">crop_square</a>
<!-- <ng-template #showRestore>
<a class="window-button normal material-icons" id="restore">flip_to_front</a>
</ng-template> -->
<a class="window-button danger material-icons">clear</a>
</div>
</div>
I need two of my main buttons to have the same sizes, I'm still new to web development so I have no clue.
I currently have the following HTML and CSS for the index.html
<body>
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
And then created a center class and 2 different button classes.
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
This is the output:
https://leonisgeweldig.be/stackoverflow/
Give both buttons same width and reduce the font-size
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.container{
position: relative;
}
.center{
position: absolute;
top: 50%;
left: calc(50% - 210px);
color: white;
}
<body>
<div class="container">
<img height="100%" width="100%" src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
</div>
</div>
</body>
You can add a width and an align center to the classes:
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
a{text-decoration:none;}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
Avoid wrapping block level element with inline element.
Also you can define common button class for both these buttons and add another
class which defines
background color to differentiate.
so you can write HTML and css more semantic as:
.button{
padding: 20px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 150px;
text-align:center;
margin:0 10px;
color: #fff;
text-decoration: none;
}
.background-grey{
background: grey
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#" class="button">
<i class="fas fa-bell"></i>
<span> Update</span>
</a>
<a href="#" class="button background-grey">
<i class="fab fa-paypal"></i>
<span> Support the project<span>
</a>
<div>
Simply give them same width.
.button1,
.button2 {
min-width: 250px !important;
text-align: center;
font-size: 18px;
margin: 10px 15px;
box-sizing: content-box;
}
.button1 {
padding: 20px 60px;
background-color: #00B056 !important;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
a {
text-decoration: none;
color: white;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#">
<h1 class="button1"><i class="fas fa-bell" aria-hidden="true"></i> Update</h1>
</a>
<h1 class="button2"><i class="fab fa-paypal" aria-hidden="true"></i> Support the project</h1>
<div>
</div>
</div>
<div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 4 years ago.
I'm trying to move the register button from the middle to the right (as see on the following photos) Without it affecting the 3 items in the middle.
So this is what I have:
This is what I'm trying to get:
Here is my code:
body {
background-color: #323642;
}
.menubar {
justify-content: center;
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
align-items: center;
height: 100%;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button id="login_button">Register</button>
</div>
</body>
I have tried adding margin-right:auto; though it just completly shifter the button to the right and didn't leve any space between it and the window. I have also tried adding justify-content: space-between; but it didn't give me what I wanted. if anyone could help that would be greatly appreciated!
you can put the position of the button absolute like this :
#login_button {
position: absolute;
right: 10px;
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
https://jsfiddle.net/fh3cj02d/
You could use a flexbox inside a flexbox like this
body {
background-color: #323642;
}
.menubar {
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
height: 100%;
}
.left {
flex: 1;
}
.middle {
display: flex;
}
.right {
flex: 1;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
margin-right: 10px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<html>
<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<div class="left"></div>
<div class="middle">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
</div>
<div class="right">
<button id="login_button">Register</button>
</div>
</div>
</body>
</html>
I like this because it's purely flexbox, no absolute positioning or margin auto. Also the .middle div is naturally centered this way.
One way to accomplish this is to make the left margin of the first and last item auto. In this example, you would apply a left margin to .menuitem:last-of-type and #login_button.
body {
background-color: #323642;
}
.menubar {
justify-content: center;
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
align-items: center;
height: 100%;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 12px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
.menuitem:first-of-type {
margin-left: auto; /* NEW */
}
#login_button {
margin-left: auto; /* NEW */
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 12px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button id="login_button">Register</button>
</div>
</body>
I think you can just edit your body this way:
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button class="festa" id="login_button">Register</button>
</div>
and add this css class:
.festa {
position: absolute;
right: 0px;
}
This will keep the 3 buttons in the perfect center of the screen and the register one to the right, but they will overlap onto small screens.
This is the fiddle: https://jsfiddle.net/5xbnhkcr/
Otherwise you can play with flexbox weights (this is similar to your desired result)
modify body this way:
<body>
<div class="menubar" id="hey">
<div class="buttons">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
</div>
<button class="festa" id="login_button">Register</button>
</div>
and add those css classes:
.buttons {
flex: 9;
justify-content: center;
display: flex;
flex-direction: row;
}
.festa {
flex: 1;
}
Using flex: 9; and flex: 1; will divide the div into 10 parts.
The part containing the 3 buttons will occupy 9/10 of the width and the register button 1/10.
here's the fiddle: https://jsfiddle.net/e5hp2v7L/