I would like to get some help with this. I've tried so many different ways and no one works. I want this in only HTML and CSS.
.circles {
background-color: white;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row {
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
<div class="row">
<div class="circles"></div>
<div class="circles"></div>
<div class="circles"></div>
</div>
Here is an example via jsbin:
http://jsbin.com/tezocucufi/edit?html,css,output
There are a couple different ways to get it to "not interfere" with other elements... but depends on what your situation.
Circle code:
border-radius: 50%;
width: 100px;
height: 100px;
Alignment could be with floats, or:
display: inline-block;
and position'ing both the element and the parent container to position it on the page.
Reference: https://davidwalsh.name/demo/css-circles.php
Related
The parent DIV nests 2 child DIV:box2 box3, which are stacked vertically,
box2 bottom is aligned with box3 top
box3 bottom is aligned with box1 bottom
How should CSS be written?
<style>
.box1 {
width: 315px;
height: 300px;
background-color: #FFF;
}
.box2 {
width: 315px;
height: 48px;
background-color: #000;
}
.box3 {
width: 315px;
height: 38px;
background-color: #000;
}
</style>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
You can use flex-end of flex layout;
.box1 {
width: 315px;
height: 300px;
background-color: #FFF;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
Im trying to give "box2" a bigger z-index value than the other boxes, in order to make the box2 overlap the other(for instance on box number 5 that next to it), but everytime im trying this, the boxes are "running away" and opening a new column. i did that on codeopen so the if it makes any different:
HTML
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
CSS
body {
margin: 40px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
z-index: 10;
}
.box:nth-child(even) {
color: #000;
}
.wrapper {
width: 600px;
display: grid;
grid-template-columns: repeat(6, 100px);
grid-gap: 10px;
grid-auto-flow:column;
}
.box2 {
grid-column: 3 / 6;
grid-row: 2 / 3;
outline: 2px solid red;
z-index: 20;
background-color: blue;
opacity: 0.5;
}
link to codeopen: https://codepen.io/Tsuri/pen/dyZbdGJ
I am loading an external CSS file using JS. For my radio buttons, I am running a transition animation, but its loading is delayed on page load, and I can't figure out why.
Note: since this issue only occurs on page load, the most effective way to reproduce might be to copy the html & css files, and run locally. Simply running the code snippet won't show the issue. You should notice that the male and female divs animate into shape, rather than just appear immediately when the page loads.
To see desired behavior, import the css directly into the head of the html file (rather than import using JS). You'll notice that the gender divs appear instantly, without animation.
Here's a gif of what it's currently doing that I don't want: https://media.giphy.com/media/8BksF1okeQfNyv7ZCh/giphy.gif
const genderCss = document.createElement('link')
genderCss.rel = "stylesheet"
genderCss.href = "demo.css"
genderCss.type = "text/css"
document.head.appendChild(genderCss)
*,
*:before,
*:after {
box-sizing: border-box;
}
.col-half {
padding-right: 0;
float: left;
width: 100%;
}
.col-half:last-of-type {
padding-right: 0;
}
.registrationContainer {
justify-content: center;
align-items: center;
margin: 10rem auto;
background: white;
padding: 20px 25px;
border: 5px solid #337ab7;
border-radius: 6px;
width: 550px;
height: auto;
box-sizing: border-box;
}
.gender-input-group {
margin-bottom: 1em;
padding: 0;
zoom: 1;
width: 100%;
}
.gender-input-group:before,
.gender-input-group:after {
content: "";
display: table;
}
.gender-input-group:after {
clear: both;
}
input[type="radio"] + label,
select option,
select {
width: 30%;
text-align: center;
padding: 1em;
line-height: 1.4;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* The problem seems to be here */
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
input[type="radio"]:checked + label,
input:checked + label:before,
select:focus,
select:active {
background-color: #7ed321;
color: #fff;
border-color: #64ac15;
}
select {
display: inline-block;
width: 50%;
text-align: center;
float: left;
border-radius: 0;
}
input[type="radio"] + label:first-of-type {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type="radio"] {
display: none;
box-sizing: border-box;
padding: 0;
}
input[type="checkbox"] + label:before {
position: absolute;
top: 0.2em;
left: 0;
display: block;
width: 1em;
height: 1em;
padding: 0;
content: "";
}
input[type="checkbox"] + label:after {
position: absolute;
top: 0.45em;
left: 0.2em;
font-size: 0.8em;
color: #fff;
opacity: 0;
font-family: FontAwesome;
content: "\f00c";
}
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
<script type="text/javascript">
const css = document.createElement('link')
css.rel = "stylesheet"
css.href = "demo.css"
css.type = "text/css"
document.head.appendChild(css)
</script>
</head>
<body>
<div class="col-half">
<h5>Gender</h5>
<div class="gender-input-group">
<input
id="male"
type="radio"
name="gender"
value="male"
>
<label for="male">Male</label>
<input
id="female"
type="radio"
name="gender"
value="female"
>
<label for="female">Female</label>
</div>
</div>
</body>
</html>
I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?
I'm trying to build a horizontal list based menu. In this menu, the two left floated menu links are fixed width, while the remaining menu links are floated right.
The issue is I'd like the two fixed width links to stay as is, however the floated right items to be spaced evenly throughout the rest of the available whitespace.
See my fiddle
CSS:
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table;
table-layout: fixed;
width:100%;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
float: left;
display: table-cell;
white-space:nowrap;
}
#footer_menu .nav_r {
float: right;
width:auto;
display: table-cell;
white-space:nowrap;
}
HTML:
<div id="footer_menu">
<ul>
<li class="nav_l">Link</li>
<li class="nav_l">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
<li class="nav_r">Link</li>
</ul>
</div>
Anyone have any ideas?
Try this - DEMO
#footer_menu {
margin: 0;
height: 54px;
padding: 0px;
display: table;
width: 100%;
}
#footer_menu ul {
margin: 0;
height: 54px;
padding: 0px;
display: table-row;
background: #ccc;
}
#footer_menu li {
list-style: none;
padding: 0px;
}
#footer_menu .nav_l {
display: table-cell;
white-space:nowrap;
width:50px;
padding:5px;
border: 1px solid #000;
}
#footer_menu .nav_r {
width:auto;
display: table-cell;
white-space:nowrap;
padding:5px;
border: 1px solid #c00;
}