Jump to content

css inheritance


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...