links are showing up on each line, instead of inline
Tags: html,css
Problem :
On a blog detail page, I have a tags section.
The html looks like:
<td class="tags">
<a href="">tag1></a>, <a href="">tag2</a>
</td>
For some reason the tags are showing up, each on their own line, instead of being inline.
I know I can create a new style to fix this, I just have to make sure the CSS style is specific enough to target this section.
But how can I force them on the same line?
I tried:
display:inline
but that didn't work.
The css:
.entry .entry_meta_bottom a,
.entry_individual .entry_meta_bottom a {
display: block;
font-size: 0.9em;
line-height: 1.75em;
background-position: 0 60%;
background-repeat: no-repeat;
text-decoration: none;
margin-right: 10px;
}
.entry .entry_meta_bottom td.tags,
.entry_individual .entry_meta_bottom td.tags
{
background-image:url("../icon_tags.gif");
background-repeat: no-repeat;
padding:0 0 0 25px;
}
Solution :
Trying to set display: inline
is the right idea. My supposition is that you didn't make your selector specific enough to override the display: block
set in .entry .entry_meta_bottom a, .entry_individual .entry_meta_bottom a
.
Try the following:
.entry .entry_meta_bottom td.tags a,
.entry_individual .entry_meta_bottom td.tags a {
display: inline;
}
CSS Howto..
Put this CSS in your stylesheet: .clear { clear: both; } Then put a clear div just before the closing tag of your wrapper div. <div class="wrapper"> Your content <div...
You can do this all with CSS animation. Check out this jsFiddle the browser prefixes are annoying... and if anybody knows if this can be simplified please comment. But this...
Considering that #formwrap is the main container(white one and outermost), just do - #formwrap{ margin:0 auto; } ...
The Google implementation is using postion: relative; margin-left: -13px in the CSS but at the same time they are using inline styles to give a different z-index to each link...
concat.js is being included in the concat task's source files public/js/*.js. You could have a task that removes concat.js (if the file exists) before concatenating again, pass an array to...
You could use something like this CSS .outer_circle { height:400px; line-height:400px; width:400px; border-radius:50%; background-color:#000000; position:relative; margin:0 auto; } .outer_circle p { text-align:center; vertical-align:middle; color:#ffffff; } .circle { background-color:#aeaeae; border-radius:50%; height:40px;...
Use CSS3 animations. Snippet: img { -webkit-animation: mover 2s infinite alternate; animation: mover 2s infinite alternate; } @-webkit-keyframes mover { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); }...
You can use filter to compare the exact text of the <nobr> element, then remove the closest <tr> $("span table tr td nobr").filter(function() { return $(this).text() === "Question"; }).closest("tr").remove(); <script...
The way you ask it: all table header cells except the last one could refer to: the last th of the table, wherever it could be found, the last element...
So, I'm making a proper answer out of my comment. I've improved the CSS slightly. See: http://jsfiddle.net/2WUgK/ I'm not convinced this isn't Voodoo yet This will work in IE7+ and...
If you create the image with correct classes that already exists in your .css file it should automatically apply the correspondent styles. Also, don't forget to correctly close the body...
check this jsfiddle I have added a container div around your inputs and put respective labels in them. adjust your css for the mobile screen. .form-group { position: relative; display:...
If you don't mind using Regex : var match = $('div').attr('style').match(/url\(["|']?(.+)["|']?\)/); var url = match ? match[1] : 'default.jpg'; Explanation : ["|']? will allow you to have quotes or not....
Try: div.menu ul li {text-align:left;} ...
z-index won't work in this case; z-index is meant for those elements which are stacked one over another i.e. they have overlapping top and left, which is not in your...
You're absolutely positioning the checkbox. Can't you just leave it display:inline and add vertical-align:middle? input[type=checkbox] { display: none;} .checkbox label { display: inline-block; cursor: pointer; position: relative; /*padding-left: 30px; Probably...
If I get you correctly, you can do it like this with plain javascript, but this isn't a good aproach over all.. var a = document.getElementById('forum0-NewPostLink'); var b = a.getElementsByTagName('span');...
There is also th:classappend. <a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a> If isAdmin is true, then this will result in: <a href="" class="baseclass adminclass"></a> ...
Try this <?php $hostname = '192.xx.xxx.xx'; $username = 'Mitchyl'; $password = 'root1323'; $dbname = 'test'; try { $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password); $sql = $dbh->prepare("SELECT * FROM increment"); if($sql->execute())...
Basically you have 2 ways of inserting CSS in a Meteor project : Using the Meteor build tool to automatically concatenate and minify all your CSS files living in the...
Main problem is that "nav" tag is covering whole content. nav {display: inline-block;} This should help at the beginning. Now something about semantic. Button should be separated part of your...
This is very simple, just add height: 100% on the class responsible for your paragraph styling. In this case, RadioEpisodeItem body { background-color: #4094cf; } .RadioEpisodeItemContainer { display: inline-block; vertical-align:...
Add the following attribute. #rightLayoutCol { right: 0; } Since #wrapper is position: fixed it already gives a new positioning context....
You should keep your styles in a CSS file except when absolutely necessary (i.e. changing opacity with Javascript). Add a CSS file to your website (or use an existing file...
Check out my example here http://jsfiddle.net/z8gph/ Unless I have your exact setup this is the closest I can get to answering your question. First position the outer and inner containers...
A good file/folder structure would be the below: website_folder/ –––– application/ –––––––– config/ –––––––––––– autoload.php –––––––––––– config.php –––––––––––– ... –––––––– controllers/...
Here is a start. $(document).ready(function() { $("#button").click(function() { var x = prompt("How many squares do you want on each side of the grid? Pick between 1 and 16."); var s...
$(document).ready(function() { function getWidth(width) { if (!width || width >= 1000) { return 800; } return width + 100; } $("#button").click(function () { var textMaxWidth = parseInt($('.text').css('max-width')); var moreTextMaxWidth =...
The issue is with the float of the boxes and the display status Try this, it should work fine.. http://jsfiddle.net/4sdvk8gL/ *{ margin:0px; padding:0px; } h1{ font:bold 20px Tahoma; } h2{...
Because you are including it independently, and not including it in your application.css. The default for the asset pipeline is to compile applicaiton.css/application.js and anything that is included in those...