How to move up this picture next to the text "EMAIL :"

How to move up this picture next to the text "EMAIL :" - html

I want to move the photo to top of the site and next to the text: "EMAIL :" Create a BITLAB NEWS layout web page using HTML + CSS
.top-bar {
background-color: #00008B;
color: white;
display: flex;
justify-content: space-between;
padding: 10px;
}
.top-bar .left {
color: white;
font-weight: bold;
font-size: 20px;
}
.top-bar .right {
color: white;
}
.login-bar {
display: flex;
justify-content: flex-start;
padding: 10px;
}
.login-bar .left {
color: black;
}
.input {
padding-left: 10px;
margin-bottom: 20px;
}
.password-bar {
display: flex;
justify-content: flex-start;
}
.password-bar .left {
color: black;
padding-left: 10px;
}
.input2 {
padding-left: 10px;
padding-top: 10px;
}
.button {
background-color: green;
margin-top: 20px;
margin-left: 10px;
color: white;
width: 60px;
border-radius: 5px;
height: 15px;
font-size: 12px;
text-align: center;
padding: 10px;
}
.blue {
color: #0000FF;
}
.center {
float: left;
width: 33.33%;
padding: 5px;
margin-left: 300px;
margin-bottom: 800px;
}
<div class="top-bar">
<div class="left">BITLAB NEWS</div>
<div class="right">About Contacts FAQ Login </div>
</div>
<body>
<div class="login-bar">
<div class="left">EMAIL :</div>
</div>
<div class="input"><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
</div>
<div class="password-bar">
<div class="left">PASSWORD :</div>
</div>
<div class="input2"><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
</div>
<div class="button">
<div class="signin-btn">SIGN IN</div>
</div>
<p> I want to create <span class="blue">new account</span></p>
<div class="center">
<p>Boeing 777: Dozens grounded after Denver engine failure</p>
<img src="3a.jpg" style="width: 100%;">
</div>
</body>

Try using a flexbox
.top-bar {
background-color: #00008B;
color: white;
display: flex;
justify-content: space-between;
padding: 10px;
}
.top-bar .left {
color: white;
font-weight: bold;
font-size: 20px;
}
.top-bar .right {
color: white;
}
.login-bar {
display: flex;
justify-content: flex-start;
padding: 10px;
}
.login-bar .left {
color: black;
}
.input {
padding-left: 10px;
margin-bottom: 20px;
}
.password-bar {
display: flex;
justify-content: flex-start;
}
.password-bar .left {
color: black;
padding-left: 10px;
}
.input2 {
padding-left: 10px;
padding-top: 10px;
}
.button {
background-color: green;
margin-top: 20px;
margin-left: 10px;
color: white;
width: 60px;
border-radius: 5px;
height: 15px;
font-size: 12px;
text-align: center;
padding: 10px;
}
.blue {
color: #0000FF;
}
.login-flex{
display: flex;
}
<body>
<div class="top-bar">
<div class="left">BITLAB NEWS</div>
<div class="right">About Contacts FAQ Login </div>
</div>
<div class="login-flex">
<div class="login-container">
<div class="login-bar">
<div class="left">EMAIL :</div>
</div>
<div class="input"><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
</div>
<div class="password-bar">
<div class="left">PASSWORD :</div>
</div>
<div class="input2"><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
</div>
<div class="button">
<div class="signin-btn">SIGN IN</div>
</div>
<p> I want to create <span class="blue">new account</span></p>
</div>
<div class="right-side">
<p>Boeing 777: Dozens grounded after Denver engine failure</p>
<img src="3a.jpg" style="width: 100%;">
</div>
</div>
</body>

