Question related to: How can i reduce the size of the background of an image or remove it
left and right arrows not showning in the page, tried many css font and content, i think there's something missing
#media screen and (max-width:800px){
.my-view-detail .timeline-posts .owl-prev span,
.my-view-detail .timeline-posts .owl-next span{
display: none;
}
.mobile-next-prev{
margin-top: -50px;
}
.set-button-left{
position: inherit;
float: left;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f104";
}
.set-button-right{
position: inherit;
float: right;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
}
}
#media screen and (max-width:680px){
.mobile-next-prev{
margin-top: -110px !important;
position: relative !important;
z-index: 1000 !important;
}
}
<div class="row .mobile-next-prev">
<div class="col-sm-12">
<!-- pre start -->
<?php if($previous){ ?>
<a href="<?php echo base_url('details/'.$previous); ?>" class=".set-button-left" ></a>
<?php } ?>
<!-- pre end -->
<!-- next start -->
<?php if($nexts){ ?>
<a href="<?php echo base_url('details/'.$nexts); ?>" class=".set-button-right" ></a>
<!-- next end -->
<?php } ?>
</div>
</div>
Do i need to include css file or something ?
Hope someone can help, i was working on it for hours without sucess
I used fontawesome 4.7v only, You may get solution for your question here =>enter link description here
Related
I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?
This is the php code.
Thanks for the help.
<h3>Details</h3>
<ul>
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
<li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
<?php endforeach; ?>
</ul>
Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.
If you have access to the CSS stylesheet, you could use several methods:
Inline-block
ul {
font-size: 0;
/*makes inline-block method work, as " " in your DOM have a font-size,
and we want to eliminate those
*/
}
ul li {
font-size: 18px; //or however large you would like
display: inline-block;
width: calc(100% / X); //where X is number of li
}
Float
ul {
}
ul li {
font-size: 18px; //or however large you would like
float: left;
margin-left: X; //where X is the gap you want between elements
}
Flexbox
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
}
I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.
Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp
Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.
Thanks a lot Guys,
This is the code works for me:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: #e8f3ff;
width: 1px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 30px;
}
</style>
</head>
<body>
<h4>Details</h4>
<div class="flex-container">
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name =>
$custom_quote_field_value) : ?>
<?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>
<?php endforeach; ?>
</div>
</body>
I'm not sure where I'm going wrong with my CSS.. any help would be appreciated..
the CSS
#commentbox {
float: left;
margin-top: 10px;
background-color: #FFFFF0;
display: block;
width: 450px;
border: 1px solid #999999;
padding: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
text-align: left;
}
#commentbox .commenter_name {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
color: #660000;
float: left;
padding-left: 5px;
display: block;
}
#commentbox .comment_content {
display: block;
float: left;
clear: both;
white-space: pre-wrap;
}
This is my Form Textarea
<textarea name="vt_comment" cols="50" rows="5" wrap="hard" class="nontextarea" ></textarea>
This is the code that displays the Comment
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name">
<?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?> commented
</div>
<!--Show Comment -->
<div class="comment_content">
<?php echo $row_cmnts_disp['vt_comment']; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
This is how it gets stored in the DB
1st Line of the Comment
2nd Line of the Comment with just a Line break
Double Line Break
and this is how it is displayed on the site (with spaces in the front of the 1st line)
Swami Donanandha commented
hello
hello
hello
hello
as displayed online
whatever changes I try, I'm not able to remove the spaces before the 1st line of the comment, unless I remove the white-space:pre-wrap setting in the CSS...and if i do that the line breaks vanish displaying just one long sentence....
Swami Donanandha commented
1st Line of the Comment 2nd Line of the Comment with just a Line break Double Line Break
Have you tried removing the white-space: pre-wrap attribute and echo'ing a HTML break tag at the end of each comment?
<?php if ($totalRows_cmnts_disp>0) { // Show only if there are Comments
do { ?>
<div id="commentbox">
<!--Show Commenter Name -->
<div class="commenter_name"><?php if ($row_cmnts_disp['member_nick']>"") {
echo $row_cmnts_disp['member_nick'] ;
} else {
echo $row_cmnts_disp['member_fname'] . ' ' . $row_list_solo['member_sname'] ;
} ?>
commented
</div>
<!--Show Comment: Added Break Tag Below-->
<div class="comment_content">
<?php echo "<p class='comment'>" + $row_cmnts_disp['vt_comment'] + "</p><br>"; ?>
</div>
</div>
<?php } while ($row_cmnts_disp = mysql_fetch_assoc($cmnts_disp));
} // Show only if there are Comments loop ends
?>
The reason your comments concatenate into one long string after removing the white-space attribute is because of the float: left attribute in the .comment_content class. Updating the class to the following should fix the long string problem you have;
#commentbox .comment_content {
display: block;
}
I sorted it out... by adding the nl2br clause before the DB insert
$vt_comment = nl2br($_POST['vt_comment']);
and removing the white-space:pre-wrap from the CSS
Though I still don't have a clue why the extra spaces were getting added earlier :-)
I'm currently displaying a users profile picture in php and if they click on it, then it takes them through to their own profile. The image displays correctly and the link works, but the area of the link extends way beyond the picture and over a link nearby. How would I go about reducing the area of the anchor?
<?php } if ($searchuser == $username)
{ ?>
<a href="profile.php">
<?php } ?>
<div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
<?php if ($searchuser == $username)
{?>
</a>
div.user-pic {
margin: 0 auto;
width: 125px;
height: 125px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 0.09em solid white;
position: relative;
top: -60px;
padding: 0px;
z-index: -100;
}
Try with this:
php
<?php }
$show_user_link = false;
if ($searchuser == $username) {
$show_user_link = true;
}
?>
<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
<?php if( $show_user_link ): ?>
<a class="user-link" href="profile.php">
</a>
<?php endif; ?>
</div>
css
div.user-pic {
position: relative;
}
a.user-link {
height: 125px;
width: 100%;
}
You put the anchor in within the div tag and then you could make div's position relative and anchor's width to 100%.
PS: You could try to use something like
<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>
when mixing php and html to make your code more readable.
--- EDIT
Ok, I understand, see if the new code is more helpfull now, the only thing I think that could go wrong is the height of the anchor in case it isnt fixed to 125px, say me if you have problems with it.
I'm still trying to finish this theme I'm working on. Atm I'm trying to implement header support, and it's not going to well with my layout. Everything was fine until I added this line:
<img src="<?php header_image(); ?>" />
So, header currently looks like this:
<hgroup class="blog-header">
<img src="<?php header_image(); ?>" alt="" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php the_breadcrumb(); ?>
</hgroup>
Here's the thing, this works fine when there's no header image, however when adding one, it messes up my styling for the site description - which bumps up a few pixels from where it was. The title and the description is supposed to be inline with each other, and I'm not sure how to fix this without one of the scenarios making it wrong..
Here's my style for these:
.site-title {
font-family: 'Bree Serif', Georgia, serif;
font-weight: 700;
font-style: uppercase;
font-size: 30px;
color: #fff;
margin: 0 0 0 90px;
padding: 60px 25px 60px 0;
float: left;
}
.site-description {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
color: #c9c9c9;
padding: 68px 25px 60px 0;
}
Ok this is going to be bizarre but if you go into your body class in your reset.css, and change line-height=1 to line-height=4px; it shifts it upwards. Or even just changing from 1 to 1px; it works.
Let me know if this works.
<div class="pagination">
<?php if($page->hasPrevVisible()): ?>
<span class="prev">
<em>Previous Article</em>
<?php echo $page->prevVisible()->title() ?>
</span>
<?php endif ?>
<?php if($page->hasNextVisible()): ?>
<span class="next">
<em>Next Article</em>
<?php echo $page->nextVisible()->title() ?>
</span>
<?php endif ?>
</div>
This is what stands in my article view, basically. There's the main div, which won't matter for this case and two spans within. When there's no next our previous article, the option doesn't show up. Now to the CSS:
.pagination em {
font-family: Arvo;
font-size: .8em;
font-style: normal;
text-transform: uppercase;
display: block;
color: #838383;
}
.prev {
width: 49%;
display: inline-block;
}
.next {
width: 49%;
text-align: right;
float: right;
}
I've included the .pagination em because it is really important for me to keep that display:block there to drop a line. I can't make .next align with .prev without using float, it goes one line down. So maybe the issue is in the em, but I don't know for sure.
If there is a previous and a next article, it works like a charm. If there is only a previous article it also stands perfectly, however, if there's solely a next article, .next won't align properly.
For a practical example, please take a look at the bottom of this page.
Your problem is that your .pagination class is not clearing with only one floated div in it.
If you simply add overflow: auto; to the .pagination class in your CSS, it should fix the problem.
.pagination {
padding: 1.25em 0px;
font-size: 0.8em;
line-height: 1.2em;
border-bottom: 0.07143em solid rgb(55, 185, 81);
font-family: "Elena Web",Georgia;
overflow: auto;
}
Example: http://cssdesk.com/q2h4U
Hope this helps, and good luck!
float will float the element out of parent's "inner" dimension, which means its size will not be considered when calculating parent's size.
You can use display:inline-block on both sides, and use a dummy span when only one side is present:
http://jsfiddle.net/WR6cy/
<!-- when both sides present -->
<div class="pagination">
<span class="prev">
<em>Previous Article</em>
Previous Title
</span>
<span class="next">
<em>Next Article</em>
Next Title
</span>
</div>
<!-- when only prev side presents -->
<div class="pagination">
<span class="prev">
<em>Previous Article</em>
Previous Title
</span>
</div>
<!-- when only next side presents, use a dummy prev side to "push" the next -->
<div class="pagination">
<span class="prev">
</span>
<span class="next">
<em>Next Article</em>
Next Title
</span>
</div>
.prev {
width: 49%;
display: inline-block;
}
.next {
width: 49%;
text-align: right;
/* float: right;*/
display:inline-block;
}
Edit:
To achieve this with your current PHP, you can slightly modify it to:
<div class="pagination">
<span class="prev">
<?php if($page->hasPrevVisible()): ?>
<em>Previous Article</em>
<?php echo $page->prevVisible()->title() ?>
<?php endif ?>
</span>
<span class="next">
<?php if($page->hasNextVisible()): ?>
<em>Next Article</em>
<?php echo $page->nextVisible()->title() ?>
<?php endif ?>
</span>
</div>