I have made my own custom little blog and well, I realized it was ignoring whitespace within code tags. Well, the generated code is like
<div class="codebody">
Mycode<br/>
other indented code<br/>
othercode<br/>
</div>
my codebody class looks like
.codebody {
background-color: #FFFFFF;
font-family: Courier new, courier, mono;
font-size: 12px;
color: #006600;
border: 1px solid #BFBFBF;
}
Well, how can I make it so that indentation will show up in code tags, but it won't add double-line breaks because of the <br/>\n?
Well just figured out something.. I'm not sure that it works in all browsers, as it is a pretty nasty hack, but this is what I did
.codebody {
white-space: pre;
background-color: #FFFFFF;
font-family: Courier new, courier, mono;
font-size: 12px;
color: #006600;
border: 1px solid #BFBFBF;
}
.codebody br{
display: none;
}
Related
I want to make a two vertical line in the same row using CSS.
I want to create like this :
I have already added one vertical thick line (Refer below script )
.desg {
border-bottom: 2px solid LightSlateGrey;
border-left: 15px solid LightSlateGrey ;
background-color: white;
font-size: 20px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: bold;
color: #778899; }
What I would recommend is to make use of the :before pseudo-selector. You'll want to make the element itself the narrow line, as the :before will appear to the right of border-left. Then make the :before the thick line.
You can even add a bit of margin on either side:
.desg {
border-bottom: 2px solid LightSlateGrey;
border-left: 3px solid LightSlateGrey;
background-color: white;
font-size: 20px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: bold;
color: #778899;
}
.desg:before {
border-left: 15px solid LightSlateGrey;
margin-left: 3px;
margin-right: 5px;
content: '';
}
<div class="desg">Text</div>
Remember that in order for the border in :before to appear, you'll need to give :before a content property, which can be left empty.
Hope this helps! :)
Rather than using border for something like this I'd go with using<hr>or div tag.
While using <hr> you'd need to set border width and while using div you can use width or border. Will provide code shortly or you can go without :beforepseudo class
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So can anyone tell what's wrong with my code? So I'm trying to add a blue dashed 'block', but somewhy it doesn't get displayed (it seems like the font gets changed, but the box still doesn't appear). I had an similar problem before, but I don't know what's wrong this time. Am I missing a semicolon somewhere or just wrote something wrong?
When I launch the code in JSFiddle, it seems to work fine, but when I'm opening the SAME code with the .html file, everything still seems not to work (pic: http://i.imgur.com/VT7vR3m.png). I'm Anyone got ideas why (the css file is in right location)?
https://jsfiddle.net/j31dgz70/1/
#info {
color: blue;
background: silver;
}
.welcome {
color: purple;
font-size: 20px;
background-color: aqua;
text-shadow: 1px 1px silver;
}
#tab {
background-color: blue;
}
code {
font-family:"Comic Sans MS", cursive, sans-serif;
display: inline-block;
height: 20px;
width: auto;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<!DOCTYPE html>
<body>
<p id="tab"><b>About page</b>
</p>
<article>
<code class="box">
Contact: Email me
</code>
<br>Return to homepage.
</article>
</body>
It's the <br/> that is causing the problem.
It forces a line break but the height restricts what is visible.
Remove the break tag. If you want spacing, use margins or padding...that's what they are for.
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block height: 20px;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<code class="box">
Contact: Email me
</code>
<code class="box">
Contact: Email me<br/>
</code>
Alternate Options if you wanted the 'box' to have two lines
Option 1: Retain the break tag but move it. (Not optimal but ok)
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
<code class="box">
Contact: <br/>Email me
</code>
Option 2: Make the link a block
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
.box {
border: 1px dashed #540CE8;
}
.box a {
display: block;
}
<code class="box">
Contact: Email me
</code>
Just add width: 160px; for responsive use width: 40% or any value according to screen
.box {
width: 160px;
border: 1px dashed #540CE8;
}
Here is link JS FIDDLE
The bordered box is showing fine here, however everything seems broken as its trying to fit inside 'code' which is only 40px wide.
If you remove the width it seems to render fine.
code {
font-family: "Comic Sans MS", cursive, sans-serif;
display: block;
height: 20px;
padding: 2px;
margin: 4px;
background-color: #7FECFF;
text-align: center;
}
http://codepen.io/tomdurkin/pen/vOeLVb
This is how it comes out to me on fiddle: http://jsfiddle.net/jimmynewbs/j31dgz70/
see fiddle
The code you have specified as 40px wide, so the text is too big for that section.
I would suggest making the width larger, or removing the width and floating the element so that it will take the width of it's content...
I would like to have some guidance on how to make good forms with submit buttons that look flat but not like the default ones that are done when using html. I want the submit buttons like those found on this website.
You should try applying CSS to your submit buttons like follow:
<head>
.......
your html code
.....
<style>
.pass {
width: 105px;
padding: 5px;
margin: 2px;
font-weight: bold;
color: #065fba;
background: #f4f5f8;
font-size: 11px;
border: #e2e2e2 1px solid;
}
</style>
</head>
.......
your html code
.....
<input trpe="submit" class="pass" value="Submit" />
......
...
.
Hope this helps.
The css use for the 'Post Your Answer' button on this website is (more or less):
input[type="submit"] {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
For cross-browser compatibility you'll need to add a class to your <input type="submit" /> as the CSS [type=""] attribute isn't recognised in older versions of Internet Explorer.
If you want to see how any element has been styled on any examples you like the look of, use Firebug or its equivalents for other browsers, which will show you the CSS applicable to a selected element.
In Stack Overflow's case, it's this, with the buttons being wrapped with a <div class="form-submit">:
.form-submit input {
border: 1px solid #888888;
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 130%;
font-weight: bold;
margin: 3px;
padding: 2px;
}
In my project we need to display code snippet, so I am using pre and code(both) tag.
PROBLEM
While displaying the code snippet it is displaying white spaces before and after the actual content. How to remove these white spaces before and after the snippet.
Remove the whitespace inside your pre tag.
Example:
<pre>
This is a test.
We want a new line here.
</pre>
should be
<pre>This is a test.
We want a new line here.</pre>
With HTML 5 pre tag doesnt supported anymore if you want to use its features.
Make your own css class like this...
.pre
{
border: 1px solid #999;
page-break-inside: avoid;
display: block;
padding: 3px 3px 2px;
margin: 0 0 10px;
font-size: 13px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
/*white-space: pre;
white-space: pre-wrap;*/
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
color: #333333;
}
.pre code
{
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;
}
Cancelling /*white-space: pre;
white-space: pre-wrap;*/ will make your white spaces works like div.
use it as a class to give the same look to your elements.
The <pre> tag is for pre-formatted text. That means you need to do the formatting yourself - all of it, including making sure the whitespace is exactly what you want to display. Don't output excess whitespace between your <pre> tags and the content inside of them.
You need to make sure the code is formatted correctly, the pre tag tells the browser to show the text inside the pre "as is".
A little thing that I my self has found useful is to use this php to import the file so I don't have to cut and paste all the time.
<?php
$file = "code/hello_world.c";
print "<p>Filename: ".$file."</p>\n";
print "<div class=\"codebox\"><pre>\n\n";
$lines = file($file); foreach ($lines as $line_num => $line)
{
echo htmlspecialchars($line) . "";
}
print "\n</pre></div>\n";
?>
And then to make it look like code I add this in my css
PRE {
font-family: 'Monotype.com', Courier New, monospace;
font-size: 0.7em;
}
.codebox {
width: 90%;
background-color: #000000;
color: #FFFFFF;
}
.codebox pre {
margin: 0 0 0 20px;
}
Maybe you find it helpful.
In the code below, $row['site'] is an URL. In Chrome and IE8, it displays fine. In Firefox 3.0.11, it only displays everything up until the second forward slash. So "en.wikipedia.org/wiki/Miami" is only displayed as "en.wikipedia.org/wiki".
I believe this is because of the CSS that I am using, but I can't quite figure out how to fix it. Any ideas?
Thanks in advance,
John
Here is the code:
print "<table class=\"navbar\">\n";
print "<tr>";
print "<td class='sitename'>".''.$row['site'].''."</td>";
Here is the CSS:
table.navbar {
margin-left:44px;
margin-top:0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 700px;
background-color: #A7E6FE;
border: 1px #FFFFFF;
border-collapse: collapse;
border-spacing: 4px;
padding: 4px;
text-decoration: none;
}
table.navbar td {
border: 2px solid #fff;
text-align: left;
height: 16px;
}
table.navbar td a{
padding: 3px;
display: block;
}
.sitename { width: 535px;
overflow:hidden;
}
a.links2:link {
color: #000000;
text-decoration: none;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
}
This is the "culprit":
.sitename {
width: 535px;
overflow:hidden;
}
You are setting any element with a class of .sitename to have a specific width and hiding any overflow.
In addition to that, this is also part of the reason:
a.links2:link {
...
width: 10px;
...
}
Not sure why you'd want to limit links to such a small width, but it is forcing the link text to wrap underneath which is then hiding "Miami" away because the overflow is hidden.
The code you pasted minus the above width declaration gives me what you want on Firefox.
This is a side note, but printing HTML like you are printing there is seriously ugly. It is also awfully easy to forget to close quotations and make silly mistakes just because it's hard to tell where you are. Consider heredoc syntax:
print <<<EOT
<table class="navbar">
<tr>
<td class='sitename'>
{$row['site']}
</td>
EOT;
Much better, right?
to test this try
.sitename { width: 535px;
overflow:visible;
}
if you see scrollbars try changing the width to an "em" based number