Here is a little css problem
The code:
printf( '<div id="replyto">Reply to</div>
<a class="replytolink" href="%1$s">%2$s %3$s</a>',
$parent_link, $parent->comment_author, $parent->comment_date );
The css:
#replyto {
float: left;
}
.replytolink {
float: left;
}
is output
Reply to"Comment author Date"
How can I output it
Reply to "Comment author Date"
with correct spacing between text and link?
From a semantic point of view, using a floating div followed by an anchor isn't the best choice possible of tags in this case.
Personally, I would replace that div with a span, then you wouldn't need to float them, and so word spacing would work as usual..
Try this:
.replytolink {
padding-left:5px;
float: left;
}
Example: http://jsfiddle.net/RTFb7/
Add a padding-right to #replyto:
#replyto {
float: left;
padding-right:5px;
}
Add a space?
printf( '<div id="replyto">Reply to </div><a class="replytolink" href="%1$s">%2$s %3$s</a>', $parent_link, $parent->comment_author, $parent->comment_date );
Or add padding-right: 2em on #replyto.
Solution by Lucius:
printf( '<span>reply to %2$s %3$s</span>', $parent_link, $parent->comment_author, $parent->comment_date );
Neat. No CSS is required. Give the <span> tag an ID if needed. The extra blank space after "reply to " is now output.
Related
When we insert a image to blogger post it automatically inserts a separator with 'text-align:center;'. I want to remove it(and set it to left instead of center). But it's hard to remove it manually for every image in every post. Is there a easy way to do this automatically?
I tried .post-body img{float:left;} template CSS. This gets the image to left, but then texts flow to right side of the image instead of under the image. Please help me to do this.
Edit: Below is the normal div that an image would be automatically surrounded when a image is added to a blogger post. Below that is the texts of post.
<div class="separator" style="clear: both; text-align: center;">
<a href="-----.html"; imageanchor="1" style="margin-left: 0em; margin-right: 1em;">
<img alt="" border="0" src="1.bp.blogspot.com/1.JPG"; title="" />
</a></div>
<br/>
<span style="font-size: large;">text paragraph texts texts</span><br />
Within the <b:skin> or in a separate <style> within the <head> of your template include the following CSS code:
.post-body .separator {
text-align:left !important
}
I can't see the rest of your code, if you uploaded something like a js.fiddle that would help! The code below should fix the text alignment with your images, if it doesn't let me know!
.post-body img {
float: left;
text-align: left;
}
.post-body .separator a {
margin: 0!important;
}
I need to display ex: $300.00, but I need the dollar sign to be displayed smaller than the number so its going to look like a trademark, but not that small.
Is there a CSS function that does that?
Thank you in advance.
Could be something like this?
HTML:
<span class="dollar">300.00</span>
CSS:
.dollar:before {
content: '$';
font-size: somethingSmaller;
}
See this fiddle and let me know if this helps.
But only if not empty!
.currency:not(:empty):before {
top: 0;
content: "$";
}
<span class="currency">10.5</span><br />
<span class="currency"></span><br />
<span class="currency">42</span><br />
Use a <span> element to style in-line text:
HTML:
<span class="currency">$</span>
<span class="price">300</span>
CSS:
.currency{
font-size:.5em;
vertical-align:text-top; /* resembling more the tm symbol you mentioned */
}
A fiddle for convenience...
The difference from lante's answer is that this will work in much older browsers as well. For more info, see the support for :before and :after pseudo elements.
Use the :before pseudo selector
.amount:before {
content: "$";
font-size:.9em;
}
A very simple way to do this would be :
HTML :
<div class="text">
<span class="dollar">$</span>300
</div>
CSS :
.text {
font-size: 18px;
}
.dollar {
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/
However, if you understand pseudo-selectors well, you would be better off using this:
HTML:
<div class="text">300</div>
CSS:
.text {
font-size: 18px;
}
.dollar:before {
content:'$';
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/1/
Hope this helps!!
If you really must do this, use
<small>$</small>300.00
and, if desired, set the size of small in CSS, e.g.
small { font-size: 75% }
I've been a bit confusing on how to do so...
This is my code:
<div class="game_grid">
<center><div id="game_name"><?php echo $game_name; ?><br /></div></center>
<div id="game_image"><img src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" /></div>
</div>
I failed to use "text-decoration:underline;" to make the title (game_name) underline when I put my mouse over the game image...
Any idea?
I do not know what is needed and what not in your HTML, so I'll just show a few examples, take a pick.
For example a simple build: http://jsfiddle.net/B6gD4/
Maybe style the image: http://jsfiddle.net/B6gD4/1/
And finally your IDs added if necessary for anything other than styling: http://jsfiddle.net/B6gD4/2/
Simple HTML:
<div class="game_grid">
<a href="game_page.php?id=1">
<img id="game_img" src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" />
<span id="game_name">Title</span>
</a>
</div>
CSS:
.game_grid {
text-align: center;
}
.game_grid a {
text-decoration:none;
}
.game_grid a:hover {
text-decoration:underline;
}
.game_grid img {
/* any styles */
}
.game_grid span {
display:block;
font-weight: bold;
}
You can add your div styles to the respective game_grid span or game_grid img, keeping the same look but shortening your HTML by 50%.
There are alot of elements in between them. So CSS won't be easy to do that, you can try out jQuery for this:
$('#game_image').hover(function () {
$('#game_name').css('text-decoration', 'underline');
}
CSS would have been possible if they were siblings of the same parent element. Then you would have used:
#game_image:hover + #game_name {
text-decoration: underline;
}
If the name was the direct child of the image element (which is not possible although) then you would have used > child selector. But at this stage, you should use jQuery to query among the elements.
I'm getting link address from db and it's showing on a div box with html h3 tag which class name is .images. This css class images width is 210px. But unfortunately this link address is going to outside the box.. It's should be within the box. Could you tell me what is the wrong in my css code ?
Css code:
.images{
max-width:210px;
float:left;
position:relative;
margin:15px 30px 15px 0;
border:0px #000 solid;
}
.images h3 a{width:210px !important; height:auto;}
.images img{
margin:0;
padding:5px;
border:1px #ccc solid;
}
pho code:
while($res = mysql_fetch_array($iamges)){
echo "<div class='images'>";
$image = $res['image'];
$directory = "galary_images/";
$link = inputvalid($res['link']);
echo "<h3><a href='$link' target='_new'>$link</a></h3>";
if(empty($link))
{
echo "<img src='$directory/$image'>";
}
else
{
echo "<a href='$link' target='_new'><img src='$directory/$image'></a>";
}
echo "</div>";
}
Since the link has no spaces in between, they cannot be broken into seperate lines. you can use code like this :
$link = "long link";
<a href = "long link">echo (strlen()<=10)?$link:substr($link, 0 ,7)."...";
</a>
Say link is http://stackoverflow.com/questions/20198005/text-is-going-to-outside-of-box-css-issue,
it will display something like this : http://stackoverflow.com on the name of the link but will send you to the same place.
Have you tried setting an
overflow:hidden
in your css for .images?
I have a textarea named(not the attribute of textarea;but its name ) Summery . But the name appears at bottom ,and I want it to display in the mid or top . HOw can I achieve this ?
<div class="edit_i">Pitch Summery :<textarea>{$k->pitch_summery}</textarea></div>
Are you referring to the "Pitch Summery" text?
make sure that the div has vertical-align:top; css property
.edit_i textarea{
vertical-align:top;
}
http://jsfiddle.net/TrdbC/1/
Just a quick example.
<style>
.label {
display: block;
}
</style>
<label for='textarea' class='label'>Pitch Summery</label>
<textarea value="{$k->pitch_summery}" id='textarea'></textarea>