logo
down
shadow

CSS text overlap. Z-Index doesn't works


CSS text overlap. Z-Index doesn't works

By : Andrey
Date : November 21 2020, 04:01 AM
fixed the issue. Will look into that further I have a multi-level menu inside a table with a background image. The problem I have is when new level menu shows overlap the text with each other. I tried to do it with z-index levels but doesn't worked for me. , i added z-index:5 for .second-level-menu
code :
<html>
<head>
</head>
<body>
<style>
.third-level-menu
{
    position: absolute;
    top: 0;
    right: -120px;
    width: 178px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menux2     /* Variation of third level with different position */
{
    position: absolute;
    top: 0;
    right: -140px;
    width: 178px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 40px;
    background: #c39cad;
}

.third-level-menux2 > li
{
    height: 40px;
    background: #c39cad;
}
.third-level-menu > li:hover { background: #8e5e73; }
.third-level-menux2 > li:hover { background: #8e5e73; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 178px;
    list-style: none;
    padding: 3;
    margin: 0;
    display: none;
  z-index:5;
}

.second-level-menu > li
{
    position: relative;
	top: 10px;
    height: 32px;
    background: #c39cad;

}
.second-level-menu > li:hover { background: #8e5e73; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 120px;
    background: #d3b0bc9;
}
.top-level-menu > li:hover { background: #d3b0bc9;  }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
	
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 13px Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-decoration: none;
    padding: 0 0 0 10px;
	
    
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 18px;
}
.top-level-menu a:hover { color: #ffffff; 
    </style>
<body>

<table background="https://i.ibb.co/KNpk9Md/demo.jpg" width="917" border="0">
  <tr>
    <td width="103" height="244" rowspan="7">      
    <td width="117" rowspan="3">    
    <td width="81" rowspan="7">    
    <td width="123" height="21">    
    <td width="75" rowspan="7">    
    <td width="128" rowspan="2">    
    <td width="65" rowspan="7">    
    <td width="128" rowspan="2">    
    <td width="59" rowspan="7">      </tr>
  <tr>
    <td height="32"><ul class="top-level-menu">
     <li>
        <a href="#">PE02 Plan gestión</a>
        <ul class="third-level-menux2">
            <li><a href="#">Procedimiento</a></li>
           
                </ul>
              </li>
         </ul>
     </li>
</ul>    
  </tr>
  <tr>
    <td>        
    <td width="128">5          
    <td width="128">7      
  </tr>
  <tr>
    <td width="117"><ul class="top-level-menu">
     <li>
        <a href="#">OPE01 Plan estratégico</a>
        <ul class="second-level-menu">
            <li><a href="#">Procedimiento</a></li>
                   <li>
                <a href="#">REGISTROS</a>
                <ul class="third-level-menu">
                    <li><a href="#">Seguimiento y Evaluación</a></li>
                   
                </ul>
              </li>
         </ul>
     </li>
</ul>        
    <td height="43"><ul class="top-level-menu">
     <li>
        <a href="#">PE03 Inversiones y nuevos proy.</a>
        <ul class="second-level-menu">
            <li><a href="#">Procedimiento</a></li>
            <li><a href="#">Instrucción Responsable</a></li>
            <li>
                <a href="#">REGISTROS</a>
                <ul class="third-level-menu">
                    <li><a href="#">Metáfora Empresa</a></li>
                    <li><a href="#">Planificación Proyecto</a>			 
                    <li><a href="#">Requisitos Proyecto</a></li>
                </ul>
              </li>
         </ul>
     </li>
</ul>        
    <td width="128">          
    <td width="128">      </tr>
  <tr>
    <td width="117">    
    <td height="21">        
    <td width="128">6          
    <td width="128">8      
  </tr>
  <tr>
    <td width="117">    
    <td height="38"><ul class="top-level-menu">
    <li>
        <a href="#">PE04 Responsab. social</a>
        <ul class="second-level-menu">
            <li><a href="#1">Procedimiento</a></li>
            <li><a href="#">REGISTROS</a></li>
                <ul class="third-level-menu">
                    <li><a href="#">Cumplimiento Comunicaciones GI</a></li>
                    <li><a href="#">Temas y Canales GI</a></li>
                </ul>
          
         </ul>
     </li>
</ul>   
     
    <td width="128">          
    <td width="128">      </tr>
  <tr>
    <td width="117">    
    <td height="23">        
    <td width="128">          
    <td width="128">      </tr>
</table>

</body></html>


Share : facebook icon twitter icon
Index.php works while Index.html doesnt for localhost on WAMP

Index.php works while Index.html doesnt for localhost on WAMP


By : Sergey Novikov
Date : March 29 2020, 07:55 AM
I wish this helpful for you The way to execute PHP on a .html page is to modify your .htaccess file. This file may be hidden, so depending upon your FTP program you may have to modify some settings to see it. Then you just need to add this line for .html:
code :
AddType application/x-httpd-php .html`
AddType application/x-httpd-php .htm`
<Files yourpage.html>
AddType application/x-httpd-php .html
</Files>
z-index overlap works in webkit, not in firefox

z-index overlap works in webkit, not in firefox


By : user2179995
Date : March 29 2020, 07:55 AM
I wish this helpful for you I have a simple Twitter Bootstrap theme that consists of: , Looks like it's the height set on #overlap causing it to shift over.
Index not used when doing join on two text arrays using overlap operator with Postgresql 9.4

Index not used when doing join on two text arrays using overlap operator with Postgresql 9.4


By : himalikiran
Date : March 29 2020, 07:55 AM
around this issue In the end I've solved it by using slightly different function for the index. Original function as defined below is won't be used:
code :
CREATE OR REPLACE FUNCTION array_lowercase(character varying[])
  RETURNS character varying[] AS
$BODY$
    SELECT array_agg(q.tag) FROM (
        SELECT btrim(lower(unnest($1)))::varchar AS tag
    ) AS q;
$BODY$
LANGUAGE sql IMMUTABLE
COST 100;`
CREATE OR REPLACE FUNCTION array_lowercase(text[])
  RETURNS text[] AS
$BODY$
    SELECT array_agg(q.tag) FROM (
        SELECT btrim(lower(unnest($1))) AS tag
    ) AS q;
$BODY$
  LANGUAGE sql IMMUTABLE
  COST 100;
Phaser overlap doesnt work

Phaser overlap doesnt work


By : Rin Minecraft
Date : March 29 2020, 07:55 AM
With these it helps Before giving you a possible solution to your problem:
It is not necessary to apply physics to the element created within the group that already has physics. If you need to know if two bodies overlap but you do not need to emulate a complete collision use 'overlap'.
code :
var obs;

function create(){
  //Active Physics ARCADE
  game.physics.startSystem(Phaser.Physics.ARCADE);
  ...//other sprite
  obs = game.add.group();
  obs.enableBody = true;
  obs.physicsBodyType = Phaser.Physics.ARCADE;

  var obstacle = obs.create(800, game.world.height - 68, 'obstacle');
  obstacle.scale.setTo(0.5,0.5);
  obstacle.events.onOutOfBounds.add(function(obstacle) {
    obstacle.kill(); 
  }, this);
}

function update(){
  ...
  //Use the group, since the callback will automatically pass the group element that overlaps with the player. A group is used to handle multiple elements, otherwise use only one variable :)
  game.physics.arcade.overlap(character, obs, gameOver, null, this);
  /*If you want your obstacle to move in the game you must implement this in the Update function
    You can access an element of the group, for this there are multiple methods one of them is to get the element from the element's exists attribute

    var obstacle = obs.getFirstExists(true);
    if (obstacle) { obstacle.body.velocity.x = -300; }
  */ 
}

function gameOver(character, obstacle) {
  //From here you have access to the element that collides with the player (you can evaluate with a condition if it is the obstacle you want)
  //if (obstacle.name == 'x') { console.log(obstacle); }
  console.log('Game Over!');
}

function generateObs(){
  var obstacle = obs.create(800, game.world.height - 68, 'obstacle');
  obstacle.scale.setTo(0.5,0.5);
  obstacle.body.velocity.x = -300;
}
QuerySelector doesnt show what i typed it to do + why doesnt onClick work with a index.html and app.js file?

QuerySelector doesnt show what i typed it to do + why doesnt onClick work with a index.html and app.js file?


By : Shreyans
Date : March 29 2020, 07:55 AM
this will help The problem is that you are created a nested function and it will not be called. You need to create a function with global scope and change it inside window.onload
code :
var klik; //declaring a global variable.
window.onload = function(){
  const navn = document.querySelector('.navn > input');
  const password = document.querySelector('.password > input');

   //changing it to the function
  klik = function() {
      console.log(navn);
      console.log(password);
  }
}
<center>
            <p class="navn1">LOG IND</p>
        </center>

        <div class="navn">
            <span id="navn">Navn: &nbsp;</span> <input type="text" 
             class="inavn"><br><br>
        </div>

        <center>
            <div class="password">
                <span id="pass">Password: &nbsp;</span> <input 
                type="text"><br>
            </div>

            <br><br>

            <button onClick="klik()" class="logind">Log ind</button>
            <br>

            <h1></h1>
        <center>
Related Posts Related Posts :
  • Select parent of empty elements using Sass or CSS
  • HTML Move elements after element deleted
  • Is an aria-label needed for basic (all) link tags?
  • How to specifically style th and td only for one table class?
  • How do I make this website fit all screen sizes?
  • Contact form not sending?
  • How to expand a DIV vertically without affecting other DIVs around?
  • fixed div sits on top of another div
  • Is it possible to change the side a div is set to float to after it resizes?
  • Forbid parent div width dynamic height from expanding to fit child content
  • Add label to image link
  • HTML Display info in a select option from an array?
  • jQuery expand/hide with cookie
  • How to conditionally apply css to differently nested content
  • Bootstrap align icon to leftside of button
  • Click on Hyperlink for TD Object
  • patternlab twig drupal8 bootstrap
  • get value from json object in html
  • Sending input value with formArray values?
  • Are people making a mistake when they say that static files are .html, .js etc?
  • Flex column: How to display 2 item on the same line
  • Golang to create a main layout webpage
  • Show div even if empty
  • Table width not updated when I hide native scroller of div
  • why is there this extra section in my code?
  • How to post data received from the server onto the client website
  • Resize dynamically div by text size
  • How to Generate TOC page numbers with CSS in pdf
  • Smoothly removing animation from div
  • How can I pass a URL with query parameters to another URL as a query param?
  • Retrieve tags from an HTML page to import them into another HTML file
  • How to set width of drop-down button by customizing bootstrap?
  • Bootstrap 4 Card Flex Width is not working correctly on Firefox
  • Bootstrap 3 Vs Bootstrap 4
  • CSS: How to position image across two columns, with wrap text? (img included for reference)
  • Change Color and background of the after content while hover
  • CSS fade children when hovering over parent div, then change again when hovering over child
  • Using table cell on dd
  • How to change <a href> color / remove formatting
  • Why do the colours of my document not change when the button is clicked?
  • How to allow for users to keyboard tab over and select invisible checkboxes with visible labels?
  • Overflow clipped, rest of the content visible
  • How to set height of "number-parent" class div equal to "active-lg" class div without JS
  • How do I make a menu scroll with the page only within a section?
  • Extra space on sides of images in outlook when creating HTML email
  • how to space div with content inside in html
  • Confusion when combining flex and absolute positioning
  • I can't remove spacing between letters. Even with 0px letter spacing it still has too much space
  • Using :visited on links doesn't work properly
  • nav article and aside widths sum is 100% but the aside goes to new line
  • Add flag image to select option
  • Content Scrolling / Overflowing Horizontally
  • Content of fieldset is moving out of legend container
  • How to change style of an HTML tag *inside* an Angular component?
  • Is rel="prerender" deprecated in Google Chrome?
  • How to align an image to the bottom of the div using flex?
  • Mat-checkbox [checked]="false" does not work angular 6
  • Laravel + Ajax, proper way to present data to html
  • VueJs CLI import/compile html string to vue
  • Import collection using button importing same collection multiple times - Postman
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org