Unexpected css behavior

I ran into several problems with my layout that I cannot explain.

HTML layout

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AuctionProject</title> <script async type="application/dart" src="auctionproject.dart"></script> <script async src="packages/browser/dart.js"></script> <link rel="stylesheet" href="auctionproject.css"> </head> <body> <div id="menu_bar"> <div id="logo"></div> <div class="menu_tab" id="123">Tab123</div> <div class="menu_tab" id="upcomming">Tab456</div> </div> <div id="content_box"> <div id="side_menu"> <div id="open_menu_shadow"></div> <div id="menu_content" class="hidden"> <div id="account" class="side_label hidden"> <p class="tiny">You are currently logged in as:</p> <p id="current_user">Some User</p> <p class="tiny">This is not you? <span class="important" id="log_out" role="button" tabindex="0" style="cursor: pointer;">Log Out</span> </p> </div> <div id="login_box" class="side_label"> <input type="text" name="login" placeholder="Login"> <input type="text" name="password" placeholder="Password"> <button type="button">Sign In</button> <p class="tiny">Don't have an account? <span class="important" id="register" role="button" tabindex="0" style="cursor: pointer;">Register</span></p> </div> <hr> <div class="side_label">Add Category</div> <div class="side_label">Super category 1</div> <hr> <div class="side_label">Popular #tags: <ol id="trendingTags"> <li><div class="label">#Tag123</div></li> <li><div class="label">#Tag456</div></li> </ol> </div> </div> <div id="open_menu"><p>&lt &lt &lt &lt &lt &lt &lt &lt &lt &lt</p></div> </div> <div id="smart_box"> </div> <div id="auction_list"> <div class="auction"> <img src=""></img> <div class="title">This is a sample title</div> <div class="teaser">This is a sample teaser </div> </div> <div class="auction"> <img src=""></img> <div class="title">This is a sample auction title</div> <div class="teaser">This is sample teaser </div> </div> </div> </div> </body> </html> 

CSS layout

 body { background-color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; line-height: 1.2em; margin: 0px; position: absolute; height: 100%; width: 100%; } h1, p { color: #333; } #menu_bar { width: 100%; height: 60px; padding-bottom: 2px; border-bottom: 1px solid #aaa; background-color: #F8F8F8; } #logo { height: 60px; width: 200px; margin-right: 40px; background-color: blue; display: inline-block; } .menu_tab { margin-left: 25px; padding: 4px 4px 0px 4px; border-left: 1px solid #aaa; border-top: 1px solid #aaa; border-right: 1px solid #aaa; font-size: 1.2em; display: inline-block; bottom: 0; background-color: #ccc; } #menu_tab_selected { margin-left: 20px; padding: 4px 4px 0px 4px; border-left: 1px solid #aaa; border-top: 1px solid #aaa; border-right: 1px solid #aaa; font-size: 1.2em; display: inline-block; bottom: 0; background-color: #fff; } #content_box { boarder: 2px solid red; width: 100%; height: 100%; } #side_menu{ boarder: 1px solid #aaa; height: 100%; position: absolute; display: inline-block; background-color: #F8F8FF; float: left; } #open_menu { border: 1px solid #aaa; border-top: 0px solid #aaa; display:inline-block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; background-color: #eee; z-index: 3; } #open_menu_shadow { display: inline-block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; box-shadow: -7px 0px 5px #aaa; position: absolute; z-index: 1; } #open_menu p { text-align: center; vertical-align: bottom; } #menu_content { width: 200px; height: 100%; display: inline-block; float: right; } #menu_content hr { border: 0; border-bottom: 1px dashed #ccc; background: #999; margin-top: 20px; margin-bottom: 20px; } .hidden { display: none; } .tiny { font-size: 0.7em; } .important { color: red; } #login_box input { width: 120px; margin-bottom: 10px; } #current_user { margin: 4px; } .side_label { border: 1px solid #aaa; border-top-left-radius: 4px; border-bottom-left-radius:4px; margin-top: 15px; margin-bottom: 15px; margin-left: 10px; padding: 10px; padding-right: 35px; box-shadow: -7px 7px 5px #aaa; position: relative; background-color: #fff; z-index: 2; } .label { margin: 2px; padding-left: 5px; padding-right: 5px; border-radius: 5px; font-size: 0.8em; font-weight: bold; display: inline-block; background-color: #ccc; } #auction_list { margin-left: 200px; padding: 20px; position: absolute; display: inline-block; overflow: auto; width: calc(100% - 250px); } .auction { padding: 10px; margin-bottom: 10px; boarder: 1px solid #aaa; border-bottom: 1px solid #aaa; border-top: 1px solid #aaa; } .auction img { width: 60px; width: 60px; } .auction .title { font-size: 1.2em; text-decoration: underline; } #smart_box { margin: 10px; width: 300px; height: 200px; float: right; border: 1px solid #aaa; } 

My first problem is with the display:none property display:none menu that you see on the left (id = "side_menu") has a div inside with id = "menu_content", and the panel on the right (id = "open_menu"). To switch to the menu, I created a .hidden class containing the display:none property. I expected that when I add this class to the div "menu_content", it will disappear. Unfortunately, nothing happens. layout menu

I think my other problem is with the inline-block property. I would like the id = "auction_list" main content list to fill in the space as shown below. layout content This means that it should be relative to the menu, so I do not need to change the left edge when switching the menu. Also, I do not know how to save messages (class = "auction") from moving on the div on the right (id = "smart_box")

I would be very grateful for any help.

Disclaimer: Please do not accept a lot of prior knowledge. I am new to html.

+6
source share
3 answers

1) in #side_menu, you wrote a border, not a border.

 #side_menu { boarder: 1px solid #aaa; height: 100%; position: absolute; display: inline-block; background-color: #F8F8FF; float: left; } 

