Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Ok I have been dying on this page...the code is below...if you can visit and see that it is not formatting right...I am wanting it to format in a way that it is all in line and not jumbled up like it is...what do I change in the code below...
Where one properity is below the other...u will see when you look at the site
http://ampmproperties.com/listing-of-properties-available
<style>
#para1{ text-align:center;}
.bdr_blb{
border:#000000 solid 4px;
height:70px;
background:#cccccc;
text-align:center;
font-size:14px; font-weight:700;}
.light32{ font-size:32px;}
.bggrey{ background:#cccccc;}
.light18{ font-size:18px;}
#bedroom4{
background:#cccccc;
}
.heading_div{float:left;}
.entry-content{float:left;}
.thumnail_col ul li {
float: left;
list-style: none outside none;
margin-right: 15px;
}
.thumnail_col ul li img{background:none; border:none;}
</style>
?>
<div id="container">
<div id="" role="main">
<?php $args = array( 'category_name' => 'lease', 'orderby' => 'title' ,'order' => 'ASC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
if ($count==1)
{
echo "<tr>";
}
?>
<td><div class="lease">
<div class="heading_div"><h2 class="entry-title"><strong><u>
<?php
echo ''.$loop->post->post_title.'';
?>
</u></strong></div></h2>
<div class="entry-content">
<div class="desc">
<?php
the_content();
?>
</div>
</div></div></td>
<?php
if($count==$number_of_columns)
{
echo "</tr>";
$count=0;
}
$count++;
endwhile;
?>
</div><!-- #content -->
</div><!-- #container -->
You are floating elements in each of your lease divs. You can add the following css and it should sort things out. Although I think I would recommend entering an explicit <br style="clear: both;" /> after each entry-content instead. Although it still looks bad. Do you really want to have float: left on heading_div and entry-content at all?
.lease { clear: both; }
Should something be initialising "$count" and "$number_of_columns"? Looking at your current site, there seems to be quite a few opening/closing tags missing/in the wrong place; It may not be what is messing up the formatting, but they might help with web browser compatiblity etc...
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have an events website with the pages Monday to Sunday. The code used in the pages is the same. The only thing thats different is the content and the meta tags. How can I have only one webpage that loads the appropriate content when the links for monday or tuesday etc is clicked. Also will this affect the SEO? Thanks!
<nav class="menu">
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wedneday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
</nav>
<div class="content">
<div class="article"><!--the days content--></div>
<div class="article"><!--the days content--></div>
<div class="article"><!--the days content--></div>
</div>
You can have multiple divs with the content you desire, hiding and showing as you need.
in HTML
<div id="container">
<button id="btnChange">Change Content</button>
<div id="red">
This is red content
</div>
<div id="blue">
This is blue content
</div>
in CSS
#container {
width:100%;
height: 100px;
background-color: green;
text-align: center;
}
#red {
width:100%;
height: 100%;
background-color: red;
}
#blue{
width:100%;
height: 100%;
background-color: blue;
display: none;
}
in jquery
$(document).ready(function () {
var content = "red";
$("#btnChange").click(
function () {
if(content == "red"){
$("#red").hide();
$("#blue").show();
content = "blue";
}else if (content == "blue"){
$("#blue").hide();
$("#red").show();
content = "red";
}
}
);
});
heres the fiddle
Other way more elegant but complex is to have a content div, and load the content via an ajax call from jquery to the php, then clear and repopulate the div with jquery.
Hope it helps
I built a blog under wordpress. I am searching for a way to display article like this :
the php / html
<div id="uno">
<?php the_title(); ?>
<?php the_excerpt();?>
Read more...
</div>
and the css
#uno{width: 25%; height:100%; float:left; text-align:center; padding-top: 20px;}
Have a look to isotope/masonry => http://isotope.metafizzy.co/layout.html
What's happening is your images are of different sizes so the gaps look different and because one image was larger then the others that's the primary gap for the following images.
One way I found that fixed this in my case was to navigate to your functions.php file and add this line of code in
add_theme_support( 'post-thumbnails' );
add_image_size( 'myimage', 100, 100 );
change the myimage portion to what ever you like and the sizes that you would like your image to be fixed as.
After that you can then pull your image using <?php the_post_thumbnail('myimage', array( 'class' => "our-size")); ?>
also just to be safe you could add some css.
.our-size {
height: 100px;
width: 100px;
max-width: 100px;
max-height: 100px;
margin-bottom: 2px;
}
Here is the solution: using isotope.
css :
.grid-image-item,
.grid--images .grid-sizer { width: 25%;}
.grid-image-item {
float: left;
}
.grid-image-item img {
display: block;
max-width: 100%;
}
home.php :
load "isotope-docs.min.js" on the top of your page, juste bellow "get_header" using this
<script src="where-you-placed-it/isotope-docs.min.js">
</script>
<div class="duo__cell example__demo">
<div class="grid grid--images" data-js-module="imagesloaded-progress">
<div class="grid-sizer"></div>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="grid-image-item">
<?php the_title(); ?>
<?php the_author() ?>
<?php the_time('j M Y') ?>
<?php the_category(', ') ?>
<?php the_excerpt();?>
<?php echo get_permalink(); ?>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
My image link has "invisible pixels" that show up as a link when you hover above the actual image. Is there any way to remove them? Here is my code:
<div id="sidebar">
<div id="navbuttonbox">
<img src="img/test.png"/>
</div>
</div><!--sidebar-->
For the style I use
#navbuttonbox {
margin-left: 37px;
}
So that It will be right where I want it.
I demonstrated it on JSFIDDLE
https://jsfiddle.net/1g2pqwy2/1/
When you move your mouse a little bit above the image you still get a cursor link because the tail of the image is higher then the body.
First here is your HTML.
<div id="sidebar">
<div id="navbuttonbox">
<img src="img/test.png">
</div>
</div>
Try this:
HTML
<div id="sidebar">
<div class="navbuttonbox">
Movies
</div>
<div class="navbuttonbox">
OTHER
</div> <!--- KEEP REPEATING FOR EACH MENU ITEM //-->
</div>
CSS
.navbuttonbox {
position:relative;
background: url(/img/test.png);
background-repeat: no-repeat;
min-height: 40px;
padding-top: 10px;
margin-right: -38px;
}
.navbuttonbox > a {
display:block;
padding:10px;
}
You'll notice the link is shifted down for those invisible pixels. The tail can be fixed too if you need it with:
.navbuttonbox > a:before {
content:'';
width:38px;
top:-10px;
bottom:0;
right:0;
position:absolute;
}
To demonstrate I set up a JSFiddle: here
I am new to css and coding, but I am wondering in the below code where it is pulling the imiage from the post. I dont want this page pulling images...it is pulling imiage from blog post and pages...is there a code I can place to make sure it does not pull the image?
thanks
<style>
#para1{ text-align:center;}
.bdr_blb{
border:#000000 solid 4px;
height:70px;
background:#cccccc;
text-align:center;
font-size:14px; font-weight:700;}
.light32{ font-size:32px;}
.bggrey{ background:#cccccc;}
.light18{ font-size:18px;}
#bedroom4{
background:#cccccc;
}
.heading_div{float:left;}
.entry-content{float:left;}
.thumnail_col ul li {
float: left;
list-style: none outside none;
margin-right: 15px;
}
.thumnail_col ul li img{background:none; border:none;}
</style>
?>
<div id="container">
<div id="" role="main">
<?php $args = array( 'category_name' => 'lease', 'orderby' => 'title' ,'order' => 'ASC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
if ($count==1)
{
echo "<tr>";
}
?>
<td><div class="lease">
<div class="heading_div"><h2 class="entry-title"><strong><u>
<?php
echo ''.$loop->post->post_title.'';
?>
</u></strong></div></h2>
<div class="entry-content">
<div class="desc">
<?php
the_content();
?>
</div>
</div></div></td>
<?php
if($count==$number_of_columns)
{
echo "</tr>";
$count=0;
}
$count++;
endwhile;
?>
</div><!-- #content -->
</div><!-- #container -->
You need to find where the function the_content(); is defined. Somewhere, look for:
function the_content()
Inside of that function definition is possibly code that echo's out an <img> tag. Delete or comment out that portion of the code. Until we see the definition of that function though, we cannot be sure of other consequences of modifying it.
UPDATE
This won't prevent the image from being loaded by the browser, but will prevent it from being actually displayed by the browser. It's easier than tracking down the function definition to modify PHP.
Inside the <style> tag at the top of your posted code above, add this (it can go anywhere in there):
.entry-content img {display: none;}
This simply tells the CSS no to show the image even though the browser has downloaded it.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've created a grid portfolio page on my website and I'm looking to add a feature to the thumbnails. I'd like that whenever someone hovers over a thumbnail, it will show the post title, date of post and excerpt.
I've been trying to find an example of what I mean and this is very similar;
http://lucybenson.net/redesign2011/
So far my loop on Wordpress looks like this
http://pastie.org/2135220
Is there a plugin that does this? If not, would anyone be able to tell me how I could achieve this?
Thanks in advance.
There are plugins for this kind of thing, but it's very easy to do by yourself.
This isn't tested, but it should get you going in the right direction:
<style type="text/css" media="screen">
.image-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.image-list li {
margin: 0 10px 0 0;
padding: 0;
float: left;
}
.image-list li a {
display: block;
position: relative;
height: 50px;
width: 50px;
}
.image-list li a span {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
color: #fff;
}
</style>
<ul class="image-list">
<li>
<a href="#">
<img src="myimage.jpg" alt="My Image">
<span>
This is my overlay content
</span>
</a>
</li>
</ul>
<script type="text/javascript">
$(function() {
$(".image-list li a").hover(
// Mouse Over
function() {
$(this).find("span").fadeIn();
},
// Mouse Out
function() {
$(this).find("span").fadeOut();
}
);
});
</script>
If you're looking for a javascript-independent solution - I know, sounds really silly but it's worth a try - you can do it through CSS purely. It's not too hard - http://jsfiddle.net/teddyrised/TWBhU/
What I did was to use the -webkit-transition / transition property. Of course, my solution isn't as elegant as what Jesse has posted, but it's just nice to know CSS could work some magic, too.
There are a few things you need to get sorted here - first you need to get your head around getting one thing on top of the other - so here's the effect you're after done really simply in just css using the :hover class. The key is using the absolute position in an absolutely positioned wrap to get the text on top of the image
http://jsfiddle.net/aDwe4/
Next you want the fade the item - some people might not like it - but jquery makes this super easy - drop the hover class and put the animate function in your footer in some script tags
http://jsfiddle.net/aDwe4/1/
Finally you now need to translate this into your wordpress tempalte - I'm not sure what's going on with your template - so I'll just write an example. I would install the get_the_image plugin then put something like this within your loop
<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
You're obviously going to have to look up how get_the_image works, but I think with all this you should be laughing!