OKAY. So, I am creating a Chat site/application and I know next to nothing about CSS.
But I am alone in developing this thing, so I gotta try.
I designed the site in Photoshop, then I moved on to actually creating it w/ HTML & CSS and it looks great, but not all parts are responsive.
More specifically the messages container thing, can someone help me with either learning how to do responsiveness or just spoonfeed the entire site but with responsiveness for me? 😂
Here's my code so far:
HTML (combined with EJS):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home - <%= name %></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/global.css">
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div class="content">
<div class="nav">
<h1 class="navTitle">Atlas Chat</h1>
<h2 class="navUsername"><%= user ? user.username : "Not logged in" %></h2>
<% if(user !== null) { %>
<a class="navitem logoutbtn" href="/logout">Logout</a>
<% } else { %>
<a class="navitem loginbtn" href="/login">Login</a>
<a class="navitem" href="/register">Register</a>
<% } %>
</div>
<div class="main">
<div class="roomInfo">
<span class="hashtag">#</span><input type="text" class="roomname" pattern="^[a-z0-9\-]{0,16}$" required placeholder="channel-name"><button class="roomnamebtn">Join</button>
</div>
<hr>
<div class="room">
<ul class="messages">
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is a message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
<li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
</ul>
<div class="inputarea">
<hr class="inputhr">
<input type="text" class="roominput" placeholder="<%= user ? "Send a message." : "Log in to join the conversation!" %>" <%= user ? "" : "disabled" %> required><button class="roomsendbtn" <%= user ? "" : "disabled" %>>Send</button>
</div>
</div>
</div>
<div class="users">
<h1 class="usersTitle">Online Users</h1>
<ul class="usersList">
<li class="usersUser">Atlas</li>
<li class="usersUser">SomeOtherGuy</li>
<li class="usersUser">SomeThirdGuy</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg1: #131318;
--bg2: #1E1E26;
--link1: #2991E9;
--link2: #1B83DA;
--btn1: #9638E5;
--btn2: #8933D1;
--text1: #ffffff;
--text2: #626262;
--border: #252525;
--success: #28D328;
--danger: #EA2828;
}
:focus {
outline: initial;
}
html {
font-family: "Open Sans";
font-size: 14px;
background-color: var(--bg1);
color: white;
}
body {
height: 100vh;
width: 100vw;
}
h1 {
font-family: "Poppins";
font-weight: 500;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #35A7FF;
}
a:hover {
color: #2887D7;
text-decoration: underline;
}
.content {
display: flex;
height: 100%;
width: 100%;
}
.nav {
display: flex;
flex-direction: column;
height: 100%;
width: 15%;
overflow: auto;
list-style: none;
background-color: var(--btn1);
text-align: center;
}
.navitem {
background-color: var(--btn1);
padding: 10px 15px;
text-decoration: none;
cursor: pointer;
text-align: center;
color: white !important;
text-decoration: none;
}
.navitem:hover {
background-color: var(--btn2);
color: white !important;
text-decoration: none !important;
}
.main {
display: flex;
height: 100%;
width: 70%;
flex-direction: column;
}
.users {
display: flex;
flex-direction: column;
background-color: var(--btn1);
height: 100%;
width: 15%;
text-align: center;
}
.logoutbtn, .loginbtn {
margin-top: auto;
}
.navTitle, .usersTitle {
margin-top: 8px;
}
.roomInfo {
margin-top: 14px;
margin-bottom: 14px;
}
.hashtag {
font-size: 3rem;
vertical-align: middle;
line-height: 0;
font-family: "Poppins";
font-weight: 500;
margin-left: 16px;
color: var(--text2);
}
input.roomname {
width: 14%;
padding: 10px 8px;
font-size: 16px;
color: var(--text2);
margin-left: 12px;
margin-right: 12px;
background-color: var(--bg2);
display: inline-block;
border: 1px solid var(--border);
border-radius: 4px;
}
input.roomname:focus {
border: 1px solid var(--btn2);
}
input.roominput {
width: 85%;
padding: 10px 8px;
font-size: 16px;
color: var(--text1);
margin-left: 15px;
margin-right: 25px;
background-color: var(--bg2);
display: inline-block;
border: 1px solid var(--border);
border-radius: 4px;
}
input.roominput:focus {
border: 1px solid var(--btn2);
}
input.roominput:disabled {
cursor: not-allowed;
}
hr {
border: 0;
margin-inline-start: 15px;
margin-inline-end: 15px;
border-bottom: 2px solid var(--bg2);
}
ul.messages {
max-height: 800px;
width: 100%;
overflow-y: scroll;
padding-left: 25px;
padding-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
li.message {
max-height: 20px;
}
li.message:not(:last-child) {
margin-bottom: 8px;
}
button.roomnamebtn {
width: 7%;
font-size: 1.3rem;
background-color: var(--btn1);
color: white;
padding: 10px 8px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.roomsendbtn {
width: 10%;
font-size: 1.3rem;
background-color: var(--btn1);
color: white;
margin-top: 14px;
padding: 10px 8px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.roomsendbtn:disabled {
cursor: not-allowed;
}
button:hover {
background-color: var(--btn2);
}
Responsive design means it changes to the size and shape of the screen.
For example, mobile designs and layouts would look silly on desktop, while desktop designs would be too cluttered to fit on mobile.
A while back I was making a mockup of a chatapp, if you don't mind I would like to use that as an example since I have the code already online to look at.
https://replit.com/#DillonBurnett/VapidDeficientTitles#index.html
When you are on mobile, the app would look something like this:
Here it is nice and easy to view, you have the chat and you can tap the buttons at the top right to view rooms, users, and settings... but this looks a little simple when viewing it on a desktop, so instead I use a bit of css to change it specifically when the screen is large to look like this:
Each "screen" is in a long div. Think of it like 4 screens width at 100% each, but they are simply hidden because they go offscreen. When you select a different "screen" it simply scrolls there instantly making it look like a new page.
#screens{
width: 100%; height: 100%;
background: #2a2a2a;
overflow: hidden;
}
#screens #viewport{
width: calc(100% * 4); height: 100%;
overflow: none;
}
#screens #viewport > *{
width: calc(100% / 4); height: 100%;
float: left;
}
However, when the user is on desktop and I want to show the "rooms" and the "chat" at the same time, I simply adjust those to fit within 1 screen.
#media only screen and (min-width: 800px){
#screens #viewport #rooms{width: 200px!important}
#screens #viewport #chat{width: calc(100% / 4 - 200px)!important;}
}
As you can see the #media tag is unique and only allows the css within it to run when the screen is at least 800 wide. Otherwise, it is simply ignored. This opens up a lot of potential for css. You can adjust your layout for portrait or landscape, widths, heights to target many different devices... even Tvs.
I used that example because the css is generally simple and easy to understand... While it is a bit long (css declarations), I hope it helps you in designing a responsive chat app. If you have any specific questions about the example let me know below.
Related
I have an issue with my drop down sub-menus. I Have a simple drop down on my header, however it is located too close to window border.
So the sub-menu opens beyond window border to the right side and user doesn't see the content of it. Could you please help me to solve this issue?
I know that I need to do some calculations with width or calculate the pixels of free space and if it is less then sub-menu width open it on the right side. But I don't know how to perform it.
<script type="text/javascript">
(function () {
handleMenuItems();
// functions:
function handleMenuItems() {
var menuEl = document.querySelector(".menu"),
userLinksList = menuEl && menuEl.querySelector(".user-links"),
recentlyItemListEl = menuEl && menuEl.querySelector(".recently-visited-item"),
favoriteItemListEl = menuEl && menuEl.querySelector(".favorites-item");
if (userLinksList) {
userLinksList.addEventListener("mouseover", function (evt) {
var options = {
url: "/api/userlinks",
method: "GET",
successCallback: onloadUserLinks
};
function onloadUserLinks(result) {
if (!window.__RAPMD__) {
window.__RAPMD__ = {};
}
window.__RAPMD__.lastUserLinks = result;
createMenuList(result.RecentLinks, recentlyItemListEl, "No recently visited pages");
createMenuList(result.Favorites, favoriteItemListEl, "No favorite pages");
}
if (!window.__RAPMD__ || !window.__RAPMD__.lastUserLinks) {
ajax(options);
}
});
userLinksList.addEventListener("mouseleave", function (evt) {
if (!window.__RAPMD__) {
return;
}
window.__RAPMD__.lastUserLinks = null;
});
}
}
function createMenuList(items, menuItemEl, emptyListTitle) {
if (!menuItemEl) {
return;
}
var df = document.createDocumentFragment();
(items.length ? items : [{ Title: emptyListTitle }]).forEach(function (item) {
var li = document.createElement("li"),
a = document.createElement("a");
if (item.Url) {
a.href = item.Url;
} else {
a.classList.add("empty-link-item");
}
a.innerHTML = item.Title;
li.appendChild(a);
df.appendChild(li);
});
menuItemEl.textContent = "";
menuItemEl.appendChild(df);
}
function ajax(options) {
var url = options.url,
method = options.method,
successCallback = options.successCallback,
failureCallback = options.failureCallback,
xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (xhr.status === 200 && successCallback) {
var response = JSON.parse(xhr.responseText);
successCallback(response);
} else if (failureCallback) {
failureCallback();
}
};
xhr.send();
}
})();
</script>
.sub-menu
background-color: header-sub-menu-background-color;
color: header-sub-menu-color;
display: flex;
justify-content: flex-end;
height: header-sub-menu-height;
padding-right: page-side-padding;
span
margin: 10px 0;
display: inline-block;
cursor: pointer;
ul
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
font-family: font-default-content;
font-size: font-size-ssm;
font-weight: bold;
text-transform: uppercase;
padding: 0;
li
& + li
margin-left: 30px;
a
cursor: pointer;
ul
& > li:hover
& > a,
& > span
color: header-menu-active-color;
> .arrow-right:after
border-left-color: header-menu-active-color;
> .sub-menu-list
shown()
> .sub-menu-list-right
showImmediately()
li
.arrow-right
cursor: default;
&:after
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid gray-color-3;
display: inline-block;
vertical-align: middle;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
a:hover, span:hover
color: header-menu-active-color;
.main-menu-list li
position: relative;
.sub-menu-list, .sub-menu-list-right
hidden()
display: inline-block;
list-style: none;
position: absolute;
background-color: black-color-1;
top: 31px;
left: -15px;
z-index: $main-menu-sub-menu-list-zindex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
li
position: relative;
white-space:nowrap;
margin-left: 0;
:hover > .sub-menu-list-right
shown()
a
width: 100%;
font-family: font-default-content;
font-size: 10px;
font-weight: 700;
padding: 10px 32px 10px 15px;
display: inline-block;
&:hover
color: header-menu-active-color;
p:hover
color: header-menu-active-color;
.sub-menu-list
min-width: 100%;
hideWithDelay()
a
text-decoration: none;
display: inline-block;
color: gray-color-3;
.active
color: header-menu-active-color;
.sub-menu-list-right
top: 0;
left: 100%;
&:hover
.sub-menu-list
shown()
&:hover
shown()
.sub-menu-list-right
&:hover
shown()
span
background-color: black-color-1
.main-menu-list
li:first-child:nth-last-child(2)
li:first-child:nth-last-child(3)
.sub-menu-list-right
left: auto;
right: 100%;
<ul class="main-menu-list">
<li class="header-dropdown-item">
<span class="header-dropdown-item-title">Admin</span>
<img src="../Layout/images//arrow-down.svg" alt="">
<ul class="sub-menu-list">
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Users</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" href="/UserManagement/NewUsers?fromMenu=True">New
users</a>
</li>
<li>
<a class="header-sub-menu-item" href="/UserManagement/ExistingUsers?fromMenu=True">Users
management</a>
</li>
<li>
<a class="header-sub-menu-item" href="/contacts-list?fromMenu=True">Contacts List</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Security</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" href="/roles?fromMenu=True">Roles</a>
</li>
<li>
<a class="header-sub-menu-item" href="/roles-and-permissions?fromMenu=True">Roles and
Permissions</a>
</li>
<li>
<a class="header-sub-menu-item" href="/column-based-security?fromMenu=True">Column Based
Security</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Notifications Management</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item"
href="/email-notifications-management?fromMenu=True">Email Notifications</a>
</li>
<li>
<a class="header-sub-menu-item" href="/sent-email-notification?fromMenu=True">Sent Email
Notifications</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Source Data Analysis</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" href="/automated-error-logging?fromMenu=True">Automated
Error Logging</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Technical Services</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" href="/ddl-management?fromMenu=True">Dropdown Lists</a>
</li>
<li>
<a class="header-sub-menu-item" href="/unconventional-tags?fromMenu=True">Unconventional
Tags</a>
</li>
<li>
<a class="header-sub-menu-item"
href="/lcs-po-item-matching-duplicates?fromMenu=True">Tag Matching Duplicates</a>
</li>
<li>
<a class="header-sub-menu-item" href="/3-digit-code-register?fromMenu=True">3 Digit Code
Register</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I wanted to create custom tags input component.
So my code looks like this
import React from 'react';
import './App.scss';
const App = () => {
return (
<div>
<div className="tags-input">
<ul id="tags">
<li className="tag">
<span className="tag-title">tag 1</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">tag 2 sdsdsdsd</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
</ul>
<input type="text" />
</div>
</div>
);
}
export default App;
.tags-input {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
min-height: 48px;
width: 480px;
padding: 0 8px;
border-bottom: 1px solid grey;
border-radius: 6px;
&:focus-within {
border-bottom: 1px solid #0052cc !important;
}
input {
flex: 1;
border: none;
height: 46px;
font-size: 14px;
padding: 4px 0 0 0;
&:focus {
outline: transparent;
}
}
}
#tags {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 8px 0 0 0;
// border:2px solid red !important;
}
.tag {
width: auto;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 0 8px;
font-size: 14px;
list-style: none;
border-radius: 6px;
margin: 0 8px 8px 0;
background: #0052cc;
.tag-title {
margin-top: 3px;
}
.tag-close-icon {
display: block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 14px;
margin-left: 8px;
color: #0052cc;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
}
so far every thing is good.
When i have for exampel two chips and i click on the input to type - input appears next to the last chip.
My problem happens when have multiply chips
for example four of them
const App = () => {
return (
<div>
<div className="tags-input">
<ul id="tags">
<li className="tag">
<span className="tag-title">tag 1</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">tag 2 sdsdsdsd</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">tag 2 sdsdsdsd</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
<li className="tag">
<span className="tag-title">i should be able to type right from here</span>
<span><i className="fas fa-times-circle tag-close-icon"></i></span>
</li>
</ul>
<input type="text" />
</div>
</div>
);
}
export default App;
in this case when i type in the input, it is under - i can't type next to the last element chip which is i should be able to type right from here
I can only under the last element i should be able to type right from here.
Here is my stackblitz example
https://stackblitz.com/edit/react-ax4zun?file=src%2FApp.js
So i need to type here
https://ibb.co/DbXb752
but my cursor goes actually down
https://ibb.co/SfL09jR
The best approach here would be to move the tags outside of the UL as individual spans, at the moment because they are inside the UL the input will always be pushed onto a new line when there is not enough space.
You should move up your input element and put it into <li> tag
i have started to put together a website, that uses a drop down menu in smaller sizes.
it is http://www.southmoorac.com/newindex.html
i have two pages working, the home age and the league page, but it's the drop down menu that is giving me problems, or should i say, viewing it on an iphone.
i have tested it on a pc, chrome developer tools, and it is working fine, but when view on an iphone that gives me a problem.
i have worked out that it is one line of code that is not working on the phone that is giving me the problem, so i'm looking for a work around.
this is the releveant html:
.menu {
position: absolute;
text-align: left;
top: 0;
left: 0;
background-color: rgba($dgreen, 0.99);
width: 100%;
height: 100vh;
transform: scale(1, 0);
transition: 400ms;
transition-timing-function: cubic-bezier(1, 0, 0, 1);
transform-origin: top;
&__box {
margin: 0;
padding: 0;
list-style: none;
height: 100vh;
display: flex;
flex-direction: column;
cursor: pointer;
}
&__list-item {
#include letterspace(0.3rem);
width: 100%;
height: 100%;
// padding: 6.2vh;
border-bottom: 1px solid rgba(121, 122, 121, 0.301);
}
&__item-link {
display: flex;
align-items: center;
color: $orange;
font-size: 1rem;
text-decoration: none;
text-transform: uppercase;
height: 100%;
width: 100%;
padding: 2.2vh;
padding-left: 20%;
padding-right: 0;
&:hover,
&:focus {
background-color: $orange;
color: white;
}
}
<nav class="menu">
<ul class="menu__box">
<li class="menu__list-item"><a href="http://www.southmoorac.com/newindex.html"
class="menu__item-link menu__active uncheck"><i
class="fas fa-home menu__icon"></i>Home</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="fas fa-info menu__icon"></i>About Us</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="far fa-calendar-alt menu__icon uncheck"></i>Matches</a>
</li>
<li class="menu__list-item"><a href="http://www.southmoorac.com/new_season_summary.php"
class="menu__item-link uncheck"><i class="fas fa-trophy menu__icon ">
</i>League
Table</a>
</li>
<li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
class="far fa-envelope-open menu__icon "></i>Contact Us</a>
</li>
</ul>
</nav>
the code that is causing the problems is the height:100% line in the &__item-link.
the iphone just does not like it.
i have tried taking it out and using veritcal padding to gain height for the a link, but that's been like trying to nail jelly on a wall between different screen heights. it gets around the iphone display problem, but is not a real solution.
i hope you can help....
thanks
malcolm
I have this problem of having a huge white space at the bottom of my web page. I tried for many hours to fix the problem but I can't seem to find where I have gone wrong. Can anybody please help me with the problem? I have attached my code samples below...
Here's my code sample. (HTML)
<!DOCTYPE html>
<html>
<head>
<title>Web Page Exercise 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="UpperHeader"></div>
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div><p style="width: 100px;color: white;">Home</p></div>
</li>
<li>
<div><p style="width: 120px;color: white;">About Us</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Membership</p></div>
</li>
<li>
<div><p style="width: 100px;color: white">Search</p></div>
</li>
<li>
<div><p style="width: 150px;color: white">New Arrivals</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Staff</p></div>
</li>
</ul>
</div>
</div>
<div class="BackgroundPicture"></div>
<h3 style="position: relative;top: -610px; left: 10px;">Categories</h3>
<div class="SideNavagationBar1">
<UL TYPE="none">
<LI>OPAC Search</LI>
<LI>New Arrivals</LI>
<LI>How to Become a Member</LI>
<LI>Central Bank of Sri Lanka</LI>
<LI>e-Repository</LI>
<LI>Dictionary</LI>
<LI>Library Policies</LI>
<LI>University of Moratuwa</LI>
</UL>
</div>
<h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI><div style="text-decoration: none;">Access the available databases</div></LI>
<LI>Databases</LI>
<LI><div style="text-decoration: none;">Getting start with Research?</div></LI>
<LI>Research Papers</LI>
<LI><div style="text-decoration: none;">What is done already?</div></LI>
<LI>Thesis Dissertion</LI>
<LI><div style="text-decoration: none;">Help!!!</div></LI>
<LI>Library Guide</LI>
<LI><div style="text-decoration: none;">Turnitin</div></LI>
<LI>Turnitin</LI>
</UL>
</div>
</body>
</html>
And here's my CSS sample for the above HTML
.UpperHeader{
background-color: #808080;
width: 100%;
height: 160px;
}
.SliitLogo{
position: relative;
top: -150px;
left: 5px;
margin-right: 10px;
}
.Login{
position: absolute;
float: right;
right: 100px;
top: 40px;
font-size: 10px;
}
.Register{
position: absolute;
float: right;
right: 30px;
top: 40px;
font-size: 10px;
}
.SliitLibrary{
position: relative;
float:right;
right: 20px;
top: -200px;
color: white;
font-family: Lifetime;
}
#Space{
display:inline-block;
margin-left: 10px;
}
#UpperNavigationBar{
background-color: #333333;
position: relative;
top: -140px;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li{
display:block;
float:left;
position:relative;
top: -7px;
left: -20px;
color: white;
}
.SideNavagationBar1{
position: relative;
top: -600px;
font-size: 14px;
}
.SideNavagationBar1 li>a{
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2{
position: relative;
margin-left: 0;
top: -600px;
font-size: 14px;
border: 2px solid red;
}
.SideNavagationBar2 li>a{
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
.BackgroundPicture{
position: relative;
bottom: 0;
top: -130px;
background-color: #d3d3d3;
width: 100%;
min-height: 80vh;
}
The problem is I see a huge white space below the the web page. A huge one. Can anybody please help me???
.UpperHeader{
background-color: #808080;
width: 100%;
height: 160px;
}
.SliitLogo{
position: relative;
top: -150px;
left: 5px;
margin-right: 10px;
}
.Login{
position: absolute;
float: right;
right: 100px;
top: 40px;
font-size: 10px;
}
.Register{
position: absolute;
float: right;
right: 30px;
top: 40px;
font-size: 10px;
}
.SliitLibrary{
position: relative;
float:right;
right: 20px;
top: -200px;
color: white;
font-family: Lifetime;
}
#Space{
display:inline-block;
margin-left: 10px;
}
#UpperNavigationBar{
background-color: #333333;
position: relative;
top: -140px;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li{
display:block;
float:left;
position:relative;
top: -7px;
left: -20px;
color: white;
}
.SideNavagationBar1{
position: relative;
top: -600px;
font-size: 14px;
}
.SideNavagationBar1 li>a{
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2{
position: relative;
margin-left: 0;
top: -600px;
font-size: 14px;
border: 2px solid red;
}
.SideNavagationBar2 li>a{
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
.BackgroundPicture{
position: relative;
bottom: 0;
top: -130px;
background-color: #d3d3d3;
width: 100%;
min-height: 80vh;
}
<!-- IT No: IT17157124 -->
<!-- ID No: 952314017V -->
<!-- Name: Jananth Banuka Jayarathna -->
<!DOCTYPE html>
<html>
<head>
<title>Web Page Exercise 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="UpperHeader"></div>
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div><p style="width: 100px;color: white;">Home</p></div>
</li>
<li>
<div><p style="width: 120px;color: white;">About Us</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Membership</p></div>
</li>
<li>
<div><p style="width: 100px;color: white">Search</p></div>
</li>
<li>
<div><p style="width: 150px;color: white">New Arrivals</p></div>
</li>
<li>
<div><p style="width: 145px;color: white">Staff</p></div>
</li>
</ul>
</div>
</div>
<div class="BackgroundPicture"></div>
<h3 style="position: relative;top: -610px; left: 10px;">Categories</h3>
<div class="SideNavagationBar1">
<UL TYPE="none">
<LI>OPAC Search</LI>
<LI>New Arrivals</LI>
<LI>How to Become a Member</LI>
<LI>Central Bank of Sri Lanka</LI>
<LI>e-Repository</LI>
<LI>Dictionary</LI>
<LI>Library Policies</LI>
<LI>University of Moratuwa</LI>
</UL>
</div>
<h3 style="position: relative;top: -590px;left: 10px;">E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI><div style="text-decoration: none;color: black;">Find the Journals</div></LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI><div style="text-decoration: none;">Access the available databases</div></LI>
<LI>Databases</LI>
<LI><div style="text-decoration: none;">Getting start with Research?</div></LI>
<LI>Research Papers</LI>
<LI><div style="text-decoration: none;">What is done already?</div></LI>
<LI>Thesis Dissertion</LI>
<LI><div style="text-decoration: none;">Help!!!</div></LI>
<LI>Library Guide</LI>
<LI><div style="text-decoration: none;">Turnitin</div></LI>
<LI>Turnitin</LI>
</UL>
</div>
</body>
</html>
You should
avoid relative positioning if you really don't need it. Because relatively positioned elements occupy the same space as if they would be statically positioned (by default).
place elements in needed containers.
Demo:
body {
background-color: #d3d3d3;
margin: 0;
}
.UpperHeader {
background-color: #808080;
height: 160px;
padding-top: 20px;
padding-bottom: 20px;
}
.SliitLogo {
margin-right: 10px;
}
.Login {
float: right;
font-size: 10px;
}
.Register {
float: right;
font-size: 10px;
}
.SliitLibrary {
color: white;
font-family: Lifetime;
}
#Space {
display: inline-block;
margin-left: 10px;
}
#UpperNavigationBar {
background-color: #333333;
margin: 0px auto;
width: 98%;
height: 35px;
}
.UpperNavigationBarContents li {
display: block;
float: left;
color: white;
}
.SideNavagationBar1 {
font-size: 14px;
}
.SideNavagationBar1 li>a {
color: blue;
}
.SideNavagationBar1 li:not(:last-child) {
margin-bottom: 3px;
}
.SideNavagationBar2 {
border: 2px solid red;
}
.SideNavagationBar2 li>a {
color: blue;
}
.SideNavagationBar2 li:not(:last-child) {
margin-bottom: 20px;
}
<div class="UpperHeader">
<div class="SliitLogo">
<img src="images/SLIIT Logo.png" width="25%" height="75">
</div>
<div class="Login">
Login
</div>
<div class="Register">
Register
</div>
<div class="SliitLibrary">
<h1>SLIIT<span id="Space">LIBRARY</span></h1>
</div>
</div>
<div id="UpperNavigationBar">
<div class="UpperNavigationBarContents">
<ul>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 100px;color: white;">Home</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 120px;color: white;">About Us</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 145px;color: white">Membership</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 100px;color: white">Search</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 150px;color: white">New Arrivals</p>
</a>
</div>
</li>
<li>
<div>
<a href="#" style="text-decoration: none">
<p style="width: 145px;color: white">Staff</p>
</a>
</div>
</li>
</ul>
</div>
</div>
<h3>Categories</h3>
<div class="SideNavagationBar1">
<div>OPAC Search</div>
<div>New Arrivals</div>
<div>How to Become a Member</div>
<div>Central Bank of Sri Lanka</div>
<div>e-Repository</div>
<div>Dictionary</div>
<div>Library Policies</div>
<div>University of Moratuwa</div>
<h3>E-Resources</h3>
<div class="SideNavagationBar2">
<UL TYPE="none">
<LI>
<div style="text-decoration: none;color: black;">Find the Journals</div>
</LI>
<LI><a style="text-decoration: none;">Online Journals</a></LI>
<LI>
<div style="text-decoration: none;">Access the available databases</div>
</LI>
<LI>Databases</LI>
<LI>
<div style="text-decoration: none;">Getting start with Research?</div>
</LI>
<LI>Research Papers</LI>
<LI>
<div style="text-decoration: none;">What is done already?</div>
</LI>
<LI>Thesis Dissertion</LI>
<LI>
<div style="text-decoration: none;">Help!!!</div>
</LI>
<LI>Library Guide</LI>
<LI>
<div style="text-decoration: none;">Turnitin</div>
</LI>
<LI>Turnitin</LI>
</UL>
</div>
Don't know if it helps, but when you use some relative positioning, keep in mind that the original place of the DOM element keeps.
In your CSS you have many element that have relative position with negative values, so, white space is the "ghost" of the orignal places of these elements.
Given below is my scss
#import "susy";
$susy: (
columns: 12,
gutters: 0,
math: fluid,
output: float,
gutter-position: inside
);
ul {
list-style: none;
width: 240px;
}
li {
display: table-cell;
position: relative;
vertical-align: middle;
width: 60px;
height: 60px;
border-radius: 50%;
color: #019ed5;
border: 1px solid #019ed5;
background-color: white;
cursor: pointer;
text-align: center;
#include span(3);
&:nth-child(4n){
#include span(3 at 10);
}
}
li:hover {
background: #019ed5;
color: #fff;
}
span.detail{
position: relative;
top: 12px;
left: 8px;
}
span.more {
position: relative;
float: right;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
font-size: 10px;
line-height: 20px;
color: white;
}
And here is my HTML
<ul>
<li>
<span class="more">25</span>
<span class = "detail">Jan<br/>15</span>
</li>
<li>
<span class="more-statement">15</span>
<span class="detail">Feb<br/>15</span>
</li>
<li>
<span class="more">13</span>
<span class="detail">Mar<br/>15</span>
</li>
<li>
<span class="more-statement">8</span>
<span class="detail">Apr<br/>15</span>
</li>
<li>
<span class="more">30</span>
<span class="detail">May<br/>15 </span>
</li>
<li>
<span class="more">6</span>
<span class="detail">Jun<br/>15</span>
</li>
<li>
<span class="more">9</span>
<span class="detail">Jul<br/>15</span>
</li>
<li>
<span class="more">16</span>
<span class="detail">Aug<br/>1</span>
</li>
<li>
<span class="more">0</span>
<span class="detail">Sep<br/>15</span>
</li>
<li>
<span class="more">15</span>
<span class="detail">Oct<br/>15</span>
</li>
<li>
<span class="more">30</span>
<span class="detail">Nov<br/>15</span>
</li>
<li>
<span class="more">21</span>
<span class="detail">Dec<br/>15</span>
</li>
</ul>
http://codepen.io/suhasdeshpande/pen/bVwZmz?editors=110
Above is my codepen and I am really new to Sussy. Having an hard time figuring about how to add spaces between lis in above code.