silvercover Posted November 4, 2015 Share Posted November 4, 2015 Hi,I'm looking for a proper way to have an effect highlighted in below picture atthe bottom of my box. Quote Link to comment Share on other sites More sharing options...
Psycho Posted November 4, 2015 Share Posted November 4, 2015 I'm not an expert in CSS. There may be a better way but this works (tested in Chrome). Of course you would likely need to modify the styles further to get the actual look/feel of the content and boxes as you like. but, it does create the look of the little sub-dialog boxes peeking out at the bottom. I would create those within the server-side code using smaller increments for the width. Everything else can be done through the CSS style sheet. <html> <head> <style> #container { display:inline-block; width: 300px; } #dialog { border: 1px solid #000000; text-align: center; } #title { background: blue; width: 300px; color: #ffffff; } #body { height: 100px; } .subDialog {height: 5px; border: 1px solid #000000; margin: 0 auto; } </style> </head> <body> <div id="container"> <div id="dialog"> <div id="title">Dropbox</div> <div id="body"><br>4 Files were updated in your folder<br><br><button>View Folder</button></div> </div> <div class="subDialog" style="width: 290px;"></div> <div class="subDialog" style="width: 280px;"></div> <div class="subDialog" style="width: 270px;"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.