I'm mocking up a site as an assignment and my text is appearing behind my nav bar. I need it to be under the nav bar how can I fix this?
so I've tried setting the margin-bottom to 50px and setting it as important.
I've tried setting the nav bar as static.
I've tried messing with a bunch of different settings as well but I can't seem to find something to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<body>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
Because your nav is position: fixed;, it doesn't push the rest of your content down the page. Anything absolutely positioned, be it absolute,sticky, or fixed, is not a part of the DOM in the same way that a normal element is. To non-absolute positioned elements it may as well not exist. What you want to do is add a margin-top to your content like this:
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
body{
margin-top: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
Related
I can apply "color:red" on hover, but not margin
can't figure out what I'm doing wrong
my css
.contact{
color:black;
position:relative;
}
.contact:hover{
color:red;
margin-top:20px;
}
my html
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
It is an inline element. You should set the display for it to block or inline-block to make margin work.
.contact{
display: block;
color:black;
}
.contact:hover{
color:red;
margin-top:20px;
}
You can't set top margin to an inline element. You need to make your element block or inline-block if you want to set top margin in your element.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.contact {
color: black;
position: relative;
display:block;
}
.contact:hover {
color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<ul>
<li>
<div>abc</div>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
Use top instead of margin-top:
.contact:hover{
color:red;
top:-20px;
}
<!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.0">
<title>Document</title>
<style>
.contact{
color:black;
}
li:hover{
color:red;
margin-top: 20px;
}
.contact:hover{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
This is the code I wrote and I don't know what I did wrong, I'm trying to recreate this interface but all the content just disappears, the only thing that shows is a white rectangle on the top of the page...
This makes no sense to me and I don't know how to address it
website taken from oswd.org
<!DOCTYPE html>
<html lang="en-UK">
<head>
<title>Bookish recreated by LuckyP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=viewport-width, initial-scale=1.0">
<meta name="author" content="Luca Santarelli">
<meta name="description" content="Come to see the first practice website by LuckyP,
commonly called Lucio, depending on the platform you watch him on">
<meta name="robots" content="index">
<meta name="keywords" content="bookish, real web development project">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:"trebuchet ms", helvetica, sans-serif;
background-image: url(images/bg.gif);
}
#wrap{
background-color:white;
padding:15px;
margin:auto;
width: 800px;
}
.orange-text{
color:#D97900;
}
.bold{
font-weight:bold;
}
header{
position:relative;
background-image: url(images/headbg.gif);
background-repeat: repeat-x;
width:770px;
}
h1{
position:absolute;
left:40px;
bottom:15px;
}
header ul{
position:absolute;
right:30px;
bottom:15px;
}
header ul li{
color:#fff;
text-decoration:underline;
border-right:#D97900;
float:left;
padding: 10px;
}
header ul li:hover{
background-color:#D97900;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h1><span class="orange-text">my</span><span class="bold">website</span>name</h1>
<ul>
<li>homepage</li>
<li>recent articles</li>
<li>about us</li>
<li>contact us</li>
</ul>
</header>
</div>
</body>
</html>
This is the output:
Remove "bottom:15px;" from H1 and "header ul".
I am learning HTML & CSS and I want to know how can I remove the space above and on the sides of the navigation bar.The navigation bar should be in such a way that there is no space around it.Below is the code.Thanks in advance.
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:none;
}
.sb{
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
You wanted the navbar to not to have any white space around it. So I took you code and did some changed to it.
First is the HTML which I removed your <nav> and <ul> then replaced those parts with <div>.
Code:
<body>
<div class="div">
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<div class="link">
Home |
Profile |
Settings
</div>
</div>
</body>
After that I took your CSS and made changed to it to fit the query made by you.
Code:
.link{
margin-left:80%
}
.div{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
height:10%;
}
.sb{
float:left;
margin-left: 2%;
}
body,html{
margin: 0;
padding: 0;
border: 0;
}
A working fiddle Here
Now your navbar doesn't have any white space up or right or left. Now it's up to your tinker it to fit your need.
I guess, you looking for this.??
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:15px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin:0px;
}
.sb{
float:left;
}
body{
margin: 0px
}
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
<style>
html,body{
margin:0;
padding:0;
}
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:0;
}
.sb{
float:left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
Add the following style for body and ul tags, so that there is no space around the navigation bar.
margin:0
padding:0
Just add this rule to reset the browser's default margins and the default margins for ul which cause your white space above the navigation bar:
html, body {
margin: 0;
}
ul {
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
<style>
html,
body {
margin: 0;
}
nav {
text-align: right;
padding-right: 0px;
padding-top: 0px;
}
ul {
color: white;
background-color: cyan;
padding-top: 19px;
padding-bottom: 19px;
padding-right: 10px;
list-style: none;
margin-top: none;
margin: 0;
}
.sb {
float: left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>
<style>
body{
margin:0px !important;}
nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:0px;
}
.sb{
float:left;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
Home |
Profile |
Settings
</li></ul>
</nav>
</body>
</html>
First, great that you want to learn HTML and CSS. Keep learning, exercising and never stop asking! Times will come when you can help others aswell, keep rocking :)
Second, what you faced are CSS default vales. As for many things websites need to work even if they dont have any css applied to it. The reason for this is that "external" CSS (linking a css file to an html file) was developed years after HTML. Therefore the most HTML elements have default values to guarantee websites dont break. For your specific example the body element has default values too:
body {
display: block;
margin: 8px; /* this is what you do not want */
}
Official list of css default values - https://www.w3schools.com/cssref/css_default_values.asp
There are different approaches to get rid of default css values. In todays web is more likely to add a CSS file that adjust all default values to the same look, this is what Normalize.css is doing. The more radical one is Eric Meyers "CSS Reset", which removes all default styles.
I can highly recommend this Stack Overflow question if you want to go a bit deeper into this topic: What is the difference between Normalize.css and Reset CSS?
Add these lines in your style sheet To reset CSS
body,html{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
I'm trying to make a drop down menu (class is "scenemenu") that appears when I hover over the li class "scenebutton". However, I'm not sure of the CSS selector I'm using is correct. Can somebody help me fix it please? Here is my code.
#charset "utf-8";
/* CSS Document */
body{
background-color:#000;
background-image:url(Pictures/Plundergem-Title.png);
background-repeat:no-repeat;
background-position:50% 0%;
height:1500px;
}
.menu-list{
list-style-type:none;
color:#E92A27;
font-family:"Mayan Font";
font-size:36px;
}
.menu-list li{
cursor:pointer;
}
.menu-list li:hover{
background-color:#E92A27;
color:#000;
}
#font-face{
src:url(CFCivilisationMaya-Regular.ttf);
font-family:"Mayan Font";
}
.menu-block{
width:200px;
position:fixed;
top:200px;
left:-23px;
border-right:3px solid #E92A27;
}
#menu-seperation{
width:150px;
position:fixed;
left:20px;
top:270px;
}
#flash-container{
position:relative;
height:500px;
width:700px;
left:300px;
top:700px;
color:#FFF;
font-family:"Cataneo BT";
font-size:18px;
}
#flash-container p{
color:#FFF;
font-family:"Text Font";
}
#font-face{
font-family:"Text Font";
src:url(TT0952M_.TTF);
}
.scenemenu{
list-style-type:none;
color:#E92A27;
font-family:"Mayan Font";
position:fixed;
top:297px;
left:190px;
z-index:2000;
width:150px;
display:none; }
.scenemenu li{
position:relative;
left:-50px;
}
li.scenebutton:hover ul.scenemenu{
display:inline;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-scrollto.js"></script>
<script src="animation.js"></script>
<link rel="shortcut icon" href="Pictures/Gem Icon.png" />
<title>Plundergem Adventure Game</title>
</head>
<body>
<div class="menu-block">
<ul class="menu-list">
<li>HOME</li>
<hr id="menu-seperation"/>
<br style="line-height: .3em" />
<li id="scenebutton">SCENES</li>
<ul class="scenemenu">
<li>SCENE 2</li>
<li>SCENE 3</li>
</ul>
</ul>
</div>
<div id="flash-container">
<img src="Pictures/Scene_1_converted.jpg" width="700" height="504" />
<p>The sky is dark, the grass is dark, and even the dark is quite dark. This will do a perfect job of setting the mood. Unfortunately, it is raining, meaning that you will be unable to pull off your uncanny Batman impressions. Will you climb the temple stairs, or will you head home?</p>
<br />
<u>1. Climb the temple stairs in an over manly fashion.</u>
<br />
<br />
<a><u>2. Run away and never come back.</u></a>
</div>
</body>
</html>
Tthe ul you are trying to select comes after the li; you should move the ul you are trying to display within the li instead of after it.
<li id="scenebutton">
SCENES
<ul class="scenemenu">
<li>...</li>
</ul>
</li>
Also, you need to use the id selector for scenebutton.
#scenebutton:hover ul.scenemenu {
index.html and style.css are on my local machine to practice coding.
Chrome and Safari are rendering the CSS correctly but FireFox 29 is not. Firefox recognize the css file but it's not rendering it. I've tried on a different machine and still have the same issue.
I've already validated my code and there were no errors. Am I missing any tag that is preventing this from rendering in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="test/css" href="style.css">
<title>Welcome!</title>
</head>
<body>
<div id="pagewrap">
<!-- Top Head of My Page -->
<div id="header">
<nav id="nav">
<div id="socialnetwork">
<img src="./Social_Icons/Linkedin.png" alt="LinkedIn">
<img src="./Social_Icons/facebook.png" alt="FB">
<img src="./Social_Icons/Instagram.png" alt="InstaGram">
<img src="./Social_Icons/Twitter.png" alt="Twitter">
<img src="./Social_Icons/Skype.png" alt="Yelp">
<!-- Icons from Dribble by Dawid Dapszus https://dribbble.com/dashoo-->
</div>
<!-- End of Social Network Links-->
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Resume</li>
<li>About Me</li>
<li>Contact </li>
</ul>
</nav>
</div>
</div>
<!--End of Page Wrap -->
</body>
</html>
body {
font-family:'Century Gothic', sans-serif;
}
a {
text-decoration: none;
}
#pagewrap {
width:950px;
margin: 0 auto;
}
#socialnetwork {
padding-top: 100px;
float:right;
}
#socialnetwork img{
height:30px;
}
#nav ul{
text-align: left;
border-bottom: groove;
}
#nav li{
margin:0 15px 0 0;
display: inline;
}
#nav li a:link{
color:#868686;
}
#nav li a:visited{
color:#868686;
}
#nav li a:hover{
color:#324EDC;
}
#nav li a:active{
color:#324EDC;
}
You are typing the wrong word in Link tag attribute value, you are typing "test/css" instead of "text/css"
Your Tag:
<link rel="stylesheet" type="test/css" href="style.css">
Updated Tag:
<link rel="stylesheet" type="text/css" href="style.css">
type="test/css"
Shouldn't it be: text/css?