I am new to HTML CSS and JS and am creating a website and have had a problem for a few days now, I have created a navigation bad to switch between pages but i cannot seem to position it correctly in the top left corner I was wondering if anyone could help. I would like it to be positioned exactly in the top left corner but it seems to be out of position. I have tried many solutions but cant seem to get the result i am looking for.
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
You can modify the position of an element with css position, specifying top, left, right, bottom position (only one x and one y are needed).
body {
margin-left: 50px;
margin-right: auto;
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
But your problem is that you specified a
margin-left: 50px;
for your body, causing the elements to move 50 px to the right, and you can reach it by deleting it:
body {
background-color:
font-family: Arial, Helvetica, sans-serif;
width: 800px;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 12px 16px;
text-decoration: none;
font-size: 20pt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
color: white;
}
html {
background: url(UFC.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.CSS">
</head>
<body>
<div class="topnav">
`enter code here` <a class="active" href="home.html"><u>Home</u></a>
<u>Top Fighters</u>
<u>Best Knockouts</u>
<u>Contact Page</u>
<a href="https://twitter.com/ItsssOwen">
<img src="twitter%20link.png" width="42" height="32" border="0">
</a>
</div>
</body>
</html>
Related
I'm having an issue where the footer of my page has now moved up and is stuck with in the picture. This problem didn't use to occur and I'm unsure as to how to fix it.
When entering the website : https://gyazo.com/bcd6fe2f9514e761035deee64d820e22
After scrolling down : https://gyazo.com/cb9b9917d7d1730484c18a093b2a5f12
Here is the part of the code for index.php
html {
scroll-behavior: smooth;
}
body,
.cover {
height: 100%;
}
.cover {
background: url('img/main.jpeg') top left no-repeat;
background-size: cover;
display: table;
width: 100%;
padding: 20%;
box-shadow: inset 0 0 100px #000;
}
.cover-text {
text-align: center;
color: white;
display: table-cell;
vertical-align: middle;
}
.cover-text h1 {
margin: 0;
font-size: 70px;
letter-spacing: -3px;
}
nav.navbar-inverse {
background: rgba(0, 0, 0, 0.5);
border: none;
}
.the-quote {
background: #222;
}
blockquote1 {
border: none;
margin: 0;
font-family: Georgia, Times, serif;
font-style: italic;
font-size: 32px;
color: white;
}
blockquote1 cite {
display: block;
text-align: right;
text-transform: uppercase;
font-family: Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 18px;
font-weight: bold;
color: #888;
margin-top: 40px;
}
section {
padding: 100px;
}
h2 {
text-align: center;
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 60px;
}
h2 + p {
text-align: center;
margin-top: -60px;
}
#team {
background: url('img/fan.jpg') top left no-repeat;
background-size: cover;
color: white;
text-align: center;
}
#reviews p {
color: black;
}
#reviews h4 {
font-weight: 600;
}
#reviews {
text-align: center
}
#contact-us {
background: url('img/straighten.jpg') left no-repeat;
background-size: cover;
text-align: center;
}
footer {
background: #222;
color: black;
text-align: white;
padding: 20px;
font-family: Georgia, Times, serif;
position:absolute;
bottom: 0;
width: 100%;
}
footer a {
color: hotpink;
}
#media only screen and ( max-width : 568px ) {
.cover h1 {
font-size: 40px;
}
section {
padding: 20px;
}
}
.login-cover {
background: #333;
background-size: auto;
padding-top: 300px;
min-height: 93.8vh;
min-width: 100vw;
color: black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Haircut Designs</title>
<!-- Bootstrap Stuff -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Coursework Style that's seperate -->
<link href="coursework_style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse">
#My navigation bar code
</nav>
<div class="cover" id="top">
<div class="cover-text">
<h1>Professional Haircut Service at its finest</h1>
<p class="lead">It's your haircut so why not choose the exact date, time and barber of your preference.</p>
Sign up by clicking right here!
</div>
</div>
<section class="the-quote">
# Quote
</section>
<section id="services">
#List of the services we offer
</section>
<section id="team">
# Team members
</section>
<section id="reviews">
#Reviews
</section>
<section id="contact-us">
#Contact-Us information
</section>
<!-- jQuery for javascript stuff-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap javascript code / might remove tho -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<footer>
crafted with ♥ in Bangladesh by Roman Ryan Karim
</footer>
</html>
Before this error persisted, the footer used to appear underneath the contact-us section however it now appears the instance you go to the website and is stuck there. Can someone help? I don't mind sharing more of the code if you need it.
Try to remove your position absolute, of your footer
I'm very new at CSS so please be patient with me. I am trying to set a video background for a section with a semi transparent text box over the video. After wrestling with it for a while, I finally got the video fitted to the screen and resizing when the screen shrinks.
The problem is, now the section containing the text doesn't resize when the screen becomes narrower. Instead, the text disappears under the next div down.
I presumed this is because the aspect ratio of the video can't be modified. The best solution I could come up with is to set a media query to replace the video with a static background when the screen is under 700 pixels wide. I was hoping that the normal properties of auto;" would then kick in and accommodate the additional length of the text. However, the video doesn't respond to the "display: none;" tag when placed in a media query.
I'm kind of stuck as to what to do.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, `enter code
here`initial-scale=1.0">
<title>Jamaa</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<ul class="navbar">
<li><p href="#home" style="margin-left: 20px;">JAMAA</p></li>
<li style="float:right">Contact</li>
<li style="float:right">News</li>
<li style="float:right"><a class="left" href="#about">Blog</a></li>
</ul>
<section class="intro">
<div class="content">
<img src="images/jamaalogo.png"
style="height:300px; margin-top: 5%; align-content: center; "
class="center">
<h1 class="motto">Share. Profit.</h1>
<h2 style="text-align: center;">Using finance to increase cryptocurrency
access for those who need it most.</h2>
</div>
</section>
<div class="video_wrapper">
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; ">
<source src="images/fountain.mp4" type="video/mp4">
<div class="problem_box"><h2>We Have a Problem</h2><p>People are
losing their savings. Governments are collapsing. The threat of war is
looming on the horizon. All of these problems have a common source- bad
money. And yet most of us don't know what we can do about it.</p></div>
</video>
Here is the CSS:
#font-face {
font-family: 'textabold';
src: url('fonts/texta-bold-webfont.woff2') format('woff2'),
url('fonts/texta-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono"
rel="stylesheet">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-weight: 500;
font-family: 'Roboto Mono', monospace;
overflow-x: hidden;
}
h2 {
font-size: 2em;
display: block;
color: white;
font-weight: 300;
}
h1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
p {
font-size: 1 em;
font-weight: 500;
color: white;
}
a {
font-weight: 700;
color: #333;
&:hover{
opacity: 0.8;
}
&:active {
top: 1px;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.container {
display: flex;
color: white;
justify-content: space-between;
align-items: center;
padding: 2px 44px;
}
.navbar {
position: fix
}
#media screen and (max-width : 760px){
ul {
display: none;
}
.intro { background: red;}
.video_wrapper {
height:auto;
background: url("images/relief.jpg") no-repeat center center;
background-size: cover;
}
.video {
display: none;
}
}
.title {
display: block;
color: white;
align-items: center;
padding: 12px 44px;
font-size:;
}
li a:hover {
background-color: #4CAF50;
}
.intro {
height: 92vh;
background-color: #4CAF50;
display: block;
overflow: hidden;
}
.problem {
max-height: 60vh;
background-size: cover;
opacity: 0.8;
z-index: -100;
}
.problem_box {
height:70%;
z-index: 2;
}
.video_wrapper{
width: auto;
position: relative;
overflow: hidden;
z-index: -1;
margin-bottom: -30px;
text-align: center;
}
.video_wrapper video{
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 1;
height: auto;
overflow: auto;
}
.video_wrapper .problem_box {
height: auto;
width: 70%;
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
background: #333;
opacity: 0.9;
display: inline-block;
margin-top: 8%;
margin-left: 15%;
box-sizing: content-box;
}
I suppose I could just give up and use static background, but it took me so long to figure out the video background I'd hate to throw it away it this point... any help is much appreciated!
you forgot to put the video class on the video tag
<video preload="auto" autoplay="true" loop="loop" muted="muted"
volume="0" poster="images/relief.jpg" style="height:auto; " class="video">
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I have this kind of complex set up with divs and links. Anyway, the logo in the top of left of my page is supposed to change when you hover over it, and it does. However, it also changes if your mouse goes anywhere in the top section of the page (outlined in red on the image)
Also when I click on the logo, the link doesn't work. I think it may have to do with the way I have the divs set up, but i'm not sure.
I'm still kind of new at all of this, and I'm a little overwhelmed at figuring out this issue. If you can help, I would appreciate it.
Below is my html, css, and an image to help show you what I'm talking about.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="topheader">
<a href="index.html">
<div id="logo">
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
</div>
<div id="welcome">
<h1>Welcome</h1>
<h2>
To
<span class="gold"> Promise Land Partners</span></h2>
</div>
<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | NEWSLETTER | FACEBOOK
<span class="right">DESIGN: HANGING OUT</span>
</p>
</div>
</div>
</body>
</html>
This is my CSS
#charset "utf-8";
/* CSS Document */
body {
background-image: url(img/dot.png), url(img/background.jpg);
background-repeat: repeat, no-repeat;
background-position: top left, center center fixed;
background-size: auto, cover;;
margin: 0px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#topheader {
height: 135px;
width: 100%;
overflow: hidden;
position: relative;
background-image: url(img/headerbar.png);
background-repeat: repeat-x;
}
#logo {
background-image:url(img/PLP.png);
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
}
#logo:hover, #logo:active {
background-image:url(img/PLP_pushed.png);
}
#navigation {
background-image: none;
background-position: top left;
padding-left: 180px;
}
#bottom_bar {
background-image:url(img/bottom_bar.jpg);
position: fixed;
bottom: 0;
height: 27px;
width: 100%;
color: white;
}
#bottom_bar p {
text-align: left;
padding: 4px;
margin: 0;
}
.right {
float:right;
}
#welcome {
background-image: url(img/welcomepanel.png);
background-repeat: no-repeat;
position: relative;
left: 0;
top: 70px;
height: 261px;
width: 100%;
padding-top: 10px;
padding_left: 10px;
margin: 0;
}
h1 {
color:white;
padding-left: 90px;
font-size: 6em;
margin: 0;
margin-top: 8px;
}
h2 {
color: white;
font-size: 4em;
padding-left: 20px;
margin: 0;
line-height: .65em;
}
.gold {
color: #ee9f00;
font-size: .75em;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
a:visited {
color: #c88601;
}
a:focus {
color: #ee9f00;
}
a:hover {
color: #ee9f00;
}
a:active {
color: c88601;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:visited {
color: white;
}
#navigation a:focus {
background-color: #ee9f00;
}
#navigation a:hover {
background-color: #ee9f00;
}
#navigation a:active {
background-color: #ee9f00;
}
You have your CSS set to change the image when you hover over #logo and #logo is set to width: 100%; Try changing the width of #logo or, if that breaks your style, add a child div to #logo in which you can change the background image.
See this fiddle for an example: http://jsfiddle.net/QDgVy/
HTML
<a href="index.html">
<div id="logo_container">
<div id="logo"></div>
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
CSS
#logo_container {
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#logo {
background-image:url(...);
width: 100px;
height: 100px;
display: block;
float: left;
}
#logo:hover, #logo:active {
background-image:url(... );
}
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.