I'm trying to adjust one paragraph of two in the same div, I'm not sure how to do this but I tried to give one of the paragraphs a class, as a result they both started to respond on just p without any unique name. I'm not sure why or is there a better way to do this?
Thanks in advance!
Css:
.col_12 p1{margin-left:240px; position:relative;}
Html:
<div class="col_12">
<h3>Contact</h3>
<p><?php show_post('contact'); ?></p>
<p class="p1"><div id="map_canvas"></div></p>
</div>
.col_12 p1{margin-left:240px; position:relative;}
won't work because you missing a . before p1
your css should be:
.col_12 .p1{margin-left:240px; position:relative;}
Syntax not correct , You need to put . before class name of paragraph tag
.col_12 .p1{margin-left:240px; position:relative;}
________^__________________________________________
for me a <div> won't be allowed inside a <p>.
You may use a <span> instead.
-Sven
this should work more dynamically
.col_12 p:nth-child(2){margin-left:240px; position:relative;}
if you want, you can try with your own class like this
.col_12 p1{margin-left:240px !important; position:relative;}
Related
i have this div class in style
.page-banner{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
and I've tried to create a new div in the same style with the same declarations but with a new name .page-banner-category.
.page-banner-category{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
and ...
<div class="page-banner-category">
but it does not work,what am i missing here?
Can you provide your HTML code as well to see how you use them? It is difficult to say right away what went wrong.
Also, in your CSS code you don't have to create 2 declarations, you can just use a multiple selector:
.page-banner, .page-banner-**category**{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
}
It will be easier down the road to update them when needed if behaviour is completely
here is.
<div class="page-banner-category col-md-10">
<?php echo single_cat_title('', false); ?>
<div class="theme-breadcrumb">
<?php niche_custom_breadcrumbs(); ?>
</div>
</div>
</div>
Was published before, this is for PHP, and what I try to do is just change the image banner in X category.
Thanks for you reply.
I have this simple html markup:
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee
<p class="zumba">
1996-03-14
</p>
</div>
.....
So my aim is to have the <p> with the class="zumba" in the same line like the text Daddy, Yankee but on the right site:
I added float-right to align it a the right site, what worked out. But somehow its displayed in a new row!
Then i added:
.zumba {float:right; display:inline}
But the problem stays! Why? Thanks and here you can test you ideas:
http://jsfiddle.net/kMuA6/
Change yout <p> to span
HTML
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee <span class="zumba"> 1996-03-14 </span>
</div>
CSS
.zumba {float:right;}
Fiddle : http://jsfiddle.net/logintomyk/drLbx/
General Tip: If its not much of a text, <span> is always a better option to show in same line (and different style)!! :)
They have top and bottom margin. This works:
.zumba {float:right; display:inline; margin:0;}
You could do this whitout using any float.
It will work with < P > and < SPAN >.
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee
<span class="zumba">
1996-03-14
</span>
</div>
I've add some color to identify.
Fiddle: http://jsfiddle.net/kMuA6/2/
Floating elements always make them display:block, no matter what you define. (check firebug or any other developer tools for the value of display) Do you have control over the markup? Then wrap the "Daddy, Yankee"-text in an extra element and let it float left.
try this fiddle:
http://jsfiddle.net/kMuA6/1/
I just used <span> instead of <p>
i am trying to display a few labels with a fair bit of space in between them on the same line in an html document. This does work.
How to get this working in a nicer way?
<div>
firstlabel             secondlabel
</div>
You could wrap your 'labels' in <span> tags, give them classes, and add margin with CSS.
Example here: http://jsfiddle.net/peduarte/Rf5kB/
HTML
<div>
<span class="firstLabel">firstlabel</span>
<span class="secondLabel">secondlabel</span>
</div>
CSS
.firstLabel {
margin-right: 50px;
}
You should use a semicolon after  .
<div>
firstlabel secondlabel
</div>
Try this:
<div class="main">
<div class="left">firstlabel</div>
<div class="right">secondlabel</div>
</div>
.main{
width:220px;
}
.left{
width:110px;
float:left;
text-align:left;
}
.right{
width:110px;
float:right;
text-align:right;
}
Sorry but this is a really freaky way to do that. Why don't you place those Labels in <p>-Tags and format the spacing via margin,padding ?
The correct non breakable space entity is , you forgot the semicolon at the end (;). A better way, however, to achieve what you want to do would be to enclose firstlabel and secondlabel in <span> tags and use css to make them stand apart, like suggested by peduarte.
Whether it works depends on the browser; the correct notation is with a semicolon (as mentioned by nyarlathotep). But no-break spaces give you very rough control. A better approach is to use CSS, e.g.
<div><span style="padding-right: 5em">firstlabel</span>secondlabel</div>
You can tune the padding-right value, using whatever units are suitable for your context. But generally, the em unit is most suitable, as it means that the spacing is automatically scaled when font size is changed.
I'm surprised that no one suggested the simple inline style:
<div style="margin-right: 500px;">firstlabel</div>
<label >Subscription Expiry: 2019=04-30 00:00:00<br><br></label>
Subscription Type: paid
I have this kind of table:
<table>
<tr><td>Count A</td><td>12</td></tr>
<tr><td>Count B</td><td>8</td></tr>
</table>
I'm new to CSS but from what I've read so far I'm assuming that the html should be:
<div id="counts-container">
<div class="count">
<div class="count-label">Count A</div><div class="count-number">12</div>
</div>
<div class="count">
<div class="count-label">Count B</div><div class="count-number">8</div>
</div>
</div>
It seems to me that I'm on the right track but I'm not sure about how to write the CSS for this html structure. Any suggestion I appreciate.
Ok, so I just want to confirm with you guys. This table should be:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td><tr>
</table>
In your case using a <table> is ok - just structure it correctly:
<table>
<tr><th>Count A</th><td>12</td></tr>
<tr><th>Count B</th><td>8</td></tr>
</table>
<th> being the table header cell.
If you are confused about when to use tables and when not I suggest you to consult the specification http://www.w3.org/TR/html4/struct/tables.html
If this is tabular data than just go ahead and use a table. Thats what that HTML element is supposed to be used for.
div's are for page layout, table's are for displaying tabular data.
http://webdesign.about.com/od/tables/a/aa122605.htm
You probably should be using a <table> tag. Sites that say they're bad really mean "abusing them for formatting reasons instead of using padding and margins is bad".
But if you're set on using <div>s, try this:
#counts-container {display: table;}
.count {display: table-row;}
.count-label, .count-number {display: table-cell;}
counts-container becomes your table,
count becomes your row,
count-label and count-number become your column so you have to write css like this
#counts-container,
.count
{
width:400px;
float:left;
}
.count-label
{
width:150px;
float:left;
}
.count-number
{
width:250px;
float:left;
}
{#} for id and
. for class
I have a blog on wordpress and I need to center an object. What is the easiest way?
You cannot do layout with PHP, it is for programming logic. To do layout you use CSS and HTML. To center text you can use the text-align tag that jdhartley showed above. To center a block like a table or div you use the following CSS:
<style>
.centered {width:950px; margin-left:auto; margin-right:auto;}
</style>
<div class="centered">Bunch of stuff to be centered</div>
The width can be anything, but you do have to set it. It can be a percent like 90% or a pixel width.
You would actually use HTML and CSS to do that. :)
<div style="text-align: center;"> YOUR OBJECT HERE </div>
Definitely easiest and the best way to centre whatever you want in WordPress is to use:
<center>whatever you need, a, img etc..</center>
You don't center objects using PHP. You position them using CSS. Read this for further info.
PHP is just a scripting language that performs data manipulation and such. You process that information and output HTML (usually.) Something you can do is just close the PHP and drop some HTML into it like this:
<?php //PHP stuff ?>
<p style="text-align:center;">HTML Stuff</p>
alternatively you can do it all in PHP like:
<?php
$output = '<p style="text-align:center;">HTML Stuff</p>
echo $output;
?>