I'm not quite sure of the positioning you want, but you can easily obtain your result by using display: flex
You can check some documentation about it here on css-tricks and practice with this quick mini game
flexboxfroggy so that you can obtain the result you want.
.top-bar {
background-color: #00008B;
color: white;
display: flex;
justify-content: space-between;
padding: 10px;
}
.top-bar .left {
color: white;
font-weight: bold;
font-size: 20px;
}
.top-bar .right {
color: white;
}
.login-bar {
display: flex;
width: 90%;
justify-content: space-between;
align-items: flex-start;
flex-direction: row;
padding: 10px;
}
.login-bar .left {
color: black;
}
.input {
padding-left: 10px;
margin-bottom: 20px;
}
.password-bar {
display: flex;
justify-content: flex-start;
}
.password-bar .left {
color: black;
padding-left: 10px;
}
.input2 {
padding-left: 10px;
padding-top: 10px;
}
.button {
background-color: green;
margin-top: 20px;
margin-left: 10px;
color: white;
width: 60px;
border-radius: 5px;
height: 15px;
font-size: 12px;
text-align: center;
padding: 10px;
}
.blue {
color: #0000FF;
}
<div class="top-bar">
<div class="left">BITLAB NEWS</div>
<div class="right">About Contacts FAQ
Login </div>
</div>
<body>
<div class="login-bar">
<div>
<div class="left">EMAIL :</div>
<div class="input"><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
</div>
<div class="password-bar">
<div class="left">PASSWORD :</div>
</div>
<div class="input2"><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
</div>
<div class="button">
<div class="signin-btn">SIGN IN</div>
</div>
<p> I want to create <span class="blue">new account</span></p>
</div>
<div>
<p>Boeing 777: Dozens grounded after Denver engine failure</p>
<img src="https://nationwideradiojm.com/wp-content/uploads/2021/02/Capture-2.jpg" style="width: 120px;">
</div>
</div>
</body>

Related

How to align a form in the center of the page?

With the following code, it shows me that the form is centered on its right side which isn't what I'm going for. I struggle to align the form in the center of the page from the center of the form. I added the HTML and CSS so you can see what it looks like. I hope someone can help resolve this problem :')
.contacter {
width: 90%;
margin: 5%;
text-align: center;
padding-top: 0px;
}
.contacter h1 {
font-size: 36px;
font-weight: 700;
text-align: center;
color: rgb(255, 255, 255);
}
/*formulaire -------------------------------------------------------------------------*/
.formulaire {
text-align: center;
margin: 5%;
padding-top: 0;
width: 90%;
}
.row {
text-align: center;
}
.form {
max-width: 50%;
margin-bottom: 1rem;
}
.form {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 10px;
align-items: center;
}
#message {
height: 200px;
}
.btn {
border-radius: 10px;
height: 50px;
background-color: #9BA7C0;
border-color: transparent;
width: 175px;
font-size: 1rem;
}
div.frm {
display: block;
text-align: center;
}
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
<section>
<div class="boite-1">
<section class="contacter">
<h1>CONTACTER L'ETUDE</h1>
<div class="formulaire">
<form class="frm">
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="nom" id="nom" placeholder="Nom*">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="societe" id="societe" placeholder="Société">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="mail" id="mail" placeholder="Adresse mail*">
</div>
</div>
<div class="row">
<div class="frm-col">
<input type="text" class="form" name="tel" id="tel" placeholder="Téléphone*">
</div>
</div>
<div class="row">
<div class="frm-col">
<textarea class="form" name="message" id="message" cols="30" rows="7" placeholder="Message*"></textarea>
</div>
</div>
<div class="row">
<div class="sbmt">
<input type="submit" value="Envoyer la demande" class="btn">
<span class="demande envoyée"></span>
</div>
</div>
</form>
</div>
</section>
</div>
</section>

you can use
.frm-col {
display: flex;
justify-content: center;
}

In Your css file replace the .contacter with this below
.contacter {
width: 90%;
margin: 5%;
text-align: center;
padding-top: 0px;
width:100%;
display: flex;
align-items: center;
justify-content: center;
}
This will solve your issue
for more info on flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.formulaire{
margin: auto;
padding-top: 0;
width: 90%; // try using a fixed with if it is still not working
}
or
.frm-col{
display: flex;
justify-content: center;
}

Stop element's position being influenced by other elements' content

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.

Making the cart design mobile compatible as desired

