The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Bottom of the HTML code gets chopped off
Emilia
post 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.
IPB Image

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 />
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2018, 04:01 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(Emilia @ Oct 12 2018, 08:24 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:42 AM