So I'm at a loss here. I know I have the proper src code for my image, when I view the page in Chrome, without the use of Brackets, the image will show. But when I use Brackets Live preview, it does not show the image in the browser, it does create a box for it, but its empty. The funny thing is, when I hover over the code in the text editor in Brackets, I get a preview of the image. Any help will be greatly appreciated!
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
<title>Here goes #1</title>
</head>
<body>
<header class="main-header">
<ul class="nav bv">
<li><h1>My Favortie Artists</h1></li>
<li>About</li>
<li>Podcasts</li>
<li>Books</li>
<li>Ideas</li>
<li>Blog</li>
</ul>
</header>
<div class="main-content">
<div class="content1">
<ul clas="imgs">
<li class="afr"><img src="c:web projects/art/img/afr1.jpg">Afremov</li>
</ul>
<p></p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding; 0;
box-sizing: border-box;
width: 100%;
}
body li {
list-style-type: none;
}
ul {
padding: 0;
}
.nav {
text-align: center;
background-color: beige;
box-shadow: 0 1px 10px black;
height: 230px;
}
.nav h1 {
text-shadow: 5px 7px 4px white, 2px 2px 10px beige;
line-height: .8em;
padding: 10px 0;
}
/*COMMON FONTS*/
.bv {
font-family: 'Bevan', cursive;
}
/*SMALL SCREEN STYLE*/
.nav li {
font-size: 1.25em;
text-shadow: 2px 3px 10px white;
}
/*LINK STYLES*/
.nav a {
text-decoration: none;
list-style-type: none;
border-bottom: 2px solid grey;
padding: 0 15px;
color: black;
border-radius: 10%;
}
.nav a:hover {
background-color: bisque;
padding: 0 5%;
font-size: 1.5em;
border-radius: 25%;
transition: background-color .6s, padding .8s; font-size 3s, border-radius .8s;
}
/*LARGE SCREEN*/
#media (min-width: 769px) {
.nav {
display: flex;
height: 150px;
}
.nav li {
flex-grow: 1;
align-self: center;
}
.nav:not(:first-child) {
flex-flow: wrap;
justify-content: flex-end;
}
.nav h1 {
padding-right: 50%;
flex-grow: 2;
margin-left: 10px;
}
.nav a:hover {
background-color: bisque;
padding: 0 20%;
font-size: 1.5em;
border-radius: 25%;
transition: all 1s;
}
/*Image Links*/
What is this "c:web" in src="c:web projects/art/img/afr1.jpg".
Did you mean c:/web/projects/art/img/afr1.jpg?
If so try to set a relative path something like src="art/img/afr1.jpg".
Always copy your supporting files like images and js, css on the working directory with respective folder names, then refer the relative paths to refer the files inside your code.
Related
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
height: 85px;
width: 100%;
z-index:1001;
}
label.logo{
color: rgb(255, 255, 255);
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
position: fixed;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 0px;
font-weight: bold;
}
nav {
z-index: 1001;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}
.vid-background {
z-index: -100;
width:100%;
height:80vh;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
.reg-element {
width:100%;
height:80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>SnowWarrior Landing Page</title>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<img src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png" alt="menu"/>
</label>
<label class="logo">SnowWarrior</label>
<ul>
<li>Home</li>
<li> Shop</li>
<li> Contact</li>
</ul>
</nav>
<div class="vid-background">
<video autoplay loop muted>
<source src="./assets/winter1.mp4">
</video>
</div>
<section></section>
<div class="reg-element">
<span>Just saying</span>
</div>
</body>
</html>
The video overflowing into the navbar is by choice since that is what I'm trying to achieve. However, when I try to add more div elements with text in there, it shows up behind the video instead of below the video. I'm very new to HTML and CSS (just dived into these two days ago) so I may be doing some things wrong here. But I would be glad if someone could point the right thing out to me.
Edit: Does anyone know how to embed a video into an HTML so it shows on StackOverflow?
This would be my approach:
Using modern layout algorithms such as flexbox&grid rather than absolute positioning hell. Here I have a header with the nav and video as children. The header is a grid where the nav is explicitly set to take up the top section and the video explicitly told to take up the full grid.
Smaller components use flexbox to flex along a single axis, and when out of room, wrap onto a new line to allow the website to be responsive on small screen widths, removing the need for media queries here.
If you don't understand something and want me to update this answer to explain it, drop a comment.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
header {
display: grid;
grid-template: min-content 9fr / 1fr;
width: 100%;
min-height: 80vh;
color: white;
}
nav {
grid-area: 1 / 1 / 2 / 2;
height: min-content;
z-index: 10;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
padding: 1rem;
background-color: #0004;
background-blend-mode: darken;
}
.vid-background {
grid-area: 1 / 1 / 2 / 3;
}
.vid-background>* {
width: 100%;
}
h1 {
font-size: 2rem;
}
nav ul {
flex-basis: max-content;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
nav ul li a {
padding: .5rem 1rem;
border-radius: 3px;
color: inherit;
text-transform: uppercase;
transition: .5s;
}
a:active,
a:hover {
background: #1b9bff;
}
<header>
<nav>
<h1>SnowWarrior</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="vid-background">
<img src="https://source.unsplash.com/random/800x400">
</div>
</header>
Just saying
This is because you're using position:fixed for everthing at the top, which then sadly makes your next element not care about its existance.
Simply put, if you put position:fixed, and then simply add an div with no position defined, they will not relate to eachother. As I do not know how you wish this to work I cannot fix the code for you, hence I will have to simply inform you about this and hopefully you'll be pointed in the direction you asked for - check position out in some css tutorials.
Display:flex is a good place to start.
I have one problem with my border. The problem is that I have 2 different borders: one that is on the "DUCO" button (my name) and one that creates itself when you hover over the text. The problem is that that the borders aren't the same size. can anyone help? (you cant see the background but that is no big deal)
Thanks
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.hoofd-nav li.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li class="actief"> Duco </li>
<li> Hobbys </li>
<li> Dromen </li>
</ul>
</div>
</header>
</body>
</html>
It would be easier to set the .active class on the a tag.Then you can also set a transparent border to remove the wobble.
The problem is comming from the mixing of both a and li tags. So the example is for the a tag but might as well be the li tag.
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.hoofd-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.hoofd-nav li
{
display: inline-block;
}
.hoofd-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent; /* Remove wobble */
}
.hoofd-nav li a.actief
{
border: 3px solid white;
}
.hoofd-nav li a:hover
{
border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="rij">
<ul class="hoofd-nav">
<li> Duco </li>
<li> Hobbys </li>
<li> Dromen </li>
</ul>
</div>
</header>
</body>
</html>
It seems that your static border (the one on "DUCO") and the other border (the one that appears when hovering over "DUCO") are not borders of the same element!
The static one is a border for the li while the other one is applied on the a tag inside the li.
Try making both border properties applied on the same element, and it should work fine.
I can't seem to remove the first nav menu separator (small-black-heart-md.png) from the navigation. All the images are showing up in the right place except the first one. It's showing up before the first list item, "Our Story". I've tried using the pseudo element nav li:first-child:before {display:none;} but I did not get any results. Help is greatly appreciated. This issue has me perplexed and I can't seem to find a clear answer on the web. Thanks for helping out a noob! :)
Here is my CSS:
.banner {
background-image: url("images/navimages/topimage.jpg");
padding: 108px 200px;
}
* {
padding:0;
margin:0;
}
body {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #C4EDFF;
font-family: 'Tangerine', serif;
text-align: center;
}
p {
font-family: Arial;
font-size: 14px;
text-shadow: 1px 1px 1px #aaa;
text-align: left;
}
nav li {
text-shadow: 5px 5px 5px #aaa;
background-image: url(images/navimages/small-black-heart-md.png);
background-repeat: no-repeat;
padding-left: 40;
padding-right: 40;
font-size: 40px;
font-weight: bold;
display: inline;
}
li a {
color: gray;
text-decoration: none;
}
audio {
width: 640px;
}
a:hover {
color: black;
}
Here is my HTML:
<head>
<head>
<title>The Big Day</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<body>
<header class="banner"></header>
<nav>
<ul>
<li>Our Story</li>
<li>Photos</li>
<li>Details</li>
<li>Wish List</li>
<li>Home</li>
</ul>
</nav>
<BR><BR><BR>
<div style="
padding: 60px;
margin-left: auto;
margin-right: auto;
height: 400px;
width: 620px;
border: 10px double;
text-align: left;
box-shadow: 10px 10px 5px #888888;">
<p>Content here...</p></div>
</body>
</head>
</html>
Just use:
nav li:first-child{
background:none;
}
I have a simple site so far but have two issues. I have done everything with percentages because the site might go up on a high def tv and i want them to scale well. The scaling works with the images but id also like to scale the navbar background and text so that it doesnt end up looking small.
The second issue is When the site is squished the bottom image covers the nav bar and doesn't flow under the nav bar element. Id just like this feature because it would scale well for smartphones.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="headish.css">
<title>New Site</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img src="images/logo.png" alt="logo" />
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<img src="images/second.png" alt="image">
</div>
</div>
</div>
</body>
</html>
Here is the css:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
position: relative;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
text-align: center;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
padding-left: 10%;
}
#maincont img{
border-radius: 7%;
width: 30%;
}
To stop the image from flowing into other elements, use clear:both on your #maincontent img
Edit : A good article can be found on it here which suggests other methods. http://quirksmode.org/css/clearing.html
Edit2: This only applys to floated elements, I have just noticed you havn't used floats atall. See my comment below
I have a div 'container' which holds all my content and is set for 80% width. Inside that div I have div 'tophead' which contains a logo and a nav bar at 100% (but it only reaches the parent 80%). Then I have 'maincont' which is inside the 'container' div and has an image. Id like this image to be left aligned with the side of the 'container' div so that there is still that 20% space left open. If I float left or align left it shows up all the way to the left of the screen over the 20% id like blank. Any idea how to fix this would be very much appreciated.
Bonus thanks if someone can figure out why the image overlaps my nav bar.
jsFiddle:
http://jsfiddle.net/4JKus/4/
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ccoheader.css">
<title>Hello World</title>
</head>
<body>
<div id="container">
<div align="center" id="tophead">
<img src="images/logo.png" alt="logo">
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div align="center" id="maincont">
<img src="images/secondimage.png" alt="image">
</div>
</div>
</div>
</body>
CSS:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
height: 68%;
width: 80%;
padding-top: 2%;
}
#maincont img{
height: 100%;
width: auto;
border-radius: 30px;
float: left;
}
Not sure how far this gets to solving your problem(s), but its a start:
http://jsfiddle.net/4JKus/5/
Using the align attribute in div declarations is considered bad form. You had a stray /div hanging out. Not sure why you are forcing your images and the main container to 100% height.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ccoheader.css">
<title>Hello World</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img class="logo" src="images/logo.png" alt="logo">
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<div class="maincont_col1">
</div>
<div class="maincont_col2">
<img src="images/secondimage.png" alt="image">
</div>
</div>
</div>
</body>
CSS
html, body, #container {
width: 100%;
margin: 0;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
}
#tophead img {
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
width: 100%;
padding-top: 2%;
overflow: hidden;
}
.maincont_col1{ width:20%; float:left; }
.maincont_col2{ width:80%; float:left; }
#maincont img{
border-radius: 30px;
}
Getting rid of float:left in your #maincont img selector solves the first problem.
Problem 2 is down to the fact that you have a topheader of 20% and the nav bar overlaps this.. You can fix this by removing the stipulation that the top and bottom are fixed in size.