I have a text composed by "< p >" and "< ul >< li >", inside a box.
There's no problem with the lists, but the words in the paragraphs are splitting in half when they reach the padding of the box.
my text
<style>
#media (min-width: 768px)
<style>
.col-md-12 {
flex: 0 0 100%;
max-width: 100%;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.garrigues_RemindersAML__Exvyp {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
color: #0c5460;
border-color: #ffeeba;
text-align: justify;
}
</style>
<div class="row" style="margin-top: 15px;">
<div class="alert alert-warning garrigues_RemindersAML__Exvyp col-md-12">
<p style="font-size: 17px;margin-left:0px;">Reminder </p>
<p> A priori, it is not necessary to request any document from this type of clients. The following documents must be obtained from public sources of information, and included in the AML questionnaire:</p>
<ul>
<li>Documentation proving that it is one of the clients considered low risk.</li>
<li>Documentation accrediting the activity (for example, annual accounts or screenshot of the website).</li>
</ul>
<p> If the customer is a subsidiary or branch of a financial entity or of listed companies whose securities are admitted to trading in a market regulated in the EU or Equivalent Third Countries, it must be justified that they belong (directly or indirectly in more than 50% to the financial or listed entity).</p>
<p> This client has LOW RISK and, therefore, applies SIMPLIFIED MEASURES OF DILIGENCE DUE.</p>
</div>
</div>
I've tried everything to prevent them to break, but there's just 2 results: they break, or the paragraph overflows outside the box.
I've tried all the options with white-space, word-break, overflow-wrap, overflow, display, width, margin, height... And the result is always the same: they break or they overflow.
Is there a way to prevent them from breaking, placing them in the next line, instead of overflowing them?
Thank you in advance.
Edit: each paragraph comes from a database, and then is renderized by a component in a React web application, the code is not as simple as it seems.
The text can't break between the words because there are only s (which is for 'non breaking space') used. Use normal space characters.
p {
background: teal;
width: 150px;
margin: 1em;
}
<p>This text has a long_long_word to test the issue</p>
<p>This text has a long_long_word to test the issue</p>
Have you tried "word-wrap: break-word;"?
I have tried this and its working.
Related
I want to centrally align h tags and p tags but I can't seem to separate the sections nicely. Here is the preview of what happens
What I would like is to have space between the three "boxes" of information and make everything central. I tried to add padding in between the .top-row class but it seems to always stick together.
HTML:
<section>
<div class="container">
<h1>TOPICS COVERED</h1>
<p id=intro-p>There are six essential parts to building a CPU, let's
go through them briefly</p>
<div class="top-row">
<div class="box1">
<h3>BINAY & LOGIC</h3>
<p>Before all, one needs to be comfortable with lab material & binary logic</p>
</div>
<div class="box2">
<h3>Timing Signal Generator</h3>
<p>The timing signal generator for the computer is a clock with a cycle that
repeats. It allows the computer the amount of time needed to permorm operations.</p>
</div>
<div class="box3">
<h3>Bus, Arithmetic Unit & Program Counter</h3>
<p>In order to efficiently spread data throughout the breadboard, the data can be spread in a bus.
he program counter of a computer holds the location of an execution to be executed.</p>
</div>
</div>
<div class="bottom-row">
</div>
</div>
</section>
CSS:
#topics{
padding: 25px;
background-color: #f5f6fa;
}
#topics h1{
font-size: 30px;
font-weight: 400px;
letter-spacing: 2.5px;
text-align: center;
color: #282828;
}
#intro-p {
text-align: center;
color: #282828;
font-size: 20px;
letter-spacing: 2.5px;
}
.top-row{
display: flex;
}
.top-row h3{
padding-left: 0px;
text-transform: uppercase;
}
.top-row p{
text-align: justify;
color: #282828;
font-size: 14px;
letter-spacing: 0.5px;
}
The top row will only pad the container as a whole. What you want to do is pad the top row's children. You can do that by selecting them and adding padding. Further, since you are using flexbox, you can add flex to them to choose how they shrink, grow and their base size. Something like this would work for you. The text-align center will only center the heading as the paragraph tags have justify on them. If you want them centered, then remove that. Also, the flex-basis, third number on flex, could also be set to auto or unset if you don't want them to be equal. Find more on flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.top-row > div {
padding: 20px;
text-align: center;
flex: 1 1 33%;
}
I am still working on improving my first website project. One issue that is repeatedly causing me a headache is that some sections keep overflowing into those above. When I say overflow, I mean that when I click on the element in brackets, when hightlighted in the live preview, it is showing the margins to actually be around other content above (as shown in picture). This is happening with various sections of my website an I cannot understand why. I am a total beginner here so i'm sure theres a simple reason as to why and how to fix it universally across the website.
Overflow issue in this image
For some sections I can overcome this with the 'overflow: none" property but ideally i'd like to solve this without the need to repeatedly use it. Note, the overflow none property isnt working for all sections, in particular the one I have shown an image of. Could anyone give some clarity here please?
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
color: #4E6E9B;
font-family: 'Signika', sans-serif;
font-weight: 'E';
}
/* END GENERAL STYLES -----------*/
.one-third-container {
float: left;
width: 100%;
overflow: hidden;
}
.about-one-third {
width: 33.3333%;
padding: 2% 0;
float: left;
text-align: center;
background-color: #0066B2;
color: #f6f8fa;
}
.about-one-third i {
font-size: 8rem;
padding-bottom: 5%;
}
/* END ONE THIRD SECTIONS ------*/
.services-offered {
padding-left: 0;
margin: 2% 5%;
-webkit-padding-start: 0;
list-style-type: none;
overflow: none;
}
.services-offered li {
display: inline-block;
width: 20%;
vertical-align: top;
padding: 0 0 0 1.8rem;
text-align: justify;
}
.services-offered li:before {
content: "\f00c";
font-family: FontAwesome;
width: 1.8rem;
margin-left: -1.8rem;
margin-right: 0.5rem;
}
/* END SERVICES OFFERED ---------*/
<!DOCTYPE html>
<html>
<head>
<title>W Gooderham Gas Services</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,700|Signika:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>[enter image description here][1]
<div class="one-third-container">
<section class="about-one-third">
<td>
<i id="third-border" class="fa fa-calendar"></i>
</td>
<h2>Routine Servicing</h2>
</section>
<section class="about-one-third" id="centre-third">
<td>
<i id="third-border" class="fa fa-wrench"></i>
</td>
<h2>Installation</h2>
</section>
<section class="about-one-third" id="breakdown">
<td>
<i class="fa fa-snowflake-o"></i>
</td>
<h2>Breakdowns</h2>
</section>
</div>
<! END ONE THIRD SECTION --------------------->
<ul class="services-offered">
<li>
Installation and commission of natural gas central heating systems.
</li>
<li>
Routine servicing of all natural gas appliances including warm air units.
</li>
<li>
If any of your gas appliances breakdown, we provide a 7 day a week callout service to get them back up and running.
</li>
<li>
We can provide gas safety landlord certification for all gas appliances in your properties.
</li>
</ul>
The reason the elements "overflow" to the elements above is because you used float: left; on the class one-third-container (which is fine!). But if the element below doesn't have any float you get the unwanted result of the element getting pushed higher than intended. If you add float:left; to the ul (or the class services-offered) you can prevent this issue.
Edit: Removing the float:left would also work in this case, as the element doesn't need to be floated.
Edit 2: Floats are indeed not that much of the go-to-choice as they were a few years ago. Uncleared elements are a common issue when using floats, which is why flexbox is considered to be better. Flexbox has alot of use cases that simplify many layout problems, that are a little trickier to solve without flexbox. However using flexbox on every element without paying any thought to it can produce unwanted results like for example this:
.container {
height: 500px;
display:flex;
}
<div class="container">
<img src="http://via.placeholder.com/350x150">
</div>
In the code snippet the image is skewed. You can fix this pretty easily by adding align-items to the .container, but the point is, that using flexbox on all elements can possibly cause issues, where they are unneccessary.
That said, using flexbox is definitely a good thing as long as you are paying attention to the elements you're applying it to.
I have two main divs service-display-box and service-contact.
service-contact is not setting properly after service-display-box, which has floated divs inside of it.
Let me first state that I am using clear: both; after the floated div. In addition, service-contact is reading the margin, but it is starting it halfway into the service-display-box.
I am not sure what I am doing wrong. It works in the snippet, but not on my page.
What am I doing wrong?
#service-display-box {
background: #FFF;
color: #000;
width: 100%;
padding: 15px 0;
}
#service-display-box-container {
padding: 135px 15%;
}
.service-item-box-img-container {
width: 80%;
margin: 50px 10%;
}
.service-item-box-img {
margin: 50px 0;
width: 40%;
height: auto;
vertical-align: top;
box-shadow: 8px 8px 4px #BEBEBE;
}
.service-item-box-img.left {
float: left;
}
.service-item-box-img.right {
float: right;
}
#service-contact {
margin: 225px auto 75px auto;
text-align: center;
clear: both;
}
#service-contact a {
text-decoration: none;
}
#service-contact-button {
border: 1px solid #578570;
background: #578570;
color: #FFF;
padding: 20px 40px;
font-size: 1.5em;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
<div id="service-display-box">
<div id="service-display-box-container">
<div class="service-item-box" id="service1">
<h1 class="service-item-title">DEMOLITION</h1>
<h2 class="service-item-description">
<p>We continues to build a strong legacy in the dismantlement industry because of our proven ability to complete projects ranging in nearly any size”</p>
<p>We have played a valuable role in the demolition of numerous industrial facilities throughout the region including chemical, steel mills, energy generation, tire, and automotive. These structures demand skillful understanding along with proper tools and equipment to be safely brought down.</p>
<p>Commercial demolition is essential in the redevelopment process. The region has allowed us to complete numerous commercial projects. We are able to perform interior, selective, and full demolition services to our clients.</p>
<p>Residential demolition is a fundamental ability. We provides turnkey services to the public, the government, and development entities.</p>
</h2>
<div class="service-item-box-img-container">
<img src="images/service/demo/demo1.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img left">
<img src="images/service/demo/demo2.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img right">
</div>
</div>
<div style="clear:both;"></div>
<div id="service-contact"><span id="service-contact-button">CONTACT US</span>
</div>
You're not clearing the floats correctly:
The easiest way to expand an element with floated elements inside him is to add overflow: hidden;. So go ahead and give
.service-item-box-img-container {
overflow: hidden;
}
Your issue is in the jQuery in this line:
$('#service'+item_number).show().siblings().hide();
Which making your <div class="clear"></div> to be styled as display:none due to be a siblling of your .service-item-box divs,
To fix this is saying that the divs with class .service-item-box are the only one to be affected, so will be like this:
$('#service'+item_number).show().siblings('.service-item-box').hide();
Your div that was setting clear: both also has display: none which essentially renders it useless. Getting rid of the display: none moved the button down 225px for me
hope i understood the question.
add { float:left;width:100%} to .service-contact and the margin will be calculated correctly
also add { float:left;width:100%} to .service-top
I'm currently building a theme / style for a piece of software.
Currently, the code looks like such:
http://jsfiddle.net/afseW/1/
The relevant code is:
body div[type*=privmsg] .sender {
font-weight: 700;
width:134px;
text-shadow: #fff 0px 1px;
background-color: #eee;
min-height:22px;
border-right: 1px solid #dcdcdc;
padding-right:5px;
text-align:right;
display:inline-block;
overflow: auto;
}
Note that in fiddle, for some reason, the text is collapsing onto the second line, whereas in the client, the image looks like this:
Granted, a span is not meant to be a block, hence I've given it the property of: display: inline-block;
But how do I get the height to inherit the parent p block?
I changed DOM structure. See the inline style. In the first div (.message) I prefer a better solution adding a .clearfix class, see this.
<div class="message" type="privmsg" style="overflow: auto;">
<div class="sender-cont" style="width: 30%; float: left;">
<span class="sender" ondblclick="Textual.nicknameDoubleClicked()" oncontextmenu="Textual.openStandardNicknameContextualMenu()" type="myself" nick="shamil" colornumber="20">+shamil</span>
</div>
<div style="width: 70%; float: left;">
Welcome to <span class="channel" ondblclick="Textual.channelNameDoubleClicked()" oncontextmenu="Textual.openChannelNameContextualMenu()">#textual-testing</span>! This channel is for the users of the Textual IRC Client to test scripts and do other activities in an unregulated environment. — <span class="inline_nickname" ondblclick="Textual.inlineNicknameDoubleClicked()" oncontextmenu="Textual.openInlineNicknameContextualMenu()" colornumber="3">milky</span>'s law states: "On IRC, after a user has executed a command that outputs interesting information to a channel (i.e. /sysinfo), then there will be at least two users that do the same."
</div>
</div>
Hope this helps!
Since the spans are a set width, probably the easiest thing to do here is just make the span have a absolute position.
body div[type*=privmsg] .sender,
body div[type*=action] .sender {
position: absolute;
top: 0;
bottom: 0;
left: 0;
...
}
Then add padding to the parent element:
body span.message {
position: relative;
padding-left: 140px;
...
}
http://jsfiddle.net/afseW/3/
PS: please provide a trimmed down version in jsfiddle next time, the html and css here is pretty epic.
I made this sketch in photoshop and I am converting it to HTML & CSS.
HTML:
<div class="pricebox">
<p class="price">360kr</p>
<p class="min">40 min</p>
<p class="info green">Körlektion</p>
</div>
<div class="pricebox">
<p class="price">1700kr</p>
<p class="min">Riskutbildnig 2</p>
<p class="info yellow">Halkan</p>
</div>
<div class="pricebox">
<p class="price">500kr</p>
<p class="min">Riskutbildning 1</p>
<p class="info red">Riskettan</p>
</div>
CSS
body {
font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
display:inline-block;
border: 1px solid #EEEEEE;
border-radius: 3px;
width: 100px;
height: 150px;
margin: 5px;
}
.price{
font-size: 28px;
font-weight:300;
color: #383838;
padding: 11px;
}
.min {
font-size: 11px;
color: #909090;
padding: 0 25px;
}
.info {
height: 35%;
margin-top: 15px;
color: #EEEEEE;
font-weight: 600;
font-size: 11px;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}
But I am kinda lost on how to structure everything up, should use span or div tag instead of p-tags.
Check this jsfiddle: http://jsfiddle.net/upas3/1/
Any ideas or solutions are welcome.
I would use DL list for each such block and UL list to group them together semantically:
<ul>
<li><dl>
<dt>Körlektion</dt>
<dd>360kr</dd>
<dd>40 min</dd>
</dl></li>
<li><dl>
<dt>Halkan</dt>
<dd>1700kr</dd>
<dd>Riskutbildnig 2</dd>
</dl></li>
<li><dl>
<dt>Riskettan</dt>
<dd>500kr</dd>
<dd>Riskutbildning 1</dd>
</dl></li>
</ul>
Looks like a good place to use ul and li tags.
Using paragraph tags can work but is counter intuitive for UI design.
Well, div and p are "the same" in that they are block elements, but p has more default styling, so as between them, you will want to use div.
You might use span if you want these blocks to be treated as one line of text, which it kind of looks like you do.
Update: As noted in other answers, you could also use various list tags, and style them to be inline elements, like span. That can be nice for screen readers.
This looks like tabular data, and tabular data goes in tables. However, that doesn't mean it has to look like a table!
http://jsfiddle.net/jdEP4/
table.prices {
display: block;
}
table.prices thead {
display: none;
}
table.prices tr {
display: inline-block;
border: 1px solid;
}
table.prices td {
display: block;
text-align: center;
}
.info.yellow {
background: yellow;
}
.info.green {
background: green;
}
.info.red {
background: red;
}
The CSS is incomplete, of course, but the baseline is there for reformatting the table.
Generally speaking there is no unified format, so you may use just whatever you feel better. Practically I am always trying use elements which will require less workaround. Let's say p tag will require additional margin normalization, so I would use instead divs, if you need inilne element probably better would be use span not div and so on. Just one thing which annoys me a lot it class/id names, always trying avoid somethign like size1, size2, style124 :) and use instead something that makes sense in context and will be understandable by other developers
Try this one: http://jsfiddle.net/P4xwK/
About your question I think that does not really matter you can convert every that to that you like with display:inline and with display:block. However the order of the tags should be syntactically correct.
Except that little triangle that looks like you want.
body {
font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
display:inline-block;
border: 1px solid #EEEEEE;
border-radius: 3px;
width: 100px;
height: 100px;
margin: 5px;
}
.price{
font-size: 28px;
font-weight:300;
color: #383838;
text-align:center;
}
.min {
font-size: 11px;
color: #909090;
text-align:center;
}
.info {
height: 35%;
margin-top: 15px;
padding-top:15px;
color: #EEEEEE;
font-weight: 600;
font-size: 11px;
text-align:center;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}
This here is a trick to paint a triangle with css:
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I would organize it like so:
<div class="pricebox">
<ul>
<li class="price">360kr</li>
<li class="min">40 min</li>
<li class="info green">Körlektion</li>
</ul>
</div>
then style accordingly.
The only things that really matter here are author convenience and fallbacks.
For convenience, you would use div or span, which have no default rendering except for being block vs. inline, so there are no default settings you need to override.
For fallbacks, i.e. for non-CSS rendering, you would probably want to use p instead of div and span instead of div, since you want the items to be rendered as paragraphs (with empty lines or pauses between them) but internally just as text.
They look like list items to me. Not paragraphs. Programmatically, what you have is fine. Semantically, I'd try to think of them if CSS were shut off (That's why I'd make them a list)
<ul>
<li><h2>Header</h2></li>
<li>Price</li>
<li>Description</li>
</ul>
Couple of things: 1) I try to target the elements, but using ".pricelist" on the <ul> tags would be an option. 2) If I'm correct in thinking that "Header" is important, than you could use positioning on the <ul> and <li> elems to move the header to the last item for presentation, but maintain your semantics.
I like more semantic solutions:
HTML:
<dl class="pricebox">
<dt>Körlektion</dt>
<dd><abbr class="price" title="360 kronor">360kr</abbr></dd>
<dd><abbr class="min" title="40 minutes">40 min</abbr></dd>
</dl>
<dl class="pricebox">
<dt>Halkan</dt>
<dd><abbr class="price" title="1700 kronor">1700kr</abbr></dd>
<dd><abbr class="min" title="2 FrihDehBiDeUh">Riskutbildnig 2</abbr></dd>
</dl>
<dl class="pricebox">
<dt>Riskettan</dt>
<dd><abbr class="price" title="500 kronor">500kr</abbr></dd>
<dd><abbr class="min" title="1 FrihDehBiDeUh">Riskutbildning 1</abbr></dd>
</dl>
Inspired by #MaratTanalin solution
In CSS:
Replace .green, .yellow and .red by dl:nth-of-type(1) dt, dl:nth-of-type(2) dt and dl:nth-of-type(3) dt except if the choice of color depends on something else than the position of the pricebox.