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.
Related
I created a div which contains divs. These divs within the div are images and a bit of text. I want the main div to be scrollable horizontally. The divs within are aligned using inline-block.
When I use
overflow-x: scroll;
The div gets 2 scroll bars, but only the vertical one works.
When I put in more divs than the width of the main div, these divs get placed in the row below. I want these to be placed next to the other divs, and when they go offpage, you can scroll to get to them.
What can I do to do this?
Div code (I use a database to input the divs, and this works):
echo '<div id="indiv">';
foreach ($result as $pers) {
$time = date('H:i', strtotime( $pers->tijd ) );
echo "<div id='imgnaam'>";
echo "<img id='bigimageind' src=".$pers->img.">";
echo "<hr>";
echo "<p id='imgnaam2'>".$time."</p>";
echo "</div>";
}
echo '</div>';
And the CSS:
#imgnaam2 {
height: 50px;
width: 200px;
text-align: center;
margin: 0;
font-size: 20px;
background-color: rgba(155, 82, 197, 0.425);
}
#bigimage {
height: relative;
width: 20%;
display: inline-block;
}
#indiv {
background-color: rgba(128, 0, 128, 0.432);
border: 35px solid rgba(255, 255, 255, 0.459);
overflow-x: scroll;
}
Try this:
#indiv{
width: max-content !important;
}
or this:
#indiv{
width: 100%;
display: flex;
flex-flow: row;
flex-wrap: nowrap;
overflow: scroll;
}
Use overflow
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
Example
I'm looking at building a dynamic navigation something that looks similar to that in w3schools (I don't have enough points to be able to embed images yet so stuck with links only for now):
These will be based off the following PHP table:
enter image description here
Where parent_id and child_id are 0 I want those pages to be the main navigation selections, so in this case I'm looking to have DMX, VMAX, VMAX3, VMAX AF and PowerMax to show on the navigation bar.
After that the idea is to list the models of each product, however this is only to appear when the user is hovering over one of the main selections, the parent_id is to equal the id of the page.
Finally when you hover over the result of the parent_id you will get the child_id, this will be decided by the child_id equaling the parent_id.
The functions I'm calling in my code is:
function loop_array($array = array(), $parent_id = 0){
if(!empty($array[$parent_id])){
echo '<ul>';
foreach($array[$parent_id] as $items){
echo '<li>';
?>
<?php echo $items["title"] ?>
<?php loop_array($array, $items['id']);echo '<br><br><br><br>';
}
echo '</ul>';
}
}
function display_menus(){
$con = mysqli_connect("localhost", "root", "", "solvedesktop");
$query = $con->query("SELECT * FROM pages WHERE published = 1");
$array = array();
if(mysqli_num_rows($query)){
while($rows = mysqli_fetch_array($query)){
$array[$rows['parent_id']][] = $rows;
}
loop_array($array);
}
}
The code I'm using on the home page is:
<?php require_once(__DIR__."/../includes/functions.php"); ?>
<?php require_once(__DIR__."/../includes/config.php"); ?>
<?php require_once(__DIR__."/../includes/header.php"); ?>
<?php $page = getPage($_GET["id"]); ?>
<h2 style="text-align:center;">PSE Solve Desktop</h2>
<?php display_menus(); ?>
</div>
<div>
<?php echo returnPageError(); ?>
</div>
<h2> <?php echo $page['title']; ?> </h2>
<br>
<p> <?php echo $page['body']; ?></p>
<script>
CKEDITOR.replace( 'body' );
</script>
The CSS I currently have is:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00008B;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #000000;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
So basically I can't get further than the below image when trying to build the navigation bar:
enter image description here
I can get the main sections such as DMX, VMAX, VMAX3, VMAX AF and PowerMax to populate correctly. However it's not showing in one horizontal line and the parent_ids show only appear if the user hovers over the main section.
Any help would be gratefully appreciated :)
Here the problem is with CSS just add some max-width to menu items.
by this solved or not let me know.
I was really unsure how to phrase this problem as it's something I've never encountered before.
My wordpress logo image which is set as a background using css is really buggy when hovering over it. Sometimes I can click it and sometimes I can't. Is this becuase I set the image in css and used text-indent to remove the standard text or is it something else?
Here's the live link. Try hovering over the logo to see excactly what I'm talking about.
I'm using a custom function in my functions.php to print out the logo and menu as seen here:
/**
* Prints out an ir-anchor with the site-title.
*
*/
function sircon_logo($echo = true) {
$htmlLogo = '';
if (get_bloginfo('name')) {
$htmlLogo = '<a';
$htmlLogo .= ' id="site-title"';
$htmlLogo .= ' class="ir"';
$htmlLogo .= ' href="' . get_bloginfo('url') . '"';
$htmlLogo .= ' rel="home">';
$htmlLogo .= get_bloginfo('name');
$htmlLogo .= '</a>';
}
if($echo) echo $htmlLogo;
else return $htmlLogo;
}
I call it in my header.php using this:
<?php sircon_logo(); ?>
And this is my styles:
/* image replace */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/* logo */
#site-title {
position: absolute;
display: block;
top: 25px; left: 15px;
width: 157px; height: 64px;
background-repeat: none;
background-image: url('style/logo.png');
}
#site-title h1 {
margin: 0;
}
#site-slogan {
display: none;
}
#media (min-width: 500px) {
#site-slogan {
display: none;
width: 320px;
margin: 0 auto;
color: #fff;
font-size: 26px;
font-style: italic;
line-height: 1.1;
letter-spacing: -1px;
text-align: center;
padding: 14px 0 0 30px;
}
}
#media (min-width: 760px) {
#site-slogan {
display: none;
width: auto;
padding: 0;
margin: 0;
position: absolute;
top: 10px; right: 10px;
}
}
The Reason is the nav bar is overlapping the logo. So Apply z-index to the logo
#site-title {
z-index:300;
}
Set a z-index for your logo:
#site-title {
z-index: 500;
}
For further information check out this
Here are 2 solutions for your issue
Solution 1
#site-title {
z-index: 500;
}
Solution 2
#main-menu {
left: 220px;
right: 0;
width: auto;
}
Hope this helps you :)
I have a simple program that echoes images out to a page from a database. I want to have a child element, just a simple slightly transparent box shown on top of the images.
I know child elements always has a higher z-index than it's parent but the image always covers over the box I want on top. When the page is loading I can see the box in the position I want but then when the images load and the box it disappears.
Here is a jsFiddle: http://jsfiddle.net/EBvCZ/
PHP
echo '<div id="wrapper">';
while ($data = mysql_fetch_array($query_run)) {
echo '<div id="picback"><div id="centerpic"><'.'img src="resizeimage.php?photo_id='.$data['photo_id'].'">';
echo '<br style="clear:both;" />';
echo '<div id="titlepic">This is an image</div>';
echo '</div></div>';
}
echo '</div>
CSS
#wrapper {
overflow:auto;
width:1000px;
height:1000px;
margin: 20px auto;
}
#titlepic {
background-color:rgba(0, 0, 0, 0.5);
top:100px;
width:200px;
height:35px;
position:relative;
}
#centerpic {
position:relative;
margin:auto;
width: 200px;
height: 150px;
top:18.75px;
overflow:hidden;
}
#picback {
position:relative;
margin:10px 23px;
top:75px;
float:left;
width:250px;
height:187.5px;
overflow:hidden;
}
#picback:hover {
background-color:rgb(190,190,190);
-webkit-border-radius:0.4em;
-webkit-transition: background-color 0.5s;
}
Here is a working js fiddle:
http://jsfiddle.net/XKHZv/3/
I did some .css changes and also moved one div before the titlepic.
Here is your new .css:
#wrapper {
overflow:auto;
width:1000px;
height:1000px;
margin: 20px auto;
}
#titlepic {
margin-left:auto;
margin-right:auto;
background-color:rgba(0, 0, 0, 0.5);
width:200px;
height:35px;
position:relative;
clear: both;
}
#centerpic {
position:relative;
margin:auto;
width: 200px;
height: 150px;
top:18.75px;
overflow:hidden;
}
#picback {
position:relative;
margin:10px 23px;
top:75px;
float:left;
width:250px;
height: 203.75px;
overflow:hidden;
}
#picback:hover {
background-color:rgb(190, 190, 190);
-webkit-border-radius:0.4em;
-webkit-transition: background-color 0.5s;
}
Then you also have to move a div closing to before the title pic.
I have the code below in a site but can't get to center everything within the main div (rightBarItems):
<div class="rightBarItems">
<?php
echo "<div class='similarTitle'>YOU MAY ALSO LIKE</div>";
while ($row3 = $result3->fetch())
{
echo "<div class='similarItems'>";
echo "<a href='items_descr.php?itemId=".$row3[id_item]."'><img class='similarImage' src='images/{$row3[thumb1]}.jpg'></img>";
echo "<div class='similarItemsText'>".$row3[name]."</div></div>";
}
?>
Then, here is my css:
.similarTitle {
font-family:"Century Gothic","Trebuchet MS",Helvetica,Arial,sans-serif;
font-size:15px;
text-transform:uppercase;
color:#3E3E3E;
}
.rightBarItems
{
margin: 0 auto;
width: 168px;
background: #F3EFE2;
padding: 10px;
float: right;
text-align: center;
height: 300px;
}
.similarItems {
float: left;
text-align:center;
margin: 0 auto;
padding: 5px;
}
.similarItemsText {
padding-right: 11px;
margin: 0 auto;
font-family: verdana,Helvetica,Arial,sans-serif;
font-size: 11px;
color: #666;
}
#similarImage {
margin: 0 auto;
border: 1px solid gray;
float: left;
}
Not everything gets centered... Any help? Thanks!!
* Adding some extra CSS I had forgot to put
Use:
text-align:center;
For all of these CSS classes: rightBarItems, similarTitle, similarItemsText, similarImage.
Try This in CSS
.rightBarItems{ text-align:center ; }
or
.rightBarItems > div { margin-left:auto ; margin-right:auto; }
Remove the float:right style from the rightBarItems div.
Well, firstly, you have different padding values for each class so that will first prevent them from aligning.
If you are ok with leaving a paragraph space between the texts then align=center should work with the paragraph tag instead of fixing the whole CSS code.
<p align="center"> Centered Text </p>