I am trying to get the Z to come in the middle of the cricle but I am not sure why its not coming in the middle. My code outputs this
<li class="avatar"><span class="profile-initials">Z</span></li>
This is the CSS I have on my application
.avatar {
vertical-align: middle;
width: 20px;
background-color: white;
height: 25px;
border-radius: 50%;
padding-left: 18px;
padding-bottom: 10px;
float: right;
margin: 10px;
}
.profile-initials {
margin-right: 2px;
}
It is hard to tell without looking at all of your code but the CSS could be much simpler using something like flexbox.
As for your code it seems your padding left and padding bottom are pushing it out of the frame and your and the border radius just makes it look like its outside of the circle.
Here is what I quickly came up with I hope it helps.
li {
background-color: #000;
color: #fff;
width: 300px;
height: 50px;
display: flex;
align-items: center;
}
.name {
flex-grow: 2;
padding-left: 18px;
}
.icon {
margin-right: 18px;
background-color: #fff;
padding: 10px;
color: #000;
border-radius: 50%;
}
<ul>
<li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>
Related
We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.
.chat-container {
background: #fff;
height: 100%;
overflow: hidden;
padding: 0;
border-right: 1px solid #d8dada;
border-left: 1px solid #d8dada;
}
.chat-container>div:last-of-type {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
body>div>div>div:nth-child(2)>span {
background: #dadada;
padding: 10px;
font-size: 21px;
border-radius: 50%;
}
body>div>div>div.message-data-right.macro {
margin: auto;
margin-left: 1%;
}
.chat-header {
background-color: #ffffff;
height: 3.5rem;
line-height: 3.5rem;
color: #000000;
border-bottom: 1px solid #000000;
position: relative;
}
.chat-header-content {
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.header-img {
height: 24px;
width: 106px;
transform: scale(0.85);
vertical-align: middle;
content: url('./../images/vz_logo.svg');
}
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
}
.chat-ul {
width: 100%;
list-style-type: none;
padding: 18px 18px 3px 18px;
position: absolute;
bottom: 62px;
display: flex;
flex-direction: column;
top: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #909296 #dee0e2;
background-color: #f6f6f6;
margin-bottom: 0%;
border-bottom: 1px solid #c1c1c1;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
width: 100%;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.text>p:first-of-type {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p:last-of-type {
width: 100%;
text-align: right;
margin-bottom: -2px;
margin-top: auto;
}
.text-right {
float: right;
font-family: Arial;
position: relative;
}
.send-message {
width: 100%;
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<header class="chat-header">
<img class="header-img" />
<button type="button" class="icon-close" onClick="closeChatWindow()"></button>
</header>
<ul class="chat-ul"></ul>
<div>
<div class="send-message">
<div class="text text-right">
<input class="entered-text" />
</div>
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.
At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.
You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.
Remove the float (.text-right) from the layout
Take the 100% width off the input and .send-message
Move the flex class up a level to contain both the input and the button
I've also added some left margin to the button.
I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
margin-left: 10px;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.send-message {
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<div class="send-message">
<div class="text">
<input class="entered-text" />
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:
e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))
Example:
#send {
display: inline-block;
width: 100px;
margin-left: 12px;
box-sizing: border-box;
}
.entered-text {
display: inline-block;
width: calc(100% - 12px - 100px);
box-sizing: border-box;
}
Im no expert but should you put a <br> in the div
edit:
line breaks are usually unnecessary so I would say only use this temporary until you find the solution
So I have two boxes:
https://jsfiddle.net/anaegm/trajtmgf/
My original intention was to make box-1 expand its height from the top and bottom when you hovered over it (as opposed to just "growing down" by adding padding), so I added a negative margin-top under the :hover to achieve this effect, and it works.
The problem is that box-2 below gets pushed down when you hover over box-1, and I need the second box to stay in its original position at all times. I tried adding a margin at the top of box-2, but this doesn't work. What are my options?
EDIT: Since I'm working with dynamic text for the actual page I'm doing, I'd rather not use a set height for a div container for box-1.
#box-1 {
color: #fff;
background-color: #e91d23;
text-align: center;
cursor: pointer;
width: 100px;
padding-top: 30px;
padding-bottom: 30px;
}
#box-1:hover {
background-color: #5A5A5A;
margin-top: -10px;
padding-top: 40px;
padding-bottom: 40px;
}
#box-2 {
width: 100px;
background-color: white;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 50px;
}
<div id="box-1">
Box 1
</div>
<div id="box-2">
Box 2
</div>
Use absolute positioning.
#box-1 {
position: absolute;
color: #fff;
background-color: #e91d23;
text-align: center;
cursor: pointer;
width: 100px;
padding-top: 30px;
padding-bottom: 30px;
}
#box-1:hover {
background-color: #5A5A5A;
margin-top: -10px;
padding-top: 40px;
padding-bottom: 40px;
}
#box-2 {
position: absolute;
width: 100px;
background-color: white;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
top: 100px;
}
<div id="box-1">
Box 1
</div>
<div id="box-2">
Box 2
</div>
I hope this was what you were trying achieve.
I have a so solution for you but i think this is not dynamic. take a look: https://jsfiddle.net/trajtmgf/1/
#box-1:hover + #box-2{
margin-top: 40px;
}
another approach without using positioning
#box-1 {
color: #fff;
background-color: #e91d23;
text-align: center;
cursor: pointer;
width: 100px;
margin-top: 10px;
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 10px;
}
#box-1:hover {
background-color: #5A5A5A;
margin-top: 0;
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 0px;
}
#box-2 {
width: 100px;
background-color: white;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
#avoid-margin-collapse {
/* avoid margin collapse (e.g. with a border, a padding, position) */
padding: 1px;
}
<div id="avoid-margin-collapse">
<div id="box-1">
Box 1
</div>
<div id="box-2">
Box 2
</div>
</div>
I'm trying to put divs side by side, but it's not working. One is inline, and the next one is down a little bit and a little bit to the right.
My code:
.FifteenInfo {
display: inline;
margin-top: 50px;
height: auto;
padding-right: 75px;
float: left;
}
.FourtyInfo {
display: inline;
margin-top: 50px;
height: auto;
padding-right: 75px;
}
.SixtyInfo {
display: inline;
margin-top: 50px;
height: auto;
padding-right: 75px;
}
.Package {
padding-left:70px;
margin-top: 15px;
}
.monthlyPrice {
padding-left:55px;
font-size:52px;
font-weight: bold;
color: #277FD8;
}
.differentbandwidth {
margin-left: 30px;
display: inline;
text-align: center;
padding: 15px;
border-style: solid;
border-color: #277FD8;
border-width: 3px;
border-radius: 8px;
}
.border {
border-left: thick solid #277FD8;
display: inline;
float: right;
}
.FifteenSpecs {
display: inline;
float: right;
}
<div class="FifteenInfo">
<h1 class="Package">Cable 15</h1>
<h3 class="monthlyPrice">\$39.99</h3>
<h3 class="differentbandwidth">\$69.99 Unlimited</h3>
<div class="FifteenSpecs border">
<h1>Cable 156666666666666666666666</h1>
<h3>\$39.99</h3>
<h3>\$69.99 Unlimited</h3>
</div>
</div>
Here's my image of the issue:
I'm completely lost, I've tried inline, and inline-block display times and they don't work.
So then I watched a couple of YouTube videos to brush up on display properties but it didn't work.
You mentioned in your comment that you wanted to make .FifteenSpecs.border display next to (inline with) .FifteenInfo.
The main problem then is simply that you have your .FifteenSpecs div inside your .FifteenInfo one, and hence it is displaying inside .FifteenInfo. Simply move it outside, like so:
body, html {
min-width: 1000px;
}
.FifteenInfo {
display: inline-block;
height: auto;
background-color: green;
vertical-align: top;
}
.monthlyPrice {
font-size:52px;
font-weight: bold;
color: #277FD8;
}
.differentbandwidth {
text-align: center;
border-style: solid;
border-color: #277FD8;
border-width: 3px;
border-radius: 8px;
}
.FifteenSpecs {
display: inline-block;
background-color: red;
vertical-align: top;
}
<div class="FifteenInfo">
<h1 class="Package">Cable 15</h1>
<h3 class="monthlyPrice">\$39.99</h3>
<h3 class="differentbandwidth">\$69.99 Unlimited</h3>
</div>
<div class="FifteenSpecs border">
<h1>Cable 156666666666666666666666</h1>
<h3>\$39.99</h3>
<h3>\$69.99 Unlimited</h3>
</div>
Some other things I changed in your code:
Changed inline to inline-block so that it retains the box model
Removed all the padding, margin: this really cluttered it up
Removed floats: inline-block will already make it "float" left.
Added vertical-align: top to make the top of the divs line up (as opposed to the bottom)
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
I am having a small issue with some html code. I am trying to create a sample document for sparkle release notes, so I created some highlighted boxes containing either "fixed","added" or "improved", and then on the right should go the release notes. What instead happens is that the 'something' word gets pushed onto a new line like a new item but without the dot at the beginning. Is there a way to push it up on the same line as the box??
This is what I have so far:
Index.html
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>Release Notes</title>
<body>
<ul>
<li><span class='fixed-square'>Fixed</span>Something</li>
<li><span class='added-square'>Added</span></li>
<li><span class='improved-square' >Improved</span></li>
</ul>
</body>
style.css
.fixed-square {
background-color: #0f0;
color: white;
display: block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
.added-square {
background-color: red;
color: white;
display: block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
.improved-square {
background-color: blue;
color: white;
display: block;
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
body {
font-family: Verdana;
font-size: 10pt;
}
Thank you in advance!
EDIT:
Thank you very much to all of you, for the quick answer. To recap I went from this:
.improved-square {
background-color: blue;
color: white;
display: block;
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
to this:
.improved-square {
background-color: blue;
color: white;
display: inline-block; <----------
height: 20px;
width: 80px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
change display: block on display: inline-block
Use display: inline-block; instead of display: block;.
Swap out the display:block for display:inline-block
JSFiddle
.fixed-square {
background-color: #0f0;
color: white;
display: block; // this is actually sending something in second line try adding display: inline-block;
height: 20px;
width: 60px;
border-radius: 5px;
line-height: 20px;
text-align: center;
}
Please see this link Demo
You have to add in css like
ul li
{
display:inline;
float : left;
margin :5px;
}
use inline-block
[spam link removed]