I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
Related
I am using custom template in wordpress. This is the code
<a href="<?php echo get_category_link($cat->term_id); ?>">
<img class="home-img" src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
<p><?php echo $cat->cat_name; ?></p>
</a>
</div>
<?php endforeach; ?>
which is displaying category with category images like this Screenshot1.
I want to display the text on the image not below the image.
Change the position of the paragraph:
p {
margin-top: -50px;
width: 100%;
text-align: center;
}
I am retrievieng from a query 4 rows.
This rows recover the id (to set the href), the image path and the title.
For example the code for the first row is:
<div class="row">
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">The title</p>
</a>
</div>
<div class="col">
<a href="id">
<img src="file">
<p class="titulo-noticia">Another title</p>
</a>
</div>
</div>
I achieve this using:
echo "<div class='table'>"
for($i=0;$i<2;$i++){
echo "<div class='row'>"
for($j=0;$j<2;$j++){
echo "<div class='col'>"
echo "<a href='id'>
<img src='file'>
<p class='titulo-noticia'>".$title."</p>
</a>"
echo "</div>"
} //end col loop
echo "</div>"
} //end row loop
echo "</div>"
CSS is:
.col{
display: table-cell;
}
.row{
display: row;
}
.table{
display: table;
}
Is this the correct way to show a 2*2 matrix of php content? Or there is a better way using css?
Thank you.
I don't think there's really a best way, but here's another way with CSS. Basically just echo out all your query results into one container div without worrying about rows. Display each result in a div with float: left and width: 50% and they'll make their own rows.
<div class="matrix">
<?php while ($row = however_youre_fetching_them()): ?>
<div class="cell">
<a href="<?= $row['id'] ?>">
<img src="<?= $row['path'] ?>">
<p><?= $row['title'] ?></p>
</a>
</div>
<?php endwhile ?>
</div>
And the CSS
.cell {
height: 100px;
width: 50%;
float: left;
}
Setting a constant height on the cells should ensure that the rows line up properly.
You over-complicating this.
You need to do it by chunks, array_chunk() perfect for that:
foreach(array_chunk($array, 2) as $chunks){
//<div class="row">
foreach($chunk as $chunk){
//<div class="col"></div>
}
//</div>
}
How do i remove the inline-block space between two divs that are a part of the wordpress loop? They are supposed to sit side-by-side, each being 50% width. I realize I could change the width to 49% or use floats, but I would like to leave it this way if possible.
I know you normally can do it by eliminating the white space in the coding with comments as below:
<div class="before-after">
<img src="images/ba_01.jpg" alt="">
<h4>Frick TDSH 355XL<br><small>Slide Valve and Rotor Housing</small></h4>
</div><!-- this comment here eleminates the spacing
--><div class="before-after">
<img src="images/ba_02.jpg" alt="">
<h4>Frick NGC300 Gear Plate</h4>
</div>
This is my wordpress loop, and no matter where I put the comment, and still adds white space in the actual returned html.
<?php
$my_query = new WP_Query(
array(
'cat' => '2',
)
);
while ( $my_query->have_posts() ) : $my_query->the_post();
?>
<div class="before-after">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<h4><?php the_title(); ?><br><small><?php the_content(); ?></small></h4>
</div><!-- --><?php endwhile;?><?php wp_reset_postdata();?>
And this is what is showing up in Developer Tools:
<div class="before-after">...</div>
<!---->
<div class="before-after">...</div>
<!---->
I'm sure I'm just overlooking something easy, but any help would be appreciated. Thanks!
#Prusprus here it is straight from the source code:
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_02.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick NGC300 Gear Plate" />
<h4>Frick NGC300 Gear Plate<br><small></small></h4>
</div>
<!---->
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_01.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick TDSH 355XL" />
<h4>Frick TDSH 355XL<br><small><p>Slide Valve and Rotor Housing</p>
</small></h4>
</div>
<!---->
There may be a different way to mark this as answered, not sure, but #Prusprus gave me the solution in a comment above.
I simply had to remove a line break at the start of my code between the closing php tag and the start of my div.
The traditional way of floating inline-block elements could correct this, but since its unfavored there is another way.
You can also set the letter spacing of the parent element to -0.31em to solve this and set the letter-spacing back to normal in the divs themselves. I'll set up a jsfiddle in a sec.
CODE
.row {
letter-spacing:-0.31em;
}
.col {
letter-spacing:normal;
display:inline-block;
width:50%;
}
Good luck!
Two methods here
Set the parent's font-size to 0 and then restore it on the inline-block elements.
Apply a suitable margin to the last div.
DEMO x 2
HTML
<div class="opt1">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
<div class="opt2">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
CSS
.opt1, .opt2 {
margin:10px;
border:1px solid green;
}
.before-after {
display:inline-block;
background:lightgrey;
width:50%;
height:100px;
font-size:16px
font-size:1rem;
}
.opt1 {
font-size:0;
}
.opt2 .before-after{
vertical-align:top;
}
.opt2 .before-after:last-child {
margin-left:-.25em;
}
I'm trying to style a page generated with App Gini. I've been able to edit most everything so far, however I can't seem to get inline-block to work, float:left will work. However I've tried many methods and can't get float to center and I much prefer using inline-block. I have no background in PHP coding mostly just CSS and HTML.I'm trying to style PHP elements and I don't believe they're the cause.
The PHP generate links to tables within a database and it changes based on user access. Right now it returns about 8 links and as I said float allows me to format them to display horizontally without centering however when I use inline-block it displays them vertically with centering. What I'm trying to accomplish is a horizontal centered menu that is adaptive to screen size. If there is any information I am lacking in this post please let me know.
The CSS:
#headingstyles{font-family: "Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:5px;margin-bottom:0px;}
body{font-family:"Ubuntu","Segoe UI","Segoe WP","Helvetica Neue",'RobotoRegular',sans-serif;font-size:20px}
h1,h2,h3,h4,h5,h6{font-family:"Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:0px;margin-bottom:0px;}
.content a:link {color:#DDD; text-decoration:none;}
.content a:visited {color:#DDD;text-decoration:none;}
.content a:hover {color:#FFF;text-decoration:none;}
.content a:active {color:#FFF;text-decoration:none;}
.content {
position:absolute;
width:99%;
min-height: 20%;
padding-top:6%;
padding: auto;
background-color: #1569C7;
color: #FFF;
text-align: center;
border-bottom: #111 1px solid;
margin:0 auto;
}
.content a:link {
padding: 15px;
/*display: inline-block;*//*doesn't work*/
float:left;/*works*/
}
.content a:hover {
background-color: #479BF9;
}
The HTML/PHP:
<div class="content">
<?php
if(is_array($arrTables)){
$i=0;
foreach($arrTables as $tn=>$tc){
$tChk=array_search($tn, array());
$searchFirst = (($tChk!==false && $tChk!==null) ? '?Filter_x=1' : '');
?>
<div onclick="window.location='<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>';" id="<?php echo $tn; ?>">
<a title="<?php echo htmlspecialchars($tc[1]); ?>" href="<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>">
<?php echo (!$i ? "<h2>{$tc[0]}</h2>" : "<h2>{$tc[0]}</h2>"); ?>
<?php echo $tc[1]; ?>
</a>
</div>
<?php
$i++;
}
// custom home links, as defined in "hooks/links-home.php"
if(is_array($homeLinks)){
$memberInfo = getMemberInfo();
foreach($homeLinks as $link){
if(!isset($link['url']) || !isset($link['title'])) continue;
if($memberInfo['admin'] || #in_array($memberInfo['group'], $link['groups']) || #in_array('*', $link['groups'])){
?>
<div onclick="window.location='<?php echo $link['url']; ?>';">
<a title="<?php echo htmlspecialchars($link['description']); ?>" href="<?php echo $link['url']; ?>">
<h1><?php echo $link['title']; ?></h1>
<?php echo $link['description']; ?>
</a>
</div>
<?php
}
}
}
if(getLoggedAdmin()){
?><div onclick="window.location='admin/';"><h2><?php echo $Translation['admin area']; ?></h2></div><?php
}
}else{
?><div id="error-no-access"><?php echo $Translation['no table access']; ?><script language="javaScript">setInterval("window.location='index.php?signOut=1'", 2000);</script></div><?php
}
?>
</div>
The Generated HTML:
<div class="content">
<div onclick="window.location='t1.php';">
<a title="" href="t1.php">
<h2>t1</h2> </a>
</div>
<div onclick="window.location='t2.php';">
<a title="" href="t2.php">
<h2>t2</h2> </a>
</div>
<div onclick="window.location='t3.php';">
<a title="" href="t3.php">
<h2>t3</h2> </a>
</div>
<div onclick="window.location='t4.php';">
<a title="" href="t4.php">
<h2>t4</h2> </a>
</div>
<div onclick="window.location='t5.php';">
<a title="" href="t5.php">
<h2>t5</h2> </a>
</div>
<div onclick="window.location='t6.php';">
<a title="" href="t6.php">
<h2>t6</h2> </a>
</div>
<div onclick="window.location='t7.php';">
<a title="" href="t7.php">
<h2>t7</h2> </a>
</div>
<div onclick="window.location='t8.php';">
<a title="" href="t8.php">
<h2>t8</h2> </a>
</div>
<div onclick="window.location='admin/';"><h2>Admin Area</h2></div>
</div>
Instead of putting inline-block on the links, put it on their containing divs instead:
.content div{
padding: 15px;
display: inline-block;
}
In your code above, the containing divs are blocks so setting their links to inline-block doesn't have an effect.
I have searched and gone through many so called solutions but none helped.
I have a situation where i need multiple facebook comments on a same page for different li tags.
The code will make it clear I guess.
<?php foreach($events_without_upcoming as $single_events):?>
<li id="event_<?php echo $single_events->id; ?>" class="events" style="cursor:default">
<span class="sn"><?php $i++; ?></span>
<span class="date"><?php echo $new_date?></span>
<span class="venue"><?php echo $single_events->venue; ?></span>
<span class="address"><?php echo $single_events->address; ?></span>
<span class="option"><?php echo share_button('facebook', array('url'=>"http://www.xxxxxx.com", 'text'=>$text))?><?php echo share_button('twitter', array('url'=>$url, 'text'=>$text, 'via'=>'Lightning At The Opera', 'type'=>'iframe'))?></span>
<div id="fb_<?php echo $single_events->id; ?>" class="fb_plugin" style="display:none;"></div>
<div class="fb-like" style="display:block" data-href="http://www.xxxxxx.com/<?php echo $single_events->id; ?>" data-send="true" data-width="450" data-show-faces="false"></div>
<div class="fb-comments" data-href="http://www.xxxxxx.com/#event<?php echo $single_events->id;?>" data-width="470"></div>
</li>
<?php endforeach;?>
The FB comment plugin is within a foreach loop.
Every li contains the comment plugin.
I tried giving data-href a unique url as in code but its not working.
I have been trying this from morning but I couldn't find anything.
If i haven't made myself clear please ask anything thats required.
Thx in advance.
<iframe
style="border: none; overflow: hidden; height: 155px; width: 470px;"
scrolling="no"
src="https://www.facebook.com/plugins/comments.php?api_key=your_api_key&elation%3Dparent.parent&numposts=1&width=470&href=http%3A%2F%2Fexample.com"></iframe>
as we cannot find any solution with js so We are using iframe without any js libs,
it also helpful when we want to show comments dynamically.