Jump to content
KaiAdrian

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

Share this post


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>

 

Share this post


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 -->

 

Share this post


Link to post
Share on other sites

Worked...Thanx!

 

However, there is also an error in syntax in above code, i discovered later:

 

in part:

<div class=Meni2-vsebina> /*should be called Meni2_Vsebina*/

 

Share this post


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...