Background: I am creating a chat-room page in html/css. The div rm-container contains an area where messages are displayed(div class rm-messages), an area to input the message, as well as a div which contains all the users currently in the chatroom (rm-users).
Problem: I would like rm-users to be on the top right of rm-container, but I am unable to get it to work. I followed the tutorial on positioning from w3schools and in my css, changing rm-container position to relative, and rm-users position to absolute, yet I am unable to get the desired result. Instead, what I get is rm-users it is below rm-messages, as would be expected if the default position had not been changed. I have attached both the css and html files below.
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
background-color: #F0F0E6;
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0
}
.rm-name {
font-size: 20px;
margin-left:auto;
margin-right:auto;
margin-top:15px;
text-align:center;
max-width:100px;
}
.userbox {
border: 1px solid black;
max-width:300px;
padding-bottom:50px;
margin-left:15px;
margin-top:15px;
}
.rm-container {
position:relative;
background-color: white;
border: 1px groove black;
margin-left:auto;
margin-right: auto;
margin-top: 40px;
max-width: 1000px;
padding-bottom: 100px
}
.rm-messages {
position:static;
border: 1px groove black;
margin-top:10px;
max-width: 700px;
margin-left:15px;
height:400px;
}
.rm-users {
position:absolute;
margin-top: 15px;
border: 1px groove black;
margin-right: 15px;
width: 200px;
height: 50px;
overflow-y: scroll;
overflow-x: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>room-name</title>
<link rel="stylesheet" href="../public/css/room.css">
</head>
<body>
<img src="something" class="chat_room_pic">
<div class="rm-userbox">
<img src="something" class="userPic">
<h3 class="userName">Username | more chatrooms</h3>
</div>
<div class="rm-container">
<div id="rm-name"> room-name </div>
<div class="rm-messages">
<ul class="messages">
<li>
<div class="msgbox">
<div class="pic"><img src="something>">Username </div>
<div class="msg"><p>Hello there!</p></div>
</div>
</li>
</ul>
</div>
<div class="rm-users">
<ul class="users">
<li><img src="something">
</div>
</div>
</body>
</html>
Just add top: -70px to .rm-users
.rm-users {
border: 1px groove black;
height: 50px;
margin-right: 15px;
margin-top: 15px;
overflow: scroll;
position: absolute;
top: -70px;
width: 200px;
}
Related
I am creating a profile page and on that page there is a div which spans 100 percent of the page. After I set the height and margins and refresh page there is a colored div, the height that I want with no white space. When I try to do the same for my end of page and set overflow hidden, instead of the page ending there,I am able to scroll and see the page continuing. My goal is to have all my content in between the whitespace of top and bottom divs. This is not homework, it is my personal project.
Thank You in advance for your help and time.
Attached is my html code:
*{
margin:0px;
padding:0px;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
.vanilla{
position: absolute;
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
The following is what I originally attempted:
#body2{
background-color: rgb(255,253,208);
overflow-x: hidden;
}
#me{
position: absolute;
top: 150px;
left: 435px;
}
.section1{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
:hover{
color: white;
}
#about{
position: relative;
left: 535px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#age{
position: relative;
top: 70px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#education{
position: relative;
top: 440px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
padding-bottom: 0px;
}
#languages{
position: relative;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 10px;
bottom: 40px;
line-height: 36px;
}
#languages ul li {
list-style-type:none;
}
#comp_lang{
position: relative;
bottom: 380px;
left: 815px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
line-height: 36px;
}
#comp_lang ul li {
list-style-type:none;
}
#comp_lang2{
position: relative;
top: -245px;
left: 870px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#comp_lang2 ul li{
list-style-type: none;
}
.remarks{
margin: 0px;
width: 165px;
height: 200 px;
}
#endgame{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
z-index: -2;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="profile.css">
</head>
<body id="body2">
<div id="me">
<img src="profile2.jpg"alt="Hello" height=500px;>
</div>
<div class="section1">
<h1 id="about"><b>Who is Intisar?</b></h1>
</div>
<div id="age">
<h2> Age : </h2>
<h3> I am 23 years old!</h3>
</div>
<div id="education">
<h2> Education : </h2>
<h3>
I am a high-school graduate.<br>
I am in my third year<br>
at something College.<br>
I am studying<br>
Software Development and Design.<br>
Interest in Web Development and Design<br>
</h3>
</div>
<div id="languages">
<h2> Trilingual in :</h2>
<ul>
<li>English</li>
<li>Bengali</li>
<li>Spanish</li>
</ul>
</div>
<div id="comp_lang">
<h2> Computer Lanuguages I am competent in : <br> </h2>
<ul>
<li>Python</li>
<li>C++</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>SQL</li>
<li>PHP</li>
</ul>
</div>
<div id="comp_lang2">
<h2> Lanuguages and software in Progress : </h2>
<ul>
<li>Wordpress</li>
<li>Ruby</li>
</ul>
</div>
<div class="endgame">
<h3>Something</h3>
</div>
</body>
</html>
You can achieve this by css grid, the current approach is not very good.
I wrote a little bit of code for you. If you don't understand it, let me know.
https://www.w3schools.com/cssref/pr_grid-template-rows.asp
It might be tricky for you if you are not fimiliar with grid, so let me know if you need help.
Preview here
<div class="parent">
<header><h1>Header</h1></header>
<main>
<img src="https://images.unsplash.com/photo-1605032659978-a5bd04094a16?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1603943817715-f50e0a2c413a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1605910470315-abac78c52d73?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
</main>
<footer><h1>Footer Content</h1></footer>
</div>
<style>
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
width: 100vw;
}
main{
overflow:auto;
}
// css below this is just for styling
footer, header, main{
padding: 1rem;
text-align: center;
}
footer{
background-color:red;
}
header{
background-color:yellow
}
</style>
Use the Below Code to keep everything within the view-port and work on whitespace area .
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
}
.vanilla{
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
Hey all and thanks for taking the time to read,
I'm trying to create my online portfilo. I would like the navigation bar to have about a 10% margin from the top of the page. However, when I try a vertical scroll bar is added to the browser. I feel like this is something to do with setting the body, html to 100%. However, I'm not sure why the navigation bar isn't just applying that top margin to the content div its in instead of the whole page. All the other elements in the content div work fine.
-----------------------------------------------------------------------------
Below is my Code.
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
margin-top: 10%;
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
This is my first time posting on stackoverflow so sorry if I have posted this incorrectly or unclearly. Please advise me if so. Thanks again for your time.
Nevermind I solved it, I just placed a div with a height of 10% at the top of the page. Thanks anyway.
If you prefer not to add the extra div you could do the following: Remove the margin from the nav_bar and instead add a padding-top of 10% to the #content div, in combination with box-sizing: border-box you will no longer get the scroll bar.
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
box-sizing: border-box;
padding-top: 10%;
}
I believe collapsing margins are the reason for the behaviour you're seeing. Essentially, if you have an child element with a top margin within a parent element without a top border or any top padding, the child's margin will be applied to the parent element.
Notice how you don't see any red in the below snippet.
body {
background: #ccc;
padding: 20px;
margin: 0;
}
.parent {
background: red;
}
.child {
background: green;
margin-top: 50px;
}
<html>
<body>
<div class="parent">
<div class="child">
Hello!
</div>
</div>
</body>
</html>
How I'd approach the problem is to remove the top-margin on the navbar completely and add 10% padding-top to the body. You can use box-sizing: border-box to make the height declaration of 100% inclusive of padding:
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
body {
padding-top: 10%;
box-sizing: border-box;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
I want to center the submit button on the last div, but i can´t do it.
I try a lot of things, like margin:auto, align-left and right and others asks you make at this page, but it´s imposible for me.
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>Mi Revista</title>
<style>
body {
background: #7f7f7f;
}
#container {
width: 800px;
margin: auto;
position: relative;
}
#header {
background: #5783a0;
height: 75px;
}
#contenido {
padding: 1px;
background-color: white;
}
#left {
float:left;
width: 470px;
background-color: pink;
height: 300px;
}
#bordei {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 0px 2px 10px;
font-weight: bold;
}
#borded {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 10px 2px 0px;
font-weight: bold;
}
#derecha {
float:left;
width: 330px;
background-color: yellow;
height: 300px;
}
#footer {
height: 50px;
background-color: aquamarine;
clear:both;
}
div form {
display:block
}
#acept {
margin:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> Mi Revista</div>
<div id="contenido"> texto de arriba</div>
<div id="left">
<div id="bordei"> borde uno</div>
formulario izquierda
</div>
<div id="derecha">
<div id="borded">borde derecha </div>
Formulario derecha
</div>
<div id="footer">
<form id="acept">
<input type="submit" name="submit" value="Aceptar"/>
</form>
</div>
</div>
</body>
</html>
I wait for your awnswer, beacuse I can´t do it of any form.
Thaks
Just give alignment center to footer div
<div id="footer" align="center">
Change your CSS slightly as follows
#acept {
width:20px;
margin:0 auto;
}
The problem was that you wasnt specifying a width for the form and due to that it was taking 100% width.And thus the margin:0 auto doesnt work.
I've done a fiddle.Please check it..
Use the text-align:center in #acept is the simplest way.
You could as well use the <center> tag, but is is deprecated. So the best way would be to change
#acept{
margin:auto;
}
to
#acept{
margin:auto;
text-align:center;
}
you can use :
#acept {
margin-left:40%;
width:10%;
}
JSFIDDLE Link
I have created this template for an eBay listing. When I open it in any browser I can see the borders perfectly. However when I paste the code into eBays HTML description and preview it, I see nothing. If I add text and images into the code they will show within the confines of the borders but the border will still be invisible.
Any ideas?
#pdcontainer {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.holder {
margin: 0 auto;
width: 1100px;
}
.body {
border: 5px solid #66CCFF;
float: left;
width: 780px;
height: 2700px;
border-right-width: 2px;
}
.sidebar {
border: 5px solid #66CCFF;
float: left;
width: 215px;
height: 2700px;
border-left-width: 3px;
}
.header {
border: 5px solid #66CCFF;
float: left;
width: 1000px;
height: 132px;
}
<!DOCTYPE html>
<html lang="en">
<div id="pdcontainer">
<head>
</head>
<html>
<body>
<div class="header">
</div>
<div class="holder">
<div class="body">
</div>
<div class="sidebar">
</div>
</div>
</body>
</html>
</body>
Try change names of divs - if ebay use same name, it can replace your CSS.
This should be an easy one for someone. I am creating tabs with CSS (please, I don't need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my "tab bar" don't line up. I do not know why.
The HTML:
<html>
<head>
<link rel="stylesheet" href="prototype.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
</div>
</div>
</div>
</body>
<html>
The CSS:
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
}
I appreciate any help.
Try: http://jsfiddle.net/dYz9k/1/
.tab {
border: 1px solid black;
border-top: 0;
margin-left: 5px;
padding: 3px;
display: inline-block
}
I set display: inline-block, and removed the margin-top and border-top.
display: inline-block allows the padding to work as you're expecting.
Hm..not 100% certain if that'a what you're asking, but try setting padding:0 on .tab class
Have you considered using a list, better for Accessibility
Example here http://jsfiddle.net/hdhkn/
HTML
<html>
<head>
</head>
<body>
<div id="container">
<div id="content">
<ul id="tabs">
<li id="tab0" class="tab">
No Circuit
</li>
<li id="tab1" class="tab">
Digital Inputs
</li>
</ul>
</div>
</div>
</body>
<html>
CSS
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: float;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
position: relative;
width: 868px;
}
#tabs {
border-top: 1px solid black;
width: 100%;
list-style:none;
height:40px;
}
.tab {
border: 1px solid black;
border-top:none;
margin-left: 5px;
padding: 3px;
float:left;
display:block;
}
Is this what you want to accomplish? Or do you want your tabs(.tab) to be on top of #tabs?
I've added overflow: hidden to #tabs and changed the margin-left to margin-right.
You're putting padding on inline elements (the tabs), that always causes unexpected results.
Cleaned it up a bit for you.
<html>
<head>
<style type="text/css">
#container {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 900px;
}
#content {
border: 1px solid black;
margin-top: 15px;
padding: 15px;
width: 868px;
}
#tabs {
border-bottom: 1px solid black;
width: 100%;
}
.tab {
border: 1px solid black;
border-bottom:0px solid black;
margin-left: 5px;
margin-top: 2px;
padding: 3px;
float:left;
}
.clear {
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="tabs">
<span id="tab0" class="tab">
No Circuit
</span>
<span id="tab1" class="tab">
Digital Inputs
</span>
<span class="clear"></span>
</div>
</div>
</div>
</body>
<html>