I am a junior developer and I am trying to create a cart page design for a store.
As you can see in the screenshots, I have completed the majority in desktop design.
The design I have to do: https://gyazo.com/2de152ba832ad4fafffa78d6900c6a67
The design I made: https://gyazo.com/ad387f7c61db2c355765ceaec1f29983
But I cannot create the desired structure in mobile design.
The design I have to do: https://gyazo.com/849bbb190fc312460c16254a322b5d0f
The design I made: https://gyazo.com/5569721f101b34f3530fcbe368fce5fd
How can I code the mobile design as desired?
You can also check it from the link.
https://bee-and-you-development.myshopify.com/cart
HTML
{{ 'cart.scss.css' | asset_url | stylesheet_tag }}
<div class="cart">
<div class="container">
<div class="b_cart">
<div class="cart__items">
<h2 class="fs-20 fw-b tt-u pb-30">Ihr Warenkorb</h2>
<div class="cart__products">
<div class="cart__row cart__header bb--grey fs-14">
<div class="f-2"></div>
<div class="f-5">Artikel</div>
<div class="f-3">Preis</div>
<div class="f-2">Menge</div>
<div class="f-1">Summe</div>
<div class="f-1"></div>
</div>
<div class="cart__product cart__row bb--grey middle">
<div class="cart__productImage"><img style="max-height: 100px; align-content: center;" src="https://cdn.shopify.com/s/files/1/0306/6557/2492/products/13.jpg?v=1578655357" alt=""></div>
<div class="cart__productTitle f-5 fw-b px-1">Gelée Royale Blütenpollen Propolis (Kautabletten)</div>
<div class="cart__productPrices f-3 px-1"><span class="fw-b">€63,91</span> <span class="fw-b td-o fc-g">€63,91 </span><br /> <span class="fw-b fc-g fs-12 ta-r">€536,72/kg</span></div>
<div class="cart__productQty f-2 px-1">Menge</div>
<div class="cart__productPrice f-1 fw-b px-1">€127,91</div>
<div class="cart__productDelete f-1 ta-r">X</div>
</div>
<div class="cart__row bb--grey">
</div>
<div class="cart__row bb--grey">
</div>
</div>
<div>
Weiter einkaufen
</div>
</div>
<div class="cart__summary fw-b">
<h2>Gesamtsumme</h2>
<div class="cart__price">
<div class="cart__row">
<div>Zwischensumme</div>
<div>€172,56</div>
</div>
<div class="cart__row red">
<div>Rabatt</div>
<div>€8,56</div>
</div>
<hr />
<div class="cart__row">
<div class="cart__priceText">Summe</div>
<div class="cart__priceNumber fs-20">€163,91</div>
</div>
<div class="cart__row fs-12 pb-30">
<div>Kostenloser versand ab €34,99</div>
</div>
</div>
<div class="cart__checkboxes">
<div class="cart__agreement pb-10"><input type="checkbox" class="input-checkbox limoniapps-discountninja-checkout-checkbox" value="1" data-message="{{ section.settings.sales_agreement_message}}" >{{ section.settings.sales_agreement_text}}</div>
<div class="cart__marketing">
<div><input type="checkbox" class="input checkbox allow-marketing" /></div>
<div>Bitte halten Sie mich per E-Mail und Text-Nachrichten über Neuigkeiten und exklusive Angebote auf dem Laufenden.</div>
</div>
</div>
<div class="cart__checkout">
<div>
<input class="cart__checkoutButton button fw-b" type="submit" name="checkout"value="{{ section.settings.checkout }}">
</div>
</div>
</div>
</div>
</div>
</div>
SASS
.b_cart {
display: flex;
min-height: 100%;
h2 {
margin: 0;
}
.button {
display: block;
width: 100%;
border: none;
padding: 10px;
cursor: pointer;
text-align: center;
}
.cart__items {
flex: 8;
padding: 30px;
/* debug */
height: 300px;
}
.cart__productImage{
flex: 2;
}
.cart__productTitle{
flex: 5;
}
.cart__header {
font-size: 14px;
font-weight: bold;
}
.cart__summary {
flex: 4;
padding: 30px;
border: 1px solid #ADADAD;
/* debug */
}
.cart__row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.cart__checkboxes{
font-size: 12px;
}
.cart__products {
margin: 0;
}
.cart__marketing{
display: flex;
margin-top: 10px;
}
.bb--grey {
border-bottom: 1px solid #adadad;
}
.cart__price {
padding-top: 20px;
}
.cart__productImage{
height: 100px;
}
.cart__checkout{
padding-top: 20px;
}
.cart__checkoutButton{
font-weight: bold;
text-transform: uppercase;
background-color: #ffd500;
border-style: none;
border-radius: 25px;
}
.cancelIcon{
background: url('https://cdn.shopify.com/s/files/1/0306/6557/2492/files/cancel.png?v=1605348792');
height: 40px;
width: 40px;
}
.px-1 {
padding-left: 5px;
padding-right: 5px;
}
.f-1 {
flex: 1;
}
.f-2 {
flex: 2;
}
.f-3 {
flex: 3;
}
.f-4 {
flex: 4;
}
.f-5 {
flex: 5;
}
.fs-12 {
font-size: 12px;
}
.fs-14 {
font-size: 14px;
}
.fs-20 {
font-size: 20px;
}
.fw-b {
font-weight: bold;
}
.fc-g {
color: #adadad;
}
.middle{
margin-top: auto;
margin-bottom: auto;
}
.ta-r {
text-align: right;
}
.ta-l {
text-align: left;
}
.td-o{
text-decoration: line-through;
}
.pb-10 {
padding-bottom: 10px;;
}
.pb-30 {
padding-bottom: 30px;;
}
.tt-u {
text-transform: uppercase;
}
.red {
color: #FF0102;
}
}
#media screen and (max-width: 992px) {
.b_cart {
display: block;
.cart__summary {
margin-top: 25px;
padding: 0px;
border: none;
}
.cart__row {
padding: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.cart__header{
display: none;
}
.cart__items {
padding: 0px;
}
.cart__productImage{
flex: 4;
}
.cart__productTitle{
flex: 8;
}
}
}
I would appreciate it if you could support, thank you.

