.score{
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
.score p span{
padding-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
I want to move my text down a little bit but it's not working, putting padding in .score just makes it bigger and nothing happens if I put it in .score p span.
Nepotech's answer is correct. An other way is useing line-height for .score:
.score {
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
line-height: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
Just Use margin-top to p element
Note: I have changed color to blue, for better understanding!
.score{
font-size: 20px;
text-align: center;
background-color: blue;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
p{
margin-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
Related
I'm trying to make a 'custom' progress bar with numbers at each end of the progress bar. Left hand number being the current value, and the right hand side being the max/target value. I've got it so that I'm showing the two numbers but I can't seem to position the right hand number correctly.
What I'm trying to achieve is...
and what I currently have is...
This is what I currently have code wise...
JSFiddle
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
float: right;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I've tried putting the the second span outside the the progress inner div but then moves the text outside the whole thing and I couldn't work out how to move it into the correct place.
Can anyone help?
I have an interesting solution using linear-gradients, its pretty close, try playing around with the margins and outline to get border right.
.progress-outer {
width: 96%;
display: flex;
height: 35px;
margin: 10px 2%;
text-align: center;
border: 1px solid #dcdcdc;
background-image: linear-gradient( 80deg, orange 37% , #f4f4f4 37% );
border-radius: 20px;
justify-content: center;
align-items: center;
}
.progressBarCurrent {
color: black;
text-align: left;
width: 50%;
position: relative;
margin: 0px;
margin-left: 20px;
}
.progressBarGoal {
color: black;
position: relative;
text-align: right;
width: 50%;
margin: 0px;
margin-right: 20px;
}
<div class="progress-outer">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
Instead of float:left you can use position:absolute
.progress-outer {
width: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 1px solid #dcdcdc;
color: #fff;
border-radius: 20px;
position: relative;
}
.progress-inner {
min-width: 15%;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: orange;
}
.progressBarCurrent {
color: black;
float: left;
}
.progressBarGoal {
color: black;
position: absolute;
right: 5px;
}
<div class="progress-outer">
<div class="progress-inner" style="width:27%;">
<span class="progressBarCurrent">50g</span>
<span class="progressBarGoal">180g</span>
</div>
</div>
I started learning HTML/CSS recently and I'm trying to design the first page of a site by using these 2! I want to have 3 parts including logo, search box and signup button (from right to left) in the header part but I have a problem in it. The signup part doesn't stay in a row which other parts are. What's the problem with my code?
Here's my code:
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('images/logo.png') no-repeat right center;
height: 77px;
width: 319px;
float: right;
margin: auto;
}
.Search {
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<a href="." class="Logo">
</a>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
Remove float: right and replace margin into margin-left from class .Logo.
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('images/logo.png') no-repeat right center;
height: 77px;
width: 319px;
margin-left: auto;
text-align: center;
background: #d1e3e6;
}
.Search {
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<a href="." class="Logo">
All Set
</a>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
Add
display: inline;
to each of their css
eg
.Search {
display: inline;
height: 93px;
width: 220px;
float: left;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
display: inline;
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
display: inline;
float: left;
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<div>
<a href="." class="Logo">
Logo Goes Here
</a>
</div>
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
</div>
Css
.header{
width: 100%;
div{
display: inline-block;
width: 33.3%;
background: yellow;
}
div:nth-child(1), div:nth-child(3){
background:red;
}
Your header class is a flex container and then you use floats for the flex items in the container. So you are mixing these two concepts, but in my experience it is better to keep it with one of them. Anything you want to achieve, you can do with flex OR with floats.
As flex is the more modern (and simple) approach, I would stick with that one. Here is a very good article about aligning items in a flex container:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
Just remove the floating property because when you're using flexbox method to align the column no need to use float to align the column.
For further assistance comment for more information.
* {
box-sizing: border-box;
position: relative;
}
body {
background: #ffffff;
padding: 0;
margin: 0;
}
.Header {
height: 93px;
width: 100%;
display: flex;
flex-direction: row;
}
.Logo {
display: block;
background: url('https://via.placeholder.com/200') no-repeat right center;
height: 93px;
width: 300px;
margin-left: auto;
}
.Search {
height: 93px;
width: 220px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
}
.Search input[type=text] {
border: none;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/srch.png') no-repeat right center;
padding: 5px 25px 5px 5px;
margin: 25px 10px 0 0;
}
.Sign_up input[type=button] {
height: 93px;
width: 100px;
border-right: 1px solid #d1d5dc;
border-left: 1px solid #d1d5dc;
border-bottom: 8px solid #c00000;
direction: rtl;
font-family: Tahoma;
font-size: 16px;
background: url('images/sign_up.png') no-repeat right center;
}
<div class="Header">
<div class="Search">
<input type="text" placeholder="search" />
</div>
<div class="Sign_up">
<input type="button" id="SignUpButton" onclick="SignUpPage()" value="sign up" />
</div>
<div class="clear"></div>
</div>
I have been trying to get three bits of text (styled to look like buttons) to line up left, centre, and right using HTML and CSS, no Flexbox or JS, but without success. How can this be achieved? This is what I need:
Here is my code:
#row1 {padding: 20px 20px 5px 20px;
overflow: hidden; }
.button-container {display: block; text-align: center;}
.button-left {
padding: 0 5px;
text-align: center;
border: 1px solid;
float: left;
font-size: 75%; }
.button-right {
padding: 0 5px;
text-align: center;
border: 1px solid;
float: right;
font-size: 75%; }
.button-centre {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
<div id="row1">
<div class="button-container">
<span class="button-left">previous</span>
<span class="button-centre">issue</span>
<span class="button-right">next</span>
</div><!--close button-container">
</div><!--close r1-->
Flexbox is ideal for this type of a problem:
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
.button-right {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
.button-centre {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%;
}
<div id="row1">
<div class="button-container">
<span class="button-left">previous</span>
<span class="button-centre">index</span>
<span class="button-right">next</span>
</div>
</div>
Alternative without Flexbox:
* {margin: 0; padding: 0; box-sizing: border-box}
#row1 {padding: 20px 20px 5px 20px}
.button-container {position: relative}
.button-left {
position: absolute;
left: 0;
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
.button-right {
position: absolute;
right: 0;
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
.button-centre {
position: absolute;
left: calc(50% - 17px);
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
<div id="row1">
<div class="button-container">
<span class="button-left">previous</span>
<span class="button-centre">issue</span>
<span class="button-right">next</span>
</div>
</div>
Changes made: .button-container {position: relative}, also added position: absolute to all the children with appropriate values of the left and right properties, for the middle child the value of the left property calc(50% - 17px) is calculated based on it's width (padding and border included) which is 34px divided by 2 and deducted from 50%.
HTML
<div id="row1">
<div class="button-container">
<span class="button">previous</span>
<span class="button">index</span>
<span class="button">next</span>
</div><!--close button-container">
</div><!--close r1-->
CSS
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {display: block; text-align: center;}
.button {
padding: 0 5px;
text-align: center;
border: 1px solid;
font-size: 75%; }
You can use Flexbox, assuming you just want all the buttons to be next to each other you can give your .button-container the property display:flex;.
Here's a JSFiddle.
Your button container is already a block level element, since you are using a <div> so you don't need the display:block
.btns {
position: relative;
display: inline-block;
font-size: 0;
}
.btns a {
position: relative;
display: inline-block;
text-decoration: none;
background-color: #F4F4F4;
color: #000;
font-size: 14px;
padding: 5px 15px;
transition: all .3s ease-in-out;
}
.btns a:hover {
background-color: #777;
color: #FFF;
}
.btns a:first-child {
border-radius: 10px 0 0 10px;
border-right: 1px solid #CCC;
}
.btns a:last-child {
border-radius: 0 10px 10px 0;
border-left: 1px solid #CCC;
}
<div class="btns">
Previous
Index
Next
</div>
Simplest way would be to just add a <br>tag after each button, line this:
<div id="row1">
<div class="button-container">
<span class="btns button-left">previous</span>
<br>
<span class="btns button-centre">index</span>
<br>
<span class="btns button-right">next</span>
<br>
</div><!--close button-container">
</div><!--close r1-->
Codepen example
In this case I'm wanting the image to be on the left then the authors name centered next to the image and then below those I'm trying to center the buttons. I had the picture and the buttons centered but when I add the authors name it all goes off.
Also how would I go about make everything a bit smaller. I've tried adjusting the height and width but then the author image ends up outside the section.
.authorbio {
background-color: #000;
border-radius: 10px;
border: 4px dotted #870505;
line-height: 50px;
width: 55%;
height: 55%;
margin: 0 0 10px 10px;
}
.authorbio>h1 {
vertical-align: right;
text-align: center;
}
.authorbio>img {
border: 1px solid #870505;
border-radius: 20px;
width: 150px;
height: 150px;
margin: 10px;
vertical-align: middle;
}
/* social links
--------------------------------------- */
a.sociallinks {
-webkit-border-radius: 5px 5px;
border: solid 1px rgb(0, 0, 0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(76, 68, 68)), to(rgb(22, 21, 21)));
color: #ccc;
text-decoration: none;
text-align: center;
display: inline-block;
padding: 2px 2px;
font-size: 20px;
font-weight: bold;
}
a.sociallinks:hover {
-webkit-border-radius: 5px 5px;
border: solid 1px rgb(0, 0, 0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(224, 0, 0)), to(rgb(61, 2, 2)));
color: #ccc;
text-decoration: none;
text-align: center;
display: inline-block;
padding: 2px 2px;
font-size: 20px;
font-weight: bold;
}
a.sociallinks:visited {
-webkit-border-radius: 5px 5px;
border: solid 1px rgb(0, 0, 0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(96, 96, 96)), to(rgb(2, 2, 2)));
color: #000;
text-decoration: none;
text-align: center;
display: inline-block;
padding: 2px 2px;
font-size: 20px;
font-weight: bold;
}
a.sociallinks:active {
-webkit-border-radius: 5px 5px;
border: solid 1px rgb(0, 0, 0);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(30, 30, 30)), to(rgb(70, 70, 70)));
color: #ccc;
text-decoration: none;
text-align: center;
display: inline-block;
padding: 2px 2px;
font-size: 20px;
font-weight: bold;
}
<div class="authorbio">
<img src="https://images-na.ssl-images-amazon.com/images/I/61mO3gFua5L._UX250_.jpg" alt="Paula Cappa" />
<h1>Paula Cappa</h1>
<br /><a class="sociallinks" href="http://www.amazon.com/Greylock-Paula-Cappa-ebook/dp/B0168XVNZS/ref=cm_cr_pr_product_top?ie=UTF8" rel="nofollow" target="_blank" title="Greylock on Amazon">Amazon</a> <a class="sociallinks" href="http://www.facebook.com/paula.cappa.94"
target="_blank" title="Author Paula Cappa on Facebook">Facebook</a> <a class="sociallinks" href="https://www.goodreads.com/book/show/26887306-greylock" target="_blank" title="Greylock on Goodreads">Goodreads</a> <a class="sociallinks" href="https://www.smashwords.com/books/view/582884"
target="_blank" title="Greylock on Smashwords">Smashwords</a> <a class="sociallinks" href="https://twitter.com/PaulaCappa1" target="_blank" title="Paula Cappa Twitter">Twitter</a> <a class="sociallinks" href="https://paulacappa.wordpress.com/" target="_blank"
title="Paula Cappa Wordpress">Website</a>
</div>
try this one, you have only to replace image and link addresses.I wrote a full code for you.try this.if this is not the case tell me.
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div.bio{
width: 500px;
height: 400px;
margin: 1%;
padding: 10px;
background-color: black;
border: 3px dotted red;
border-radius: 5px;
}
div.autorimage{
width: 150px;
height: 150px;
border: 2px solid red;
box-shadow: 1px 2px 1px white;
border-radius: 5px;
}
div.autorimage img{
width: 100%;
height: 100%;
}
div.authorlink{
width: 100%;
text-align: center;
}
div.authorlink a{
font-size: 45px;
}
div.authorlink a:hover{
text-decoration: none;
color: red;
}
div.buttonsetone{
width: 100%;
}
div.buttonsettwo{
width: 100%;
margin-top: 50px;
}
div.buttonsetone div{
width: auto;
background-color: gray;
text-align: center;
float: left;
margin-left: 3%;
padding: 1%;
border: 1px solid white;
border-radius: 5px;
}
div.buttonsetone div:hover{
background-color: red;
}
div.buttonsetone div a{
text-decoration: none;
color: white;
font-size: 35px;
}
div.buttonsettwo div{
width: auto;
background-color: gray;
text-align: center;
float: left;
margin-left: 3%;
padding: 1%;
border: 1px solid white;
border-radius: 5px;
}
div.buttonsettwo div:hover{
background-color: red;
}
div.buttonsettwo div a{
text-decoration: none;
color: white;
font-size: 35px;
}
</style>
</head>
<body>
<div class="bio">
<div class="autorimage"><img src=""></div><br/>
<div class="authorlink">Paula Cappa</div><br/>
<div class="buttonsetone">
<div>Amazon</div>
<div>Facebook</div>
<div>Goodreads</div>
</div><br/>
<div class="buttonsettwo">
<div>Smashwords</div>
<div>Twitter</div>
<div>WebSite</div>
</div>
</div>
</body>
</html>
Check this working
Codepen example
I just made the title inline-block and adjusted the width accordingly with the useful calc property.
.authorbio>h1{
vertical-align: right;
text-align: center;
display: inline-block;
width: calc(100% - 175px); /* substract the image's width + some extra */
}
Then put the links inside a container to apply some flex properties (justify-content: center did the magic).
<div class="sociallinks-container">
<!-- put your links here -->
...
</div>
.sociallinks-container {
display: flex;
flex-wrap: nowrap; /* this prevents the items wrapping to another line */
justify-content: center; /* this centers the links */
}
Why is the "Input Status" div block got offset in its parents.
I did try toggle all its css attributes in the web inspector, it seems nothing fix the offset. Where did it come from?
Please have a look this demo: http://jsfiddle.net/pengyanb/Lfvnr9y1/
.containing_tab {
width: 100%;
height: 40pt;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>
I toggled all its css attribute in the web inspector,
Because the vertical-align property for inline elements defaults to baseline. Just change that to top:
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
vertical-align:top;
}
jsFiddle example
remove the height from the .containing_tab
.containing_tab {
width: 100%;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>