I'm trying to create a "cancel" link that looks like an x with a solid red circle behind it.
Here is the CSS:
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24);
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
}
This is the HTML code:
<div class='circle'>
x
</div>
It ends up looking like this: alt text http://www.freeimagehosting.net/uploads/472563dfe4.png.
How do I move the x so that it is centered within the circle? Changing the margin-top or bottom doesn't seem to work...
If you relatively position your a tag you can fix it:
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
Adjust the top value to your liking.
Your font must accomodate characters like É, q, X and x, etc and still be displayed over background whatever the height of the character is.
I found that using an X (or text-transform: uppercase; obviously) and font-family: monospace; was an improvement with your code, though not perfect. Solution provided by mhr is useful even with a monospace font.
I am doing something similar, and using the following to center my text:
text-align: center;
margin: auto;
position: relative;
Related
I don't know if this is possible easily, but is there a CSS style to align the top of the tallest character with the border of its container?
HTML
<div><h1>The "T" of this h1 needs to align top (touch the border)</h1></div>
CSS
div {
background:orange;
}
h1 {
vertical-align:top; //does not seem to work?
}
JS-Fiddle
Currently, it looks like this
But it should look like this
Or like this (line-height = minimum?)
How can I achieve this?
This is kind of random, because it depends on the proportions of your font, but you can try something like this:
h1 {line-height: .9;}
Adjust the line-height value to suit the font. E.g. line-height: 32px; font-size: 38px;, or line-height: 0.9em; font-size: 2em; etc.
If there isn't enough orange at the bottom, you could always add some bottom border:
border-bottom: 20px solid orange;
Try below dear
div {
background:orange;
}
h1 {
position:relative;
top:-8px;
}
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start: http://jsfiddle.net/gtspk/
HTML
<span class="line">
<h2>Latest Track</h2>
</span>
CSS
.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?
UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support: http://jsfiddle.net/gtspk/3/
Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text)
http://jsfiddle.net/gtspk/9/
<span class="line">
<h2><span>Latest Track</span></h2>
</span>
.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}
Right, sorry, misunderstood what you meant by padding. Fixed.
I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
I'm doing a menu for a restaurant that they dynamiclly add. it looks like this
Dish Name Price
Content in the dish,Content in the dish,Content in the dish,
Content in the dish,Content in the dish.
What i want to do is to get the blank space dotted, with . or dotted border.
But i cannot figure out how to get the css to autoadjust the width of the blank space div.
The dishnames could be longer then "dishname".
Any1 have a solution for this?
EDIT
The price and name is in 2 divs already with floats on them
.dishHead
{
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice
{
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
Edit2:
The whole thing is structured as below:
a div that floats right or left
the left floating head, the right floating price, and a description below.
I need a div between the head and price without affecting the whole div it lies in
I think I would do it with a background image on the whole of the "heading" part then use a background color on the name and price div to cover the image however that will only work if the background is a plain colour.
In answer to your question to get a third div to take up the remaining space between the left and right divs you would use overflow:hidden on it so an example using a dotted border might look like this:
Example Fiddle
CSS:
.dishHead {
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice {
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
.spacer {
overflow: hidden;
border-bottom: 3px dotted #000;
}
HTML:
<div class="dishHead">Dish Name</div>
<div class="dishPrice">Price</div>
<div class="spacer"> </div>
<div class="dishContent">
Content in the dish,Content in the dish, Content in the dish,
Content in the dish,Content in the dish.
</div>
You could place lots of dots in an element with dishname and use the fallowing css:
.dishname {
width:400px;
overflow:hidden;
white-space:nowrap;
}