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.
Related
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
So I'm just a begginer to this HTML and CSS stuff, and I tried to make my own webpage. The thing is, it looks like this:
While I would like to get the second div(#diary) centered, but I can't do it without screwing up the whole webpage. Which will be the correct code?
This is what I have:
HTML:
<div id="progress">
Blablabla
</div>
<div id="diary">
blablabla
</div>
CSS:
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin:auto;
width:30em;
display:inline-block;
}
#progress {
font-size:16px;
width:auto;
float:left;
display:inline-block;
margin-left:25px;
}
Thanks in advance ^^
You have mixed display: inline-block and float:left which makes no sense. Elements that float become display: block; by default. http://www.w3.org/TR/CSS2/visuren.html#float-position
There are two ways to solve your problem.
Way1 Go Inline-block all the way:
http://jsfiddle.net/fDx2U/
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin:auto;
width:30em;
display:inline-block;
vertical-align: top;
}
#progress {
font-size:16px;
width:auto;
vertical-align: top;
display:inline-block;
margin-left:25px;
}
How to the rid of the margin between the items: How to remove the space between inline-block elements?
Vital for this solution is the vertical-align:top; (your initial problem)
Way2 Go floating all the way:
http://jsfiddle.net/fDx2U/1/
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin-left: 100px;
}
#progress {
font-size:16px;
width:auto;
float:left;
margin-left:25px;
width: 100px;
}
Vital for this solution is that the width of .diary equals the margin-left of #progress
Try this
#diary {
margin:0 auto;
width:30em;
display:block;
}
I seem to have a difficulty in putting the button i made in the center of the screen. Here's the source code.
View Products
Here are the styles
/*header button styles*/
a.header-button {
display: inline-block;
background-color:#
}
a.header-button:hover {
color: #e8ddc8;
text-decoration: underline;
}
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
text-align:center;
}
You see, even though I put text-align:center in the .header-button, the button does not position itself at the center. (See image below)
Can anyone help me?
Try this. Working Fiddle
a.header-button {
display: block;
background-color:#;
margin:0 auto;
width:100px;
}
One solution: http://jsfiddle.net/xzY5j/
css:
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
}
.container {
text-align:center;
width: 100%;
padding: 50px;
background-color:#ccc;
}
}
HTML
<div class="container">
View Products
</div>
Other suggestion is:
Binita Tamang solution she wrote it before I had a chance so I will let her get the credit for it :)
You should give the container or the parent element text-align:center
jsfiddle
HTML
<div class="parent">
View Products
</div>
CSS:
.parent{
text-align:center;
}
If you want to put a button or any element on middle of the screen,then use position absolute an give the top 50% and left 50% now,give margin just half of its width and height in minus :
Something like this :
CSS
button{
position:absolute;
top:50%;
left:50%;
width:100px;
height:30px;
margin:-15px 0 0 -50px;
}
And if only middle from left then :
button{
position:absolute;
top:some_top_in_px;
left:50%;
width:100px;
height:30px;
margin:0px 0 0 -50px;
}
Fiddle DEMO
I have a .container in that there are n number of (left-block and right-block) div's.
left-block is floated left and right-block is floated right.
But I am not getting margin after 1st left-block and right-block and 2nd left-block and right-block
here is a demo: JSBin
Add margin-top to .left-block as well as .right-block
Demo
.left-block {
float:left;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear: right;
margin-top: 10px;
//position:relative;
}
.right-block {
float:right;
border:solid #CCC 1px;
width:350px;
height:125px;
background:transparent;
clear:right;
//position:relative;
margin-top: 10px;
}
P.S Remove the <br /> tags, they are not required.
The above will add 10px margin to top boxes as well, inorder to get rid of it, use the selectors below.
.container > div:nth-of-type(1) {
margin-top: 0;
}
.container > div:nth-of-type(2) {
margin-top: 0;
}
http://jsbin.com/ayiziNa/7/
You have to be careful with floated elements because they become inline elements - you might want to define them as inline-block first, so they are able to maintain margin without causing other problems
Here is the code I applied:
.container > div {
display: inline-block;
margin-top: 20px;
}
I have the following code. It's essentially a simple grid view that uses <ul> and <li> tags. I wanted to make it responsive such that the <li> elements are always centered no matter what the width of the screen is. How can I do so? I've tried setting the padding-left and padding-right as percentages, however it doesn't work. Right now if I adjust the width of the screen it doesn't always stay centered.
Simply add text-align: center to the parent <ul>
Fiddle
I'll extend on the previous answer...
Also center the UL
#home-listing {
text-align: center;
width:80%; /*Pick Your Own Width*/
margin:16px auto;
}
http://jsfiddle.net/Zd9Gf/3/
It depends on what you mean by centered. In order to center the entire list you could do something like:
ul {
padding: 0px;
width:500px;
margin:auto;
}
See this jsFiddle.
add this class:
ul.search-results{
width:100%;
}
and update this class:
ul.search-results li {
border-right: 1px solid #cecdcb;
border-bottom: 1px solid #cecdcb;
border-top: 1px solid #fff;
list-style: none;
padding: 0;
display: inline-block;
vertical-align: top;
width:60%;
margin:0 20%;
text-align:center;
}