I'm trying to center the dotted line horizontally with CSS. At the moment, it appears at the bottom. Is there a way I can offset it with -5px or something?
HTML
<div class="divider"></div>
CSS
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height:30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
border-bottom: 2px dotted #b38b0d;
}
no. But you can create another element that have the border and move it within the .divider
html
<div class="divider">
<div class="inner"></div>
</div>
css
.inner {
margin-top:19px;
border-bottom: 2px dotted #b38b0d;
}
Demo: http://jsfiddle.net/5xMG7/
You could also use :before or :after pseudo-selectors, to get rid of the inner element.
<div class="divider"></div>
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height: 30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
}
.divider:after {
content: '';
display: block;
margin-top: 19px;
border-bottom: 2px dotted #b38b0d;
}
http://jsfiddle.net/5xMG7/540/
If you mean center it vertically, one way you can do it is like this:
<div class="divider"><span class="line"></span></div>
.divider {
background: aqua url("styles/images/divider-stars.png") no-repeat center 0;
height:30px;
padding-bottom: 10px;
width: 100%;
margin: 20px auto;
float: left;
}
.line
{
border-bottom: 2px dotted #b38b0d;
margin-top:15px;
display:block;
}
Related
I have 4 divs in this order : #header , #content, #navigation, #footer.
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
float: left;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I am learning css, and in this scenario my understanding is that a non floated block level div named "navigation" will move in to take the place of a left floated div "content".
The text 'NAVIGATION' inside of the div with id "navigation" is not hiding behind the #content div and is instead appearing inside of #footer div.
After going through this question Text in floated div I learnt that content in following div will float around this floated div.
Now since this #content div is only 75% wide, why is the NAVIGATION text not appearing right next to the #content div ? Why does it appear inside of the #footer div ?
display:inline-block is a better way to use float
inline-block is better than float, The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image and is, by design, not best suited for general page layout purposes
Yo can do this, first remove
float: left;
in #content and add
display: inline-block;
and add
display: inline-block;
#header {
background: lightblue;
height: 10%;
border: 1px solid black;
}
#content {
background: green;
opacity: 0.5;
width: 74%;
display: inline-block;
height: 80%;
border: 1px solid black;
}
#navigation {
background: brown;
height: 80%;
width: 24%;
display: inline-block;
text-align: center;
border: 1px solid black;
}
#footer {
background: hotpink;
height: 10%;
border: 1px solid black;
}
body,html {
height:100%;
margin:0;
}
<div id="header">DEFAULT</div>
<div id="content">FLOAT</div>
<div id="navigation">NAVIGATION</div>
<div id="footer">CLEAR</div>
I know this is probably very simple but I have tried using all position settings, float, and nesting. The top div varies in height due to dynamically created text and I need the div below it to be 20px below the top div. Any help is greatly appreciated.
I know I have the position as absolute but that is just to demonstrate kind of what I'm looking for.
#wrapper {
position:absolute;
width:341px;
height:371px;
z-index:1;
border: solid #777 1px;
}
#topbox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
border: solid #000 1px;
top: 7px;
}
#bottombox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
top: 136px;
border: solid #000 1px;
}
<div id="wrapper">
<div id="topbox">Top text box #1. The text is dynamically created here with a height that will vary. </div>
<div id="bottombox">Bottom text box #2. The text is dynamically created here with a height that will vary and needs to be 20px below the bottom of the top text box.</div>
</div>
Looking at the CSS you have, the problem is you are using absolute positioning. For a task like this you should use relative positioning. Here it is on jsFiddle to show you it in action & here is the CSS I adjusted to achieve that:
#wrapper
{
position: relative;
float: left;
display: inline;
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 7px 0 0 0;
border: solid #000 1px;
}
#bottombox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 20px 0 0 0;
border: solid #000 1px;
}
Here is how it renders in my local browser now:
I also looked over your CSS & combined/consolidated it since I find that repeating code can cause confusion when debugging items like this. Here is how I would code this:
#wrapper, #topbox, #bottombox
{
position: relative;
float: left;
display: inline;
}
#topbox, #bottombox
{
width: 280px;
z-index: 1;
padding: 30px;
border: solid #000 1px;
}
#wrapper
{
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox { margin: 7px 0 0 0; }
#bottombox { margin: 20px 0 0 0; }
To give #topBox a bottom margin you simply have to use:
#topBox {
margin-bottom: 20px;
}
The problem is that since you use position: absolute the elements jumps out of their normal flow and will no longer relate to each other.
I need to add padding to a class with a background image. However, when I do so, the padding isn't added to the background image, just the anchor. What am I doing wrong? Here's my CSS:
.heart {
width:200px;
height:18px;
background:url(/images/content/digital-learning/course-library/sprite-favorites.png) 0px 18px repeat-y;
padding-left: 20px;
display:block;
}
Try using margin-left: 20px; instead.
Margin is outside the container and padding is inside the container, so padding won't move the background of the container.
Background can show based on background-origin: content-box;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background: url('https://via.placeholder.com/50x100') left center repeat-y;
padding-left: 20px;
display: block;
background-origin: content-box;
}
<div class="container">
<div class="heart">x</div>
</div>
or
Another solution is background-position-x: 20px;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background-image: url('https://via.placeholder.com/50x100');
padding-left: 20px;
display: block;
background-position-x: 20px;
background-repeat: repeat-y
}
<div class="container">
<div class="heart">x</div>
</div>
take a look at this Code. i want the Left & Right Box (DIVs) to appear in one line.. how to do it
<div><div style="float:left">a</div> <div style="float:left">b</div></div>
<div style="clear:both"></div>
Float both the left and right divs to the left and clear the footer. You will also need to adjust the widths of the left and right divs for them to fit on the same line.
#left
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#right
{
position:static;
width: 40%;
height: 50px;
margin-top: 10px;
margin-right: 10px;
background: #111111;
border: solid 3px #ff0000;
float: left;
}
#footer
{
position: static;
width : 100%;
height : 50px;
margin-top: 10px;
background: #111111;
border: solid 3px #ff0000;
text-align: center;
clear: both;
}
With this css
.addProblemClass{
width:300px;
height:300px;
/*width:25%;
height:40%;*/
border:solid 1px #000000;
margin: 5px;
background-color:#FFFFFF;
padding:5px;
opacity:0.9;/*For chrome and mozilla*/
filter:alpha(opacity=90);/*For IE*/
}
.boxHeader{
border: solid 1px #000000;
height: 20%;
padding: 5px;
}
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
height: 100%;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
float: left;
width: 20%;
height: 100%;
}
and this html
<div class="addProblemClass">
<div class="boxHeader">
<div class="addProblemHeaderImageDiv"></div>//DIV A
<div class="addProblemHeaderTextDiv"></div>//DIV B
</div>
</div>
why DIV A and DIV B are overllaping?
Use
float: left;
to addProblemHeaderTextDiv class
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
float: left;
height: 100%;
}
Edit
Why it is shown in two rows?
Since you are specifying the width as 20% and 80% they will fill up the entire space. You are also setting the border, so it won't fit in the 100% space. You can either reduce the width of any div or remove the border.
You cant do this because of the CSS Box model.. it adds the 1px border like this
20% + 80% = 100% width + 1px border
This could work, by subtracting the border again with margin. Else you must use more markup i am afraid.
.addProblemHeaderTextDiv{
border:solid 1px #FF0000;
width: 80%;
margin: 0 -1px;
height: 100%;
float: left;
}
.addProblemHeaderImageDiv{
border:solid 1px #00FF00;
margin: 0 -1px;
float: left;
width: 20%;
height: 100%;
}