Need help getting the correct layout

I have some problems laying out my elements. I tried to achieve the following layout in my web application:
I tried to use div´s and style them but it looks like this when I run it
I wanted to create a grid with three container in each row. Also for responsiveness I used flexbox.
Any suggestions how the layout could improve? I think I messed it up a little.
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 0 32%;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
padding: 1.4em;
float: left;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
float: right;
}
.contactDetails {
float: left;
}
.contactDetails img {
width: 50px;
height: 50px;
}
#contact .contact-buttons {
position: absolute;
bottom: 0;
left: 0;
}
/* Using flexbox with media queries to make the layout responsive*/
#media screen and (min-width: 40em) {
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -1em;
}
.contact-info {
display: flex;
flex: 0 1 calc(50% - 0.5em);
margin-bottom: 1em;
}
}
#media screen and (min-width: 60em) {
.contacts-container {
margin-top: inherit;
}
.contact-info {
flex: 0 1 calc(33% - 1em);
margin-bottom: 2em;
}
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>

.contacts {
width: 300px;
padding: 40px;
border: 1px solid black;
}
.contact {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.contact .contactInfo {
display: flex;
margin-bottom: 30px;
}
.contact .contactInfo img {}
.contact .contactInfo .contactName {
margin: auto 0;
margin-left: 30px;
}
.contact .contactDetails {
margin-bottom: 30px;
border: 1px solid black;
}
.contact .contactDetails div {
display: flex;
margin: 10px;
}
.contact .contactDetails div p {
margin-left: 30px;
}
.contact .contact-buttons {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img src="https://via.placeholder.com/150" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>

.contact {
margin-bottom: 5px;
border: 1px solid #ddd;
padding: 10px;
}
.contactInfo {
display: flex;
align-items: center;
}
.contactDetails {
border: 1px solid #ddd;
padding: 10px;
}
.contactDetailsRow {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.contactName,
.contactDetailsRowName {
flex: 1;
padding-left: 10px;
}
.contact-buttons {
display: flex;
}
.contact-buttons > button {
flex: 1;
margin: 10px;
}
<div class="contact">
<div class="contactInfo">
<div>
<img src="https://via.placeholder.com/100" />
</div>
<div class="contactName">
<h5>Prename Surname</h5>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
</div>
<div class="contact-buttons">
<button>Add 1</button>
<button>Add 1</button>
</div>
</div>

Been a while but something like this?
:root {
--baseMargin: 1.4em;
--buttonBorderRadius: 0.5em 0.5em 0.5em 0.5em;
--paddingBaseFill: calc(var(--baseMargin) * 2);
}
.contactInfo img {
min-width: 10em;
}
.contacts-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 1;
display: flex;
flex-direction: column;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.wrapper {
margin: 0 var(--baseMargin);
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
flex: 1 1;
display: flex;
padding: var(--paddingBaseFill) 0;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
flex: 1 1;
margin-left: var(--baseMargin);
text-align: center;
}
.contactDetails {
flex: 1 1;
padding: 1em;
border: 0.1em solid black;
}
.contactDetails div {
display: flex;
align-items: center;
}
.contactDetails img {
width: 50px;
height: 50px;
padding: 0.5em;
}
.contact-buttons {
flex: 1 1;
display: flex;
justify-content: space-between;
padding: var(--baseMargin) 0;
}
.contact-buttons button {
font-size: 1.2em;
background: #018bff;
border-radius: var(--buttonBorderRadius);
padding: 0.25em;
color: #fff;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo wrapper">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails wrapper">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons wrapper">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>

align a div to the left a header to the center and a div to right horizontally

I have a css header that has a div, a h1 and a div. I am having a challenge of aligning the div content to the left, the header to the center and the second div to the right horizontally with content of the second div placed on top of one another.
css snippets
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom:3px;
padding: 2px;
text-align: center;
width: 100%x;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
html snippets
<div id="header">
<div style="float:left; margin-left:40px;">
<img src="${contextPath}/resources/images/chat1.png" width="496" height="90"/>
</div>
<h3 align="center"><strong>Chat Panel</strong></h3>
<div align="right">
<img src="${contextPath}/resources/images/chat2.png" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat"/>
</form>
</div>
</div>
bellow is the illustration of what I am trying on
div content h1 content second div
kindly assist!

Maybe like this, where you use flex to line them up
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom: 3px;
padding: 2px;
text-align: center;
width: 100%x;
display: flex;
}
#header * {
flex: 1;
}
#header div:last-child {
text-align: right;
}
#header h3 {
margin-top: 35px;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
<div id="header">
<div>
<img src="http://placehold.it/200x50/f00" width="296" height="90" />
</div>
<h3 align="center"><strong>Chat Panel</strong></h3>
<div>
<img src="http://placehold.it/50x50/ff0" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat" />
</form>
</div>
</div>
Can be done with display: table-cell if you need to target older browsers
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom: 3px;
padding: 2px;
text-align: center;
width: 100%;
display: table;
}
#header * {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
<div id="header">
<div>
<img src="http://placehold.it/200x50/f00" width="296" height="90" />
</div>
<h3 align="center"><strong>Chat Panel</strong></h3>
<div>
<img src="http://placehold.it/50x50/ff0" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat" />
</form>
</div>
</div>