2) There is a concept with CSS that gives more or less the "weight" of CSS rules. When you write:

 #menu_content { display: inline-block; } .hidden { display: none; } 

You might think that class="hidden" overwrite id="menu_content" . This should be due to the .hidden being written to your CSS file after #menu_content. But this is not because CSS rules with #id have more weight than .class .

If you want everything to work, you have two options:

  • write display: none !important in your .hidden class. !important gives the highest priority to rules, but not a very good practice.
  • just write:

    #menu_content.hidden { display: none; }

This last parameter will gain weight because it is more specific : you say that you apply the CSS rule mapping to 1) the element class="hidden" 2), and this element contains the attribute id="menu_content" . More specificity means more weight.

#id more specific than .class , which is more specific than <element> .

To learn more about CSS weight, see MDN or CSS-Tricks.

3) For your last problem here is a small sentence, perhaps not perfect, but easy to understand.

Start by editing the HTML : put the smart box inside the auction list at the beginning.

 <div id="auction_list"> <div id="smart_box"></div> <div class="auction">(blabla)</div> <div class="auction">(blabla)</div> </div> 

This is not the right way (semantically, I mean) to solve your problem, but now, let us edit the CSS ... For #auction_list delete the position, display and width.

 #auction_list { margin-left: 200px; padding: 20px; overflow: auto; } 

