When adding overflow to Google prettify elements, the line numbers disappear.
Unchanged CSS:
pre
{
font-size:11px;
background-color:white;
}
/* Alternate shading for lines */ li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee; width:200%;}
CSS & IMAGE BEFORE:
pre.prettyprint { padding: 2px; border: 1px solid #888;}
CSS & IMAGE AFTER:
pre.prettyprint { padding: 2px; border: 1px solid #888; overflow:auto;}
Apparently the numbers were in the padding of the pre.prettyprint element. If I increase the left padding to 30px with the overflow 'on', I can see the numbers. I'll have to comb over the CSS some more (it was inherited)
CSS change & the resulting output:
pre.prettyprint { padding-left:30px; border: 1px solid #888; overflow: auto;}
Related
This question already has answers here:
Add centered text to the middle of a horizontal rule [duplicate]
(33 answers)
Closed 8 years ago.
How to add lines to the sides of text, create something like text separator but whithout background for text.
<h5>Some text goes here</h5>
In this post CSS challenge, can I do this without introducing more HTML? all solutions are with text background.
In my case text is on the image, so text background is awful.
Could this not be done even more minimally these days with the :before & :after selectors?
h5:before, h5:after{
content: '';
width: 2em;
height: 2px;
padding: 0;
margin-right: 5px;
background-color: #000000;
display: inline-block;
position: relative;
bottom: 3px;
}
h5:after{
margin-left: 5px;
margin-right: 0;
}
Here’s a fiddle: http://jsfiddle.net/3616he4y/2/
Your best solution is probably to add another element. You can't do this without that. You could try:
<h3><span>TEXT</span></h3>
h3 {
background-image: url(single-pixel-img.gif) 50% 50% repeat-x;
text-align: center;
padding: 0 20px;
}
h3 span {
background: #fff;
display: inline-block;
}
Then you can still add some padding to the span etc... The single line image could be a 1x1 black gif that'll add almost nothing to your pageload. It's simple, elegant and adds only a couple more lines of code.
to me, the pseudo elements here are very usefull once again and as the link to csstricks explains, it is not a big deal to set.
I'd rather use the static position , cause it can have some advantage once text breaks into a few lines.
Examples behavior/DEMO :
HTML
<h1>text & strikes</h1>
<h1>text <br/>& </br/>strikes</h1>
<h1><span>text <br/>& </br/>strikes</span></h1><!-- see demo to find out <span> purpose */
CSS
h1 {
text-align:center;
overflow:hidden;/* hide parts of pseudo jumping off the box */
text-shadow:0 0 1px white;/* increase visibility of text if bg is dark too */
background:url(http://lorempixel.com/100/600/abstract);
}
h1:before,
h1:after {
content:'';
display:inline-block;
height:0.06em;
width:100%;/* could be a little less*/
box-shadow:/* looks like text */
inset 0 0 0 20px,
0 0 1px white
;
vertical-align:middle;
}
h1:before {
margin-left:-100%;/* width is virtually reduce to zero from the left side to stick to text coming next */
margin-right:0.5em;
}
h1:after {
margin-right:-100%;/* width is virtually reduce to zero from the right side to stick to text */
margin-left:0.5em;
}
span {
display:inline-block;/* holds any line breaks */
vertical-align:middle;
}
Try <hr/>
FIDDLE DEMO
hr {
width:100px;
border:2px solid;
}
h5{
text-align:center;
}
You can use borders:
h5 {
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
}
If you want to have space between the lines and the text, you can add padding left and right to the styling:
h5 {
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
padding: 0 5px;
}
If you want to use the h5 as a nav item and you want to separate it from the rest of the items (the reason you need the divider) you can put the border only on the right, and every next item will inherit the settings.
For the last item, obviously you would want to remove the border right as it doesn't have anything after it, so you can do:
h5 {
border-right: 1px solid #dadada;
}
h5:last-child {
border-right: none;
}
I want to add a <div> container in place of a check box. But the <div> container takes up the entire line. I tried all sorts of "floats" but none worked.
here is my css code:
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
}
With The inline div will not occupy the line
use this
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
display:inline;
}
Style it with this: .inline {display: inline}
Use inline tag i.e.
inline { display : inline}
Inline is doing the trick, but you are really just avoiding the problem. You could have just set a width on the div and the label or whatever and floated them. By default block-level elements are 100% width. At some point, you are going to want to have some of the options that being display block allows - and inline doesn't. And you will probably also want to have some of the options that inline elements have, like vertical alignment. I suggest trying inline-block - I've been getting tons of use out of it. Give hit a spin: fiddle
HTML
<input type="checkbox" name="check-box-01" />
<div class="check-box-replacement"></div>
<label class="check-box-label" for="check-box-01">
Label for this checkbox
</label>
CSS
input[type="checkbox"] {
display: none;
}
.check-box-replacement {
width: 2em;
height: 10em; /* just to prove a point */
background-color: red;
}
.check-box-replacement, .check-box-label {
display: inline-block;
vertical-align: middle;
}
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
I am adding divs dynamically as shown in http://jsfiddle.net/Lijo/ZkLg6/5/.
The parent #mainHolder div is not increasing its width when child elements are added – as a result the children breaks the parent div. How can we overcome this by adjusting the parent div height?
jQuery
$('input').click(function()
{
var existingDirectChildrenDivCount = $('#mainHolder > div').size();
if( existingDirectChildrenDivCount % 3 == 0)
{
$('#mainHolder').append ("<div class='firstDiv'> A </div>")
}
if( existingDirectChildrenDivCount % 3 == 1)
{
$('#mainHolder').append ("<div class='secondDiv'> B </div>")
}
if( existingDirectChildrenDivCount % 3 == 2)
{
$('#mainHolder').append ("<div class='thirdDiv'> C </div>")
}
}
);
HTML
<html>
<input type="submit" value="Add" />
<br/>
<div id="mainHolder">
S
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
</html>
CSS
#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto;
}
.firstDiv
{
float: left;
display: inline;
background-color: #f5B5f5;
height:100px;
}
.secondDiv
{
float: left;
display: inline;
background-color: #FF007F;
height:100px;
}
.thirdDiv
{
float: left;
display: inline;
background-color: Pink;
height:100px;
}
Add overflow:auto
#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto; overflow:auto
}
Demo here http://jsfiddle.net/ZkLg6/11/
Try this: http://jsfiddle.net/ZkLg6/7/
The fix is to use a div that clears floated elements. I had to push your dynamic elements into a nested div inside mainHolder to ensure the clear div was always below them but it works well.
Try to add overflow: auto; to the CSS of #mainHolder.
The solution is to add a at the end of your #mainHolder and insert elements before that (or just keep removing and re-adding it every time you add a new div. This is because you're using floats, alternatively if you can drop the float from the other divs everything should work as expected. The overflow: auto; solution is also good and seems simpler.
Try something like this:
#mainHolder
{
min-width: 400px;
float:left;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:20px;
}
The only problem here is letter "S",but you may put it inside some div. Like those colored. Here is updated JS fiddle.
Hm. But that works if you want to increase WIDTH, not HEIGHT. If you want to increase height - just add overflow:hidden; Plus there are some more changes in your css. Take a look at JSfiddle
You have to clear the floating. You can do that inserting an element like br which has clear:both.
Here is a piece of code you can add in order to work:
$('#mainHolder').find("br").remove(); // remove already added br
$("<br>").css({clear : "both"}).appendTo($('#mainHolder')); // append a br after the last element.
I've updated your jsFiddle: http://jsfiddle.net/ZkLg6/13/
Check this http://jsfiddle.net/ZkLg6/19/
I used overflow:hidden
#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto; overflow:hidden;
}
Set both overflow and height to auto, and now the parent div's offsetHeight will update dynamically!
I want to make something like a horizontal line with a text in the middle of it. It should look like this (text image follows):
------------------------------------------ TEXT --------------------------------------------
the line should be dotted and the text in the middle should separate the line in half.
I came up with the idea of using a table with 3 elements with percentage values in width attribute but maybe there is a better solution.
I hope it's clear. Thanks for ideas
<div id="line"><span>TEXT</span></div>
And CSS:
#line{
border-bottom: 1px black dotted;
overflow:visible;
height:9px;
text-align:center;
margin: 5px 0 10px 0;
}
#line span{
background-color: white;
text-align:center;
padding: 0 5px;
}
See Example on JSFiddle
I would use CSS, and two containers:
Demo: http://jsfiddle.net/LRSuJ/
HTML:
<div class="something">
<div class="content">Text</div>
</div>
CSS:
.something {
border-bottom: dotted 1px #000;/* Border style */
height: 10px; /* Adjusted height */
margin-bottom: 10px; /* Proper offset for next element */
line-height: 20px; /* Actual text height */
text-align: center; /* Center text */
}
.content {
background-color: #FFF; /* Hide previous dots */
display: inline; /* Inline element */
padding: 0 10px; /* Customisable left/right whitespace */
}
You could use a fieldset and legend:
<fieldset>
<legend>TEXT</legend>
</fieldset>
fieldset
{
border-top:solid 1px black;
}
fieldset legend
{
text-align:center;
}
http://jsfiddle.net/2amBc/
I would do it like this:
HTML
<fieldset>
<legend>Text with dotted line</legend>
</fieldset>
CSS
fieldset {
border: 0;
border-top: 1px dotted gray;
}
legend {
text-align: center;
}
jsFiddle demo: http://jsfiddle.net/XZcRB/