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}
Related
So, I have this thing where this image sits on top of anything, regardless of how much I alter the z-index. I want to make it so that the bluff tag sits on top of the .quoteicon, but no matter what I do it just doesn't work. The little quotation mark I've put inside of it shows up, but the red background of it is hidden behind.
I want it to look like this (I had to do this in photoshop, just to explain what I want.):
http://i.gyazo.com/3eddbf25f79c97fb7d646d6050c1b23a.png
But it currently looks like this (You can see the little white quotation sitting in front of it.):
http://i.gyazo.com/0859417a1746ba934896dea46acc073d.png
The CSS:
.quotewrap{
margin-bottom:30px;
}
.quoteicon{
width:60px;
margin-bottom:-58px;
padding-right:5px;
border-right:5px #F0F0F0 solid;
z-index:998;
}
.quoteicon img{
border:5px solid white;
outline:1px solid #F4F4F4;
}
.bluff{
background-color:red;
text-shadow:1px 1px black;
height:34px;
width:34px;
color:white;
font-family:arial;
line-height:34px;
text-align:center;
font-size:20px;
margin-top:-10px;
z-index:999;
}
THE HTML:
<div class="quotewrap">
<div class="quoteicon">
<img src="https://33.media.tumblr.com/avatar_d020f5726f28_48.png">
</div>
<div class="bluff">❝</div>
</div>
See this fiddle: http://fiddle.jshell.net/d3cosgc7/
You have to understand the principles of position relative and position absolute.
That will help you a lot.
Take your time and go through the fiddle, if you have any questions, let me know.
Cheers,
z-index attribute works only for containers with position: relative|absolute|fixed;
i dont know how to say (i think my english is not very good), but i need help for putting 4 same divs in to one css code.
Problem:
float:left; margin:10px 20px 10px 0;
As you can see at this DEMO, tab number 2 and 4 does not fit to the space. There is free space at the right corner, but the max spacing is 20px.. is there even possible to fix this problem without jquery?
Sorry for bad english, and thanks for any answers!
Update your tabs css as mentioned below :
.tabs
{
float:left;
margin:10px 0px 10px 0;
width:50%;
height:100px;
background:grey;
}
Live Demo
you can add last class with marign-right:0 !important;
my example is here and adjust width if it is helpful then ok otherwise let me know i will give you another technique
.tabs {float:left; margin:10px 20px 10px 0; width:48.5%; height:100px; background:grey; }
.last{ margin-right:0 !important;}
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 don't want word wrap but this is being. I have set width more than text length but this is still breaking so how can I stop word break.
css
.menu{
float:left;
width:120px;
height:34px;
padding:12px 6px 0 6px;
color:#cc8d50;
}
Try:
.menu{
white-space: nowrap;
...
Add that to your CSS.
In your css insert this:
white-space:nowrap;
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;