html - Speech Bubble code -
my code has sections overlapping, can't figure out how. i've tried changing borders, inserting padding, spaces, adjusting width, checking code, removing absolute positions , none of has worked. speech bubbles don't need interactive, need them remain same width, different heights. need little gap between each of them, @ moment there's no gap @ all.
<!doctype html> <!-- author: lorna costelloe --> <html> <head> <meta charset = "utf-8"> <title>speech bubble</title> <style media="screen" type="text/css"> .speech-bubble{ background-color: #f4911c; border: 3px solid #662f8c; border-radius: 5px; width: 500px; text-align: center; padding: 20px; position: absolute;} .speech-bubble .arrow { border-style: dotted; position: absolute;} .bottom { border-color: #662f8c transparent transparent transparent; border-width: 8px 8px 0px 8px; bottom: -8px;} .bottom:after { border-color: #f4911c transparent transparent transparent; border-style: dotted; border-width: 7px 7px 0px 7px; bottom: 1px; content: ""; position: absolute; left: -7px;} </style> </head> <body> <!--copy , paste new speech bubble. <div class="speech-bubble"> <div class="arrow bottom right"> </div> content here. </div>--> <div class="speech-bubble"> <div class="arrow bottom right"></div> test test test test test test test tes test test test test test test test test tes testtest test test test test test test tes test<br><br> test test test test test test test tes testtest test test test test test test tes testtest test test test test test test tes test<br><br> test test test test test test test tes test test test test test test test test tes testtest test test test test test test tes test<br><br> test test test test test test test tes testtest test test test test test test tes testtest test test test test test test tes test<br><br> test test test test test test test tes test test test test test test test test tes testtest test test test test test test tes test<br><br> test test test test test test test tes testtest test test test test test test tes testtest test test test test test test tes test<br><br> test test test test test test test tes test test test test test test test test tes testtest test test test test test test tes test<br><br> test test test test test test test tes testtest test test test test test test tes testtest test test test test test test tes test<br><br> </div> <br><br> <div class="speech-bubble"> <div class="arrow bottom right"> </div> sec test sec test sec test sec test sec test sec test sec test sec test sec test sec test <br><br> sec test sec test sec test sec test sec test sec test sec test sec test sec test sec test <br><br> sec test sec test sec test sec test sec test sec test sec test sec test sec test sec test <br><br> sec test sec test sec test sec test sec test sec test sec test sec test sec test sec test <br><br> sec test sec test sec test sec test sec test sec test sec test sec test sec test sec test <br><br> sec test sec test sec test sec test sec test sec test sec test sec test sec test sec test <br><br> sec test sec test sec test sec test sec test sec test sec test sec test sec test sec test <br><br> </div> </body>
simplify!
update - violet arrow border :)
have fiddle!
html
<div class="speech-bubble"></div> css
.speech-bubble { background-color: #f4911c; border: 3px solid #662f8c; border-radius: 5px; width: 500px; text-align: center; padding: 20px; position: relative; margin: 0 0 40px; } .speech-bubble:before { border-color: #662f8c transparent transparent transparent; border-width: 8px 8px 0px 8px; border-style: dotted; position: absolute; left: 9px; bottom: -8px; content:''; } .speech-bubble:after { border-color: #f4911c transparent; border-style: dotted; border-width: 7px 7px 0px; bottom: -7px; content:''; position: absolute; left: 10px; } html css html5 css3
No comments:
Post a Comment