Right now I would like to have a plus sign with a circle around it.
http://jsfiddle.net/dtracers/cvtztcy1/1/
<h1>TEXY TXT <span>+</span></h1>
<style>
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0px;
padding-bottom:0.125em;
cursor:pointer;
margin:0px;
}
/* Just to see if that would modify anything */
h1 {
padding:0px;
margin:0px;
}
</style>
After looking at it you can tell that this is not a circle but instead an elipse.
I have realize that it is the text height that is causing this issue but is there a way to make it appear closer.
The background is dynamic so I can not use an image.
And I would rather not have a floating element that depended on absolute positioning.
I would also like the circle in height to be equal to its current width.
I know I can just make it wider but I don't want a giant circle I want a tight small circle
EDIT
For those that are saying this is the same question it is kinda.
The difference between what I am asking and what that person is asking is that in their case the circle is larger than the bounds of the text.
What I am asking is for a circle that is smaller than the bounds of the text.
As such none of the solutions given there will apply to my question.
You can achieve this using :after pseudo element. check the DEMO.
span {
position:relative;
padding:0; margin:0;
cursor: pointer;
}
span:after
{
content:"";
position:absolute;
display:inline-block;
left:-1px;
top:7px;
background:gold;
border-radius: 50%;
width:0.5em;
height:0.5em;
font-size:1.3em;
z-index:-1;
}
Adjust your padding value in css and all is good :
demo
span {
border-radius: 50%;
border-style:solid;
border-width: 1px 3px 1px 1px;
padding:0 2%; /* updated */
/* padding-bottom:0.125em; removed */
cursor:pointer;
margin:0px;
}
This will lead to a perfect circle:
span {
border-radius: 150px;
border-style:solid;
border-width: 1px;
padding:1% 2%;
cursor:pointer;
margin:0px;
width:200px;
line-height:300px;
}
One solution is to make the span have equal width and height using em so it naturally adjusts to the font size.
h1 span {
display: inline-block;
width: 0.9em;
height: 0.9em;
line-height: 0.8em;
text-align: center;
color: teal;
background-color: palegoldenrod;
border: 0.18em solid;
border-radius: 1000px;
padding-left: 1px;
cursor: pointer;
}
Then center the plus sign with line-height and text-align.
Fiddle with the CSS:
http://jsfiddle.net/zx2c4drL
Related
Please, no javascript.
Imagine this if you will. A page that has hundreds of boxes with each box containing a joke, cite, image... (all boxes with a display:inline-block;).
Now I'm trying to place A chart with a few components with position:absolute; and left: in one of the display:inline-block; boxes with no luck. The chart shows at the left side of the page with the next joke box underneath it.
How do I control it?
Cheers, All.
Part 2 (my box code):
.boxDarth{
border-radius:5px;
border:1px solid #663810;
box-shadow:-3px 5px 4px #000000;
margin:6px 3px;
padding:6px;
display:inline-block;
line-height:1.5;
text-align:left;
text-decoration:none;
font-weight:lighter;
letter-spacing:1.4;
text-shadow:-1px 1px 1px #37363b;
word-wrap:break-word;
vertical-align:top;
position:relative;
}
The chart ccs is quite long. If what I provide here is not enough, and since I've never asked a question here; should I paste it here? upload a file?
.pie{
position:absolute;
width:100px;
height:200px;
overflow:hidden;
left:150px;
-moz-transform-origin:left center;
-o-transform-origin:left center;
-webkit-transform-origin:left center;
transform-origin:left center;
}
The container should have position: relative as a CSS attribute
The chart has to be a child of the inline block box, and the box needs to have position: relative; on it.
.inline-box {
display: inline-block;
background: violet;
width: 300px;
height: 300px;
position: relative;
}
.chart {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 150px;
background: cornsilk;
}
<div class="inline-box">
<div class="chart">
hi, I'm an absolutely positioned chart inside of a relatively positioned inline box
</div>
</div>
I want my blockquotes aligned, not overlapping. The issue can be seen here: http://ymirsgirlfriend.tumblr.com/post/86505956778/caramelcheese-carry-on-my-wayward-butt
Example Image of requirement.
Here is my CSS:
blockquote {
display: block;
width:200px;
margin-left:20px;
margin-right:10px;
border:1px solid #bbb4b4;
padding: 5px 5px 5px 5px;
border-radius:0px;
color:#aaaaaa;
background-color: #fafaf7;
width:180px;
margin-left:0px;
cursor:url(http://img69.imageshack.us/img69/7673/cursorw.png);
}
Thank you to anyone who looks at the question!
Avoid width and set a negative margin-right. Keep the padding and don't use overflow:hidden, otherwise the content will get cut or too close to the border.
blockquote {
/* width: 200px; no width!*/
margin-right: -6px; /*this is the code*/
}
A JSfiddle would be useful but
#stuff > blockquote {
overflow:hidden;
}
seems to do the trick.
I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.
I know there is like 100 of topics made and I've tried all 100's of them and I just can't get it to work, Aligning the image in the middle, if you check in to
http://one1.no-ip.org/index.php?hitta=tanto&page=search
you'll see that the logo is at the top of the screen and whatever I do I just can't make it align correctly. I'm sure something is interfering but I just can't find out what, I even made a fiddle to check if the method im using is working and it is
http://jsfiddle.net/UJATF/
Working example with the image in the middle of the div element
CSS
.logo{
background:white;
position:absolute;
width:105px;
height:90px;
line-height:90px;
left:180px;
margin-top:20px;
line-height:90px;
text-align:center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black;
z-index:1000;
overflow:hidden;
}
.logo img{
vertical-align:middle;
max-width:90px;
max-height:40px;
}
HTML
<div class="logo">
<img src="http://www.tantobil.se/images/logo.png">
</div>
so all help would be very much appreciated
Define your anchor link display : inline-block and give to margin-top
as like this
.logo > a {
display: inline-block;
margin-top: 22px;
}
Results is
--------
Is your are using dynamic with of img than used to this
Second option is
.logo > a {
display: table-cell;
height: 90px;
text-align: center;
vertical-align: middle;
width: 105px;
}
Since you're using fixed heights in your css, why don't you just use simple math to determine the top position of the logo?
.content is 121px high,
.logo is 90px high
The difference is 31px, which means you need a top offset of 15.5px
Also, set the .content to position: relative so you position the logo relatively to .content's top.
I put down an example below that I have trouble with:
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
Link: http://jsfiddle.net/qhoc/SQpdu/5/
Text 1 has pseudo-element but the height being adjusted with the pseudo-element height.
Requirements:
a. Text 1 height same as Text 2 height
b. The red rectangle in the middle of the button.
c. The text must have space around them
d. Everything has to be position:relative, at least not absolute or fixed because this is just a button that could be placed anywhere.
I could just (a) remove padding: 6px 12px; and add height: 30px; but then my text won't be in the middle with space around it OR (b) add another inner div within Text 1 and make that the red rectangle but I rather not add div.
Is there a way to work around this?
UPDATE: I changed the correct link and clarify the requirements.
I don't know what exactly you want but try this maybe helpful
.text1, .text2 {
width: 200px;
padding: 8px 12px;
display:block;
background-color: gray;
margin: 5px;
height:20px;
}
.text1{
height:28px;
padding:0px 12px 8px 12px;
}
.text1:before {
content:"";
background: red;
display: block;
position: relative;
width: 20px;
height: 10px;
left: 110px;
top: 15px;
}
DEMO
You use this style code
.text1, .text2{
width:120px;
margin:0 auto;
height:30px;
}