So I'm trying to design my very first website using CSS and HTML. But I have run into a bit of an issue.
I'm trying to make a simple sidebar with just a profile picture next to the content container. But, the div pushes down the other div instead of going behind it. I've used position relative and z index but nothing seems to work.
This is how the code looks like now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div id="sidebar">
<img src="./Img/pepe.png" alt="" />
</div>
<div class="contentbox"></div>
<div class="Wrapper">
<header>
<h1>Welcome To My Site</h1>
<h2>First CSS Site</h2>
</header>
<nav>
<ul class="meny">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: "Roboto";
}
body {
background-color: #E0F2E9;
}
#sidebar{
border: 2px solid brown;
text-align: right;
margin-top: 50%;
margin-left: 0%
}
.contentbox{
border: solid 2px red;
width: 60vw;
margin: 0 auto;
background-color: white;
height: 100vh;
margin-top: 300px;
}
.Wrapper {
border: 2px solid green;
height: 250px;
background-color: #5B7B7A;
margin: auto;
width: 95vw;
position: absolute;
top: 30px;
right: 30px;
left: 30px;
border-radius: 5px;
}
.meny{
text-align: center;
line-height: 32px;
border: 2px solid purple;
padding: 10px 10px;
}
ul.meny{
margin: 15px 10px;
text-decoration: none;
}
.meny li{
display: inline;
padding: 0px 10px;
}
.meny a{
text-decoration: none;
color: white;
font-size: 1em;
}
.Wrapper h1, h2 {
margin: 10px;
border: 2px solid blue;
display: flex;
text-align: center;
justify-content: center;
text-transform: uppercase;
color: #ffffff;
}
.Wrapper h1 {
padding: 30px;
}
.Wrapper h2 {
padding: 4px;
z-index values are relative and it depend to you, for instance : i write z-index: 50 for my div and z-index : 51 for my another element . Element has z-index 51 comes above div has less value of z-index . i hope this is help .
My HTML page has a header, navigation bar, body content element and a footer element however the footer element is overlapping with the div element bodycontent when it should be below the bodycontent element and at the bottom of the page. Please suggest any changes in positioning to resolve this.
.header {
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
clear: both;
position: inherit;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
position:relative;
top:45px;
bottom:30px
padding:15px;
}
My home HTML page -
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Webpage</title>
</head>
<body>
<%# include file="header.jsp" %>
<div class="bodycontent">
<h3>Our Mission</h3>
<p>Hello World !!!</p>
<h3></h3>
<p>Trying out webpage</p>
</div>
<%# include file="footer.jsp" %>
</body>
</html>
The header html element -
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>
<h3>Title 1</h3>
<h5>Title 2</h5>
</center>
<ul class="nav_bar">
<li class="navit"><a class="link">Home</a></li>
<li class="navit"><a class="link" >Items</a></li>
<li class="navit"><a class="link" >About Us</a></li>
<li class="navit"><a class="link" >Contact</a></li>
</ul>
</body>
</html>
The footer html element
<html>
<head>
<style><%#include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>All rights reserved 2018</center>
</body>
</html>
You need to add CSS code like this:
.header {
display: inline-block;
padding: 10px;
width: 100%;
text-align: center;
background-color: #F2F2F2;
color: #424242;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
display: inline-block;
width: 100%;;
text-align: center;
width: 100%;
height: 20px;
background-color: #808080;
color:#fff;
}
.prodheading {
display: inline-block;
width: 100%;
height: 20px;
background-color: #808080;
color: #fff;
text-align: center;
vertical-align: middle;
}
ul.nav_bar{
position: absolute;
height: 50px;
top: 50%; left: 50%;
margin-top: -25px; margin-left: -200px;
padding: 0px;
list-style: none;
text-align: center;
}
.bodycontent{
display: inline-block;
width: 100%;
padding:15px;
}
Now, You can add CSS for main menu design in ul.nav_bar as per your requirements.
I am trying to learn CSS and as part of it I am trying to recreate the menu on
news.ycombinator.com without looking at how it is organized on the actually page.
Here is my css
body{
margin:0;
}
#outerdiv {
height:100%;
border-left: 2px solid #fcfaf4;
border-right: 2px solid #fcfaf4;
background:#fcfaf4;
position: relative;
left: 15%;
width:70%;
}
#menudiv{
background-color: rgb(255, 102, 0);
height:4%;
width:100%;
white-space:nowrap;
}
#ycimage{
border: 1px solid white;
width="18";
height="18";
padding:1px;
position: relative;
left:2px;
top:2px;
margin:2px;
}
p{
white-space:nowrap;
}
My html
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="outerdiv">
<div id ="menudiv">
<img src="y18.gif" id="ycimage" >
<p>
<b id="companyname" >Hacker News </b>
|
new
|
comments
|
show
</p>
</div>
</div>
</body>
I have tried to define nowrap property on element inside div "menudiv"
HOwever, the word Hacker News appears on the new line, after the image. How can I keep it on the same line?
This is because <p> is for paragraph and clears both sides of it with a new-line. Remove the <p> or set it to be an inline object using Display
Something along the lines of:
p{display:inline;}
Consider using the <span> tag instead of the <p> tag.
I dont think you can achieve the way you have tried.
Make the elements display:inline-block.
body {
margin: 0;
}
#outerdiv {
height: 100%;
border-left: 2px solid #fcfaf4;
border-right: 2px solid #fcfaf4;
background: #fcfaf4;
position: relative;
left: 15%;
width: 70%;
}
#menudiv {
background-color: rgb(255, 102, 0);
height: 4%;
width: 100%;
}
ul {
list-style-type: none;
display: inline-block;
margin: 0;
}
ul li {
display: inline-block;
}
#ycimage {
border: 1px solid white;
width: 18px;
height: 18px;
padding: 1px;
position: relative;
left: 2px;
top: 2px;
margin: 2px;
}
<div id="outerdiv">
<div id="menudiv">
<img src="y18.gif" id="ycimage">
<ul>
<li> <b id="companyname">Hacker News | </b>
</li>
<li>new <strong>|</strong>
</li>
<li>comments <strong>|</strong>
</li>
<li>show</li>
</ul>
</div>
Hope it helps
edit: Thanks to you awesome people the webpage finally looks awesome!
I couldn't choose the best answer because all of them helped me a lot :p
here's the result if anyone's interested http://i.imgur.com/RABpT9u.png
I'm trying to make a simple website with a site "logo" on the top, a navbar on the left, content in the center and some footer at the bottom.
At the same time I'm trying to make it responsive, which, obviously isn't a job for me yet :D
I'm pretty new to html and css so any advice would help a ton!
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
max-width:100%;
background-color:grey;
border: 2px solid green;
}
footer {
width:100%;
margin-top:auto;
border: 2px dashed red;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
<footer>
<h1>footer</h1>
</footer>
</main>
</body>
</html>
You can try use;
width:100vw;
* { box-sizing: border-box;}
body { padding: 0; margin: 0; height:100%; }
header {
height:100%;
border:0.5vw ridge #888;
background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);
text-align: center;
font-size: 1.4vw;
}
header h1,h2 {
color:#DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main {
position: absolute;
display: flex;
width:100%;
max-height:100%;
background-color:#DDD;
border: 2px solid #F0F;
}
nav {
position: relative;
display:block;
overflow:auto;
z-index: 0;
float:left;
height:100%;
background: linear-gradient(90deg,#5BF,#29E);
border:0.5vw ridge #888;
max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
display:block;
width:100%;
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border:0.2vw outset white;
border-radius:0.5vw;
background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
margin:0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration:none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
position: relative;
display: inline;
float:left;
z-index: 0;
background-color:grey;
border: 2px solid green;
width:86vw;
}
footer {
position: absolute;
width:100%;
border: 2px dashed red;
bottom:0;
}
<!doctype html>
<html lang="en">
<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
</main>
<footer>
<h1>footer</h1>
</footer>
</body>
</html>
I'm not sure if this is exactly what you're looking for, but have you tried using the flex property?
try to have a look here, see if this is what you're looking for https://jsfiddle.net/jg2sjrL5/4/
<div id="container">
<div id="navigation">navigation</div>
<div id="content"></p>content</p></p>content</p></p>content</p>
</p>content</p></div>
</div>
<div id="footer">footer</div>
html, body {width: 100vw, height: 100vh}
#container {
display:flex;
align-items: center;
flex-direction:row;}
#main, #footer {
width: 100vw;
}
#main{
display: flex;
flex-direction: row;
}
#content {
background-color:red;
width: 80vw;
}
#navigation {
background-color:white;
width: 20vw;
}
#footer {
background-color:green;
}
you can eventually set the height of the different elements with vh to make them fit your page
Here's some guidance. Hope it helps.
html {
box-sizing: border-box; /* 1 */
height: 100%; /* 2 */
}
*, *:before, *:after {
box-sizing: inherit; /* 1 */
}
body {
margin: 0; /* 3 */
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
border: 0.5vw ridge #888;
background: linear-gradient(to right, #123, #368, #48A, #59B, #48A, #368, #123);
text-align: center;
font-size: 1.4vw;
}
header h1, h2 {
color: #DD5;
font-family: "Helvetica";
margin: 0.5vw;
padding-top: 0.5vw;
line-height: 1.5vw;
text-shadow: 0px 0px 0.5vw #000;
}
main { /* 4 */
flex: 1; /* consume remaining space in column */
display: flex;
background-color: #DDD;
border: 2px solid #F0F;
}
nav {
background: linear-gradient(90deg, #5BF, #29E);
border: 0.5vw ridge #888;
}
nav ul {
margin: 0;
padding: 0.5vw;
list-style-type: none;
}
nav li {
padding: 1vw 0.5vw 1vw 0.5vw;
margin: 0.5vw auto;
text-align: center;
border: 0.2vw outset white;
border-radius: 0.5vw;
background: linear-gradient(180deg, #AAA 60%, #777);
}
nav a {
margin: 0vw 1vw;
font-family: "Helvetica";
font-weight: bold;
font-size: 1.5vw;
color: #DDD;
line-height: 0.5;
text-decoration: none;
text-shadow: 0px 0px 0.3vw #000;
}
#content {
flex: 1; /* consume remaining space in row */
background-color: grey;
border: 2px solid green;
}
footer {
border: 2px dashed red;
}
<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>
<main>
<nav>
<ul>
<li>LinkToHome</li>
<li>link1</li>
<li>link2</li>
<li>longlink3</li>
<li>aboutlink</li>
</ul>
</nav>
<div id="content">
<h1>Content Content Content</h1>
<h1>Content Content Content</h1>
</div>
</main>
<footer>
<h1>footer</h1>
</footer>
https://css-tricks.com/box-sizing/
https://stackoverflow.com/a/31728799/3597276
https://stackoverflow.com/a/36219088/3597276
https://stackoverflow.com/a/35820454/3597276
Note that in your original code you made use of CSS positioning and floats, and the HTML <center> element. You don't need position: absolute, position: relative or float: left to make this layout work when you have flexbox. And the <center> element is being phased out. You shouldn't use it and you don't need it.
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;
}