am looking for a way to get a box like this on a webpage Image here
This is actually reddit's theme and I would like to understand how to create a box like this with a different color and then another box sticked with it in white. I couldn't come up with a term to google for this, nonetheless, I still googled things like ''box with css'', ''box table in css'' etc. but no luck.
What this is called and how to exactly do this?
The height/width are probably going to be off for what your ultimate code will need, but with this snippet you can get the idea of adding border-radius to an outer card element, and then border-top-right-radius and border-top-left-radius to the inner card-header element to get the desired effect.
The display: flex on the card-header element allows you to use justify-content: space-between to push the title and the ellipsis away from each other with minimal code.
I added some other styling to just give the same sense of colors, font style, etc.
.body {
display: block;
background: #FAFAFA;
width: 1000px:
height: 1000px;
padding: 25px;
}
.card {
background: #fff;
border-radius: 5px;
width: 300px;
height: 400px;
}
.card .card-header {
display: flex;
justify-content: space-between;
color: #fff;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.5px;
background: #4BA2AF;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<div class="body">
<div class="card">
<div class="card-header">
<span class="title">COMMUNITY DETAILS</span>
<span class="ellipsis">…</span>
</div>
</div>
</div>
Related
This question already has answers here:
What makes the text on a <button> element vertically centered?
(7 answers)
Closed 2 years ago.
In the following HTML/CSS page, I'm trying to make a link and a button look the same. The reason is that the element used should follow its meaning (go somewhere vs. do something), while the look-and-feel depends on whatever turns out to look good for users.
*,
:after,
:before {
box-sizing: inherit
}
.button {
margin: 0px;
width: 100px;
inline-size: 100px;
padding: 20px;
color: black;
text-decoration: none;
font-family: sans-serif;
align-items: normal;
perspective-origin: 60.8906px 44.5625px;
transform-origin: 60.8984px 44.5625px;
cursor: pointer;
display: inline-block;
min-height: 4em;
outline: 0;
border: none;
vertical-align: baseline;
background: #e0e1e2 none;
font-weight: 700;
line-height: 1em;
text-align: center;
font-size: 1rem
}
.container {
height: 100px;
}
<div class="container">
<a class="button" href="#">A</a>
<button class="button">A</button>
</div>
The look pretty similar, but in both Chrome and Firefox, they are arranged in a different way vertically. The text seems to be at the same Y, but the background box around it isn't. I would expect such a behaviour if they somehow get different CSS properties, possibly from the user-agent stylesheet.
The interesting thing is that when I have the browser (Chrome) show me all computed CSS properties, all of them are equal. I verified this by copying the properties of each element to a file, then diff'ing the files.
I also checked whether the order of the elements is relevant, but it isn't -- in the sense that the link/button always look the same no matter where in the element order they appear.
Why do the elements look different even though all CSS properties are the same, and what changes are needed to make them look the same?
(The second question is meant to pinpoint the exact fix for the problem, not just some "shotgun approach".)
I have used flexbox for both tags
*,
:after,
:before {
box-sizing: inherit
}
.button {
margin: 0px;
width: 100px;
inline-size: 100px;
padding: 20px;
color: black;
text-decoration: none;
font-family: sans-serif;
align-items: normal;
perspective-origin: 60.8906px 44.5625px;
transform-origin: 60.8984px 44.5625px;
cursor: pointer;
display: inline-block;
min-height: 4em;
outline: 0;
border: none;
vertical-align: baseline;
background: #e0e1e2 none;
font-weight: 700;
line-height: 1em;
text-align: center;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.container {
height: 100px;
}
<div class="container">
<a class="button" href="#">A</a>
<button class="button">A</button>
</div>
You can just use the a or button tag for both elements, then handle their behavior using javascript
I am trying to draw a short horizontal line over an image. Like a quote followed by horizontal line followed by author name. An example of what I'm trying to do is below.
How can I achieve this in html css?
You can use either an hr or a div with a border. I made a simple example, hope it helps.
html, body{
height: 100%
}
body{
background: lightslategray;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.quote {
background: url('http://lorempixel.com/g/600/200/abstract/?random=true');
color: white;
background-size: cover;
padding: 2rem;
text-align: center;
}
hr {
width: 40%;
}
<div class="quote">
<h1>A dream doesn't become reality through magic<br/> it takes sweat, determination and hard work.</h1>
<hr />
<h2>Colin Powell</h2>
</div>
you can use the horizontal line in html <hr>
You can do it in several way. How you go about it will depend on what you are trying to accomplish. Here are two ways; one using br element and the other using a div (it could be a label too). If you want to use a different color and add more style to it, you want to go with the div
.motto, .author{
display: block;
text-align: center;
}
.motto{
font-size: 1.85em;
}
.br{
width: 50%;
height: 2px;
margin: 25px auto;
border-radius: 2px;
background-color: #0088ee;
}
<i class="motto">It is better to be feared than loved if you cannot be both</i>
<div class="br"></div>
<!-- <hr/> -->
<strong class="author">Niccolo Machiavelli</strong>
Comment out <div class="br"></div> and uncomment <hr/> to see the two results.
I am trying to improve my css(and html) skills by trying to re-create the homepage of reddit.
The problems I have are the sidebars simply won't stay where they are supposed to be when resizing the browser window, they go up and the width is also changing.
The way it is on my end: https://imgur.com/a/SrfyP (Look at the right side things)
The way it should be: https://imgur.com/a/iBEX3 ( They always stay on the same width and height)
HTML for just the blue bars on the right side which say "Submit a new link"(in the imgur link). I assume if I can get one of them to work I can get all the other elements to work properly too.
<div class="container">
<div class="div1">
Submit a new link
</div>
<div class="div2">
Submit a new text post
</div>
</div>
CSS:
html, body{
margin: 0;
padding: 0;
width: 100%;
}
.container{
display: block;
margin-top: 8%;
margin-left: 87%;
width: 8%;
}
.div1, .div2 {
display: inline-block;
margin-top: 5%;
background: rgb(212, 229, 245);
height: 100%;
padding: 7px;
width: 199%;
text-align: center;
margin-left: -53%;
border-radius: 10px;
border: 1px solid #c4dbf1;
font-size: 150%;
font-weight: bold;
letter-spacing: -1px;
font: normal medium verdana,arial,helvetica,sans-serif;
}
.div1 a, .div2 a{
font-weight: bold;
text-decoration: none;
}
I tried so many possibilities, messing with position, display, float, width, margins. This question has been answered a million times but I couldn't find something that helps me.
Thank you for your time.
I'm creating a page, at the top of which there is a button (aligned to the right), followed by the main page content in a div.
I've encountered an issue when trying to separate the button and the main content div. The two divs are currently overlapping. I don't imagine this to be a huge issue, but I'd like to clarify what the most accepted way of separating these would be, rather than just messing about with margins etc.
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
I've found that when I add a margin-top: 50px to .main-section the button travels with it, as if it's contained within the same div.
If you are looking for best practices then consider the following:
1) Avoid using float. There are many better ways to get elements where you want them without needing to revert to a complicated process. The biggest problem with float is that it removes your element from the normal DOM flow. https://designshack.net/articles/css/farewell-floats-the-future-of-css-layout/, https://www.webdesignerdepot.com/2014/07/the-secret-to-designing-website-layouts-without-css-floats/
2) If you are navigating, then use the <a> tag. If you are doing something on the same page use a <button> or <input type='button'/> https://davidwalsh.name/html5-buttons
Here is a simple fix for what you want:
.view-all-container {
margin-bottom: 10px;
text-align: right;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
text-align: middle;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
I removed the float and changed to text-align. The <div> is already display: block so I removed that.
I assumed that your button at the top was to make changes on the active page so I changed the html from an <a> tag to a <button>.
If you don't want to use text-align then try flex-box:
.view-all-container {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
One of my favorite quotes about using float comes from this article: https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
You just need to clear the float with clear:right on .main-section
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
clear: right;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
I am working on a button style for Azure Active Directory B2C. Azure automatically provides the following content
<div class="options">
<div>
<button class="accountButton firstButton" id="AmazonExchange" tabindex="1">Amazon</button>
</div>
<div>
<button class="accountButton" id="LinkedInExchange" tabindex="1">LinkedIn</button>
</div>
<div>
<button class="accountButton" id="FacebookExchange" tabindex="1">Facebook</button>
</div>
<div>
<button class="accountButton" id="GoogleExchange" tabindex="1">Google+</button>
</div>
<div>
<button class="accountButton" id="MicrosoftAccountExchange" tabindex="1">Microsoft</button>
</div>
</div>
Using FontAwesome and :before css magic, I am able to add an icon, and fix width the button
.accountButton {
border: 1px solid #FFF;
color: #FFF;
margin-left: 0;
margin-right: 2px;
padding-right: 15px;
transition: background-color 1s ease 0s;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
text-align: center;
word-wrap: break-word;
width: 120px;
background-color: #5x05050;
opacity: 0.7;
}
#AmazonExchange:before {
font-family: fontAwesome;
content: "\f270";
//font-size: large;
float:left;
width:32px;
text-align: center;
}
This is nice, but I would like the icons to be just a bit bigger. However, increasing the size of the FontAwesome item to large causes the primary text to go up, as it is aligned to the top of the float:left.
I've tried a variety of valign combinations with no luck. I cannot change the html (as it is dynamically generated). How can I center the "Amazon" with the larger icon? (Notice that the Amazon text is now higher than the LinkedIn and other text.)
Attempted jsfiddle, doesn't look quite the same, but should show the issue.
https://jsfiddle.net/tofutim/0637yknj/9/
There isn't a dynamic way to adjust valign with floating elements. You can either use display: inline-block; + vertical-align: middle;
.accountButton {
vertical-align: middle;
line-height: 1.5;
}
.accountButton:before {
vertical-align: middle;
margin-right: 8px;
}
jsFiddle
Or, use display: flex; + align-items: center;
.accountButton {
display: flex;
align-items: center;
line-height: 1.5;
}
.accountButton:before {
margin-right: 8px;
}
jsFiddle
The line-height part is just to make the buttons a bit taller, you can also use padding-top + padding-bottom instead.
Giving a line-height to .accountButton might correct this issue for you. This will vertically centre text within the given vertical space, and in your example should be equal to the desired height of the button.
Try something like: line-height: 30px;.