I am currently working on a forum project, and had some problems with the CSS styling.
I am trying to position text into a HTML button, I managed to position one part of the text correctly, but the other part can't be positioned as the first, even if the CSS and HTML code is the same.
I tried wrapping the elements in a div, and somehow, I never manage to get them displayed into the button, even with margin-bottom.
Here the HTML Code:
<button>
<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">
<h3>5.1k</h3><h3>50.3k</h3>
<p>Posts</p><p>Messages</p>
</div>
</button>
Here is the CSS code:
.forum-container { /* This is wrapped around the button elements */
position:absolute;
left:18%;
margin-top:42em;
font-family: Poppins-SemiBold, FontAwesome;
}
.forum-list-container { /* This is wrapped around the button elements */
margin-top:3em;
}
.forum-list button {
background-color: #172129;
border: 2px solid #212e38;
border-radius: 10px;
padding: 10px 40px;
width:80em;
height: 10em;
font-family: Poppins-SemiBold, FontAwesome;
color:white;
margin-right: 1em;
display:block;
margin-bottom: 2em;
}
.forum-list-header { /* Text aligned left, perfectly placed, won't work with the other text */
display:flex;
align-items:center;
}
.forum-list h2 {
margin-left:2em;
}
.forum-list .forum-list.btn {
margin-bottom:2em;
}
.forum-list-info {
/* Here should be the code to position it. */
}
.forum-list-info {
display: flex;
align-items: center;
justify-content: space-around;
}
//add this style to your css
<button>
<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>
<h3>5.1k</h3>
<p>Posts</p>
</div>
<div>
<h3>50.3k</h3>
<p>Messages</p>
</div>
</div>
</button>
//and replace this html code. you can get what you want.
Should make each of those its own div, then style that div.
<button>
<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><h3>5.1k</h3><p>Posts</p></div>
<div><h3>50.3k</h3><p>Messages</p></div>
</div>
</button>
Fix for this:
I edited my CSS classes to:
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
margin-left: 17em;
}
.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;
font-size:1.2em;
}
.forum-list-info-text p {
margin-right:5em;
font-size:1.2em;
color:#a6afb6;
}
And my HTML:
<button>
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-rocket 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>
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
Just a simple css question. Trying to move the price next to the "Quick Shop" text. Basically trying to mirror this design:
.quick_shop_container{
width:100%;
}
.quick_shop{
background-color:white;
display:inline-block;
}
.quick_shop_text{
float:left;
}
.product-item-price{
float:left;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>
How do I move it?
Although flexbox is always better for 1D design. You can make your div inline-block so items it is inline.
Target it using > div, since you do not have a class. And add float : right to it.
.quick_shop_container{
width:40%;
}
.quick_shop{
background-color:white;
width: 100%;
}
.quick_shop > div{
display:inline-block;
float:right;
}
.quick_shop_text{
float:left;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>
I am not sure if you are supposed to use float, because of Browser Compatibility etc.. but if not, I guess this would be the solution.
.quick_shop_container{
width:100%;
}
.quick_shop{
background-color:white;
display:inline-block;
display: flex;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>
Add display:flex to the .quick_shop class
https://jsfiddle.net/k7jr4cwv/
Until you style it differently, a <div> is always a block-level element.
This leads an unstyled <div> to occupy its own vertical space within the document flow, beneath what has gone before.
In this case, we want to override that standard behaviour - so we can tell the <div> elements to display as if they are inline elements:
div[data-price-wrapper],
div[data-product-price] {
display: inline;
}
Working Example:
div[data-price-wrapper],
div[data-product-price] {
display: inline;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="">
<div class="product-item-price price" data-product-price="">| £51.95</div>
</div>
</button>
</div>
You can do it using flexbox.
.quick_shop {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 500px;
padding: 20px;
background-color: white;
border: 2px solid #ccc;
font-size: 30px;
font-family: sans-serif;
}
.product-item-price {
border-left: 2px solid #ccc;
padding-left: 20px;
}
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<span class="product-item-price price">£51.95</span>
</button>
Try this. This will give you the same design without using the "|" character insertion.
.quick_shop_container{
width:200px; // this is container width
}
.quick_shop{
background-color:white;
display:inline-block;
width: 100%;
padding: 0.5rem;
border: solid 0.15rem #ccc;
}
.quick_shop_text{
float:left;
font-weight: bold;
float: left;
}
.product-item-price-wrapper {
}
.product-item-price {
padding-left: 0.5rem;
border-left: solid 0.15rem #ccc;
}
.product-item-price{
float: right;
font-weight: bold;
}
<div class="quick_shop_container" data-price-wrapper="">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop</span>
<div data-price-wrapper="" class="product-item-price-wrapper">
<div class="product-item-price price" data-product-price="">£51.95</div>
</div>
</button>
</div>
I am trying to achieve this design having a semicircle with logo inside in the center. Kindly refer to the link given below.
Image
I have tried making a semicircle using CSS but it won't be suitable for the design that I want. I have used 2 jumbotrons, one after the other. The semicircle should cover the area on both jumbotron as in the image(link mentioned above).
Any help is appreciated on how can I achieve this design.
HTML:
<div class="jumbotron">
<div class="container navheader">
<div class="social">
<i class="fa fa-facebook " aria-hidden="true"></i>
<i class="fa fa-google-plus " aria-hidden="true"></i>
<i class="fa fa-instagram " aria-hidden="true"></i>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div>
CSS:
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
background-color: #5a9f33;
padding: 2em 1em;
}
.other-color {
margin-bottom; 0;
background-color: #67b63d;
padding: 2em 1em;
}
.navheader{
display: inline-block;
width: 100%;
}
.social, .user-actions{
float:left;
}
.contact-us, .cart{
float:right;
}
.sign-up{
background-color:#67b63d;
margin: 0 50px 50px;
padding:20px;
}
input{
padding:15px;
margin:20px;
width:85%;
}
.btn-sign{
background-color: #67b63d;
font-family: serif;
color: white;
border-radius: 30px;
font-size: 2em;
padding: 10px 50px;
margin: 20px auto;
display: block;
}
.title{
font-family: serif;
font-weight: 600;
color: #67b63d;
font-size: 3em;
margin-top:20px;
}
.div-semicircle {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px ;
border-top-right-radius: 90px;
}
</style>
UPDATE:
Solution: In case anyone wants to know, refer to the sample by #bhv in the first comment for reference and tweak it as per your requirement.
first of all your posted code isn't of any help....still I'll try to give a procedure how you can achieve the linked image
create a div not with class .container
create 2 navs inside above created div
create a jumbotron below the navs inside the same div and contain it
in a div with class container
set margins as you need it between these 3 to bring them together
It is clearly visible that you dont need a semicircle..you need an ellipse use clip-path: ellipse(65px 30px at 125px 40px); someting like this to create it within same div then position it in a way you want to using css and give it highest z-index so that it renders as top-most layer.
prey that it works!! ;-)
you must use position:absolute to cover both jumbotron
add these lines of code to this class: .div-semicircle.
position: absolute;
top: 23%;
left: 40%;
I'm trying to vertically align a title header, an alert and two buttons.
My goal is to make the width of the alert bigger even if its content is short. My problem is that since I uses span for the alert, I need to put display: inline-block in its style but by doing that, the alignment with the header gets misaligned. BTW, I'm using Bootstrap.
Here's the image of what I want to happen:
Here's my HTML:
<h1>
<span>This will be a very long title</span>
<span class="alert custom">
This is notification!
</span>
<span class="pull-right">
<button class="btn button-round">O</button>
<button class="btn button-round">X</button>
</span>
</h1>
Here's my CSS:
.button-round {
border-radius: 50%;
color: white;
background: green;
}
.custom{
font-size: 12px;
vertical-align: middle;
background: green;
color: white;
}
Here's a jsfiddle of my current code:
JSFiddle of my current code
To make this easy, you should use flex :
.button-round {
border-radius: 50%;
color: white;
background: green;
margin: auto
}
.custom {
font-size: 12px;
vertical-align: middle;
background: green;
color: white;
/* added */
flex: 1;
margin: 0 0.25em;
}
h1 {
display: flex;
}
/* end added */
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<h1>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span>This will be a very long title</span>
<span class="alert custom">
This is notification!
</span>
<span class="pull-right">
<button class="btn button-round">O</button>
<button class="btn button-round">X</button>
</span>
</h1>
https://jsfiddle.net/fczbe58L/1/
I'm making a menu selection bar, and I'm running into a problem when I mouse over. The icon's corners should all be curved, but only the left hand side ones are.
Here's a demo of the code: https://jsfiddle.net/gfqgcwq5/
From what I can tell, it seems like inline-block is the culprit here:
.wrapper{
display:inline-block;
margin:10px;
}
I just don't know how to accomplish the inline array without it. I'm not great at css, so if someone could lend me a hand, I'd appreciate it.
try this one:
.icon{
border-radius:8px;
padding-top:15px;
padding-bottom:5px;
transition:.1s;
font-size:60px;
display: inline-table;
}
.icon:hover{
cursor:pointer;
background-color: #00B1EB;
color:#fff;
}
span#picture > span {
padding-right:9px;
padding-left:10px;
padding-top:7px;
padding-bottom:10px;
}
.text{
text-align:center;
}
.wrapper{
display:inline-block;margin:10px;
}
DEMO HERE
Used to this
Define your .icon display inline-block
as like this
.icon{display:inline-block;line-height:60px;}
or you can used to
.icon{display:block;}
Demo
Remember that the border-radius is a property (in this case) of the .icon class, if you use the inspector you will see that the wrapper has the proper size and shapewraper
So as the other says the issue is on the display of the .icon class, If your idea is to have more than one .icon elements inside of the wrapper and inline, you should use display: inline-block;, if your call is to have just one per wrapper use display: block;.
Hope this helps you.
You gotta give icon block display: inline-block property in order to work !!
.icon {
border-radius: 8px;
padding: 15px;
padding-bottom: 5px;
transition: .5s all ease;
font-size: 60px;
display: inline-block;
}
.icon:hover {
cursor: pointer;
background-color: #00B1EB;
color: #fff;
}
span#picture > span {
padding-right: 9px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 10px;
}
.text {
text-align: center;
}
.wrapper {
display: inline-block;
margin: 10px;
}
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
Apply padding for the text div to allow the entire curve to visible.
.text{
text-align:center;
padding:0px 7px;
}
DEMO
I have a collection of divs as rows that can be variable width as they are inside a resizable container. The div contains text that I want to have a hanging indent. This works fine except in this example the first line is pushed underneath the red label when the width is too low.
When .wrapper is 450px everything is displayed properly. When it's 250px you can see how things break. I always want the longtextthatwraps span to be on the same line as the red label.
Here's a live example/fiddle and the source is as follows:
HMTL (there is no whitespace between .prefix and .part but for readability...):
<div class="wrapper">
<div class="padded excludes">
<div class="parts first">
<span class="prefix">Quisques: </span>
<span class="segment level-0">
<span class="part text">longtextthatwraps incorrectly (0000-0000)</span>
</span>
</div>
<div class="parts">
<span class="segment level-0">
<span class="part text">consectetur adipiscing (0000-0000)</span>
</span>
</div>
<div class="parts">
<span class="segment level-0">
<span class="part text">quisque non mauris sed:</span>
</span>
</div>
<div class="parts">
<span class="segment level-1">
<span class="part list-item">hendrerit (0000-0000)</span>
</span>
</div>
<div class="parts">
<span class="segment level-1">
<span class="part list-item">non mauris sed (0000-0000)</span>
</span>
</div>
<div class="parts">
<span class="segment level-1">
<span class="part list-item">lorem ipsum dolor (0000-0000)</span>
</span>
</div>
</div>
</div>
CSS:
.wrapper {
width: 250px;
background: #c3dff5;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
.padded {
padding-left: 20px;
}
.parts {
padding-left: 80px;
}
.parts.first {
padding-left: 0;
}
.prefix {
color: #D12;
font-weight: bold;
min-width: 80px;
display: inline-block;
}
.level-0,.level-1 {
display: inline-block;
padding-left: 5px;
text-indent: -5px;
outline: 1px dotted #f0f;
}
.level-1 {
padding-left: 20px;
}
Help appreciated
Hmmm, I believe I have a CSS solution to your problem, though I'm sure there are other ways out there to get the behaviour you're looking for.
For .prefix, I gave the style:
.prefix {
display: table-cell;
}
And then I added another definition:
.parts.first .level-0 {
display:table-cell;
}
I hope this is what you're looking for! Here's the updated JSFiddle to show you what it results in. If this isn't your objective, please let me know and I'll be happy to help you further!
What if you remove the first class, move the span.prefix out of div.parts and add a position: absolute to it?
JsFiddle
Update (css only)
For a css-only solution remove the first class, give a position: absolute to span.prefix and specify left position, for example left: 25px. This seems to work in IE7, too.
Updated JsFiddle
Use position:absolute; and margin-left.
.first > .prefix{
position: absolute;
left:10px;
}
.first > .level-0{
margin-left:80px;
}
Lines 17-24 of this fiddle
I created a simplified version that will float each section, one to right and section to left and gives them a percent unit. Try to add your indent levels.
<div class="wrapper">
<div class="left">
<span class="red">Quisques: </span>
</div>
<div class="right">
<span class="level">consectetur adipiscing (0000-0000)</span>
<span class="level">quisque non mauris sed:</span>
<span class="level">consectetur adipiscing (0000-0000)</span>
</div>
</div>
CSS
.wrapper {
width: 250px;
background: #C3DFF5;
overflow: hidden;
padding: 12px;
}
.red {
color: red;
font-weight: bold;
}
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}
.level {
display: block;
outline: 1px dotted #FF00FF;
}
Live demo http://jsbin.com/apaqop/1/
Please see this Demo
You have to add in CSS like
.wrapper {
width: auto;
background: #c3dff5;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
min-width:250px;
float:left;
}