I am working on a voting system that shows what people have been voting for, showing the names of the Movies. I have never had this problem before and can't find anything about it online.
Outlined by the red box is the problem, a random space for the first value that is printed.
Here is the code for the text
echo "<br><form method='POST' action='vote.php'>
<font size='5'><center>".$row['moviename']."</center></font>
</center>
And here is the code for the votes bar
.wrap {
margin-right: 500px;
margin-left: 500px;
width: auto;
border: 1px solid #000000;
border-radius: 3px;
background-color: #000000;
padding: 2px;
}
.bar {
background: orange;
height: 24px;
border-radius: 2px;
}
Sorry if this is a stupid question... If you need any more code please ask.
Thanks in advance.
how to get the notification number badge in ajax like Facebook. cant post a picture here but i think people know what am i talking about. its like when you log in to Facebook, if you have new messages you will get a little number on the top right corner of the icons next to search bar. i'm currently found this piece of code in charge of creating that number but i cant go any further from that. here is the code i found.
<span class="jewelCount" id="notificationsCountWrapper">
<span id="notificationsCountValue">1</span>
<i class="accessible_elem"> Notifications</i>
</span>
You want something like that?
Here is the css & jquery solution, if you like. DEMO http://jsfiddle.net/yeyene/DfSda/1/
Add <span class="ballons"></span> inside your button, and replace the dynamic count value.
.ballons {
float:right;
margin:-20px 8px 0 0;
line-height:30px;
padding:0 10px;
border-radius: 30px;
border:3px solid #fff;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
background:red;
color:#fff;
text-align:center;
-moz-box-shadow: 1px 1px 3px 3px #ccc;
-webkit-box-shadow: 1px 1px 3px 3px #ccc;
box-shadow: 1px 1px 3px 3px #ccc;
}
I've thought about this problem quite a bit.
Is there are way, say, to automatically insert a line decoration after each line (row) in a <div> or just any element that holds text?
For example:
This is the first line
This is the second line
I noticed this problem because underlines aren't ideal, and inserting a div or separating chunks of text in different divs is awkward. Because different characters have different widths in typography, If I used underscores the two lines become uneven in terms of width. I don't think tables can automatically separate a block of text in two rows. Not without some JQuery doing the split.
Is there something that will let define line decorations after lines ?
I need this because the text in the divs are coming from a database. I don't know the length of each line and so it's awkward If I assume a fixed number of characters per line and start chopping words in half at the end of lines,
like,
Hello World Wha
t is up.
Thanks!
Perhaps you can fake it with a "lined paper" effect. Here is one such result: http://css3.wikidot.com/blog:lined-paper-with-css
I'll copy it here to preserve it in case the original site moves or goes down.
The technique is quite simple - all we need is a repeating background gradient to give the effect of lines across the paper, and a pseudo element on the left to give the ruled margin.
.paper {
font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
width: 300px;
margin: 0 auto 10px;
padding: 6px 5px 4px 42px;
position: relative;
color: #444;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
-moz-background-size: 100% 20px;
-ms-background-size: 100% 20px;
-o-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
In order to get all the text to line up properly on the lines, you need to specifically declare margins and line heights for all text elements. Given we used a background size of 20px above (i.e. it's 20px between the lines), we need to use a line height (or an equivalent line height + margin) of 20px.
.paper h1,
.paper h2 {
font-size: 16px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h3,
.paper h4,
.paper h5 {
font-size: 14px;
line-height: 16px;
margin: 0 0 4px;
}
.paper h4,
.paper h5 {
font-weight: normal;
}
.paper p {margin: 0 0 20px;}
.paper p:last-child {margin: 0;}
.paper ul {margin: 0 0 20px;}
Browser support
It works perfectly in Webkit and Opera, and almost perfectly in Firefox (the ruled margins on the left are 1 pixel too short at one end). Theoretically it should work in IE10, but I haven't tested it.
Another way would be to just create an 1xN.png with 1 pixel filled in at the bottom. and set that as your background-image. Where N equals the line height like below:
<--- Just a speck.
You could also convert the image into a data URI if you are worried about adding an extra request.
CSS
div {
background-image: url("1x16.png");
background-image: url(data:image/png;base64,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);
line-height: 16px;
}
I'm looking for ages to figure out how to add some space between my recent posts on a wordpress site.
Really have no idea. Anybody that could help?
You have 2 style statements that pretty directly affect these. One has bottom margin but is being overridden by another with margin: 0;. Change this to margin: 0 0 20px 0;.
.primary_content_wrap ul li {
background: url(images/marker.gif) no-repeat 1px 11px;
margin: 0;
padding: 0 0 0 17px;
list-style: none;
line-height: 25px;
font-size: 13px;
color: #005d9e;
}
.recent-posts li {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
each of your posts is a li with an "entry" class :
<li class="entry">...</li>
it seems there's nothing in any CSS for that entry class. What I would do is define it in the CSS with a margin-bottom set to, let's say 10px.
Hi basically I am new to css etc so my form may be awful, however last night it was appearing abosloutely fine....I haven't touched it, and on loading the site this morning it is not appearing correctly.
so here is my jsfiddle,
can somebody wise please explain why its changed over night? I am sure I haven't touched it.
thanks,
All you need to do is add clear: left to:
#stylized label {
clear: left;
display: block;
float: left;
font-weight: bold;
padding-bottom: 12px;
padding-left: 2px;
padding-right: 2px;
padding-top: 3px;
text-align: right;
width: 180px;
}
http://jsfiddle.net/userdude/7Zc6u/5/
What's happening is the edge of the password label is getting caught on the edge of the username label.
replacing padding
padding: 5px 3px 2px 12px; to #stylized label solves the problem
Or use
clear:left; in #stylized label