this time I encountered a CSS cutting board problem. I would like to ask you a question here. I have dealt with it myself for two days and still cannot overcome the problem~
My English is not good, I try to describe it completely, sorry~ The
problem is as follows:
There is a chat room. The blue color is a space between the menu of the webpage and the chat area below (the white side is the distance that must be maintained).
Problem 1: My chat room is set by the designer because of the size, but because of the chat room The content of the window is very large, so in the end there will be a scroll on the right side of the entire window, but in fact the scroll should not appear at the end.
Question 2: When the messages continue to increase in the yellow conversation in the chat room, it can be scrolled just like normal communication software. I have set calc(100vh-295px) in chat_body. Why do I set 295 arbitrarily? This is because I don’t want the chat dialogue area to cause problems with the entire layout due to the increase of messages, but now how to set it will cause scrolling to the bottom. The message will be blocked by the green block below, or the chat dialogue area will cause too much message content to run out of the publishing page. Question~I
want to ask you how to set up to achieve a complete view of the content of the entire chat dialogue area, and fix the entire chat room window at the bottom of the entire web page without scrolling on the right side?
Thank you for watching my question.
.wrap {
width: 90%;
margin: 0 auto;
}
.head {
width: 100%;
height: 60px;
background-color: blue;
margin-bottom: 80px;
}
.chat {
background-color: #ccc;
height: calc(100vh - 80px);
display: flex;
}
.chat_list {
flex: 1;
height: 100%;
background-color: #ee3f4d;
}
.chat_area {
position: relative;
flex: 2;
background-color: #35333c;
}
.chat_head {
background-color: #51c4d3;
height: 60px;
}
.chat_body {
overflow-y: auto;
height: calc(100vh - 295px);
}
.chat_body .other_txt {
display: block;
background: yellow;
padding: 8px;
border-radius: 0 20px 20px 20px;
margin: 10px;
}
.chat_body span {
color: #ccc;
}
.chat_body .own_txt {
display: block;
background: yellow;
margin-left: auto;
padding: 8px;
border-radius: 0 20px 20px 20px;
margin: 10px;
white-space: pre-wrap;
}
.chat_input {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #43b244;
height: 150px;
}
.chat_input .input_message {
resize: none;
width: 90%;
height: 60px;
margin: 12px 24px;
}
<!-- 聊天室畫面結構 -->
<div class="wrap">
<div class="head">head</div>
<div class="content">
<div class="chat">
<div class="chat_list">contact__list</div>
<div class="chat_area">
<div class="chat_head">contact__tool</div>
<div class="chat_body">
<div class="other">
<p class="other_txt">
hello~
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
hello~how aru you?
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
</p>
<span>20210827 10:00</span>
</div>
<div class="own">
<p class="own_txt">
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
I'm fine, thank you~ how about you
</p>
<span>20210827 10:00</span>
</div>
</div>
<div class="chat_input">
<textarea class="input_message" placeholder="enterMessage"></textarea>
</div>
</div>
</div>
</div>
</div>
For question 1, if you want to remove the slide bar for div chat_body, you can change y-overflow accordingly, like hidden.
For question 2, if you want to remove the slide bar for whole html page, you can change the css property of .chat: height: calc(100vh - 140px), then the slide bar for whole html page will be disappered.
Honestly I still cannot understand your requirements after multiple readings, you can share more details about your requirements here.
Related
I have a simple HTML, CSS website that is also making use of JavaScript for animated navigation for a mobile only site.
Current Naviation
The HTML for the button:
<div class="navigations">
<div class="left">
<div class="leftinner" id="left">
<i class="fas fa-arrow-left"></i>
<span id="lefttext">CONTACT</span>
</div>
</div>
<div class="right">
<div class="rightinner" id="right">
<i class="fas fa-arrow-right"></i>
<span id="righttext">WEBSITE</span>
</div>
</div>
</div>
When the user clicks on the contact button it triggers a JS function that runs the following:
document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';
The issue I am having is when the user clicks the CONTACT button it triggers the WEBSITE button as well, almost as if the WEBSITE button has a hidden overlap over the CONTACT button. I have attempted using Flex Box, Float left, Float left and right, Display inline block, Display table with table-cell, column etc. The issue only persists on Chrome for Android, but works fine on iPhone and other browsers.
What would be the best way to fix this issue?
Apologies I can't share more than just the screenshot due to NDA reasons.
Edit
Here is the CSS for the navigation buttons, this uses the float left and right attempt.
.navigations .left {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: left;
}
.navigations .left .leftinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-right: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
.navigations .right {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: right;
}
.navigations .right .rightinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-left: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
So I managed to solve the issue with this.
Seems the float right on the text inside the right hand side button was the culprit. Changing how the right button moved its text to the right by making use of text-align: right;instead of float: right; solved the issue.
It seems that the floating right of text made the text's width 100% and overlap the button on the left.
i have problem with my website i have whitespace background between img and text on the right side on the screen, take a look of my screenshots to see what i mean,i will provide the code to see if i actualy make mistake in my code to programming this website i use bootstrap to be responsive on mobile but however you see in my screenshots is not. how can i fix this can anyone have solution? i try whit bootstrap use d-block but its still showing me whitespace.
HTML
.myimg {
position: absolute;
top: 60em;
left: 60em;
width: 100%;
height: auto;
}
.myimg2 {
border-radius: 100%;
width: 35%;
}
.name {
position: absolute;
top: 37em;
left: 23em;
color: azure;
text-shadow: 2px 2px 2px black;
}
.mytext {
position: absolute;
top: 48em;
color: wheat;
text-shadow: 2px 2px 2px black;
}
<div id="aboutMe">
<img src="Images/background.jpg" width="1920" height="1080" alt="bg">
<div class="aboutMeContent ">
<div class="container">
<div class="row">
<div class="myimg">
<img src="Images/me.jpg" alt="me" class="myimg2">
</div>
<h1 class="name">Stefan Momcilovic</h1>
<h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
</div>
</div>
</div>
</div>
The solution is to set the CSS left propery to 0 so that there is no gap between the left side of the HTMLElement and page.
.myimg {
position: absolute;
top: 60em;
left: 0;
width: 100%;
height: auto;
}
.myimg2 {
border-radius: 100%;
width: 35%;
}
.name {
position: absolute;
top: 37em;
left: 0;
color: azure;
text-shadow: 2px 2px 2px black;
}
.mytext {
position: absolute;
top: 48em;
left: 0;
color: wheat;
text-shadow: 2px 2px 2px black;
}
<div id="aboutMe">
<img src="Images/background.jpg" width="1920" height="1080" alt="bg">
<div class="aboutMeContent ">
<div class="container">
<div class="row">
<div class="myimg">
<img src="Images/me.jpg" alt="me" class="myimg2">
</div>
<h1 class="name">Stefan Momcilovic</h1>
<h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
</div>
</div>
</div>
</div>
1- if you want to make the responsive page and improve your code, an absolute position not suitable for the responsive page.
2- when you use absolute position, consider the relative position for the parent node as well as consider the box model of the parent;
for your question, if you remove left or assign left:0 then overflow-x eliminated.
for example :
.myimg {
position: absolute;
top: 0;
text-align:center;
width: 100%;
height: auto;
}
I'm seeing a lot of "how to vertically align stuff" type questions but I can't seem to find anything that solves this particular problem.
I have 3 "sections" in a jquery dialog and I want them to sit vertically in the space without leaving big gaps in between them.
I don't know their heights as their content is dynamic and changes.
Here's a fiddle showing what I mean:
http://jsfiddle.net/PTQS8/
In it's simplest form the code looks something like this (just imagine that all the br tags are real content though)
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/>
</section>
</div>
Then my current css:
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
I want the bottom section to automatically fill the space above it if possible.
Any ideas?
EDIT:
Maybe I wasn't clear enough ...
This is my ideal result:
http://jsfiddle.net/PTQS8/2/
However bear in mind that the content in the sections is all dynamic so the style definition for "section3" would need to have a dynamic negative top margin in order for this to work.
Figuring this out could be possible with javascript I suppose but I was hoping there might be a more elegant solution.
<!--The simplest way is to use the span and float properties.-->
<!--Make use of table if you dont like the gap between the left and right panes-->
<div class="jqDialog">
<span style="float: left"><section>
<br/><br/>
</section></span>
<span style="float: right"><section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section></span><span style="float: left">
<section>
<br/><br/><br/><br/><br/>
</section></span>
</div>
If you want them vertically centered, change width:200px to width:100%;
http://jsfiddle.net/PTQS8/3/
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section class="section2">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section class="section3">
<br/><br/><br/><br/><br/>
</section>
</div>
and the css ...
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
.section2 { float: right; }
How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label> </label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami
You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163
I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami
I have a strange problem... I am developing a web app to search house rentals , and the website is showing great in FF, Chrome, but in IE i get a white page....
Could you please hint what's up with the code? Maybe some java-script problem?
I have digged out , but I am stucked.
The problem is :
</head>
<!--[if lt IE 7]>
<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
<div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>-->;
</head>
You have 2 close tag for head, and between you have a big empty div. That's what is displayed on IE.
I'd suggest going through these HTML errors as a first stage to debugging!: http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2frentforme.net%2f. There are 81 errors listed there. From a quick look, it appears the <HEAD> and <BODY> start/end tags are overlapping.