<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>
Home - Hasan's Website
</title>
<style>
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 1px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
</body>
</html>
I got some help from someone and they used Bootstrap which the teacher did not allow. The bootstrap makes the words not compressed against each other. What can I do to achieve the same purpose without the bootstrap? Like I want to remove the bootstrap, but the title "Computer Engineering," then just compresses. How can remove the bootstrap, but still have the words still properly spaced out? Any help will be greatly appreciated! This is for my Grade 11 Engineering class.
I'm not giving a straight forward solution. But, a way to find the solution in your own way.
Run the page with bootstrap styles included. Open the page a modern browser like Google Chrome. Right click on the element in which you are interested & select Inspect element from the context menu. Now, you can see the CSS properties contributing to the look & feel of the element you are inspecting.
Copy those properties to your own project. Done.
That is happening due to
body, html{
line-height : 1.8em;
}
Just add line-height : 1em; in h1. It should solve the problem.
Related
I want to mention that I`m a beginner. ^^ I also want to mention that if I remove the div part at the beginning of the code block:
div {
background-image: url('./images/castle.png'); `I removed this line`
position: absolute;
width: 100%;
height: 100%;
I`m able to see the navbar menu, but if I keep it, I only see the background image. I don't know what to do to be able to see the menu over the image.
Below you can see the code lines.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
img {
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.bg-container {
position: relative;
width: 100%;
height: 380px;
}
.bg img {
background-image: url('./images/castle.png');
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
z-index: 1;
}
.topnav a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="bg-container">
<div class="bg-img"></div>
</div>
<div class="container">
<h1>Welcome to my page</h1>
<div class="topnav">
Home
About
Contact
</div>
</div>
</body>
</html>
To set the background image you can do in different ways:
One would be to use an element of type img using the posiztion: absolute, relative to the body or however to the element you want.
The second way is to set it as background-image directly from the CSS properties.
To make the navbar you should learn to use flex-box, it is very useful in different situations. To remove the margins and paddings use *(CSS universal selector) and if you want also use box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url('https://a.cdn-hotels.com/gdcs/production12/d1130/83f1c8c6-e12d-4e69-8433-c5bbc90b5ad6.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 1rem .8rem;
background: #333;
}
.navbar h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
.navbar a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar">
<h1>Welcome to my page</h1>
<div class="nav-links">
Home
About
Contact
</div>
</nav>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I coded a webpage recently, I was able to get the result. But I am now having a issue with css viewport. My webpage only shows the left part of my content when minimizing the windows instead of showing the full content, please help guys.
I currently hosted the page in github.
Webpage github link: https://jtmuthu.github.io/card1/
Youre using fixed values for positioning, that wont work with resizing the page.
You need to work with percentages, responsive positioning and other fluid values.
Ive created a snipped from your github page and changed the neccessary styles.
body {
background-color: hsl(225, 100%, 94%);
margin: 0;
height: auto;
width: auto;
font-family: 'Red Hat Display', sans-serif;
}
.bg-img {
width: 100%;
height: auto;
}
.card {
background-color: hsl(225, 100%, 98%);
color: black;
position: relative;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
max-width: 450px;
margin: 50px auto;
}
.music {
background-color: rgba(232, 232, 232, 1);
border-radius: 10px;
color: black;
height: 90px;
width: calc(100% - 120px);
margin: 0 60px;
}
.cardimg {
border-radius: 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
h1 {
text-align: center;
padding-top: 40px;
}
.p1 {
text-align: center;
width: 70%;
line-height: 2;
margin-left: 65px;
}
.msic {
position: relative;
left: 20px;
top: 20px;
}
.p2 {
float: right;
padding-right: 140px;
line-height: 2;
}
a {
position: relative;
left: 200px;
bottom: 14px;
text-decoration: underline;
}
a:hover {
text-decoration: none;
color: blue;
}
.p3 {
color: hsl(224, 23%, 55%);
padding-left: 180px;
padding-top: 30px;
}
.p3:hover {
color: black;
font-weight: bolder;
}
.btn {
position: relative;
left: 40px;
top: 20px;
color: white;
background-color: rgb(56, 41, 224);
height: 50px;
width: 360px;
border: none;
border-radius: 10px;
font-size: 16px;
}
.btn:hover {
background-color: rgba(56, 41, 224, 0.8);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="icon" href="https://jtmuthu.github.io/card1/images/favicon-32x32.png">
<title>Summary Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#300&display=swap" rel="stylesheet">
<style></style>
</head>
<body>
<div class="bg">
<img class="bg-img" src="https://jtmuthu.github.io/card1/images/pattern-background-desktop.svg" alt="bg">
</div>
<div class="card">
<img class="cardimg" src="https://jtmuthu.github.io/card1/images/illustration-hero.svg" alt="hero">
<h1>Order Summary</h1>
<p class="p1">You can now listen to millions of songs, audiobooks and podcasts on any device anywhere you like!</p>
<div class="music">
<img class="msic" src="https://jtmuthu.github.io/card1/images/icon-music.svg" alt="msic">
<p class="p2"><strong>Annual Plan</strong> <br> $59.99/year</p>
Change
</div>
<div class="bottom">
<button class="btn" type="button" name="button">Proceed to Payment</button>
<p class="p3">Cancel Order</p>
</div>
</div>
</body>
</html>
It's because you hardcoded the positions. And how big or small the browser window, they stay the same.
My sugestion: use a flexbox. With that, you can keep everything centered without left or bottom values. (Note: if the browser window is smaller than the card there obviously will be cut off a part. For that you can use media queries).
<body>
<div class="flexbox">
<div class="container">
// All the content here WITHOUT POSITIONING
</div>
</div>
</body>
And as css
.flexbox{
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 450px;
height: 660px;
}
And a fiddle
probably because you using,
left: 460px;
instead this try to use <center> tag.
it is advisable to use media query for responsive
I have a web development assignment due soon. I really need help putting the course info paragraph below the non-repeat background. I do not want it to be on the same 2 pics the Computer Engineering Title is on. Also, how can I change the
font of it? Any help will be appreciated :). This is due very soon.
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 2px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
body {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
line-height: 1.8em;
}
.courseinfo {}
<!DOCTYPE html>
<html>
<head>
<title>
Home - Hasan's Website
</title>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
<div class="courseinfo">
<p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>
</div>
</body>
</html>
Is this how you want it.. removed
position:absolute and transform: translate(-50%, -50%);
added background image to .intro
body,
html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
}
.jumbotron {
top: 50%;
left: 50%;
background-image: url(image.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
border: 2px;
}
.navigation {
background-color: #330;
overflow: hidden;
display: grid;
grid-template-columns: auto auto auto auto auto;
}
.navigation a {
font-size: 20px;
text-decoration: none;
color: #f2f2f2;
text-align: center;
float: left;
}
.navigation a:hover {
background-color: #dddddd;
color: black;
}
.navigation a.active {
background-color: #4CAF50;
color: white;
}
.intro {
background-image: url("Engineering.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
height: 90vh;
display: flex;
align-items: center;
}
h1 {
margin: auto;
z-index: 4;
text-align: center;
width: 100%;
color: white;
font-size: 100px;
padding: 10px;
line-height: 1.8em;
}
.courseinfo {}
<!DOCTYPE html>
<html>
<head>
<title>
Home - Hasan's Website
</title>
</head>
<body>
<div class="navigation">
<a class="active" href="#home">Home</a>
About Me
Careers
Contact Us
Web Development
</div>
<div class="intro">
<div class="jumbotron">
<h1>Computer Engineering</h1>
</div>
</div>
<div class="courseinfo">
<p>This course examines computer systems and control of external devices. Students will develop knowledge and skills in electronics, interfacing, programming, and networks, will build systems that use computer programs and interfaces to control and respond
to external devices. Students will develop an awareness of related environmental and societal issues, and will learn about college and university programs leading to careers in computer technology.</p>
</div>
</body>
</html>
Okay, been trying to find an answer and testing this out for a couple hours now to no avail. I couldn't find the proper answer on here or through my own trial and error so forgive me if this is a duplicate. Here's what I need help with: I'm trying to change the nav text color when I'm scrolled to another part in the page. So, if I'm scrolled over the #firstpane id/div the 'about' text in my navbar will be black. When the #secondpane id/div is scrolled over the navbar text 'skills' will be black. When scrolled over the #thirdpane id/div the text 'contact' in my navbar will turn black. That sort of thing is what I'm trying to accomplish here.
Does anybody know how to approach this using pure css or javascript, no jQuery? I have an idea of how to do it in jQuery, just can't use it in this instance, so please no guidance suggesting jQuery.
Thanks.
body {
background-image: url("images/someTree.jpg");
background-size: cover;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
width: 100%;
height: 85px;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
z-index: 1000;
background-color: #96C339;
}
header h1#logo {
display: inline-block;
float: left;
font-family: "Monsterrat", sans-serif;
font-size: 40px;
color: #FFF;
font-weight: 400;
margin-left: 35px;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 100px;
margin-left: 20px;
margin-right: 20px;
color: #FFF;
font-weight: 700;
font-size: 20px;
text-decoration: none;
}
header nav a:hover {
color: #111;
}
#media all and (max-width: 600px) {
header h1#logo {
font-size: 30px;
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 55px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
margin-top: -65px;
}
header nav a {
font-size: 15px;
line-height: 50px;
margin: 0 5px;
}
}
#firstpane {
background-color: #FFF;
margin-left: 0;
height: 100vh;
margin: auto;
opacity: 0.8;
}
#secondpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
#thirdpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
::selection {
background: #000;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: #000;
/* Gecko Browsers */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Portfolio Stuff</title>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1 id="logo">Some Name</h1>
<nav>
About
Skills
Contact
</nav>
</header>
<!-- /header -->
<div id="firstpane"></div>
<div id="secondpane"></div>
<div id="thirdpane"></div>
<!-- end of container -->
</div>
<script type="text/javascript" src="portfolio.js"></script>
</body>
</html>
You could try using JavaScript. In order to do so simply use window.onscroll (to fire a function every time you scroll). Within that function you would have to check wheter a specific part of your markup falls behind your header. If so, you just add a class to your nav. On the other hand, if your desired element is back on it's initial place (or at least not behind your header anymore) you can simply remove that class from your nav.
Your code could look like this. Of course you would need to extend this to also handle your 1st and 3rd nav/div. But at least I guess this should help you on your way achieving what you want.
// Get the necessary elements first
var skills = document.getElementsByClassName('secondpanenav')[0];
var second = document.getElementById('secondpane');
// Trigger event every time you scroll
window.onscroll = function() {
// Get boundries of your div (top, bottom, left, right)
var position = second.getBoundingClientRect();
// Check your divs position and add/remove your desired class
if (position.top < 85) {
skills.classList.add('redColor');
} else {
skills.classList.remove('redColor');
}
}
Demo: https://jsfiddle.net/vw68eaqv/1/
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.