I'm trying to get familiar with css animations using codepen.io, but I can't seem to make the div expand in size. It seems like there is a simple solution that I am just overlooking. Can anyone help?
codepen: http://codepen.io/trebey/pen/PqRZKK
#import 'bourbon';
#import 'neat';
div {
display: inline-block;
}
.circle-1 {
max-height: 100px;
max-width: 100px;
border: 1px solid #333;
border-radius: 20%;
backgrouund: #000;
}
.circle-2 {
max-height: rem(300);
max-width: rem(300);
border: 1px solid #333;
border-radius: 20%;
backgrouund: #333;
}
.square-1 {
max-height: rem(300);
max-width: rem(300);
border: 1px solid #333;
backgrouund: #000;
}
.square-2 {
max-height: rem(300);
max-width: rem(300);
border: 1px solid #333;
backgrouund: #000;
}
<html>
<body>
<div class="square-1"></div>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="square-2"></div>
</body>
</html>
There are a couple of issues. Instead of specifying just max-width, you should specify a width (and height too). It's an inline-block element that sizes to its contents, but since there is no content, you should help it a little.
Also, you misspelled background.
Lastly, rem(300) doesn't work. rem (the root em) is a unit and can be used like em or px as I did below for .circle-2, but not as a function. I think you copied that from a SASS, SCSS or LESS example.
#import 'bourbon';
#import 'neat';
div {
display: inline-block;
}
.circle-1 {
height: 100px;
width: 100px;
border: 1px solid #333;
border-radius: 20%;
background: #000;
}
.circle-2 {
height: 3rem;
width: 3rem;
border: 1px solid #333;
border-radius: 20%;
background: #333;
}
.square-1 {
height: rem(300);
width: rem(300);
border: 1px solid #333;
background: #000;
}
.square-2 {
height: rem(300);
width: rem(300);
border: 1px solid #333;
background: #000;
}
<html>
<body>
<div class="square-1"></div>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="square-2"></div>
</body>
</html>
Related
The question is confusing but I just want to put the 'signIn' css selector inside the 'headerRightPanel' selector and have it span that width. That is grow and shrink within it. now headerRightPanel is sitting next to headerLeftPanel which has the Float: left property. and for some reason the sign in div is expanding the whole entirety of the header which i dont want.
how can I just keep sign in inside headerRightPanel and have it expand the whole section?
html{
height: 900px;
border: 2px solid black;
margin: 5px;
}
body{
height: 885px;
border: 2px solid black;
margin: 5px;
}
.MAINPAGE{
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER{
border: 2px solid black;
height: 175px;
margin: 5px;
}
.headerLeftPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
float: left;
width: 75%;
}
.headerRightPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
}
.signIn{
border: 2px solid black;
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">
</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>
</body>
</html>
Try below things
give .headerRightPanel float: right; position: relative:
set .signIn maxWidth: 100%;
I'd try to solve it with flex:
html {
height: 900px;
border: 2px solid black;
margin: 5px;
}
body {
height: 885px;
border: 2px solid black;
margin: 5px;
}
.MAINPAGE {
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER {
border: 2px solid black;
height: 175px;
margin: 5px;
/* All children shall flex */
display: flex;
}
.headerLeftPanel {
border: 2px solid black;
height: 160px;
margin: 5px;
width: 75%;
}
.headerRightPanel {
border: 2px solid black;
height: 160px;
margin: 5px;
/* This item shall fill remaining space */
flex-grow: 1;
}
.signIn {
border: 2px solid black;
height: 30px;
}
<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">
</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>
Use display: grid; in your .HEADER with grid-template-column: 75% auto; - says first column (first child-element of .HEADER) is width of 75% (of its parent-element's width) and auto to set the second column (second child-element of .HEADER) fill the rest of parents element's width.
html{
height: 900px;
border: 2px solid black;
margin: 5px;
}
body{
height: 885px;
border: 2px solid black;
margin: 5px;
}
.MAINPAGE{
border: 2px solid black;
height: 870px;
margin: 5px;
}
.HEADER{
border: 2px solid black;
height: 175px;
display: grid;
grid-template-columns: 75% auto;
grid-gap: 5px;
margin: 5px;
}
.headerLeftPanel{
border: 2px solid black;
height: 160px;
margin: 5px;
}
.headerRightPanel{
border: 2px solid black;
margin: 5px;
}
.signIn{
border: 2px solid black;
height: 30px;
}
<div class="MAINPAGE">
<div class="HEADER">
<div class="headerLeftPanel">
</div>
<div class="headerRightPanel">
<div class="signIn">
</div>
</div>
</div>
</div>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I'm just starting out and I created this document in which I coded a 3x3 checkerboard (yes I know there's probably a better way to do it, but that's not the point).
Beneath it I created a heading element that somehow keeps showing up in the same line as the checkerboard even though it should actually be displayed as a block element and should therefore show up in the next line.
Now, I know that I could just use <br> in my html file, but I'd really like to know the reason for this behavior and how to change it more elegantly.
I assume that it has something to do with the float: left; in my CSS file but I'm not sure.
So please: how can I change my CSS code to have the heading show up in the next line as it normally should?
#checkerboard {
width: 300px;
height: 300px;
}
.checkone {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd) {
background-color: #10e364;
}
.checkone:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
}
.checktwo {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even) {
background-color: #e016ab;
border-top: none;
}
.checkthree {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
border-top: none;
}
/* now comes the important part*/
#butsection {
font-size: 15px;
}
#buthead {
font-size: 1.5em;
width: 100%;
display: block;
}
<div id="checkerboard">
<p>The checkerboard:</p>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
You have two issues:
in your css you have #butsection instead of #buttonsection
If an element can fit in the horizontal space next to the floated elements, it will. Unless you apply the clear property to that element in the same direction as the float. Then the element will move below the floated elements.
#checkerboard{
width: 300px;
height: 300px;
}
.checkone{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd){
background-color: #10e364;
}
.checkone:nth-of-type(even){
background-color: #e016ab;
border-right:none;
border-left:none;
}
.checktwo{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd){
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even){
background-color: #e016ab;
border-top: none;
}
.checkthree{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd){
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even){
background-color: #e016ab;
border-right:none;
border-left:none;
border-top:none;
}
/* now comes the important part*/
#buttonsection{
clear:both;
font-size: 15px;
}
#buthead{
font-size: 1.5em;
width: 100%;
display: block;
}
<div id="checkerboard">
<p>The checkerboard:</p>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
Just move <p>The checkerboard:</p> out of the #checkerboard div.
#checkerboard {
width: 300px;
height: 300px;
}
.checkone {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd) {
background-color: #10e364;
}
.checkone:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
}
.checktwo {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even) {
background-color: #e016ab;
border-top: none;
}
.checkthree {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
border-top: none;
}
/* now comes the important part*/
#butsection {
font-size: 15px;
}
#buthead {
font-size: 1.5em;
width: 100%;
display: block;
}
<p>The checkerboard:</p>
<div id="checkerboard">
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
Codepen: https://codepen.io/manaskhandelwal1/pen/mdOJGRM
I have a layout that most likely can't be changed. I need to use border-radius on an element inside another element with border-radius. The purpose is to fill the white gap. The issue is that the corners of the child elements are overflowing, but I can't use overlow:hidden in this project, which is why I am trying with border-radius.
Here is a snippet to show my attempt: https://jsfiddle.net/5fgtL4so/5/
The issue is that inner border-radius of 30px does not have the same curve as outer border-radius. I don't want to hardcode this since it has to be responsive. I also tried to play around with width and margins as you can see on the snippet, but it does not seem to be the right way since I still have a small margin of error.
Any idea how to tackle this problem?
.parent {
border: 3px solid tomato;
background-color: white;
height: 200px;
border-radius: 30px;
}
.child {
border: 3px solid tomato;
padding:10px;
border-bottom: none;
background-color: tomato;
height: 100px;
border-radius: 30px 30px 0 0;
box-sizing: border-box;
/* bellow solution is not perfect. There is still tiny white space around innter corners, it's a bit more visible on my project */
/*
margin-left: -3px;
width: calc(100% + 6px);
*/
}
<div class="parent">
<div class="child">
</div>
</div>
You can use inset box-shadow instead of border.
.parent {
/*border: 3px solid tomato;*/
background-color: white;
height: 200px;
border-radius: 30px;
box-shadow: inset 0px 0px 0 3px tomato;
}
.child {
border: 3px solid tomato;
padding: 10px;
border-bottom: none;
background-color: tomato;
height: 100px;
border-radius: 30px 30px 0 0;
box-sizing: border-box;
}
<div class="parent">
<div class="child">
</div>
</div>
Also, your solution is works if you add margin-top: -3px also.
.parent {
border: 3px solid tomato;
background-color: white;
height: 200px;
border-radius: 30px;
}
.child {
border: 3px solid tomato;
padding: 10px;
border-bottom: none;
background-color: tomato;
height: 100px;
border-radius: 30px 30px 0 0;
box-sizing: border-box;
margin-left: -3px;
margin-top: -3px;
width: calc(100% + 6px);
}
<div class="parent">
<div class="child">
</div>
</div>
Although this is a bit late for this question, by setting the parent's overflow: hidden and removing the radius altogether from the child you can achieve what you need.
.parent {
border: 3px solid tomato;
background-color: white;
height: 200px;
border-radius: 30px;
overflow: hidden;
}
.child {
border: 3px solid tomato;
padding:10px;
border-bottom: none;
background-color: tomato;
height: 100px;
box-sizing: border-box;
}
<div class="parent">
<div class="child">
</div>
</div>
Hello guys need your help by merging two <div>s' borders. Here is what I want to get and what I've gotten until now:
enter image description here
and this is what i want to do enter image description here
Could someone please tell me how to do so? Here is my code if it helps something:
css :
#plink {
position: relative;
width: 200px;
float: left;
}
#open {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
}
#closed {
border: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
}
#closed:hover a {
display: block;
}
#open:hover a {
display: block;
}
#pbase {
border: 1px solid black;
position:relative;
width: 600px;
height: 300px;
float: left;
}
and html :
<div id="plink">
<div id="open">My details</div>
<div id="closed">My ads</div>
<div id="closed">Favorites</div>
</div>
<div id="pbase"></div>
#plink {
position: relative;
width: 200px;
float: left;
border-top: 1px solid black;
border-left: 1px solid black;
}
#open {
border-bottom: 1px solid black;
border-right: 1px solid white;
text-align: center;
line-height: 50px;
}
#closed {
border-bottom: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
}
#pbase {
border: 1px solid black;
position: relative;
width: 600px;
height: 300px;
float: left;
margin-left: -1px;
z-index: -1;
}
https://jsfiddle.net/8rrov5hb/
This was achieved by setting #pbase with margin-left: -1px and z-index: -1 to put it behind #plink
The div #open has border-right: 1px solid white to make it appear transparent - just change this to whatever background color you need
Set border-right color white and use z-index to keep open menu on over the right part. Try like following. Hope this will help you.
#open {
border-color: black #fff black black;
border-style: solid;
border-width: 1px;
line-height: 50px;
position: relative;
text-align: center;
width: 199px;
z-index: 1;
}
Update:
$('.menu a').click(function (e) {
e.preventDefault();
$(this).closest('div').siblings().removeClass('open');
$(this).closest('div').addClass('open');
});
#plink {
position: relative;
width: 200px;
float: left;
}
.open {
background-color: #a7a7ff !important;
border-right: 1px solid #a7a7ff !important;
line-height: 50px;
position: relative;
text-align: center;
z-index: 1;
}
.menu {
border: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
background-color: #5e5eb6;
}
.menu:hover a {
display: block;
}
.open:hover a {
display: block;
}
#pbase {
border: 1px solid black;
position: relative;
width: 600px;
height: 300px;
float: left;
background-color: #a7a7ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plink">
<div class="menu open">My details</div>
<div class="menu">My ads</div>
<div class="menu">Favorites</div>
</div>
<div id="pbase"></div>
A couple of issues. You were using multiple id's with the same name, these should have been changed to classes. and 'open' / 'active' should be a state set with a class.
There was duplication in the css for the different states.
The main takeaway is that you needed to change the width of the active `.tab-nav'.
css was missing box-sizing
* {
box-sizing: border-box;
}
.tab-navigation {
position: relative;
width: 200px;
float: left;
}
.tab-nav {
border-top: 1px solid black;
border-left: 1px solid black;
background-color: white;
width: 200px;
text-align: center;
line-height: 50px;
}
.tab-nav:last-of-type {
border-bottom: 1px solid black;
}
.tab-nav:hover, .tab-nav.open {
width: 202px;
}
.tab-nav a {
display: block;
}
#pbase {
border: 1px solid black;
position:relative;
width: 600px;
height: 300px;
float: left;
z-index: -1;
}
<div class="tab-navigation">
<div class="tab-nav open">My Details</div>
<div class="tab-nav">My ads</div>
<div class="tab-nav">Favorites</div>
</div>
<div id="pbase"></div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#plink').click(function(){
$('#open, #pbase').css('border','2px solid #000');
})
})
</script>
I have element with 3 borders: left (4px), top (1px) and bottom (1px):
But border-left looks like this:
how to set border-left outside of the box, to make render without cutting of edges?
This is Example of my code:
HTML:
<a class="element">Some Text</a>
CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 4px solid red;
}
Solved problem using :before pseudo element in CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
position: relative; /* Make sure you have this */
padding-left: 8px; /* Nudge the text by few pixels in the box */
}
.element:before {
content: "";
background-color: red;
display: block;
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
This should solve the problem:
-webkit-background-clip:padding;
-moz-background-clip:padding;
background-clip:padding-box;
Look at the simple example :
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
this may help you.
Add padding to the left side.
.element {
padding-left:4px;
}
DEMO here.