I'm trying to make a layout like on the picture but I'm struggling with canvas positioning. How can I put h1 forward?
Also, whats better for the black and white skewed rectangles? To do them with CSS or another Canvas on top of the first one?
Also I would appreciate some advice on responsiveness of this layout.
body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
padding:0;
margin:0;
}
p{
color: #f0f0f0;
}
h1 {
text-align: center;
text-align: left;
font-size: 10em;
}
h2 {
text-align: center;
margin: 40px 0px;
color: #f0f0f0;
}
td{
width: 50%;
text-align: center;
}
canvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
z-index: 0;
}
.homepage .portfolioPage{
position: absolute;
z-index: 1;
}
/* .mainWrapper {
position: relative;
} */
.mainPage{
margin-top: 50px;
display: inline-block;
align-content: center;
}
.rightbox{
padding: 0 40%;
width: 600px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#700&family=Roboto&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title> </title>
</head>
<body>
<div class="mainWrapper">
<canvas id="#particles-js" width="1000" height="500"></canvas>
<!-- Homepage -->
<div class='homepage'>
<table style="width:100%">
<tr>
<!-- Left Side -->
<td>
<div class='mainPage'>
<div class="blk-box">
<div class="block">
<h1>Barqawi</h1>
</div>
<div class="block">
<h1>Maroun</h1>
</div>
<div class="block">
<h1>Grey</h1>
</div>
</div>
</div>
</td>
<!-- Right Side -->
<td>
<div class='mainPage'>
<div class="rightbox">
<p id="jrdev">Jr Software Developer</p>
<div class="portfolioBtn">
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
I figured out. Just in case someone need it, here is the code.
canvas {
width:100%; height:50%;
top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
position: absolute;
z-index: -1;
}
.mainWrapper {
position: relative;
}
.homepage {
position: relative;
}
The tag
<h1>
is normally reserved for SEO keywords. Anyway, you can do the following:
.block { transform: skewX(-10deg);}
If you don't want the text to be skewed along, you should define another element outside to contain the text and then use negative margin or absolute positioning to fix the position of the text.
As for mobile reponsiveness, I would advise converting all absolute lengths to relative lengths, eg. 100%, 100vh, 100vw etc.
You can also use media queries to specify separate layouts for portrait and landscape orientations:
#media only screen and (orientation: portrait) {
body {
...
}
...
}
#media only screen and (orientation: landscape) {
body {
...
}
...
}
Related
I'm trying to display an html webpage that has an image that covers the entire page. Text that is centered at the top of image, but obviously in front so it can be seen.
Example : https://gyazo.com/8f7015a61a296f71c02e2b4030710074
This is what I'm getting :https://gyazo.com/0a2f9ad37eaf05cd1cb5a623f75d6bca
My text is displaying at the bottom, nor is it over the image.
Here is my CSS:
body {
background-color:brown;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 50%;
left: 50%;
text-align:top;
}
Here is my HTML:
<!doctype HTML>
<html>
<body>
<div class="container">
<img src="images/image.jpg" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>
Can someone show me what I'm doing wrong?
Check this. You have given the style for .title instead of .Title. Please check that. Everything else works as expected.
body {
margin: 0;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 10px;
left: 0;
right: 0;
}
<html>
<body>
<div class="container">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>
I am trying myself a bit on Website layout.
So I have started designing a page.
I want my start page to be divided with a horizontal division line.
So far, so good.
Now each of the two fields needs some text and I want the text to have a vertical align: bottom.
My research on the internet got me the result that there is no real possibility to do like that for <div> tags. But there is one for a table cell.
My HTML code looks like that:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<link href="firstPage.css" rel="stylesheet" type="text/css">
</head>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<body>
</body>
</html>
and my CSS class looks like that:
#charset "UTF-8";
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
font-family: 'corbertregular', arial, sans-serif;
font-size:24px;
}
header {
height: 50px;
background: gray;
}
main {
height: calc(100% - 50px);
background: green;
}
.half {
height: 50%;
position: relative;
}
.half:first-child {
background: #F3A008;
}
.half:last-child {
background: #950049;
}
.titletext{
text-align:center;
display: table-cell;
vertical-align: bottom;
}
I have found that site as a useful solution,
but it does not work for me....
http://phrogz.net/css/vertical-align/
What am I doing for a mistake?
Change this class in your CSS:
.titletext{
text-align: center;
display: table-cell;
position: absolute;
bottom: 0;
}
I am new to CSS and am trying to set up a page so that there is always a fixed margin / space between the page's main content (sidebar / sections) and the footer (e.g. 120px) which should work cross-browser.
Also, in case there is very little content on a page the footer should always appear at least at the bottom of the (visible) screen.
I made multiple attempts by applying a class footer, including the following, but the margin is always ignored.
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom
}
.footer:before {
clear: both;
display: block;
height: 120px;
min-height: 120px;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
</html>
Can someone help me with this?
Also, if anything should be changed regarding my HTML please let me know as well.
This should help:
html, body {
height: 100%;
}
body {
margin:0px;
padding: 0px;
}
.wrap {
height: auto;
margin: 0 auto -80px; /* footer height + space */
min-height: 100%;
padding: 0 0 80px; /* footer height + space */
box-sizing: border-box;
overflow: auto;
}
.footer {
background-color: #111111;
color: #eeeeee;
border-top: 1px solid red;
height: 60px; /* footer height */
padding-top: 20px;
display: block;
margin-top: 20px; /* space between content and footer */
box-sizing: border-box;
position: relative;
width: 100%;
}
<body>
<div class="wrap">
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
</div>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
To add a margin between the body and footer, just add this to the style of the footer section:
padding:20px 0px 0px 0px;
Keeping the footer at the bottom is more complicated. Try something like this for css:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{ /*create a div around whole html body
min-height:100%;
position:relative;
}
#main{
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
color: #333;
}
Why you use ":before"?
Your css should look like this:
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
Try this example (works fine for me).
If it not works - make sure you use css reset.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav style="background:grey;height:100px;">
<!-- ... -->
</nav>
<section id="sidebar" style="background:green;height:100px;">
<!-- ... -->
</section>
<section id="main" style="background:red;height:100px;">
<!-- ... -->
</section>
<footer class="footer" style="background:blue;">
<div>Some text</div>
</footer>
</body>
</html>
<style>
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
</style>
just give styling to body with margin 0px.
body{
margin: 0px;
}
I know I'm a little late to the party, but you could also just guesstimate with some set units for vh. Hacky, but it works in a pinch.
.wrap {
min-height: 70vh;
}
<div class="wrap">
<section id="chapterone">
<p>Lorem ipsum...</p>
...
</div>
<footer class="footer">
Home
...
</footer>
Solved!
In my case, I added id to the previous div (like "body") to the div above the footer div, as follows:
<div id="body" class="container">
...
</div>
<div class="row footer-row-bg">
...
</div>
Then, in my CSS file, I added padding-bottom:20px; for that id as follows:
#body{
padding-bottom:20px;
}
I am trying to adjust the divs in my application in a way that they remain beside each other in all condition, that is, Currently I am facing a problem that , when i decrease the width of the device the div start to come below the other div while with the device that have higher width have no issues. I have used viewport rendering but still there is no effect on the same .
Here id the code :
HTML:
<HTML>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Comment</title>
<link rel="stylesheet" type="text/css" href="Comment.css">
<script src="js/angular-1.0.7.js"></script>
<script src="js/Myangular.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="main">
<div class="imageIcon"><img style="height:30px;width:30px;"src="images/male-shadow-circle-512.png" alt="UserMale" /></div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
body
{
margin : 0px;
padding: 0px;
}
.main
{
margin-top:10px;
}
.imageIcon
{
display:inline-block;
float:left;
margin-left:18px;
background-color: green;
}
.contentDiv
{
display:inline-block;
float:left;
margin-left:12px;
margin-right:10px;
background-color: blue;
}
.nameAndId
{
background-color: aqua;
}
.commentDetails
{
margin-top:8px;
background-color: red;
}
.updateTime
{
float:right;
margin-top: 16px;
background:silver;
}
Fiddle link :
http://jsfiddle.net/tvaibhav/rta9LLfw/
You could use display: table on .main and display: table-cell on .imageIcon and .contentDiv to prevent that. Instead of margin, you could use border-spacing property on parent(.main).
Play Ground
#CHARSET"ISO-8859-1";
body {
margin: 0px;
padding: 0px;
}
.main {
display: table;
border-spacing: 10px;
}
.imageIcon {
display: table-cell;
vertical-align: top;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
background-color: blue;
}
.nameAndId {
background-color: aqua;
}
.commentDetails {
margin-top: 8px;
background-color: red;
}
.updateTime {
float: right;
margin-top: 16px;
background: silver;
}
<body>
<div class="main">
<div class="imageIcon">
<img style="height:30px;width:30px;" src="http://www.lorempixel.com/30/30" alt="UserMale" />
</div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
You can simply use the display: flex; property with your main div:
.main {
margin-top:10px;
display: flex;
display: -webkit-flex;
}
Here's a Demo fiddle, that works fine with all widths.
Take a look at W3School Tutorial here and try it here.
I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px).
Can someone help me out?
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
and here is the html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
Any help is greatly appreciated!
Do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. Now all your resizes inside the main div should be limited to within the wrapper.
A neat little trick I just learned is making your #content position: relative; and then make all child elements inside it position: absolute; that way all child elements are absolute to your content area and the content will resize to any resolution. Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out.
Hope this does something for you.