I have a simple website with 3 controls, yet somehow they are shown in a really weird way.
I've added the red background to show the gap. So far I've tried setting margin/padding to 0, also tried box-sizing but it changed only the width of these elements, didnt make the gaps go away.
#font-face {
font-family: KongText;
src: url('kongtext.ttf');
}
body {
background-color: Highlight;
font-family: KongText
}
h1 {
font-size: 4em;
text-align: center;
}
/*default.cshtml*/
#creator {
width: 350px;
margin: auto;
margin-top: 10%;
display: flex;
}
#joinRoom {
background-color: coral;
height: 50px;
width: 346px;
font-size: 30px;
display: none;
}
#creatorButtons {
width: 350px;
margin: auto;
}
#join {
background-color: coral;
width: 350px;
height: 50px;
font-family: KongText;
font-size: 1.4em;
}
#create {
background-color: coral;
width: 350px;
height: 50px;
font-family: KongText;
font-size: 1.3em;
margin-top: 1px;
}
#footer {
font-size: 13px;
position: fixed;
bottom: 0;
right: 0;
}
/*room.cshtml*/
#chat {
width: 300px;
margin: 0 auto;
}
#chatBox {
resize: none;
width: inherit;
}
#message {
width: inherit;
}
#msgSend {
width: inherit;
}
<body>
<div id="container">
<div id="header">
<h1>Chat Together 826</h1>
</div>
<div id="main">
<div id="chat">
<textarea id="chatBox" rows="40" cols="50" readonly="readonly"></textarea>
<input type="text" id="message" placeholder="Your message" />
<input type="button" id="msgSend" value="Send" />
</div>
</div>
<div id="footer">
© 2016 Chat Together
</div>
</div>
</body>
</html>
Padding has nothing to do with it. You need to change how the browser displays the textarea.
Try updating your CSS for your chatBox element to this:
#chatBox {
display: block; /* Add this line */
resize: none;
width: inherit;
}
Related
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.
I have a header with a picture in it, and I'd like to have a navigation menu below that that matches the width as I narrow my window. Currently, my header and picture scale fine, but my menu buttons do not. At an early point, the window becomes too narrow and the menu buttons go onto a separate line. How can I make the menu match the image width? Below are the relevant code and an image to show the issue.
http://imgur.com/a/go2Of
HTML for header and menu:
<div id="wrapper1">
<div id="header">
<div id="logo">
<img src="Images/logolow.jpeg"/>
</picture>
</div>
<div id="login">
<fieldset>
<Legend>Login</Legend>
Username <input type="text" name="username"/>
Password <input type="password" name="password"/>
<input type="submit" value="Login">
<div id="register">
Not a member? Click here to register!
</div>
</fieldset>
</div>
</div>
<div id="sidebar">
Home Search All Profs Submit Contact
</div>
</div>
CSS:
#wrapper1{
width: 85%;
margin-left: auto;
margin-right: auto;
font-family: Helvetica, Verdana, Arial;
}
#header {
width: 100%;
position: relative;
}
#logo {
height: 450px;
width: 100%;
}
#logo img {
height: 100%;
width: 100%;
}
#login {
bottom: 0px;
right: 0px;
width: 15%;
color: white;
position: absolute;
}
#login a {
color: inherit
}
#register {
font-size: 14px;
}
#login fieldset {
display: block;
border: 2px solid white;
}
#sidebar {
margin: 14px;
width: 100%;
}
#sidebar a {
height: 40px;
padding-top: 10px;
padding-left: 6.55%;
padding-right: 6.55%;
text-align: center;
font-size: 12pt;
font-weight: bold;
background-color: black;
color: white;
border-style: outset;
border-width: 1px;
text-decoration: none;
}
Here is one solution.
Use percentage widths on your links that add up to 100%. Make sure not to use display: inline-block; on those links as extra whitespace is added to inline elements and would make their total size over 100% of the parent element.
header img {
display: block;
max-width: 100%;
}
nav {
margin-left: -5px;
margin-right: -5px;
}
nav a {
box-sizing: border-box;
display: block;
float: left;
width: calc( 25% - 10px );
margin: 0 5px;
padding: 0.5rem 1rem;
color: white;
text-align: center;
background-color: #999;
}
<header>
<img src="http://placehold.it/1600x400?text=hero-image">
<nav>
One
Two
Three
Four
</nav>
</header>
For larger screens you'll need:
A larger image, or
A larger image and/or switch max-width: 100%; to width: 100%; (careful, if image is stretched beyond it's native size it will pixelate), or
Restrain the max width of the navigation links.
Examine this code:
HTML
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
CSS
.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size:34px;
font-weight: 800;
}
.one:after { clear: both; }
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
}
JSfiddle
Why is the clear both with the after element not working in this example above? while the clearing with <div style="clear:both"></div> inside the layout it self do work.
Try this, add display: block to input:
CSS
.one {
display: block;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ffffff;
font-size: 34px;
font-weight: 800;
text-align: left;
}
.two {
font-size: 150%;
width: 200px;
height: 20px;
display: block;
margin:0 auto;
}
HTML
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
DEMO HERE
The :after clear float trick works on floated element inside the pseudo elements parent.
If you would put the <div style="clear:both"></div> inside the h1 it will not clear the float either, so it has to be a sibling or a parent element of the floated element
So in your case just clear the float on the input
.one {
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #ccc;
font-size:34px;
font-weight: 800;
}
.two {
display: block;
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
clear: both;
}
<h1 class="one">Sometext over here</h1>
<input type="text" placeholder="E-mail" class="two">
It would be good if you provide clearfix to parent element try this snippet hope this could help you. I'm also including :before but this is the best way to clear the floats. here is the jsfiddle link https://jsfiddle.net/rhulkashyap/jjv6t6gd/
.one {
display: block;
float: left;
width: 450px;
height: 60px;
padding-top: 25px;
color: #111;
font-size: 34px;
font-weight: 800;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.two {
margin: 0 auto;
font-size: 150%;
width: 200px;
height: 20px;
}
<div class="clearfix">
<h1 class="one">Sometext over here</h1>
</div>
<input type="text" placeholder="E-mail" class="two">
I am busy on this page (http://s.nogax.ga/editor-css.html) and I am trying to make a full height sidebar.
Basically, the div sidebar should always extend to the bottom of your screen.
(and with it the black line on the right of it)
JSFiddle
html
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>
css
html, body {
background-color: grey;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
heigth: 100%;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
heigth: 20px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
}
.content {
position: absolute;
width: 100%;
heigth: 100%;
}
.sidebar {
width: 15%;
position: absolute;
background-color: grey;
border-right: 2px solid;
}
.editor {
position: absolute;
width: 84.5%;
right: 0;
background-color: grey;
}
You can just make the sidebar position:fixed if you want it to always be displayed on the side:
.sidebar {
height: 100%;
position: fixed;
}
Here is an example
Apply following css will make output as you expected:
.sidebar {
width: 15%;
position: fixed;
background-color: grey;
border-right: 2px solid;
bottom:0;
}
Check https://jsfiddle.net/r8u7pkd6/2/.
For infos and nowdays browsers, you could use display:flex; too.
BTW: You misstyped height != heigth
#font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
html, body {
background-color: grey;
margin: 0;
width :100%;
height:100%;
flex-direction:column
}
body,.content {
display:flex;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
margin: 0;
}
.content {
flex:1;
}
.sidebar {
width: 15%;
background-color: grey;
border-right: 2px solid;
}
.editor {
flex:1; /* will use remaining space*/
/*width: 84.5%;
right: 0; useless here*/
background-color: lightgrey;
}
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>
I am making a login page and I would to position a custom image border to the center underneath the form.
The image is not positioning to the margin-left properly.
Can anyone suggest a solution?
Below is the code:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#import url(http://fonts.googleapis.com/css?family=Roboto);
* {
text-align: center;
}
img {
z-index: -1;
width: 350px;
height: 200px;
margin-top: 200px;
background-size: cover;
position: absolute;
}
body {
background-color: #ecf0f1;
}
#username {
margin-top: 250px;
margin-bottom: inherit;
margin-right: inherit;
width: 250px;
height: 35px;
font-size: 20px;
font-family: 'Droid Sans', serif;
border: 0px solid;
background-color: transparent;
}
#username:focus {
outline: none;
}
#password {
margin-top: 5px;
margin-bottom: inherit;
margin-right: inherit;
width: 250px;
height: 35px;
font-size: 20px;
font-family: 'Droid Sans', serif;
border: 0px solid;
background-color: transparent;
}
#password:focus {
outline: none;
}
#submit {
margin-top: 35px;
border: 0;
background: url(submit1.png);
background-repeat: no-repeat;
width: 200px;
height: 50px;
border: 0;
}
#submit:focus {
outline: none;
}
#submit:hover {
background-image: url(submit2.png);
}
#footer {
clear: both;
position: relative;
z-index: 5;
margin-top: 17em;
background-color: transparent;
font-family: 'Roboto', serif;
color: #bdc3c7;
height: 20px;
font-size: 10px;
}
<div id="main">
<div id="login">
<form action="Scripts/xxx.php">
<img src="border_transparent.png">
<input id="username" type="text" name="username" placeholder="Enter Username" />
<br>
<input id="password" type="password" name="password" placeholder="Enter Secret Password" />
<br>
<button id="submit" value="" />
</form>
</div>
</div>
<div id="container">
<div id="content"></div>
</div>
<div id="footer">© Project Blackhat Operatives 2015</div>
This is currently how my page looks: http://s7.postimg.org/vvfi8m1uj/Screen_Shot_2015_01_11_at_7_07_21_PM.png
This is what I am trying for the page to look like: http://s11.postimg.org/avy2caylv/Screen_Shot_2015_01_11_at_7_09_01_PM.png
It is centered, the issue is the background image behind it that you are absolute positioning. That isn't centered, you can add left: 50% and a negative margin to bring it back to the center (left positions it from the corner not the center):
img {
z-index: -1;
width: 350px;
height: 200px;
background-size: cover;
position:absolute;
left: 50%; //add
margin: 200px 0 0 -175px; //add
}
FIDDLE
What you should be doing though is adding that image as a background-image to either your form or #login containers. Positioning an img tag is not a great way of handling this.
Try
#submit:hover {
background-image: url("submit2.png");
}
Need quotes/double quotes.