Provides between the text content and my footer bar - html

I am going to make so that you can turn things up on the website like facebook, but this is how I have come into problems with my text content and my footer bar where it just gives some air in between these two.
Html here:
<div class="statusOpslag">
<asp:TextBox ID="TextBoxStatusTekst" CssClass="statusTekst" runat="server" TextMode="MultiLine"></asp:TextBox>
<div class="Statusfooter">
<asp:Button ID="ButtonSend" OnClick="ButtonSend_Click" runat="server" Text="Slå op" CssClass="statusKlikButtonOUT" />
</div>
</div>
CSS here
.statusOpslag {
background: #ffffff;
margin-bottom: 30px;
margin-top: 0;
margin: 10px;
padding: 0;
width: 95%;
}
.statusTekst {
width: 100%;
overflow: hidden;
word-wrap: break-word;
height: 120px;
max-height: 120px;
margin:0;
}
.Statusfooter {
background: #F4F4F4;
padding: 15px;
margin:0px;
}
.statusKlikButtonOUT {
background-color: #5cb85c;
border: 0;
color: green;
}
You can see it problems here
EIDT CSS
I have done as you have described in your answer and it helps nothing. - sorry
.statusOpslag {
background: #ffffff;
padding: 0;
margin: 0;
}
.statusTekst {
width: 100%;
overflow: hidden;
word-wrap: break-word;
height: 120px;
max-height: 120px;
margin:0;
}
.Statusfooter {
background: #F4F4F4;
padding: 15px;
margin:0px;
}
.statusKlikButtonOUT {
background-color: #5cb85c;
border: 0;
color: green;
}

Get rid of all the margins you set. Then, add this in css:
*{
margin: 0:
padding: 0:
}
Once it's set, you don't need to set
margin: 0;
No where again.
Also, in your statusOpslog class you set margin twice:
margin: 10px;
margin-bottom: 30px;
You should only set it once.
If you do not want that margin you got in your question you should not set margin at all for that element.

Related

White space between body and div

