http://htmlpocketreference.110mb.com/taggroups.html
For the site above, how would I indent all the code. I don't want it aligned with the paragraph and headings. I want it to be one indent level in. You can check my source if you want and the css is embedded in the html already.
Also, any suggestions on how to improve it?
(Note: I'm not publishing the site, I'm just practicing on getting all the formatting right.
To indent each <code> block, you can use something like:
code{
display: block;
margin: 0 40px;
}
To indent only the first line of each <code> block,
code{
text-indent: 40px;
}
40px is just a suggestion; you can adjust the indentation width to suit your visual needs.
Did you try something like this?
code {
position: relative;
left: 20px;
}
The previous two answers got the methods spot-on:
code
{
display: block;
margin-left: 40px;
font-family: monospace; /* I would add this too, as it makes the code more readable. */
}
Also, as you are displaying code (I hope), try SHJS. Good luck!
Related
.grid-layout .hentry {
position: relative!important;
display: inline-block;
width: 30%;
margin: 5px;
}
Can someone help me with this code? I placed this additional code for 3 'Posts' that should be
displayed in a horizontal but straight; upward moving line. But the posts are not displaying in a
straight line but in a descending format. Like a staircase. What can I do to fix this?
You can try several solutions:
Set the position to relative
Use <pre> in the HTML file
If none of these work try setting the display for block
Please tell me if it works.
Can anyone explain this odd behavior, why extra spacing is adding in between buttons.
Case -
Following is the HTML code which is adding extra space in between buttons if written like this -
<div class="wrapper">
<button class="btn one">First long button with a long text length</button>
<button class="btn two">Second long button with a long text length</button>
</div>
Output -
BUT if I am writing like this then no space is coming -
Code -
<div class="wrapper">
<button class="btn one">First long button with a long text length</button><button class="btn two">Second long button with a long text length</button>
</div>
Output -
CSS Code -
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 10px;
}
.btn {
font-size: 14px;
line-height: 28px;
background: #FFFFFF;
border: 1px solid #C3C3C3;
position: relative;
padding: 10px;
display: inline;
}
.btn:before {
content: "";
position: absolute;
width: 4%;
height: 5px;
background: #FFF;
right: 0px;
top: -5px;
}
.two {
display: inline;
}
With inline-elements, line-breaks (and multiple spaces) are converted to 1 space.
There are several things you can do in order to eliminate white-space between elements; however it depends on the kind of elements used and the browser's html rendering engine.
Here are some things that work for the "white-space" issues, but bare in mind that ultimately you want your code to look neat.
Good solution .: no white-space & clever CSS
Coding your HTML with no white-space will definitely sort this out for most major browsers, but it makes your code illegible; however you can run your code through an HTML pre-processor (like PHP) and minify your code before serving it to the browser. This may seem "daft" for speed concerns, but if you can get clever with "configuration" of your projects in your pre-processor to "bake" (minify) your source-code as a separate file while in "development" mode; and only "serve" the minified code when in "live" mode.
If you prefer the "pre-processor" option then have a look at: how to minify html code
In your CSS, take note of how different elements render in the browser.
With "block-type" & "view-port" elements, wrap them inside other elements you can control; because styling these to be displayed inline may cause issues, hence why the CSS value for these: display:inline-block, but it's not a 100% guarantee to look as intended.
HTML only .: comments & weird closing-angle placement .: ugly but works
<button>one</button><!--
--><button>two</button>
<button>one</button
><button>one</button>
CSS only .: font-size zero on parent, consistent position & margin
If you're using the font-size:0px then you have to be smart with your CSS selectors. Forcing standard margins/padding for all your elements is a good idea for consistency:
body{font-size:0px;}
p,b,i,a,span{font-size:16px;}
div,svg{position:relative; box-sizing:border-box; margin:0px;}
The \n is a legal character in html, it just don't return line.
You can resolve it by adding font-size:0 to the container of the buttons for example, as the buttons have font-size:14px.
div.wrapper { font-size:0 ; }
Just be carefull with the other elements in your wrapper wich will heritate from your font-size:0.
OR : you can write in on the same line... :)
I'm having some frustrating trouble with my FAQ accordions at the bottom of the following page.
I need to put about 50px of space in between them, but nothing seems to be working.
Any suggestions?
Try adding to your css:
.accordionButton {
margin: 25px auto;
}
.accordionContent p {
padding-top: 10px;
margin-top: 0;
}
div.accordionContent {
margin-top: -25px;
}
Hope this helps :)
Step 1: Wrap each question and answer in a div in my example I've given it a class container
Step 2: Remove float:left from your styles
Step 3: Add margin-bottom to the container
.container {margin-bottom:50px;}
Example: http://jsfiddle.net/c6Kvz/2/
For a tidier more semantic version please see: http://jsfiddle.net/VyzqR/. This uses CSS for the hover effect instead of javascript. Feel free to replace th h2 tag with what ever hx tag mages the most sense for your document layout, just don't use h1!
You may also want to investigate CSS Sprites for your background images. This will reduce filcker while the images load on hover or click.
I have the text
Coupon*
in font size 30px. However I want to make the * not in 30px but smaller. How can I achieve this?
http://jsfiddle.net/LkLGE/
Thanks
To keep the asterisk aligned on the top, you can put the character in a <sup> tag and reduce its font-size:
<div class="text">Coupon<sup>*</sup></div>
.text {
font-size: 30px;
}
.text sup {
font-size: .5em;
}
JSFiddle example
As an alternative to <span> based answers <sup or <sub> or <small> might be a better starting point from a semantic standpoint.
<sup> is superscript and will raise the *.
<sub> is subscript and will lower the *.
<small> might require adding some css *, but shouldn't already have a position change. See http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element
Fiddle to show it in action: http://jsfiddle.net/6jmKT/
Coupon<span style="font-size:any size that you want">*</span>
I'm not sure about your case, but sometimes you want to do this in many places. Sometimes, you'll have a "new" or "special" item and you'll add a class with javascript to denote this.
Think about if you have to change this somewhere and how many places you might need to edit this span. Of course you could find-and-replace, but try THIS FIDDLE out and see what you think. CSS content() is pretty amazing for stuff like this.
HTML
<div class="thing special">
<!-- where special might be added by javascript -->
Coupon
</div>
CSS
.thing {
font-size: 30px;
color: blue;
}
.special:after {
display: inline-block;
/* so you can use "block" like stuff on it - (margin-top etc) */
/* this way you wouldn't have to change it in the html in a ton of places. just one - here. */
content: "*";
font-size: 15px;
color: red;
/* just for specific positioning */
vertical-align: top;
margin-left: -8px;
margin-top: 5px;
}
OR
sup is totally cool too - I think...
HTML
<p>Coupon<sup class="star">*</sup></p>
CSS
p {
font-size: 30px;
}
p .star {
font-size: 15px;
color: red;
}
When in doubt, put it in a span - FIDDLE
#myspan {
font-size: 10px;
}
This FIDDLE is a bit reductio ad absurdum, but it was fun!
You can use span and you can use <sup> tag:
EXAMPLE
<div class="text">Coupon<span class="star"><sup>*</sup></span></div>
.text {
font-size: 30px;
}
.star {
font-size: 12px;
}
http://jsfiddle.net/LkLGE/4/
The most robust way is to use the small element. If you wish to tune its effect to some specific size reduction, it is best to use a class attribute on it. Example:
<style>
.ast { font-size: 70% }
</style>
...
Coupon<small class=ast>*</small>
However, the asterisk “*” is rather small in many fonts, so size reduction easily makes it too small. If you think you need to reduce its size, you probably need a different font.
Let's assume we have this html:
<h2>TITLE</h2>
Is it possible, through the power of CSS alone, to make this either be or behave like:
<h2>T I T L E</h2>
Reason being that I want to justify the letters over a given width in the title, and I don't want to resort to serverside regular expression witchcraft before having properly evaluated the CSS options.
I already managed to justify the single letters through CSS using these rules:
h2 {
text-align: justify;
width: 200px; // for example
}
h2:after {
content: "";
display: inline-block;
width: 100%;
}
I've looked into text-replace, but there's no support in any major browser. Other than that, I've not yet found any hopeful candidate.
CSS3 would be ok if there's ok support, JS is not of any help.
UPDATE
letter-spacing is not an option since it has to adjust to the width dynamically AND I do not want to check browser implementation of kerning perpetually. But thanks to the guys suggesting it, I knew I had forgot something when formulating the question :)
Here's a jsfiddle for fiddling
Why not just use letter-spacing?
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
A much easier way to do this would be to use the letter spacing css styling.
for example
h2 {
letter-spacing:10px;
}
Use CSS's letter-spacing:
h2 {
letter-spacing: 2em;
}
jsfiddle demo