I have an Adsense ad on top of a couple of images. These images have links and depending on the page query string, it'll display a previous image or not. When having this ad on top of these images, it removes the links on these images. In fact, when you right click you can't even get to those images. It'll say "view frame source" which is referring to the Adsense ad. When removing this ad, the images work correctly and the links work as well. How do I make it so that the images are clickable even with the ad on top of the images?
HTML/PHP
echo "<div class='bodyAd'>
<script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
<ins class='adsbygoogle'
style='display:block'
data-ad-client= $pub_id
data-ad-slot= $ad_slot2
data-ad-format='auto'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>";
echo "<div class='btns'>";
if ($num == $maxNum)
{
echo "<div id='prevBtn'><img class='prevBtn' src='/media/assets/prevBtn.png' style='display: none'/></div>";
}
else
{
$prevNum = $num + 1;
echo "<div id='prevBtn'><a href='$prevNum'><img class='prevBtn' src='/media/assets/prevBtn.png'/></a></div>";
}
if ($num == $minNum)
{
echo "<div id='nextBtn'><a href='/stories/$nextArticle'><img class='nextBtn' src='/media/assets/nextBtn.png'></a></div>";
}
else
{
$nextNum = $num - 1;
echo "<div id='nextBtn'><a href='$nextNum'><img class='nextBtn' src='/media/assets/nextBtn.png'></a></div>";
}
echo "</div>";
CSS
.btns{
display: block;
overflow: hidden;
width: 100%;
margin-top: 50px;
}
.nextBtn{
width: 35%;
margin-top: 20px;
margin-bottom: 25px;
float: right;
}
.prevBtn{
width: 35%;
margin-top: 20px;
margin-bottom: 25px;
float: left;
}
Related
As you can see in the picture, there is a box to the right with some text and a lot of white space.
My goal is to have the text under the pictures while I have 3 pictures in a row that are nicely aligned.
When I try this either the pictures aren't aligned anymore or the pictures aren't cropped anymore.
I wanted every picture with the same size and still sharp but, then this issue came up.
#content {
width: 100%;
max-width: 100%;
margin: 20px auto;
}
form {
width: 50%;
margin: 20px auto;
}
form div {
margin-top: 5px;
}
#img_div {
width: 30%;
margin-left: 2%;
margin-right: 1%;
margin-bottom: 3%;
border: 2px solid #d8680c;
float: left;
}
#img_div:after {
content: "";
display: block;
clear: both;
}
img {
float: left;
object-fit: cover;
width: 250px;
height: 250px;
}
#pictext {
word-wrap: break-word;
}
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p id='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
</div>
use class instead of using ID
ID must be unique and when you do the loop there will be some other divs with same ID
add it like this
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div class='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p class='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
make sure to reflect them via JS or JQuery depends on what your are using
Here is my problem i want to use scrollbar but it is only showing scrollbar but that scrollbar is not working. I am using CSS to style the scrollbar and other layouts and Html to use that styling.
here is my Styling Code
#sub_menu, #content{
display: inline-block;
}
#sub_menu{
width:23%;
height: 10%;
background-color: #999999;
padding: 1%;
vertical-align: top;
border: 1px solid;
}
#content{
width: 73%;
margin-right: 1%;
}
#media screen and (max-width: 600px), sreen\0{
#sub_menu{
height: initial;
font-size: 15px;
margin-bottom: 2%;
}
#content, #sub_menu{
display: block;
width: 95%
} }
.contentt {
height: 100%;
overflow-y: scroll;
margin-bottom: 1%;
}
.contentt::-webkit-scrollbar {
display: none;
}
And Here is my HTML CODE
<div id="sub_menu">
<h3 style="border-bottom: 3px solid rgb(135, 31, 139);">Related Videos</h3>
<div class="contentt" style="width:100%;height:40%; margin-bottom:3%;padding:2%" >
<?php
$con = new mysqli('localhost','','','');
$sql = "SELECT ID, Title, Link FROM that where Category like 'this'";
$result = $con->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$url = $row["Link"];
$title = $row["Title"];
$id = $row["ID"];
$path="http://domain/Song.php";
echo "<h5>$title'</h5>";
echo '<img src="http://domain/images/' . $id .'.jpg" alt="HTML tutorial" style="width:75%;height:95%;border:0;"class="btnn songpicc">';
echo '<hr>';
}
} else {
echo "0 results";
}
$con->close();
?>
</div>
</div>
Thanks in Advance
You need to fix the height of the container (not in %, but in px or em for example) with overflow-y: scroll;
your scrollbar is not working or it is hidden ?
remove below css and it should work for you
.contentt::-webkit-scrollbar {
display: none;
}
and instead
.contentt {
overflow-y: scroll;
}
just apply below code and check
.contentt {
height: 400px;
overflow-y: auto;
}
Just remove below code of css
.contentt::-webkit-scrollbar {
display: none;
}
Add below code of css
.contentt {
overflow-y:auto;
height:/* give here height in px as you need */
}
if you use webkit-scrollbar it will hide the scroll bar in chrome. But Firefox still alive with default scrollbar.
I am trying to create a page where the header is centered 70% of the window and a body 85% of the window. The header goes on top of the body, but I can't seem to accomplish this. When I add relative positioning to my #body div; the div seems to be positioned relative to the window (body) of the page instead of the header. How do I make it so the #body div is positioned relatively below the #header div so the body is going in the flow of the page? (I want all the elements inside #header to stay exactly where I positioned them).
HTML/PHP
<?php
$resultSet = $db->query("SELECT * FROM table");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$title = $rows["title"];
if ($id <= 3)
{
//Front page Div that contains all the header elements
echo "<div id=header>";
if ($id == 1)
{
//The front page div that contains the large image and the title
echo "<div id=largeDiv>";
echo "<img src=$images>";
//Div inside of largeImg div, that creates semi-transparent block for title
echo "<div id=largeTitle>";
//Main title of header
echo "<h2>$title</h2>";
echo "</div>"; //End of largeTitle div
echo "</div>"; //End of largeDiv
}
//Secondary div inside of #header that goes on the right side of #largeDiv
echo "<div id=smallDiv>";
if ($id == 2)
{
//Left image
echo "<img id=leftImg src=$images>";
}
if ($id == 3)
{
$text = $rows["text"];
//Right image
echo "<img id=rightImg src=$images>";
//Secondary div's title
echo "<h2>$title</h2>";
//Secondary div's text
echo "<p>$text</p>";
}
echo "</div>"; //End of smallDiv
echo "</div>"; //End of header
}
else
{
echo "<div id=body>";
if ($id <= 13)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "</div>";
}
echo "</div>";
}
}
}
?>
CSS
/*BODY OF ENTIRE PAGE*/
body{
position: relative;
}
/*HEADER OF PAGE. CONTAINS ALL HEADER ELEMENTS*/
#header{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
/*MAIN DIV OF HEADER*/
#largeDiv{
position: absolute;
width: 65%;
}
/*IMAGE OF THE MAIN DIV OF HEADER*/
#largeDiv img{
width: 100%;
}
/*THE DIV INSIDE OF #LARGEDIV THAT IS A SEMI-TRANSPARENT BLOCK*/
#largeTitle{
position: absolute;
width: 100%;
height: 25%;
bottom: 1.5%;
background-color: rgba(0, 0, 100, 0.4);
}
/*THE H2 TAG FOR THE MAIN TITLE OF THE HEADER, THIS IS INSIDE #LARGETITLE*/
#largeTitle h2{
color: white;
text-align: center;
font-family: sans-serif;
font-size: 22px;
}
/*SECONDARY DIV OF HEADER, NEXT TO THE #LARGEDIV*/
#smallDiv{
position: absolute;
right: 0%;
top: 0%;
width: 32%;
height: auto;
}
/*LEFT SMALL IMAGE OF HEADER*/
#leftImg{
width: 45%;
float: left;
}
/*RIGHT SMALL IMAGE OF HEADER*/
#rightImg {
width: 45%;
float: right;
}
/*THE TITLE OF THE SECONDARY DIV OF HEADER*/
#smallDiv h2{
clear: both;
font-size: 24px;
margin-top: 48%;
color: cornflowerblue;
font-family: sans-serif;
}
/*THE TEXT OF THE SECONDARY DIV OF HEADER*/
#smallDiv p{
font-size: 100%;
font-family: sans-serif;
margin-top: -5%;
}
#body{
position: relative;
width: 85%;
}
#left{
width: 28.33%;
}
#left img{
display: block;
width: 100%;
}
Sample dataset:
<div id=header><div id=largeDiv><img `src=http://i2.cdn.turner.com/cnnnext/dam/assets/150429103538-bernie-sanders-gallery-photo-5-super-169.jpg><div id=largeTitle><h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Val hala mo sema serum.</h2></div></div><div id=smallDiv></div></div><div id=header><div id=smallDiv><img id=leftImg src=http://a4.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE4MDAzNDEwMDU4NTc3NDIy.jpg></div></div><div id=header><div id=smallDiv><img id=rightImg` src=https://pbs.twimg.com/profile_images/602821590582038528/oobPhTxZ_400x400.png><h2>Prima disputando per ne, mea amet</h2><p>Ut usu soleat torquatos, vix iudico singulis constituto ut. In vim consul assueverit, ius no veniam voluptatum. Veritus vivendum</p></div></div><div id=body><div id=left><img src=http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg></div></div><div id=body><div id=left><img src=http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg></div></div><div id=body><div id=left><img src=http://newflowerwallpaper.com/download/flower-images-to-color-and-wallpapers/flower-images-to-color-and-wallpapers-16.jpg></div></div><div id=body><div id=left><img src=http://eskipaper.com/images/images-4.jpg></div></div>
body is a page construct and can't be repositioned, so the position style has no acutal effect.
What would be better is if your header content #header was inside another element such as a HTML5 style header, and perhaps #body inside a main container.
So, for example;
<body>
<header>
<div id="header">
Header Content Here
</div>
</header>
<main>
<div id="body">
<div id="left">
Left Content
</div>
</div>
</main>
</body>
CSS
header {
width: 100%;
}
#header{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
main {
width: 100%;
}
#body {
position: relative;
width: 85%;
margin: 0 auto;
}
#left {
width: 28.33%;
}
The above is an incomplete solution, but it's an example of how you look to structure your page.
An altnernative is to have a container (like #container) around all the content with the max width of the inner content.
I have a main Div which is the "master" of all divs. This div's width is 70% of the page. Inside this div, is another div that contains an image. This div is called mainImg. It is set to absolute positioning and all the rest of the elements are set to absolute as well. All these elements move absolutely relative to the main div.
Here's my code:
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
if ($id <= 3)
{
$images = $rows["image"];
$title = $rows["title"];
echo "<div id=main>";
if ($id == 1)
{
echo "<div id=mainImg>";
echo "<img src=$images>";
echo "<div id=mainTitle>";
echo "<h2>$title</h2>";
echo "</div>";
echo "</div>";
}
echo "</div>";
}
}
}?>
CSS
body{
position: relative;
}
#main{
position: relative;
width: 70%;
height: auto;
margin: 1.5% auto;
}
#mainImg{
position: absolute;
width: 65%;
}
#mainImg img{
width: 100%;
}
#mainTitle{
position: absolute;
width: 100%;
height: 25%;
bottom: 0%;
background-color: rgba(100, 0, 0, 0.7);
}
#mainTitle h2{
color: white;
text-align: center;
font-family: sans-serif;
font-size: 120%;
}
My problem that I am facing is that the div inside of mainImg (mainTitle), is not properly rigged inside the image. The div is a semi-transparent block that should fit perfectly on the bottom of the image with 25% height. Instead, the block is coming out of the image a bit. The other problem that I am facing is my text inside this mainTitle div. The text is centered, but not aligned in the middle of the div. I am trying to make the text responsive, with percentages, but whenever I resize the text always goes below the div. How do I fix these three problems? (Rigging the div properly, aligning the text, and keeping the text inside the div at all times for other window sizes?
The semi-transparent div is coming off the edge of the image
When browser is resized, this is what happens to the text
<?php
$res = $db->query("SELECT * FROM Articles");
if( $res->num_rows > 0 ) {
echo "<div id='main'>";/* Open main div outside the loop */
while( $rows = $res->fetch_object() ) {
$id = $rows->id;
if ( $id <= 3 ) {
$image = $rows->image;
$title = $rows->title;
if ( $id == 1 ) {
echo "
<div id='mainImg'>
<img src='$image'>
<div id='mainTitle'>
<h2>$title</h2>
</div>
</div>";
}
}
}
echo '</div>';/* close main div */
}
?>
So, I've been trying for some time now to figure out how to position a footer correctly. I was browsing some already-asked questions here on SO and I found some ideas which I implemented but that didn't make my footer to work.
Here is the basic explanation. I have bellow written code for my footer. The problem is that the footer "fly" in page if post is not long. I'm coding (better say rewritting) a simple CMS from C to PHP and I'm not into CSS or design overall.
Here is the code:
#footer {
position: static;
background: #346 repeat scroll 0 0;
border-top:3px solid #CCCCCC;
clear: both;
color:#FFFFFF;
font-size:x-small;
line-height:100%;
margin: 2em 0 0;
width: 100%;
text-align: center;
padding:3px 10px 10px;
bottom: 0;
}
Single post view (bad, you see white space left bellow the footer):
(source: easycaptures.com)
Few posts that filled whole page (good, footer bellow pagination):
(source: easycaptures.com)
On the other side when I have position set to fixed I have this overflow:
(source: easycaptures.com)
How do I make my code works fine like in picture where it says (good)?
EDIT: For those who say to change position, I've already tried all positions property (static, absolute, fixed, relative, inherit).
Here is my container code:
#contener {
margin: 0 auto;
text-align: left;
width: 100%;
}
Other:
body, html, #menu, img, a img, form, fieldset {
margin:0;
padding:0;
font-size: 12px;
}
When I set position to "absolute" I got this picture.
Here is my full code of pagination + footer:
<?php
$currentPage = 1;
if(isset($_GET['page'])){
$currentPage = protect_sqli($_GET['page']);
}
$e = $currentPage * $num_psts; // end post
$p = $e - $num_psts+1; // start post
$i = 0;
// Create a connection
$conS = mysqli_connect($hName, $dbUser) or die(mysql_error());
// Select a specific database
mysqli_select_db($conS, $dbName) or die(mysql_error());
// Query creating
$result = mysqli_query($conS, "SELECT * FROM posts ORDER BY dat DESC, tim DESC");
while($row = mysqli_fetch_array($result))
{
$i++;
if($i >= $p && $i <= $e)
{
$postId = protect_sqli($row['slug']);
readfile('p/' . $postId . '.php');
}
}
?>
<center>
<p>
<?php
$result = mysqli_query($conS, "SELECT id FROM posts");
$nPosts = mysqli_num_rows($result); // number of posts
mysqli_close($conS);
echo "Pages: ";
$pages = $nPosts/$num_psts; // number of pages
for($i = 1; $i < $pages+1; $i++)
{
if($i == $currentPage)
{
echo "<strong>".$i."</strong> ";
}
else
{
echo "". $i ." ";
}
}
?>
</p>
</center>
<div id="footer">
<?php readfile(__DIR__ . "/mvc/fe/footer.php"); ?>
</div>
</div>
footer.php:
Made by dn5 | <font color="#e1c1aa">cblogphp</font>
Do you mean a sticky footer which is always on the bottom of your site?
The CSS goes like this:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
I think what you are looking for is a Sticky Footer. Ryan Faits has some clear instructions here
Try changing the position to absolute:
#footer {
position: absolute;
background: #346 repeat scroll 0 0;
border-top:3px solid #CCCCCC;
clear: both;
color:#FFFFFF;
font-size:x-small;
line-height:100%;
margin: 2em 0 0;
width: 100%;
text-align: center;
padding:3px 10px 10px;
bottom: 0;
}
Demo: http://jsfiddle.net/JE5fn/1/
From CSS tricks: http://css-tricks.com/snippets/css/sticky-footer/
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}