I believe that this is what you want:
#header {
text-align: center;
}
#leftDiv {
float: left;
display: inline;
}
#leftImage {
height: 50px;
width: 200px;
}
h3 {
display: inline;
}
#rightDiv {
float: right;
display: inline;
}
#rightImage {
height: 50px;
width: 100px;
}
#leaveChat {
position: relative;
bottom: 40px;
}
<div id="header">
<div id="leftDiv">
<img id="leftImage" src="${contextPath}/resources/images/chat1.png" />
</div>
<h3>
Chat Panel
</h3>
<div id="rightDiv">
<img id="rightImage" src="${contextPath}/resources/images/chat2.png" />
<form method="post" action="/logout">
<input id="leaveChat" type="submit" value="Leave Chat"/>
</form>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/bbh4qpwm/

How about that:
#header {
height: 166px;
background-color: #ccc;
font-weight: bold;
color: black;
margin-bottom:3px;
padding: 2px;
text-align: center;
width: 100%x;
}
#footer {
height: auto;
background-color: #ccc;
font-size: 20px;
font-weight: bold;
color: black;
margin-top: 3px;
padding: 2px;
text-align: center;
width: 100%x;
}
<div id="header">
<div style="float:left; margin-left:40px;">
<img src="${contextPath}/resources/images/chat1.png" width="496" height="90"/>
</div>
<h3 style="float:left"><strong>Chat Panel</strong></h3>
<div style="float:right">
<img src="${contextPath}/resources/images/chat2.png" />
<form method="post" action="/logout">
<input type="submit" value="Leave Chat"/>
</form>
</div>
</div>
https://jsfiddle.net/d05Lcn1m/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to move up this picture next to the text "EMAIL :" - html

Related

How to align a form in the center of the page?

Stop element's position being influenced by other elements' content

Making the cart design mobile compatible as desired

Need help getting the correct layout

align a div to the left a header to the center and a div to right horizontally

Categories

Resources