I have been looking everywhere for a solution to my problem, but nothing seems to work. It always bugged me that the top of my website always had a gap on the top and all the answers to the problem did nothing. I inspected the website in firefox and found that there was a whitespace between the body and first div (I tried putting the code on the same row but that did nothing). Any Idea on how to remove the whitespace? (I can remove it in inspect on firefox and it goes away there)
Here is the HTML and CSS:
/* CSS Document */
html,
body {
height: 100%;
}
* {
overflow: auto;
margin: 0;
}
body {
margin: 0;
background-color: #111111;
padding: 0;
font-family: verdana;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
color: white;
text-align: left;
}
video {
width: 100%;
z-index: 0;
}
.menubar {
left: 100;
}
.ulmenubar {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.ulmenubar a {
float: left;
}
.space {
margin: 0;
padding: 0;
}
.rightside {
float: right;
}
.ulmenubar a {
display: block;
color: whitesmoke;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.ulmenubar a:hover {
color: grey;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #181818;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
#contact {
width: 200px;
margin-left: auto;
margin-right: auto;
}
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
<div class="menubar">
<ul class="ulmenubar">
<div class="rightside">
Home
Portfolio
About
Contact
</div>
</ul>
</div>
<div class="space"><video id="background-video" autoplay="" loop="" muted=""><source src="vid.mp4" type="video/mp4"></video></div>
<div id="vids"></div>
<div class="row">
<div class="column">
<img src="https://media0.giphy.com/media/xT8qBoDhee6aWOhLqw/giphy.gif?cid=790b7611a86749120009311d9c18651c96962c8e7e27def2&rid=giphy.gif&ct=g" alt="Sea" style="width:100%">
</div>
<div class="column">
<a onclick="openWin()"><img src="https://media4.giphy.com/media/UxTZDNv0Zej4s/giphy.gif?cid=790b76118b066a194adc23988667623a5aea3c7b55f3c44b&rid=giphy.gif&ct=g" alt="Forest" style="width:100%"></a>
</div>
<div class="column">
<img src="https://media4.giphy.com/media/l41lQIclE3lItAlfq/giphy.gif?cid=ecf05e47mgmmt0kas0kp9zc0435gcanw878chwmk129z9uhf&rid=giphy.gif&ct=g" alt="Sky" style="width:100%">
</div>
</div>
* {
margin: 0px;
padding: 0px;
}
Add this to your CSS
After many hours of trying, I figured out what the problem was. This may not be the case but when I went into the HTML file on text edit, I saw two <body> on the top, I deleted one and also deleted the space between <head> and <body>. It worked.

Automatically resize input according to button size?

I have an input and a button in the same div, and want them to be in a single line without any gap in between, regardless of screen size, but cannot get that to happen. The button seems to have a horizontal padding, although I set both padding and margin to none, so % wouldn't be a solution. Also, I would like the button to wrap around its contents, so even if it could work, it wouldn't be the greatest solution. Is there a way to set the location and size of the button and resize the input accordingly with CSS? Or is some JavaScript needed to do this?
Desired Output:
Current Output:
Current code (CSS is insignificant, as it doesn't work)
.chatinp {
height: 10px;
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
size: fixed;
height: auto;
border-top: solid;
}
#CHAT {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
left: 0;
height: 100%;
width: 95%;
background: none;
border: solid 1px #fff;
padding: none;
margin: none;
}
#SEND {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
right: 0;
height: 100%;
width: 10%;
background-color: #090;
border: solid 1px #fff;
padding: none;
margin: none;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>
You can use several tools to achieve that :
CSS property float (example below)
will run even on old browser
doesn't fit for complex use (in your case, that fine)
CSS Grid Layout
CSS Flex element
Float Example
.chatinp {
height: 30px;
width: 100%;
}
#CHAT, #SEND{
box-sizing: border-box; /* permit the use of border and padding without overstepping the width */
height: 100%; /* use all of the avaible height given by the parent */
padding: none;
margin: none;
position: relative; /* needed for float */
float: left; /* make element align from left to right, then top to bottom */
}
#CHAT {
width: 85%;
border: 3px solid grey;
}
#SEND {
width: 15%;
border: 3px solid green;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND" id="SEND">SEND</button>
</div>
You might need to use flexboxes if I understood your demand.
I added display: flex on parent container (.chatnip) and flex : <value> on child elements to tell them how much space they should take.
There's no gap between the boxes.
.chatinp {
height: 10px;
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
size: fixed;
height: auto;
border-top: solid;
display: flex
}
#CHAT {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
left: 0;
height: 100%;
background: none;
border: solid 1px #fff;
color: white;
flex: 9;
}
#SEND {
font-family: monospace;
font-size: 20px;
position: relative;
bottom: 0;
right: 0;
height: 100%;
background-color: #090;
border: solid 1px #fff;
color: white;
padding: none;
margin: none;
flex: 1;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>
Since you are making use of flexbox, try to make the most advantage of it. For chatinp class use display: flex and for #CHAT use flex: 1 if needed add a width for #SEND
.chatinp {
width: 100%;
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
border-top: solid;
display: flex;
}
#CHAT {
font-family: monospace;
font-size: 20px;
/* position: relative; */
/* bottom: 0; */
left: 0;
height: 100%;
/* width: 95%; */
background: none;
border: solid 1px #fff;
padding: none;
margin: none;
flex: 1;
}
#SEND {
font-family: monospace;
font-size: 20px;
/* position: relative; */
/* bottom: 0; */
/* right: 0; */
/* height: 100%; */
/* width: 10%; */
background-color: #090;
border: solid 1px #fff;
padding: none;
margin: none;
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT" />
<button name="SEND" id="SEND">SEND</button>
</div>
I prefer to use grid where you can specify how much portion and number of elements to be placed in a single row
div{
display:grid;
grid-template-columns:80vw auto;/*auto auto , if you don't need any specific space for the items*/
}
<div class="chatinp">
<input type="text" name="CHAT" id="CHAT">
<button name="SEND", id="SEND">SEND</button>
</div>
add these to your css: (and get rid of height: 100%; from #CHAT)
.chatinp {
display: flex;
}
#CHAT {
height: auto;
}

How to remove whitespace before div

I am trying to do some basic web development, but for some reason, there is a huge whitespace between the opening body tag and the first div. How do I move the div to the top /or remove whitespace/ without using 'position: fixed;'?
body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.top_bar {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
color: rgb(179, 0, 0);
width: 100%;
height: auto;
font-size: 200%;
position: absolute;
}
<div class="top_bar">
generic string
<br>
<br>
<br>
</div>
That is because html, by default has 8px margin. To remove it, use the code below.
* {
margin: 0px;
padding: 0px;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top_bar {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
color: rgb(179, 0, 0);
width: 100%;
height: auto;
font-size: 200%;
position: absolute;
}
<div class="top_bar">
generic string
<br>
<br>
<br>
</div>
Try It Once
html,body{
margin:0px;
padding:0px;
}
Sorry to post, but apparently I forgot to remove the extra newlines from the header that I send with CGI. It worked out properly.

Vertical div expansion w/o fixed heights

Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/

Background color appearing on h1 tag when I did not set it CSS/HTML

I'm trying to add a h1 tag into my header div tag, but a background color keeps appearing when I did not set it in the css and I cannot figure out why and how to remove it.
<div id="header_top">
<h1>Some Text</h1>
</div>
<div id="navbar_top"></div>
<div id="wrapper">
<div id="main_content"></div>
<div id="side_bar"></div>
<div id="footer"></div>
</div>
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
padding-top: 0px;
padding-bottom: 0px;
border: 2px solid red;
}
#header_top {
background-color: #222325;
height: 60px;
border-bottom:1px solid #0F1012;
}
#header_top h1 {
color: white;
}
#navbar_top {
background-color: #222325;
height: 55px;
border-bottom: 1px solid green;
}
Fiddle
You have this code :
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
That basically sets the background to each element on the page. Including your h1 tag.
Remove the background-color and you should be fine.
I'm not quite sure what do you mean. But probably you have to switch this:
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
to this:
body {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
Here is the jsfiddle link.