I have labels aligned in three rows and displayed in regular text. I'd like to make these labels bold, but when I apply the property in CSS, the alignment gets a little messed up.
I have included some padding and margin properties to have more space between text box and label, but that doesn't seem to help.
I am trying to have the text bold with "*" and have it aligned with "Surname" label.
How can I make the labels bold and still keep the alignment? I can only make changes to the CSS file and not HTML or font size of the text.
Before
After
**Before code-**
.bold-label {
}
.bold-label:after {
color: #e32;
content: ' *';
display:inline;
}
**After code-**
.bold-label {
font-weight: bold;
margin-left: -1em;
padding-right: 0.75em;
}
.bold-label:after {
color: #e32;
content: ' *';
display:inline;
}
Thanks in advance
The only way to do this is to have the labels that need to be right aligned (above Surname) in a container element, like a div and apply text-align: right to that container.
Here's the problem you're having:
Each label box (.bold-label) is the width of its content (the text). This means that when the content expands (because you make it bold), the box will expand with it. This breaks your alignment.
To overcome this you could assign a width to each label box. With a large enough set width you can create enough space for the text to expand without changing the length of the box.
Try this:
.bold-label {
display: inline-block;
text-align: right; /* only works on block containers */
width: 150px;
}
DEMO
This is my code, but it puts the bullet-points on the left. Hope it is of help:
<!DOCTYPE html>
<html>
<head>
<style>
li{
font-weight:bold;
text-align:right;}
</style>
</head>
<body>
<li>Consultation
</li>
<li>Pharmacist
</li>
<li>Registration No.
</li>
</body>
Related
I have a problem at my Website.
I want to "print" text on the left of an image. But I dont know how to do this.
Here my Site: link
Here how it should look: link
Can someone help me please?
Replace the img tag with:
<img src="http://martin-fischer.tk/assets/img/AVRStick.png" style="float: left;">
<p>Here the text</p>
Demo.
Update: As per the attached image to align the text with image you could use float:left. And your layout won't broke so you have to clear the float either using clearfix Method or you can use overflow:hidden on parent div. In addition to be safer side you could display:inline-block.
By Using #media query you can create a stylesheet for screen, mobile and even you can control the elements while printing the document. Have a Look at the DEMO.
In this example in print preview you can see the changes. Elements position is change for print and the font will turn red.
#media screen {
p {
font-family: verdana,sans-serif;
font-size: 14px;
float:left;
}
img{float:left;}
}
#media print {
p {
font-size: 20px;
color: red;
float:right;
}
img{float:right;}
}
I need an expand icon to go alongside a piece of dynamic text within a tab to show more info. The expand icon has a background image - so needs to be displayed as block - when clicked a class is applied which alters the background image to a minus and the text beneath the link is revealed.
Is there a way to display the icon 5px to the left of the dynamic text and for it still to be a block (so you can see the background images)?
My HTML is below - note that the tab also contains a tick box which has a seperate function.
<div class="expandLinkWO">Cardio & Arms<span class="plusCircle btn"><span></span> </span> <span class="tickBox"></span>
You could use inline-block, which does what you want. Or you could make your button floating. Both should work.
Inline-version
.plusCircle {
display:inline-block;
vertical-align: top;
margin-right: 5px;
}
Float-version:
.plusCircle {
display:block;
float:left;
margin-right: 5px;
}
I believe the inline-block way is nicer, but IE and inline-block ain't the best of friends..
You probably need inline-block :
.plusCircle {
background: url(your/img/url.jpg);
height: 20px;
width: 20px;
display: inline-block;
margin-left: 5px;
}
I want to align text within a list of items containing superscript such that the main text are equally spaced vertically:
HTML:
<ul>
<li>Shape: Rectangle</li>
<li>Length: 5m</li>
<li>Breadth: 3m</li>
<li>Area: 15m<sup>2</sup></li>
<li>Color: Blue</li>
</ul>
I have tried tinkering with the display, height, line-height and vertical-align properties in CSS. But none seems to work. Can anyone help me please? Thanks.
The cause of the problem is that superscripts tend to make line spacing uneven. Setting line-height to a sufficiently large value like 1.3 may help. But in general, it is best to avoid using the sup element and construct your own superscript element, using span and style that creates a superscript using relative positioning (which does not affect line spacing, unlike the vertical alignment caused by sup).
In this specific case, there is a much simpler and better approach: instead of <sup>2</sup>, use ², or enter directly the superscript two character “²” (on Windows, you can do that using Alt 0178). Being a normal character, it does not affect line spacing, and being designed by a typographer, it can be expected to look better than any superscript 2 created using HTML or CSS.
This might help you: http://jsfiddle.net/Wexcode/TgqQY/
HTML:
<ul>
<li><span></span><span>Shape: Rectangle<span></li>
<li><span></span><span>Length: 5m</span></li>
<li><span></span><span>Breadth: 3m</span></li>
<li><span></span><span>Area: 15m<sup>2</sup></span></li>
<li><span></span><span>Color:</span> <span>Blue</span></li>
</ul>
CSS:
ul { list-style: none; }
li { background: red; height: 50px; margin: 3px 0; padding: 5px 0; }
li span:first-child { height: 100%; }
li span { vertical-align: middle; display: inline-block; }
Depending on format, you can try lowering the font size just before calling the <sup> tag:
...<br/> <li>Area: 15m<font
size=-1><sup>2</sup></font></li>
...<p/>
There is still a slight spacing gap, but it is not really noticeable.
I'm trying to create an effect where h# elements are bracketed by bullet characters. If the the heading breaks across multiple lines, the bullets should be to the left and right of the text block, and vertically centred.
Take this example HTML5 and CSS3:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="content-container">
<h1>Short title</h1>
<h1>Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here</h1>
</div>
</body>
</html>
h1 {
font-weight: bold;
text-align: center;
}
h1:before {
content: '— ';
}
h1:after {
content: ' —';
}
This renders the bullets, but when there are line breaks the bullets end up wrapping with the text itself.
How can I change the CSS so that the bullets are placed to the left or right of the whole text block, and vertically centered against it? This jsFiddle depicts the effect better than I can describe it. Note that there are containers that exist above the header element (they just aren't exclusive containers for it) which could also be used.
I don't want to change the HTML because that's just too fragile a solution: it requires changes in the CMS templates, the content itself, and an edict to all future content authors — which will be superfluous if the theming ever changes again.
I can't see a way of doing this with text bullet points, but it can be done with background images. CSS3 supports multiple background images and multiple image positions, so we can position an image bullet point at either end of the h1 like so:
Replace your CSS with this:
body {text-align:center}
h1 {
font-weight: bold;
padding: 0 16px;
background-image: url(http://www.getyourgame.net/images/BulletPointGreen.png),url(http://www.getyourgame.net/images/BulletPointGreen.png);
background-position: left center, right center;
background-repeat: no-repeat;
display: inline-block;
}
The padding is required to make room for the bullet points. I have used some random bullet point image, but note that I have specified it twice. I can then specify different positions for these two images; one left and one right of the h1. Finally display:inline-block prevents the h1 filling the entire width, which would cause the bullet points to constantly sit at the edges of the parent element instead of at the edges of the heading text.
Hope this works for you.
I managed to get quite close with creative use of table display styling:
h1 {
font-weight: bold;
text-align: center;
display: table;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
h1:before {
vertical-align: middle;
content: '—';
display: table-cell;
padding-right: '1em';
}
h1:after {
vertical-align: middle;
content: '—';
display: table-cell;
padding-left: '1em';
}
Why just "quite close"? Well, firstly I haven't verified that this is standard-mandated behaviour and not just some quirk of rendering. Secondly, it works in Chrome 18 and Firefox 12, but I haven't bothered to check in Internet Explorer or Safari — and I know it doesn't work quite right in the Android browser engine.
I was wondering about the textarea box bit.ly has on the 1st page you log in where they state to "Shorten your links and share from here".
I was wondering how you would go about centering text in a textarea? I don't think there's a command, so how would you hardcode move it down a few spaces. You can't use html tags in the textarea so it's been difficult with or other methods
Are you sure it's a textarea and not just an <input type="text">? If it's the latter, you can achieve the effect quite easily with padding:
input[type=text] { font-size: 20px; padding: 5px; }
Edit: If it's a text area (say with one row), styling via padding works the same:
textarea { font-size: 20px; padding: 5px; }
Set textarea padding and margin 0 and set the line-height. Or it would be better to use padding like Kerrek posted
You can't center multi line text in a textarea but you can add padding.
<!doctype html>
<style>
input[type=text]{margin:0;padding:0;line-height:40px;font-size:40px;}
</style>
<input type=text>