For some reason my navbar is bigger than it's supposed to be. Or atleast I think it's my navbar. Whenever I remove #rect It goes away. What's the problem here?
#tagline {
font-style: italic;
padding-right: 150px;
padding-left: 10px;
}
nav {
background-color: white;
display:flex;
align-items:center;
overflow: hidden;
}
#logo {
padding-top: 8px;
padding-left: 30px;
vertical-align: middle;
}
li, li>a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
padding: 5px 10px 5px 10px;
}
li>a:hover {
background-color: #7bcc1d;
color: white;
}
.active {
background-color: #7bcc1d;
color: white;
}
#main-bg {
background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
background-size: 100% 100%;
height: 500px;
margin: 0;
}
#rect {
background-color: white;
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 400px;
text-align: center;
}
h2 {
padding-top: 15px;
margin-bottom: 0;
}
span {
margin: 0;
}
#enroll_button {
text-decoration: none;
padding: 10px 20px 10px 20px;
background-color: #7bcc1d;
color: white;
}
<nav>
<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<div id="main-bg">
<div id="rect">
<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
Enroll in Your Course
</div>
</div>
You haven't set #rect as a block element and the h2 margin is pulling the whole thing down.
#rect h2{margin-top:0;}
That's because of margins which set in user agent stylesheet from the browser. You can link the reset.css and set your desire margins in your own css.
Related
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
An element won't move to my intended position. I want to have some white space between the right of "Register" and the browser but don't know how to do it. I have tried padding but it seem to be kind of wrong thinking.
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: sans-serif;
color: black;
}
.firstpart {
background-color: #eee;
height: 30vh;
}
.navbar li {
list-style: none;
display: inline;
}
.navbar-left {
float: left;
padding: 20px 20px 0 20px;
}
.navbar-right {
float: right;
padding: 20px 20px 0px 20px;
}
.badge {
background-color: black;
color: white;
height: 35px;
width: 80px;
}
<div class="firstpart">
<div class="navbar">
<ul>
<li class="navbar-left">ABOUT</li>
<li class="navbar-left">CONTACT</li>
<li class="navbar-left">FAQS</li>
<div class="navbar-right badge">
<li>REGISTER</li>
</div>
<li class="navbar-right">SIGN IN</li>
<li class="navbar-right">MANAGE BOOKING</li>
</ul>
</div>
</div>
You just need to add:
.navbar {
padding-right: 10px;
}
You can also remove the div inside of your unordered list as this isn't valid HTML. Replace it with:
<li class="navbar-right badge">REGISTER</li>
Code (open in "Full page" view as otherwise "Manage Booking" gets wrapped):
/* Add this */
.navbar {
padding-right: 10px;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body{
font-family: sans-serif;
color: black;
}
.firstpart{
background-color:#eee;
height: 30vh;
}
.navbar li{
list-style: none;
display: inline;
}
.navbar-left{
float: left;
padding: 20px 20px 0 20px;
}
.navbar-right{
float: right;
padding: 20px 20px 0px 20px;
}
.badge{
background-color: black;
color:white;
height: 35px;
width: 80px;
}
<body>
<div class="firstpart">
<div class="navbar">
<ul>
<li class="navbar-left">ABOUT</li>
<li class="navbar-left">CONTACT</li>
<li class="navbar-left">FAQS</li>
<li class="navbar-right badge">REGISTER</li> <!-- Use an li element instead -->
<li class="navbar-right">SIGN IN</li>
<li class="navbar-right">MANAGE BOOKING</li>
</ul>
</div>
</div>
</body>
I think you could simply set a width for .navbar div to say, 98%
.navbar {
width:98%;
}
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
Well I have a navigation with a fixed position with a list inside, which I want to change color on a hover. But this doesn't work because of the fixed position of the navigation. Is there a way to get around this?
Here is my example
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li:hover { cursor: pointer;}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1">Link1</li>
<li data-menu="Link2">Link2</li>
<li data-menu="Link3">Link3</li>
<li data-menu="Link4">Link3</li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
Thanks in advance!
Well after trying and trying I added a z-index in the .nav css and it worked... finally! I have no clear explanation for why it worked, but it worked for me.
There is no way currently in CSS alone to select a parent of a child.
The best way I can think of to do this, or at least the simplest would require a little JS.
Simple add a data attribute to your list items, and a JS event that on hover passes the value of the data attribute as a class to the fixed navigation. That class would control color.
Have a go yourself, if you struggle post some code and we can fix it.
Seems to work fine for me with your code (all I did was actually put the <a> tags inside the <li> elements, since that was what your code was targeting.)
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li a:hover {
cursor: pointer;
color: red;
}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1"> <a href=#>Link1</a> </li>
<li data-menu="Link2"><a href=#>Link2</a></li>
<li data-menu="Link3"><a href=#>Link3</a></li>
<li data-menu="Link4"><a href=#>Link4</a></li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
well, you code works fine for me
js fiddle linke
I saw your code and if you don't want to use <a> tag you have to add
.nav-menu li:hover{
color:#fff;
}
simple code
nav { width: 100px; height: 80px; position: fixed; }
nav li { display: inline-block; }
nav li:hover { color: white; }
<nav>
<ul>
<li>dhh</li>
<li>fs</li>
<li>ss</li>
</ul>
</nav>
The simplest way I've tried is putting a filler element inside the first element, and target styling hover for that inner element.
This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 6 years ago.
I'm trying to style the central big part called "jumpotron" which contains "letters" and "h1". When I try to push "letters" or "h1" lower in the central area vertically it moves the whole "jumpotron" together with the background image. Why does that happen? Why it doesn't respect the fact that "letters" is a child of "jumpotron" so it has to move it's margins inside of "jumpotron"? Also is there a better way to create a big image background for the "jumpotron" from the one I used?
Here's the code:
<body>
<header>
<div class="container">
<h2>Trunk Club</h2>
<nav>
<ul>
<li>How it Works</li>
<li>What to Expect</li>
<li>Stylists</li>
<li>Log In</li>
<li><a id="getstarted" href="#">Get Started</a></li>
</ul>
</nav>
</div>
</header>
<div id="jumpotron">
<div id="letters">
<h1>Premium Clothing,<br>
Great Advice,<br>
Zero Work</h1>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Source Sans Pro', sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
min-width: 800px;
height: 60px;
background-color: #151e28;
text-transform: uppercase;
}
header h2 {
color: #FFFFFF;
float: left;
margin-top: 15px;
}
nav {
float: right;
margin-top: 5px
}
nav li {
float: left;
list-style: none;
color: #878b85;
margin-left: 20px;
font-size: 12px;
font-weight: bold;
}
nav ul li:nth-child(4) {
border-left: 1px solid #878b85;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -5px;
}
nav ul li:nth-child(5) {
border: 1px solid #878b85;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 7px;
margin-top: -5px;
}
#getstarted {
text-decoration: none;
color: #878b85;
}
#getstarted:visited {
color: #878b85;
}
#jumpotron {
width: 100%;
min-height: 670px;
background-image: url(images/Stylist_Product_Exp30-v3.jpg);
background-position: center;
background-size: 100% auto;
}
#letters {
margin-top: 500px;
}
#jumpotron h1 {
color: #FFFFFF;
text-align: center;
font-size: 55px;
}
You have to set the padding on #letters to 500, not the margin