Is there a way to show full border class="line" to ignore/exclude the padding without modifying the html?
For example:
<div class="padding">
<section>
<p>text</p>
</section>
<div class="line"> </div>
<section>
<p>text</p>
</section>
</div>
CSS:
.padding {
padding: 20px;
border: 1px solid black;
}
.line {
border-top: 1px solid black;
}
Demo: https://jsfiddle.net/tzq3o6tx/
I want the <div class="line"> </div> border to overlap the padding.
Simply add a negative margin on .line like so:
.line {
border-top: 1px solid black;
margin:0 -20px;
}
https://jsfiddle.net/tzq3o6tx/3/
You just have to set the width to be more than the padding and then set a starting point that is before the padding.
https://jsfiddle.net/tzq3o6tx/1/
.padding {
padding: 20px;
border: 1px solid black;
width:200px;
}
.line {
border-top: 1px solid black;
width: 240px;
margin-left: -20px;
}
Related
Im having an issue where my background color for a child element is going past my parent elements borders. How could I remedy this?
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Edit: I should mention I tried adding the same border radius only to the top of banner but this then left a small gap of white space between the color and the border of the parent.
overflow:hidden will prevent the inner child elements from extending beyond the bounds of the parent.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow:hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Apart from using overflow: hidden, it's also possible to use contain: content, which tells other elements that the child elements inside that particular element will never affect other elements, and will also never be displayed outside the parent element.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
/* ADDED */
contain: content;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
This might be a trivial question, but as you can see in this fiddle I have an inner and an outer div. The outer div has a percentage width on the body and the inner div should be exactly as wide as the outer div.
<div id="container">
<div id="content">Content</div>
</div>
The problem is, the inner div width does not adapt to the padding of the outer div. How do I get the inner div to do this?
The purpose of this is, that the div should be part of a form which consists of input fields and select boxes which also have a percentage width and a padding. The div should now be exactly as wide as the other form elements with padding.
#container {
width:80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
padding: 0 10px;
margin-left:-10px;
margin-right:-10px;
}
<div id="container">
<div id="content">Content</div>
</div>
I removed left and right padding.
Try this
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px 10px 0px; //changed this
}
Demo here
Just change the padding on the container. Also, block level elements will go to 100% width unless you specify otherwise.
http://codepen.io/anon/pen/wKwoPJ
#container {
width:80%;
border: 1px solid red;
padding: 10px 0px;
}
#content {
border: 1px solid blue;
}
Remove the left and right padding from the parent and add it to the child element. Using box-sizing with border-box will ensure that the 1px border of the child will stay inside the parent element.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#container {
width:80%;
border: 1px solid red;
padding: 10px 0;
}
#content {
border: 1px solid blue;
padding: 0 10px;
width: 100%;
}
<div id="container">
<div id="content">
Content
</div>
</div>
you can add this css to the #content -
width: calc(100% + 20px);
margin-left: -10px;
Full Code -
#container {
width: 80%;
border: 1px solid red;
padding: 10px;
}
#content {
border: 1px solid blue;
width: calc(100% + 20px);
margin-left: -10px;
box-sizing: border-box;
}
#othercontent {
margin-top: 10px;
border: 1px solid green;
}
<div id="container">
<div id="content">
I'm not following the padding
</div>
<div id="othercontent">
I'm following..
</div>
</div>
I am trying to create nine circles, with a picture of a person in each, with the name of the indidvidual directly in the middle of each picture. Below is my HTML and CSS file. I have tried using text-align: centre however it does not look accurate? Also, it only move the text horizontally and not vertically, i.e not to the center of the image, only to the center of the TOP of the image. Thank you.
<div class="friend">Stacey</div>
<div class="Sexy">Caroline</div>
<div class="friend"; id="best_friend">Adam</div></br>
<div class="boss">Paul</div>
<div class="friend">Phil</div>
<div class"colleague"; id="archnemesis">Luca</div>
<div class="friend">Ruth</div>
<div class="family">Mum</div>
<div class="enemy">Satan</div>
</body>
**My CSS file below:**
div {
display: inline-block;
margin-left: 5px;
border: 2px solid black;
border-radius: 100%;
height: 100px;
width: 100px;
text-align: center;
}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
.colleague {
border: 2px solid brown;
}
.boss {
border: 5px solid pink;
}
.sexy {
border-color: purple;
}
#best_friend {
border: 4px solid #00C957;
}
#archnemesis {
border: 4px solid #CC0000;
}
<html>
<head>
<style>
div {
display: inline-block;
margin-left: 5px;
border: 2px solid black;
border-radius: 100%;
height: 100px;
width: 100px;
text-align: center;
}
span.center-content {
display: inline-block;
vertical-align: middle;
line-height:100px;
}
.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
.colleague {
border: 2px solid brown;
}
.boss {
border: 5px solid pink;
}
.sexy {
border-color: purple;
}
#best_friend {
border: 4px solid #00C957;
}
#archnemesis {
border: 4px solid #CC0000;
}
</style>
</head>
<body>
<div class="friend"><span class="center-content ">Stacey</span></div>
<div class="Sexy"><span class="center-content ">Caroline</span></div>
<div class="friend"; id="best_friend"><span class="center-content ">Adam</span></div></br>
<div class="boss"><span class="center-content ">Paul</span></div>
<div class="friend"><span class="center-content ">Phil</span></div>
<div class="colleague"; id="archnemesis"><span class="center-content ">Luca</span></div>
<div class="friend"><span class="center-content ">Ruth</span></div>
<div class="family"><span class="center-content ">Mum</span></div>
<div class="enemy"><span class="center-content ">Satan</span></div>
</body>
</html>
Changes
Added a new span and common class to all spans - center-content
added new class in style - span.center-content
You will need to keep same height for div and span to get it in the middle of each div.
Either you can test the code above on your browser or else visit this demo url - https://jsfiddle.net/BRxKX/4962/
You probably want something along the lines of:
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;"></div>
</div>
</div>
This may be of help in the future http://howtocenterincss.com
You could use vertical-align:middlebut that requires to be a table and you can spoof it using display:table-cell.
I suggest to use line-height with the height of the circles, this works with only 1 line of text, if you one multiline you have to use internal divs or spans.
If if doesn't look accurate horizontally may be the padding.
div {
display: inline-block;
margin-left: 5px;
border: 2px solid black;
border-radius: 100%;
height: 100px;
width: 100px;
text-align: center;
padding:0;
line-height:100px;
}
I have an image centered on the screen that I would like a border around, which when hovered over changes color. I am trying to do this as you can see in the code below, but the problem is that the image just keeps being a link but no border, what is wrong?
html code:
<div id="container">
<div id="content">
<div class="10Img">
<img src="10Pimg.png" alt="10img" style="width:900px; height:200px">
</div>
</div>
</div>
css code:
#content{
padding-bottom: 200px;
position: absolute;
float: left;
left: 50%;
margin-left: -450px;
top: 200px;
}
#container{
height:100%;
}
.10Img{
border: 2px solid grey;
}
.10Img a:hover{
outline: 2px solid black;
}
The main issue is you are starting your class name with a numerical character change 10Img and start it with an alphabetic character.
Ex. i change it from 10Img to aImg
Then you can use
.aImg img {
border: 2px solid grey;
}
or only
.aImg {
border: 2px solid grey;
}
Try this: Demo
a img {
border: 2px solid grey;
}
a img:hover {
border: 2px solid black;
}
See This Demo
.Img{border: 2px solid grey;}
.Img a:hover{
outline: 2px solid black;}
Note: Class Name can not start with integer.
Refer This for Rules regarding naming.
Your css class 10Img doesn't work, because css class names must not begin with a number, see:
Which characters are valid in CSS class names/selectors?
So if you call your class Img10 instead of 10Img it should work.
<div id="container">
<div id="content">
<div class="Img10">
<img src="http://dummyimage.com/900x200/000/fff" alt="10img" style="width:900px; height:200px" />
</div>
</div>
</div>
Also you may want to have the :hover border on the div instead on the a:
#content{
padding-bottom: 200px;
position: absolute;
float: left;
left: 50%;
margin-left: -450px;
top: 200px;
}
#container{
height:100%;
}
.Img10{
border: 2px solid grey;
}
.Img10:hover{
outline: 2px solid black;
}
Here is a working fiddle:
http://jsfiddle.net/k2Ld7yfe/
HTML
<div>
<div class="leftInRow5050 squareTopLeft">1</div>
<div class="rightInRow5050 squareTopRight">2</div>
<div style="clear: both;"></div>
</div>
<div>
<div class="leftInRow5050 squareBottomLeft">3</div>
<div class="rightInRow5050 squareBottomRight">4</div>
<div style="clear: both;"></div>
</div>
CSS
.rightInRow5050{
width:50%;
display: inline-block;
float:right;
}
.leftInRow5050{
width:50%;
display: inline-block;
float:left;
}
.leftInRow5050.squareTopLeft{
height: 35%;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.rightInRow5050.squareTopRight{
height: 35%;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
.leftInRow5050.squareBottomLeft{
height: 35%;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
.rightInRow5050.squareBottomRight{
height: 35%;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
Why is the above code failing to create a 2X2 <div> matrix?
It is giving me the standard 1px problem, where the <div>'s fall under one another?
If the div's have a border and that's what's throwing it off, try this:
box-sizing:border-box;
You need to set a width and float for the right divs. See this Demo
.leftInRow5050 {
width:50%;
float:left;
}
.rightInRow5050 {
width:50%;
float:right; /* or left */
}
Edited to add: the code example changed while I was answering :p