मुख्य सामग्री

Question

के साथ शीर्ष नौसेना ओवरलैप मैं अपने लैंडिंग पृष्ठ को बूटस्ट्रैप से सेमेन्टिक-यूआई में परिवर्तित कर रहा हूं। पृष्ठ में शीर्ष शीर्ष नौसेना तय की गई है। मुख्य सामग्री दो स्तंभों में विभाजित है (3-कोल्स और 9-कोल्स)। बाएं कॉलम का उपयोग साइडबार दिखाने के लिए किया जाता है और वर्तमान सामग्री के लिए दायां कॉलम का उपयोग किया जाता है।

मैंने सेमेन्टिक-यूआई के डेमो पेज को कॉपी और पेस्ट करने का प्रयास किया। Navbar 45px उच्च है। मैंने देखा कि मुख्य सामग्री का पहला 45 पीएक्स ओवरलैप किया गया है।

<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> 
 
<script src="//semantic-ui.com/dist/semantic.min.js"></script> 
 

 
<div id="navbar" class="ui fixed inverted main menu"> 
 
    <div class="container"> 
 
    <div class="title item"> 
 
     <b>Dashboard</b> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="maincontent" class="ui bottom attached segment pushable"> 
 
    
 
    <div id="sidebar" class="ui visible left vertical sidebar menu"> 
 
    <a class="item">First Item</a> 
 
    <a class="item">Second Item</a> 
 
    <a class="item">Third Item</a> 
 
    <a class="item">Fourth Item</a> 
 
    <a class="item">Fifth Item</a> 
 
    </div> 
 
    
 
    <div id="content" class="pusher"> 
 
    <div class="ui basic segment"> 
 
     <h3 class="ui header">Application Content</h3> 
 
     <p>First paragraph...</p> 
 
     <p>Second paragraph...</p> 
 
     <p>Third paragraph...</p> 
 
    </div> 
 
    </div> 
 

 
</div>

मेरे वर्तमान workaround नेवबार के बाद एक 45px उच्च प्लेसहोल्डर जोड़ना है।

<div style="height:45px"></div> 

मुझे पूरा यकीन है कि कुछ अच्छे सीएसएस शैली के नाम सामग्री ओवरलैपिंग को ठीक कर सकते हैं।

Answer 1

समाधान बहुत सरल है:

Answer 2

आपकी navbar में fixed कक्षा है। इस वर्ग को तत्व से हटाएं और आपका मेनू किसी पृष्ठ पर ठीक नहीं किया जाएगा, इसलिए यह मुख्य सामग्री को ओवरलैप नहीं करेगा।

http://jsfiddle.net/abszsLno/

Answer 3

क्या तुम कर सकते हो सामग्री div पर एक ऊंचाई सेट कर दिया जाता है और फिर अतिप्रवाह सेट: स्क्रॉल। इस तरह से कोई भी लंबी सामग्री div में स्क्रॉल करेगी और यह पृष्ठ को और एनएवी बार के नीचे नहीं ले जाएगी।

<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> 
 
<script src="//semantic-ui.com/dist/semantic.min.js"></script> 
 

 
<div id="navbar" class="ui fixed inverted main menu"> 
 
<div class="container"> 
 
    <div class="title item"> 
 
     <b>Dashboard</b> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="ui grid"> 
 
    <div class="row"> 
 
     <div class="column"> 
 
      <div id="maincontent" class="ui bottom attached segment pushable"> 
 
        <div id="sidebar" class="ui visible left vertical sidebar menu"> 
 
        <a class="item">First Item</a> 
 
        <a class="item">Second Item</a> 
 
        <a class="item">Third Item</a> 
 
        <a class="item">Fourth Item</a> 
 
        <a class="item">Fifth Item</a> 
 
        </div> 
 
        <div id="content" class="pusher"> 
 
        <div class="ui basic segment"> 
 
         <h3 class="ui header">Application Content</h3> 
 
         <p>First paragraph...</p> 
 
         <p>Second paragraph...</p> 
 
         <p>Third paragraph...</p> 
 
        </div> 
 
        </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 4

आप ग्रिड कक्षा में अपने पेज की सामग्री रैप करने के लिए किया है।

<div id="navbar" class="ui fixed inverted main menu"> 
<!-- header content here --> 
</div> 
<div id="content" class="ui container"> 
<!-- main content here --> 
</div> 

और अपने सीएसएस में जोड़ें::

.ui#content{ 
    // padding should be the same as header height 
    padding-top: 55px; 
}