Here is the link to my code
http://jsfiddle.net/8B875/
Why exactly is my my Textboxsquare not showing up?
The HTML
<div id="textbox"></div>
<div id="textboxSquare"></div>
The CSS:
* {
margin: 0; padding: 0;
}
#textbox {
border: 1px solid #848484;
-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
outline:0;
height:25px;
display: block;
box-sizing: border-box;
width: 300px;
padding-left:20px;
padding-right:20px;
}
#textboxSquare {
display:inline-block;
box-sizing: border-box;
height:25px;
width: 150px;
}
It is there, you just can't see its border. Add
border: 1px solid #848484;
and you will see it.
It is showing up, you just can't see it.
If you add border:1px solid pink; to the CSS you will see it.
Your first box has height and width, the second box doesn't have enough properties to be rendered visible. Add heigh, border properties etc.
Related
I want to centralise a button or a tag within the line it is on (by themselves).
I've written this CSS which makes it yellow, puts a border around it etc but it is always left aligned. How do I centralise it?
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
}
Thanks for your help
several ways to do this, but maybe
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
display: block;
margin-left: auto;
margin-right: auto;
width: ??px;
}
will do the trick.
You can do it by adding text-align:center; to parent <div>
Example here https://jsfiddle.net/uy4u781d/
margin-left:auto;
margin-right:auto;
width:150px; //width as you want
display:block;
I am interested in creating something like the picture below. A counter box with a transparent background and a thin border, plus an icon in the bottom of that semi circle.
I made something like what I want, see below:
.chartBottom{
width:0;
height:0;
border:60px solid #c45;
border-bottom:60px solid transparent;
border-radius: 60px;
}
But the problem of this trick is that it can't have any transparent background. Any ideas?
use this code instead of using border 60px and setting width and height to zero.use width and height and border 1px;
.chartBottom{
width:60px;
height:60px;
border:1px solid #c45;
border-bottom:1px solid transparent;
border-radius: 60px
}
here is jsfiddle for you to see.
I think this fiddle should help you.
<div class="wrapper">
<div class="chartBottom"></div>
<div class="icon">Icon</div>
</div>
.chartBottom {
width:120px;
height:120px;
border:1px solid #c45;
border-bottom:1px solid transparent;
border-radius: 60px;
}
.icon {
position: relative;
height: 40px;
width: 60px;
top: -30px;
left: 30px;
text-align: center;
border: 1px solid green;
}
.wrapper {
background-color: rgba(0,0,0,0.5);
padding: 3px;
width: 126px;
}
.circleDiv{
width:120px;
height:120px;
border-right:1px solid white;
border-top:1px solid white;
border-left:1px solid white;
border-bottom:1px solid transparent;
border-radius: 50%;
}
Demo
It's pretty easy to add an absolute-positioned icon inside the relative-positioned container (see fiddle).
As for making it responsive, I recommend using media queries to adjust the values to keep the design tight (not included in fiddle).
http://jsfiddle.net/1gtss907/5/
<div class="container">
<div class='chartBottom'>
<h4>56</h4>
<i class="fa fa-thumbs-up"></i>
</div>
<p>Projects done this year</p>
</div>
body {
background: #222;
font-family: "Helvetica Neue", sans-serif;
}
.container {
padding: 8em;
text-align: center;
}
.chartBottom{
border:1px solid #1abc9c;
border-bottom:1px solid transparent;
border-radius: 50%;
color: #fff;
font-size: 20px;
height: 150px;
line-height: 150px;
margin: 0 auto;
position: relative;
text-align: center;
width: 150px;
}
h4 {
font-size: 55px;
font-weight: 900;
margin-top: 0.75em;
}
p {
color: #999;
font-size: 15px;
font-weight: 300;
margin: 5px auto 0;
width: 100px;
}
i {
color: #16a085;
opacity: 0.75;
position: absolute;
bottom: 0;
left: 45%;
}
I am trying to make a basic button box with an arrow at the top of it...
http://jsfiddle.net/8K4qB/ --this is what it comes out to.. i can't make it align at the top in the middle of the bottom.
HTML Code
Read More
CSS Code
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
}
.test:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
I'd like it to look like the pic
In order to achieve the specific behaviour you're after you need to change your HTML as well as your CSS- otherwise centrally justifying a pseudo element correctly will elude you.. Change the elements in the example as required (e.g. the top level div can be changed to a.button.test)
REVISED FIDDLE
HTML
<div>
<div></div>
<div>text goes here</div>
</div>
CSS
div {
display:inline-block;
text-align:center;
}
div div:first-child {
display:block;
width: 0;
height: 0;
border-bottom: 10px solid darkorange;
border-right:30px solid transparent;
border-left:30px solid transparent;
margin: 0 auto;
}
div div:last-child{
display:block;
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: darkorange;
position:relative;
text-transform:uppercase;
}
Try this ,display:block so that your arrow still in the middle: DEMO
CSS:
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
display:block;position:relative;top:20px;
}
.test:before {
content:'';
position: absolute;
top:-20px;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
.middle{
padding-left:15px;
}
HTML:
<span class="middle">Read More</span>
I am having an issue with a shadow displaying incorrectly in CSS. It is set to drop on on the bottom and to the right of the box but for whatever reason it is being cut off and I can't work out why.
JS Fiddle
http://jsfiddle.net/jyb5V/
#content {
padding: 0 270px 0 0;
margin-bottom: 50px;
height: 800px;
background-image: url("images/mainbg.jpg");
border:1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
box-shadow: 4px 4px 2px #000000;
}
Website
http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Thanks
Remove overflow: hidden;
#container {
width: 100%;
float: left;
overflow: hidden; // remove this line
}
Demo
Here is my html:
<div class="pagination">Page
«
1
2
<strong>3</strong>
4 ...
104
»
</div>
My css:
div.pagination { width: 90%; margin: 15px auto; float:right; text-align: right; }
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination strong { border: 1px solid #0667B9; background-color:#FFFFFF; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination a:hover { border: 1px solid #0667B9; background-color:#0667B9; padding: 3px 6px; color:#B4D6F2; margin: 1px; }
And what I am getting in result:
The problem you see, things are getting overlapped, what I would like to avoid.
Thanks in advance for any help. Cheers.
It's because you used float I think.
Can you get away with using display: inline instead?
EDIT:
BTW I would have used list-items to display the paginator.
add a line-height:30px; to div.pagination
I copied your code and it looks fine but try this
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 5px 10px; }
The padding pushes the border outside. So you might need some margin to push the links downward.
Add
display:block; width:10px; float:left;
to
div.pagination a