Right now I am attempting to prevent a text button from underlining itself. This button is located in a table which is why I have a <td> tag. However when apply internal style to rid of the underlining, it remains underlined. How can I get rid of this, or am I incorrectly getting rid of this. I learned how to disable the underline from here: http://www.pageresource.com/html/link3.htm But like I said before, it failed.
<td style="text-decoration:none"><?php echo $rows['subject']; ?> <BR></td>
If you absolutely must have your styles inline, then in this case you need the text-decoration:none applied in the style attribute of the anchor, rather then the table cell:
<a style="text-decoration:none" href="view_topic.php?id=<?php...
Doing it this way though, you have to apply it to every element, rather than using a css class to apply it to all links at once.
The problem is that you've placed the text-decoration styling on the td instead of the a
You need to apply the text-decoration to the a element, not the table cell.
<td>
<a style="text-decoration:none" href="view_topic.php?id=<?php echo $rows['id']; ?>">
<?php echo $rows['subject']; ?>
</a><BR>
</td>
Here is a fiddle showing the difference between the two: http://jsfiddle.net/LsFK5/
just change your code to
<td><a style="text-decoration:none !important;" href="view_topic.php?id=<?php echo $rows['id']; ?>"><?php echo $rows['subject']; ?> </a><BR></td>
Move the style from the td tag to the anchor tag.
<td><?php echo $rows['subject']; ?> <BR></td>
You should add a class to your <a> element such as .a-no-underline and then in your CSS file, you can add a style rule such as:
.a-no-underline {
text-decoration: none !important;
}
Make sure that you apply this class to the <a> element and not the <td> element. Like so:
<td>
<a class="a-no-underline" href="view_topic.php?id=<?php echo $rows['id']; ?>">
<?php echo $rows['subject']; ?>
</a><br/>
</td>
Related
I'm using Bootstrap 4.
My question is quite simple: how to put an image side by side with a text using bootstrap ?
This is my code:
<div class="card-content">
<div class="portfolio-desc">
<h3><?php echo $galleryTitle; ?></h3>
<img id="authorImg" style="border-radius: 50%; height: 36px;" src="<?php echo $author_photo; ?>" />
<span id=authorSpan"><?php echo $galleryAuthor; ?></span>
<span>Gallery: <?php echo $galleryName; ?></span>
</div>
</div>
How can I put "authorImg" side by Side with authorSpan ?
Now, each img, span etc are on new line .
Thanks
Images do not cause a line break by default, so it must be some additional css or other formatting. try removing some classes and see if that fixes the problem. If you find a class that causes the line break then add whitespace: nowrap; to that class; I tried this myself and the image was on the same line as the text so it may be some additional css you wrote.
Side note: your id does not have the first quote mark.
<div class="row">
<div class="large-12 columns">
<div class="row collapse featured-option">
<input id="featured" name="featured" type="checkbox" style="display: none;" <?php echo esc_attr( $featured_disabled ); ?>>
<span class="custom checkbox <?php echo esc_attr( $featured_disabled ); ?>"></span> <?php echo sprintf( __( 'Feature Proposal %s', APP_TD ), sprintf( _n( '(1 credit)', '(%d credits)', hrb_required_credits_to('feature_proposal'), APP_TD ), hrb_required_credits_to('feature_proposal') ) ); ?>
</div>
</div>
</div>
I'm trying to edit this wordpress theme code to use it for my own website.
But I don't know why style="display: none;" is needed here.
When I erase this style element, I get checkbox on the screen
but the functions are not working as it should be.
What's wrong with this? Why need "display: none"?
Please help
In this instance it is simply just hiding the checkbox. When
style = "display:none;"
is used, the page will be displayed as if the item does not exist. Meaning the layout of the page will not show a "hole" or something where that item is missing. In other words, the layout will not be affected by this.
The other way to hide something would be with,
style = "visibility:hidden;"
However, the page layout will be affected and the hidden item will still take up the same space.
Depending on what was trying to be accomplished, the checkbox could be hidden for different reasons. It's possible that the programmer of this code wanted to hide this checkbox by default and then show it later on after certain events occurred. Additionally, there are times when it is best to show and hide objects as you need them or don't need them rather than constantly recreating or deleting them.
I came across this site: http://www.jfletcherdesign.com.
I want to replicate how the home page shows the featured image of all of his posts and that when you click on the image you drill down into in the specific post. I also want to replicate how you are able to click forward and next with an image to the corresponding post within a category.
Can someone please point me in the right direction for setting up this functionality?
Bonus points if you can point me to the jQuery plugin that is being used for the rollover effect on his category page.
Thanks!
That site is based on the Imbalance theme by WPShower. It's a free theme so you can download it and check out all the source code. That should answer your first question.
To get images that act as pagination to the previous and next posts all you need to do is use the get_adjacent_post function. You can use something like the code below to set it up to link an image. Stick it in the bottom of your single.php or wherever you want the pagination to appear.
<?php
$prev_post = get_adjacent_post(true, '', true);
$next_post = get_adjacent_post(true, '', false);
?>
<?php if ($prev_post) : $prev_post_url = get_permalink($prev_post->ID); ?>
<a class="previous-post" href="<?php echo $prev_post_url; ?>"><img src="www.site.com/previous-image.png" alt"previous post" /></a>
<?php endif; ?>
<?php if ($next_post) : $next_post_url = get_permalink($next_post->ID); ?>
<a class="next-post" href="<?php echo $next_post_url; ?>"><img src="www.site.com/next-image.png" alt"next post" /></a>
<?php endif; ?>
Now for the jQuery rollover, it is pretty simple:
$(document).ready(function() {
$('.article').mouseenter(function() {
$(this).find('.article-over').show();
});
$('.article').mouseleave(function() {
$(this).find('.article-over').hide();
});
$('.article').hover(
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 0.3);
},
function() {
$(this).find('.preview a img').stop().fadeTo(1000, 1);
}
);
});
Which acts on the following HTML markup generated by the theme:
<li class="article li_col1" id="post-1234">
<div class="preview">
<img width="305" height="380" src="http://www.site.com/image/src.jpg" class="attachment-background wp-post-image" alt="" title="Cool Post">
</div>
<div class="article-over">
<h2>Cool Post</h2>
<div class="the-excerpt">
<p>Blah blah blah this is a post excerpt...</p>
</div>
</div>
</li>
So basically when you first go to the site, for all the items except the first, all you see is the .preview div that holds the category image. The .article-over div is absolutely positioned over the .preview div but has a style of display:none so that you can't see it.
When the mouseenter event is fired, the .article-over div is displayed via show(), and the image inside .preview fades out to an opacity of 0.3 allowing you to see the .preview div's black background behind it. When the mouse leaves, .article-over is hidden, and the .preview image fades back to fully opaque.
If you're still stuck let me know and I'll try to explain further.
I have a page which brings database entries in and displays them, and i have given every other entry/listing this style:
hjl:nth-child(odd) { background: #F2F2F2;}
And this is my HTML/PHP
<a href="paging.php?job_id=<?php echo $rsjobinfo['job_id'];?>">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br /><?php echo $date = date('d M Y', strtotime($rsjobinfo['date']));?></p>
</div>
<div class = "hjljobinfo">
<h1><?php echo $rsjobinfo['job_title'];?></h1>
<h2><?php echo $rsjobinfo['company_name'];?> |</h2>
<p class = "location"><?php echo $rsjobinfo['city'];?>, <?php echo $rsjobinfo['county'];?>, <?php echo $rsjobinfo['country'];?></p>
</div>
</div>
</a>
However, when i try to wrap each entire entry in an anchor tag, every entry changes to the background style listed above, no longer recognising the 'odd'.
This is the HTMl that's generated:
<a href="paging.php?job_id=253">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br />11 Jul 2011</p>
</div>
<div class = "hjljobinfo">
<h1>Entry One</h1>
<h2>Company |</h2>
<p class = "location">New York, NY, USA</p>
</div>
</div>
</a>
I'm not used to using nth-child so i'm not sure how to fix it (i've tried playing around with adding an 'a' to the above but its not making any difference).
Does anyone have any pointers they can kick me towards?
Thanks
Dan
:nth-child works between siblings documentation. That means that the counter (odd in this case) applies to elements with the same parent.
If you wrap each .hjl in a a then they no longer share the same parent so the selector tries to find odd .hjl elements inside the a element and finds just the first one (the only one that exists in the a).
So, you should change your selector to work with a tags (perhaps apply a class as well for more precision)
on another note, placing div and h1/h2 elements inside a a tag is invalid and will cause other issues.
You need to add ":" right in front of it, like so:
YourElement:nth-child( { number expression | odd | even } ) {
declaration block
}
Your element is something like tr, li, or anything like that. Hope that helps.
so my problem is like this:
I have a div, and in the div I have an img and then a string next to the image, the height is at 25, the width is at 128, and its align to center.
its just a username and a little icon next to their name. it works fine up until the user has a really long name in which case it will put the string onto a new line, which is definitely not what I want.
I would like it to just over flow and hide the rest of the name if it is too long. is there anyway I can do this?
I had overflow hidden as well as max-height and max-width. I tried using a span as well as display:inline but it keeps pushing it to a new line. I need to keep the alignment centered.
any help?
cant seem to find any information. I tried putting it in a table as well but to no avail.
here's the code:
<a href="#" class="tab2">
<table align="center">
<tr>
<td valign="bottom" id="contactLink1">
<div align="center" class="funtion_user_imageloc_box">
<?php if($memimglevelROW['imageloc']!=''){
if ($memimglevelROW['imageloc']=="black1.png"){?>
<img src="levelimage/<?php echo $memimglevelROW['imageloc'];?>" alt="" width="30.5" height="16" align="center" class="funtion_user_img1" />
<?php } else {?>
<img src="levelimage/<?php echo $memimglevelROW['imageloc'];?>" alt="" width="18" height="18" align="center" class="funtion_user_img2" />
<?php }
}
echo $username;?>
</div>
</td>
</tr>
</table>
</a>
Welcome to the community!
Please try not to post a wall of text, as it makes reading your question difficult.
The preview of what you're typing is below the "Ask a Question" textbox.
Thanks for providing code!
You should try white-space: nowrap; as that will probably fix your problem.
Also, don't ever use tables for non-tabular data. It's not 1995 anymore, CSS can do anything a table can do.