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.
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 am trying to create links for following on Facebook, twitter etc. using a sprite image. There is a plain text following links made up of these sprite images set as background. I am having problem aligning the text, the span and the 'a' links vertically.
Here is the css
.sprite a {
border:solid 1px blue;
width:20px;
height:20px;
display:inline-block;
color:#00f;
background:url('images/sprite.png') 0 0;
}
span {
border: solid 1px red;
}
Here is the HTML
<div class="sprite">
Follow us on: <span id="spriteFacebook"></span>
</div>
I am using borders just to identify the misalignment
This is how the result looks like
Shouldn't these be aligned by default? Should I use floating divs to achieve this?
Try that:
- wrap a span around your text: <span class="text">Follow us on:</span>
- float it left and give it a line height: span.text { float: left; line-height: 33px; }
http://jsfiddle.net/6s4HM/20/
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 implementing a design which contains elements which are semantically headers (h3, h4, etc.), are full-width block elements, and are followed by a vertically centered horizontal line which extends the full width of the header a la:
I know I could take care of this by wrapping each header in a <div> and inserting another block-level element after it but would prefer not to pollute my HTML like that. My first inclination was to use a ::after element on the headers, like so:
.line-header::after {
content:'\00a0';
display: inline-block;
float: right;
width: 55%;
margin-top: -12px;
border-bottom: 1px solid gray;
}
However, this requires making the ::after element fixed-width, which obviously doesn't work with different-width headers: http://jsfiddle.net/nbSTf/
Any ideas on how to get a variable-width line which will fill the space to the right of the header, without inserting extra elements into the HTML?
EDIT: Tyriar's answer below (suggesting drawing the line full-width behind the header and setting the background-color to erase the line behind the text) reminded me that this is taking place in front of a repeating background image - so no background tricks are possible unfortunately.
Here's a method you could do it with, unfortunately it relies on an attribute (not necessarily title), this could easily be set programmatically with JavaScript though.
It uses :before and :after pseudo elements, :after is used to draw the line the full width and :before is used to draw white background behind the text of the size of the text. The pseudo-elements need their z-index set correctly to layer in the correct order.
jsFiddle
HTML
<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>
CSS
.line-header {
margin-top: 15px;
position:relative;
}
.line-header:before {
position: absolute;
display:block;
top:0;
left:0;
bottom:0;
content: attr(title);
background-color:#FFF;
color:#FFF;
z-index:-1;
padding-right:.5em;
}
.line-header::after {
position:absolute;
content:'';
display: block;
left:0;
right:0;
top:50%;
background-color:#555;
height:1px;
z-index:-2;
}
Try this for your CSS:
EDIT:
body { background: red; overflow-x: hidden }
.line-header {
margin-top: 15px;
margin-right: 5px;
display: inline;
z-index: 100;
float: left;
clear: left;
}
.line-header::after {
position:absolute;
content:'\00a0';
width: 100%;
margin-top: -12px;
margin-left: 5px;
border-bottom: 1px solid gray;
z-index: 0;
}
I only tested this in Chrome. Here's the Fiddle.
Well, how about doing it in reverse? Draw the lines (in any way you like) then use :after to insert the headers, no additional HTML, but some extra CSS.
HTML
<div id="header1"></div>
<div id="header2"></div>
To Draw the Line, simply border-top-style:solid;.
To Write the headers, :after.
CSS
div
{
position:relative;
border-top-style:solid;
margin-top:20px; /* just for spacing */
}
div:after
{
display:block;
background-color: #FFFFFF;
position:absolute;
top:-10px;
left:0px;
}
#header1:after
{
content:"Hello;"
}
#header2:after
{
content:"Hello Again";
}
You'll get something like this.
For more customization, you can enlarge the font, change the colors, add padding (for more white space), just change top the way it suits you.
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;