Bottom of the HTML code gets chopped off |
Bottom of the HTML code gets chopped off |
Emilia |
Oct 12 2018, 01:24 PM
Post
#1
|
Group: Members Posts: 1 Joined: 12-October 18 Member No.: 26,730 |
I've been at this for a while and I don't understand why at the bottom of the code is cut off after I save but it's fine before I save it.
Also I cant get it to center, I'm new at this so I don't know what I'm doing haha. This is the code: <span style="background-color:#E6E6E6; border-radius: 10px;box-shadow: 4px 3px 5px #848484; margin-left: -5px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 0px; text-align:center; width: 300px;height: 302px; overflow: hidden;" title="made by charly__6__"><span style="background-color:#FFFFFF;margin-left: 0px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 0px; padding: 0px; text-align:left; width: 300px;height: 70px; overflow: hidden;" title="made by charly__6__"><strong><span style="font-size:18px;"></span><span style="background-color:#FFFFFF;border-radius:70px; border: 2px solid silver;margin-left: 5px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 5px; padding: 0px; text-align:center; width: 58px;height: 58px; overflow: hidden;" title="made by charly__6__"><img alt="" height="63" src="http://www.sdcdn.com/camera/501/902/501902669.jpg" width="60" /></span><strong><span style="font-size:16px; float: right; "><br /></span></strong><br /> Charly</span><br /> <span style="background-color:#fff; border: 1px solid silver; border-radius: 10px;margin-left: 20px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 5px; text-align:left;" title="made by charly__6__">Hello<br /> The quick brown fox </span><span style="background-color:#fff; border: 1px solid silver; border-radius: 10px;margin-left: 20px; color: #000000; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 5px; padding: 5px; text-align:left;" title="made by charly__6__">jumps over the lazy <br /> dog. The quick brown fox jumps</span><span style="background-color:#bea4ff; border: 1px solid #926bff; border-radius: 10px;margin-right: 20px; color: #000000; float: right; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding: 5px; text-align:left;" title="made by charly__6__">over the lazy <br /> dog. The quick brown fox </span><span style="background-color:#bea4ff; border: 1px solid #926bff; border-radius: 10px;margin-right: 20px; color: #000000; float: right; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 5px; padding: 5px; text-align:left;" title="made by charly__6__">jumps over the lazy dog. </span><span style="background-color:#FFFFFF;margin-left: 0px; color: silver; float: left; font-family: 'Trebuchet MS',Arial; font-size: 12px; margin-top: 15px; padding-left: 30px; padding-top: 10px; text-align:left; width: 450px;height: 40px; overflow-y: scroll;overflow-x: hidden;" title="made by charly__6__">Type a message... </span></span><br /> |
Christian J |
Oct 12 2018, 04:01 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I don't understand why at the bottom of the code is cut off after I save I think it's because the outmost/first SPAN element is set to a limited height and has overflow set to hidden. If you remove the height it will expand to fit its content. QUOTE but it's fine before I save it. I don't understand, how can you view it (in a browser) without first saving it? QUOTE Also I cant get it to center See https://www.w3.org/Style/Examples/007/center.en.html QUOTE This is the code: Inline styling makes the CSS unnecessarily long (since you must repeat much of the styling for every HTML element) and also harder to overview (because it's mixed up with the HTML). Put the CSS in an embedded STYLE element instead, as shown on e.g. https://www.w3schools.com/css/css_howto.asp |
Lo-Fi Version | Time is now: 24th April 2024 - 06:00 AM |