For .auction just add the inline block.

 .auction { padding: 10px; margin-bottom: 10px; border-bottom: 1px solid #aaa; border-top: 1px solid #aaa; display: inline-block; } 

But note that the width of the .auction elements will be very dependent on their content (how the inline block works if you don't specify width ). This means that you might run into 2 line auctions in your browser rendering. I think that improving this structure will depend on what you do with it + design options.

The idea of ​​this proposal: not to touch the positioning of #auction_list , it is better to work with elements inside it.

Hope this helps. :)

+1
source

to hide / show the navigation bar, you will need Javascript or jQuery. Here is an example that does not require much modification of your code, especially your HTML.

1 . Include jQuery in your project, in my example I used 2.1.3.

2 . This is part of jQuery to hide / show sidebar.

 $(document).ready(function () { $("#open_menu").click(function () { $("#side_menu").toggleClass('open'); //toggles full class on auction_list element (see snippet for live example) $("#auction_list").toggleClass('full'); }); }); 

2a . Each time you click on your #open_menu element, the code above executes and the open class switches to #side_menu .

3 . For this to work, we also need to make some changes to your CSS.

 #side_menu { boarder: 1px solid #aaa; height: 100%; position: absolute; display: inline-block; background-color: #F8F8FF; float: left; /* the lines below were added */ width: 14px; transition: width 0.8s ease-in; -webkit-transition: width 0.8s ease-in; -moz-transition: width 0.8s ease-in; } /* this is new */ #side_menu.open { width: 200px; } 

3a . We set the width of the entire #side_menu element to 14px, so we only see your #open_menu element. Some optional: add some fancy transitions (for the width attribute)

3b is the new CSS rule for the open state, just set the width of your #side_menu element to 200px.

SNIPPET

 $(document).ready(function() { $("#open_menu").click(function() { $("#side_menu").toggleClass('open'); $("#auction_list").toggleClass('full'); }); }); 
 body { background-color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; line-height: 1.2em; margin: 0px; position: absolute; height: 100%; width: 100%; } h1, p { color: #333; } #menu_bar { width: 100%; height: 60px; padding-bottom: 2px; border-bottom: 1px solid #aaa; background-color: #F8F8F8; } #logo { height: 60px; width: 200px; margin-right: 40px; background-color: blue; display: inline-block; } .menu_tab { margin-left: 25px; padding: 4px 4px 0px 4px; border-left: 1px solid #aaa; border-top: 1px solid #aaa; border-right: 1px solid #aaa; font-size: 1.2em; display: inline-block; bottom: 0; background-color: #ccc; } #menu_tab_selected { margin-left: 20px; padding: 4px 4px 0px 4px; border-left: 1px solid #aaa; border-top: 1px solid #aaa; border-right: 1px solid #aaa; font-size: 1.2em; display: inline-block; bottom: 0; background-color: #fff; } #content_box { boarder: 2px solid red; width: 100%; height: 100%; } #side_menu { boarder: 1px solid #aaa; height: 100%; position: absolute; display: inline-block; background-color: #F8F8FF; float: left; width: 14px; transition: width 0.8s ease-in; -webkit-transition: width 0.8s ease-in; -moz-transition: width 0.8s ease-in; } #side_menu.open { width: 200px; } #open_menu { border: 1px solid #aaa; border-top: 0px solid #aaa; display: inline-block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; background-color: #eee; z-index: 3; } #open_menu_shadow { display: inline-block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; box-shadow: -7px 0px 5px #aaa; position: absolute; z-index: 1; } #open_menu p { text-align: center; vertical-align: bottom; } #menu_content { width: 200px; height: 100%; display: inline-block; float: right; } #menu_content hr { border: 0; border-bottom: 1px dashed #ccc; background: #999; margin-top: 20px; margin-bottom: 20px; } .hidden { display: none; } .tiny { font-size: 0.7em; } .important { color: red; } #login_box input { width: 120px; margin-bottom: 10px; } #current_user { margin: 4px; } .side_label { border: 1px solid #aaa; border-top-left-radius: 4px; border-bottom-left-radius: 4px; margin-top: 15px; margin-bottom: 15px; margin-left: 10px; padding: 10px; padding-right: 35px; box-shadow: -7px 7px 5px #aaa; position: relative; background-color: #fff; z-index: 2; } .label { margin: 2px; padding-left: 5px; padding-right: 5px; border-radius: 5px; font-size: 0.8em; font-weight: bold; display: inline-block; background-color: #ccc; } #auction_list { margin-left: 0; padding: 20px; position: absolute; display: inline-block; overflow: auto; width: calc(100% - 250px); transition: margin 0.8s ease-in; } #auction_list.full { margin-left: 200px; } .auction { padding: 10px; margin-bottom: 10px; boarder: 1px solid #aaa; border-bottom: 1px solid #aaa; border-top: 1px solid #aaa; } .auction img { width: 60px; width: 60px; } .auction .title { font-size: 1.2em; text-decoration: underline; } #smart_box { margin: 10px; width: 300px; height: 200px; float: right; border: 1px solid #aaa; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu_bar"> <div id="logo"></div> <div class="menu_tab" id="123">Tab123</div> <div class="menu_tab" id="upcomming">Tab456</div> </div> <div id="content_box"> <div id="side_menu"> <div id="open_menu_shadow"></div> <div id="menu_content" class="hidden"> <div id="account" class="side_label hidden"> <p class="tiny">You are currently logged in as:</p> <p id="current_user">Some User</p> <p class="tiny">This is not you? <span class="important" id="log_out" role="button" tabindex="0" style="cursor: pointer;">Log Out</span> </p> </div> <div id="login_box" class="side_label"> <input type="text" name="login" placeholder="Login"> <input type="text" name="password" placeholder="Password"> <button type="button">Sign In</button> <p class="tiny">Don't have an account? <span class="important" id="register" role="button" tabindex="0" style="cursor: pointer;">Register</span> </p> </div> <hr> <div class="side_label">Add Category</div> <div class="side_label">Super category 1</div> <hr> <div class="side_label">Popular #tags: <ol id="trendingTags"> <li> <div class="label">#Tag123</div> </li> <li> <div class="label">#Tag456</div> </li> </ol> </div> </div> <div id="open_menu"> <p>&lt &lt &lt &lt &lt &lt &lt &lt &lt &lt</p> </div> </div> <div id="smart_box"></div> <div id="auction_list"> <div class="auction"> <img src=""></img> <div class="title">This is a sample title</div> <div class="teaser">This is a sample teaser</div> </div> <div class="auction"> <img src=""></img> <div class="title">This is a sample auction title</div> <div class="teaser">This is sample teaser</div> </div> </div> </div> 
+1
source

Your problem is display: none; solved with display: none !important;

0
source

Source: https://habr.com/ru/post/986444/


All Articles