my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing
here is css:
.card_main {
border: 1px solid black;
margin-top: 30px;
border-radius: 5px;
height: 900px;
background: #ffffff;
width: 100%;
}
.blog_content__text {
width: 95%;
height: 320px;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
.blog_heading {
font-size: 24px;
color: black;
}
.blog_details {
font-size: 16px;
color: black;
opacity: 0.7;
margin-top: 20px;
}
my html
<div className="card_main">
<div className="blog_content__text">
<h1 className="blog_heading">{data.blog_title}</h1>
<p className="blog_details">{data.blog_body}</p>
</div>
<div/>
how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css
When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;
If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.
.blog_content__text {
width: 95%;
height: 320px;
overflow-y:auto;
border-bottom: 1.5px solid lightgray;
margin-left: 2.5%;
margin-top: 20px;
}
remove the height: 320px;
if you must, use it as min-height: 320px;
try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.
You can also make use of the following property if you really want to set the height:
height: min-content;
Related
I'm trying to make a simple button. But instead of <button>, I'm using <div> and <p>, but the result will show up as only border, and the text won't show up over the border.
Am I doing something wrong?
Screenshot of the button:
.Something4 {
margin-top: -72px;
margin-left: 335px;
font-size: 20px;
width: 110px;
height: 60px;
border: 1px solid #E12976;
border-radius: 20px;
}
.Something4 p2 {
margin-left: 335px;
width: 100px;
height: 50px;
}
<div onclick="location.href='Login.php';" style="cursor: pointer;" class="Something4">
<p2 style="font-family: Sans-serif;font-size:16px;font-style:normal;">Login</p2>
</div>
I copied your code into codepen.com.
margin-top: -72px; is moving your button off the screen.
The second margin-left: 335px; in the p2 section is moving the text out of your button.
Try removing all your margins and see how it looks:
.Something4 {
font-size: 20px;
width: 110px;
height: 60px;
border: 1px solid #E12976;
border-radius: 20px;
}
.Something4 p2 {
width: 100px;
height: 50px;
}
Keep in mind the margin inside the p2 tag will not replace the margin on the border itself, and having negative margins might not always do what you think.
I would highly recommend using semantic markup to describe the content of your page. This helps make your content accessible and work as expected across a variety of devices and use cases that you might not be capturing.
So use an anchor tag <a> to link to \login.php, and then you can choose to style that similar to a button if you'd like.
body {
padding: 15px;
background: #211f1f;
}
a.login-button {
color: salmon;
border: 1px solid salmon;
padding: 10px 15px;
border-radius: 20px;
text-decoration: none;
}
Login
I'm trying to implement the following design (For now I'm just worried about the text box):
When typing:
Maximum height:
Notice the top and bottom paddings were decreased.
Now, this is what I have so far:
.chat-wrapper {
width: 100%;
}
.message-text {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
textarea {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-text" contentEditable></div>
<br/>
<p>
Using regular textarea:
</p>
<textarea></textarea>
</div>
Now for the input text box, I have two solutions:
Using div with contentEditable attribute, it works and it is expandable to a certain height. But the text is not centered vertically (I'm trying to avoid using Flex, just to make sure old browsers are compatible, not very strict about that though)
Using textarea, it is more semantic IMHO, but it doesn't expand automatically.
I want also to detect the keypress event (I don't think it is a problem in both solutions).
Which solution do you think is the web standard? If both are good, how do make the div centers the text, and shrink the paddings when it grows? Or in the case of textarea, how do I make it expand without JS?
Also if you have any better suggestions, let me know.
UPDATE:
I just realized how messy is the option (div with contentEditable):
As you can see, first I can't wrap the text to lines when the text is more than the width.
Second, the text inside the div, is not clean ! Especially when copy-pasting. I need it to be pure text so when I use JS to get the content, I get just the text not the html tags.
I'm assuming that you want your padding preserved and it that case you could do something like this with contenteditable.
Add the wrapper around the .message-text:
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-wrapper">
<div class="message-text" contentEditable></div>
</div>
</div>
Update CSS:
.chat-wrapper {
width: 100%;
}
.message-text {
min-height: 1em; /* prevent height collapsing when there is no text */
max-height: 97px;
width: 100%;
align-content: center;
outline: none;
overflow: hidden;
}
.message-wrapper {
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
padding: 24px; /* the container will keep the padding untouched */
max-height: 145px; /* added padding to the height of the .message-text */
}
Check the snippet:
.chat-wrapper {
width: 100%;
}
.message-text {
min-height: 1em; /* prevent height collapsing when there is no text */
max-height: 97px;
width: 100%;
align-content: center;
outline: none;
overflow: hidden;
}
.message-wrapper {
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
padding: 24px; /* the container will keep the padding untouched */
max-height: 145px; /* added padding to the height of the .message-text */
}
textarea {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-wrapper">
<div class="message-text" contentEditable></div>
</div>
<br/>
<p>
Using regular textarea:
</p>
<textarea></textarea>
</div>
max-height: 145px for the .message-wrapper is actually the height of content box, and that helps with pushing the .message-text with padding from the top and bottom.
I hope I got the right idea of what you want to achieve,let me know if this helps.
I'm trying to set the left border of siginimage to 40px, but since the height of the signinimage is 25px, the border height is also being set as 25px.
.top-header {
float: left;
border-left: 2px solid #CCCCCC;
height: 30px;
margin-top: 0px;
}
#signinimage {
padding-top: 6px;
padding-left: 10px;
height: 25px;
width: 25px;
}
<img src="images/signinimage.png" class="top-header" id="signinimage">
Two approaches.
Either create a container and put the image inside it
In your question, you said you wanted to extend the border to the left
(but I mean that's just a matter of simple float:, but you can apply
this approach in general
img {
width: 100px;
height: 100px;
float: right;
}
#container {
border: 3px solid black;
width: 150px;
height: 100px;
}
<div id ="container">
<img src=https://i.imgur.com/QIsNrpM.png/>
</div>
The other alternative, if you insist on using only one element instead of two, you can set the image as a background-image of a differently sized div
#imganddiv {
border: 3px solid black;
width: 150px;
height: 100px;
background-image: url('https://i.imgur.com/QIsNrpM.png');
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: right center;
}
<div id="imganddiv"></div>
I personally prefer the first option as it's a bit more intuitive and generally considered a common practice on to how containers (elements inside elements) should be handled.
To get a border taller than the image, you can wrap the image in a container, and apply the border to that container.
.top-header{
float: left;
border-left: 2px solid #CCCCCC;
height: 40px;
margin-top: 0px;
/* Center the image vertically */
display: flex;
align-items: center;
}
#signinimage{
height: 25px;
width: 25px;
padding-left: 10px;
}
<div class="top-header">
<img src="http://placekitten.com/25/25" id="signinimage">
</div>
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>