Jump to content

css inheritance


KaiAdrian
 Share

Recommended Posts

HI!

I d like to make Meni2_vsebina to be child of Meni2 (but both independent from Meni and Meni_vsebina)

as far as I change position of Meni everything change it. Here is the code:

 

<style>
.Meni > Meni_vsebina{
  display: inline-block;
  position:fixed;
  top:-2px; left:100px;

}
.Meni_vsebina{
  display:block;
  position:relative;

}
.Meni2 > Meni2_vsebina{
  display:block;
  position: relative;
  top:-100px; left:100px;
}
.Meni2_vsebina{
  position:absolute;
  left: 100px;
  display:inline-flex;
}
</style>
<body>
 <div class="Meni">
  <span><i>Meni</i>
  </span>
<div class="Meni_vsebina">
<a href="test1.html">Test1</a><br>
<a href="test2.html">Test2</a><br>
<a href="test3.html">Test3</a><br>
<a href="test4.html">Test4</a><br>
</div>

 

Edited by KaiAdrian
correction
Link to comment
Share on other sites

sorry... read this code please:

 

<style>
.Meni {
  display: inline-block;
  position:fixed;
  top:-2px; left:100px;

}
.Meni_vsebina{
  display:block;
  position:relative;
/*here i wanna stop relashionship */
}
.Meni2{
  display:inline-block;
  position: relative;
  top:-89px; left:100px;
}
.Meni2_vsebina{
  position:absolute;
  left: 100px;
  display:none;
}

</style>



<body>
 <div class="Meni">
  <span><i>Meni</i>
  </span>
<div class="Meni_vsebina">
<a href="test1.html">Test1</a><br>
<a href="test2.html">Test2</a><br>
<a href="test3.html">Test3</a><br>
<a href="test4.html">Test4</a><br>
</div>

<div class="Meni2"
 <span>Meni2
 </span>
<div class="Meni2-vsebina">
<a href="test5.html">Test5</a><br>
<a href="test6.html">Test6</a><br>
<a href="test7.html">Test7</a><br>
<a href="test8.html">Test8</a><br>
</div>

 

Link to comment
Share on other sites

I see the issue.

You haven't closed off all your divs in your HTML. In your HTML, you've described Meni2 as a child of Meni. The browser fills in the gaps. See "Implied </div>" in code block below.

You're going to need to place some closing div tags. Do you know where they would go?

<body>
 <div class="Meni">
  <span><i>Meni</i></span>
  <div class="Meni_vsebina">
    <a href="test1.html">Test1</a><br>
    <a href="test2.html">Test2</a><br>
    <a href="test3.html">Test3</a><br>
    <a href="test4.html">Test4</a><br>
  </div> <!-- End of Meni_vsebina -->
  <div class="Meni2">
    <span>Meni2</span>
    <div class="Meni2-vsebina">
      <a href="test5.html">Test5</a><br>
      <a href="test6.html">Test6</a><br>
      <a href="test7.html">Test7</a><br>
      <a href="test8.html">Test8</a><br>
    </div> <!--End of Meni2-vsebina-->
    <!-- Implied </div> of Meni2 -->
    <!-- Implied </div> of Meni -->

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...