My goal is to have the navigation buttons jump to the top of each section. I've tried using position: relative; and using top: but it then changes the look of the site at the top, which I don't want. My problem right now is that it doesn't jump to the top of the section. This is because the nav bar is covering the top of each section (except for the last one). But I don't know what to do to solve this issue. I've researched this problem to the best of my ability but couldn't find a relevant post for this. I've cut down the code to what I believe is the minimum.
<div id="container">
<header id="header">
<img id="header-img" src="https://cdn.mos.cms.futurecdn.net/BQwukuZwwwXrg27B9Le2Q6.png"/>
<nav id="nav-bar">
<ul>
<li id="nav-btn">
<a class="nav-link" id="features" href="#Features">Features</a>
</li>
<li id="nav-btn">
<a class="nav-link" id="demo" href="#Demo">Demo</a>
</li>
<li id="nav-btn">
<a class="nav-link" id="pricing" href="#Pricing">Pricing</a>
</li>
</ul>
</nav>
</header>
<img id="cybertruck" src="https://images.hgmsites.net/hug/tesla-cybertruck_100725713_h.jpg"/>
<section id="Features">
<h3>EXOSKELETON</h3>
<h3>ULTRA-HARD 30X COLD-ROLLED STAINLESS STEEL</h3>
<h3>TESLA ARMOR GLASS</h3>
</section>
<section id="Demo">
<iframe id="video" src="https://www.youtube.com/embed/m7atGkba-Z8" allowfullscreen></iframe>
</section>
<section id="Pricing">
<h3>Single-Motor Cybertruck</h3>
<ul>
<li>$39,900</li>
<li>250+ miles of range</li>
<li>0-60 moh in 6.5 seconds</li>
<li>top speed of 110 mph</li>
</ul>
<h3>Dual-Motor Cybertruck</h3>
<ul>
<li>$49,900</li>
<li>300+ miles of range</li>
<li>0-60 moh in 4.5 seconds</li>
<li>top speed of 120 mph</li>
</ul>
<h3>Tri-Motor Cybertruck</h3>
<ul>
<li>$69,900</li>
<li>500+ miles of range</li>
<li>0-60 moh in 2.9 seconds</li>
<li>top speed of 130 mph</li>
</ul>
</section>
</div>
CSS:
header {
display: flex;
position: fixed;
top: 0px;
width: 100%;
background-color: #fcf6f5;
}
#header-img {
height: 80px;
position: relative;
left: 100px;
}
#container {
background-color: #fcf6f5;
}
nav ul {
display: flex;
}
#nav-btn {
position: relative;
left: 500px;
top: 20px;
}
#features, #demo, #pricing {
padding-right: 100px;
}
ul {
list-style-type: none;
}
Add this to your css
#Features, #Demo, #Pricing{
padding-top: 100px;
}
This will set the needed padding so each section can be shown correctly
I would also rename the id's of the a elements on the header to this
<ul>
<li id="nav-btn">
<a class="nav-link" id="features-link" href="#Features">Features</a>
</li>
<li id="nav-btn">
<a class="nav-link" id="demo-link" href="#Demo">Demo</a>
</li>
<li id="nav-btn">
<a class="nav-link" id="pricing-link" href="#Pricing">Pricing</a>
</li>
</ul>
and do the same to the css accordingly
#features-link, #demo-link, #pricing-link{
padding-right: 100px;
}
Related
I am recreating Apple page from Youtobe video to learn more css and html. I encountered a problem with a styling of navigation.
My problem is that the nav section is too wide. As you can see on a first photo icons are a lot closer and in the middle. Not wide on a lenght of side as in photo 2(my code).
This is how it sholud look like:
And How it looks:
I have the same code as a in video.
Link(Styling nav about 17:30):
https://www.youtube.com/watch?v=DEpF1nNz1l0&t=183s
This is mine:
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
<header>
<div class="cointainer">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-botton"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class="nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item">
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Sport
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
I added a width of 80% to .nav and centered it in the .container class.
try adding the icons (I couldn't find them)
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif
}
a{
display: block;
text-decoration: none;
font-weight: bold;
color: white;
}
.cointainer {
max-width: 98rem;
padding: 0 2.2rem;
height: 100%;
display: flex;
align-items:center;
justify-content: center;
}
.nav {
width: 80%
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -1rem;
}
<header>
<div class="cointainer">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-botton"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- /.nav-list nav-list-mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class="nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item">
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Sport
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item nav-item-hidden">
</li>
</ul>
<!-- /.nav-list nav-list-larger -->
</nav>
</div>
</header>
I could't fix the hover of my nav bar to fulrange the hole Square on my Li elements,here is my code so you can understand me ,Please help.
I could't fix the hover of my nav bar to fulrange the hole Square on my Li elements,here is my code so you can understand me ,Please help.
https://jsfiddle.net/h41zhwrx/
<body>
<!** Social Media Icons**>
<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='http://www.facebook.com/username' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='http://twitter.com/username' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/username' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/username' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='http://www.pinterest.com/username' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='http://www.linkedin.com/in/username' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>
<!**my top bar space**>
<ul class="topnav" id="myTopnav">
<li>
</li>
<li class="icon">
</li>
</ul>
<div class="banner">
<img class="banner-image" src="img/banner.jpg" alt="Make Image responsive" >
</div>
<!** My nav bar space**>
<ul class="nav">
<li class="icon">
☰
</li>
<li> DIGITAL </li>
<li> ANALYSES </li>
<li> CRÉATIVITÉ </li>
<li> TECHNOLOGIE </li>
<li> ÉVÉNEMENT </li>
<li> EMPLOI </li>
<li> CONTACT </li>
</ul>
<div class="footer">Dzair Tic Tous droits réservés ©2017.</div>
</body>
.nav {
font-family: 'arial', serif;
margin-top: 0;
background-color: #1f5d86;
Color: #ffffff;
list-style: none; /* Na7i boutton ta3 la liste */
text-align: center;
opacity: 0.9;
}
.nav > li {
display: inline-block;
padding: 15px 20px;
font-size: auto ;
}
Just replace these 2 classes in css
I was building a website where I encountered a problem in navigation bar that the elements of navigation bar is not coming center aligned
HTML and CSS code:
<nav class="navbar navbar-inverse">
<div class="container">
<ul id="navigation" class="nav navbar-nav">
<li class="active"> Home </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li> Molex Portfolio </li>
<li> Contact Us </li>
<li> Employement Opportunities </li>
</ul>
</div>
</nav>
My css Code is
body{
background-repeat:no-repeat;
background-position: top right;
background-attachment: fixed;
}
h1{
margin:1px ;
color:red !important;
text-align:center;
}
hr{
border-color:red !important;
width:50%;
}
a {
padding: 0px 10px;
}
#navigation{
text-align:center!important;
display: inline-block!important;
margin: auto;
}
You are trying to center the ul with inline-block style, try to change the it to be block instead
body{
background-repeat:no-repeat;
background-position: top right;
background-attachment: fixed;
}
h1{
margin:1px ;
color:red !important;
text-align:center;
}
hr{
border-color:red !important;
width:50%;
}
a {
padding: 0px 10px;
}
#navigation {
text-align:center!important;
display: block!important;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container">
<ul id="navigation" class="nav navbar-nav">
<li class="active"> Home </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li> Molex Portfolio </li>
<li> Contact Us </li>
<li> Employement Opportunities </li>
</ul>
</div>
</nav>
Try the below code, Hope this work...!
#media (min-width: 768px){
.navbar-nav {
float: none!important;
margin: 0 auto!important;
display: table!important;
table-layout: fixed!important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container">
<ul id="navigation" class="nav navbar-nav">
<li class="active"> Home </li>
<li> Marketing Services </li>
<li> IT Management Services </li>
<li> Molex Portfolio </li>
<li> Contact Us </li>
<li> Employement Opportunities </li>
</ul>
</div>
</nav>
If you want to center align the text in the "li" just do
.navbar navbar-inverse{
ul>li{
text-align: center;
}
}
I am building a site for my school's robotics team. This is my first time ever coding in html/css. For some reason, my other pages use the margins quite nicely, but for this page specifically, my "margin-right" element does not work.
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<title>Team 3774 Homepage</title>
</head>
<body>
<div id="page">
<div class="Banner">
<a class="Banner_Link" href="www.robotichive3774.com">
<img src="/Images/Banner.png" height="200" width="1350" border="0">
</a>
</div>
<div class="navbar">
<ul class="nav">
<li><a class="li_nav" href="/Home">Home</a></li>
<li><a class="li_nav" href="/Team Bio">Team Bio</a></li>
<li><a class="li_nav" href="/Our Robot">Our Robot</a></li>
<li><a class="li_nav" href="/Our Coach">Our Coach</a></li>
<li><a class="li_nav" href="/Gallery">Gallery</a></li>
<li><a class="li_nav" href="/Outreach">Outreach</a></li>
<li><a class="li_nav" href="/Youtube">Youtube</a></li>
</ul>
</div>
<div class="Team_Bio">
<div class="example">
<h2>Team Bio</h2>
<h1>Example</h1>
<ul>
<li class="li_info">Class</li>
<li class="li_info">Role</li>
<li class="li_info">Career Interests</li>
<li class="li_info">Other Clubs and Sports</li>
</ul>
</div>
<div class="Abanoub_Boules">
<div class="info_AB">
<h1>Abanoub Boules</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Captian, Coder, Documenter</li>
<li class="li_info">CEO of a Biology Firm</li>
<li class="li_info">Coptic Society</li>
<li class="li_info">Technology Student Association</li>
<li class="li_info">President of Stem Clubs</li>
</ul>
</div>
<div class="picture_AB">
<img src="Abanoub.jpg" width="350px" height="350px">
</div>
</div>
<div class="Andre_Bernardo">
<div class="info_ABe">
<h1>Andre Bernardo</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, 3D modeling</li>
<li class="li_info">Computer Science</li>
<li class="li_info">Tennis</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_ABe">
<img src="Andre.jpg" width="350px" height="350px">
</div>
</div>
<div class="Leo_Scarano">
<div class="info_LS">
<h1>Leo Scarano</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Coder</li>
<li class="li_info">Computer Science</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_LS">
<img src="Leo.jpg" width="350px" height="350px">
</div>
</div>
<div class="Mina_Hanna">
<div class="info_MH">
<h1>Mina Hanna</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Coder</li>
<li class="li_info">Pharmaceutics</li>
<li class="li_info">Coptic Society</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_MH">
<img src="Mina.jpg" width="350px" height="350px">
</div>
</div>
<div class="Kenneth_Rebbecke">
<div class="info_KR">
<h1>Kenneth Rebbecke</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Documenter</li>
<li class="li_info">Structual Engineering</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_KR">
<img src="Kenny.jpg" width="350px" height="350px">
</div>
</div>
<div class="Kristen_Kaldas">
<div class="info_KK">
<h1>Kristen Kaldas</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Coder, Bookkeeper</li>
<li class="li_info">Biomedical Engineering</li>
<li class="li_info">Science Seminar</li>
<li class="li_info">Science Club</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_KK">
<img src="Kristen.jpg" width="350px" height="350px">
</div>
</div>
<div class="Melanie_Aguilar">
<div class="info_MA">
<h1>Melanie Aguilar</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Secratary, Mascot</li>
<li class="li_info">Party Planner</li>
<li class="li_info">Yearbook</li>
</ul>
</div>
<div class="picture_MA">
<img src="Melanie.jpg" width="350px" height="350px">
</div>
</div>
<div class="Anish_Patel">
<div class="info_AP">
<h1>Anish Patel</h1>
<ul>
<li class="li_info">Junior</li>
<li class="li_info">Engineer, 3d modeling</li>
<li class="li_info">Mechanical Engineer</li>
<li class="li_info">Science Club</li>
<li class="li_info">Junior Classical League</li>
<li class="li_info">Certamn</li>
</ul>
</div>
<div class="picture_AP">
<img src="Anish.jpg" width="350px" height="350px">
</div>
</div>
<div class="Furhan_Ashraf">
<div class="info_FA">
<h1>Furhan Ashraf</h1>
<ul>
<li class="li_info">Junior</li>
<li class="li_info">Financial Advisor, Engineer</li>
<li class="li_info">Engineering/Undecided</li>
<li class="li_info">Science Club</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_FA">
<img src="Furhan.jpg" width="350px" height="350px">
</div>
</div>
<div class="Andrew_W">
<div class="info_AW">
<h1>Andrew Wojtkowski</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, 3d Modeling</li>
<li class="li_info">Aerospace Engineer</li>
<li class="li_info">Varsity Hockey</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_AW">
<img src="Andrew.jpg" width="350px" height="350px">
</div>
</div>
<div class="Bryan_F">
<div class="info_BF">
<h1>Bryan Ferreira</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Documenter</li>
<li class="li_info">Computer Engineer/Civil Engineer</li>
<li class="li_info">Guitar</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_BF">
<img src="Bryan.jpg" width="350px" height="350px">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.Team_Bio
{
margin-left: 200px;
margin-right: 200px;
}
a.Banner_Link
{
padding:0 !important;
}
.Banner
{
height: 200px;
width: 1350px;
}
#page{
width: 1000px;
margin-left: 0px;
margin-right: 0px;
}
div
{
font-family: 'Roboto Slab', serif;
}
.body
{
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
margin-bottom: 100px;
}
.Banner img
{
vertical-align:top;
}
body
{
margin: 0;
}
.li_nav
{
float: left;
display:inline-block;
font-family: 'Roboto Slab', serif;
}
.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
min-width: 1350px;
}
a:link, a:visited
{
display:inline-block;
width: 182.7px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 14px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
font-family: 'Roboto Slab', serif;
}
a:hover, a:active
{
background-color: #B20000;
}
.Team_Bio
{
min-width: 1350px;
}
h2
{
font-size: 60px;
text-align: center;
}
.example
{
float: left;
width: 1350px;
height: 425px;
margin: 0 auto;
}
.Abanoub_Boules
{
float: left;
width: 1350px;
height: 500px;
margin: 0 auto;
}
The site is robotichive3774.com if you want to see exactly what I am talking about.
It's true, the HTML and CSS are a mess but as you said you're new to this.
The layout problem has to do with the widths of your team member sections inside that element. They're forcing it to stretch out.
I'd recode the CSS for the team members.
Start by removing the pixels widths on each team member's and set them to percentage based widths.
Make the team member's main element 100% wide so it just fills the container it's sitting in.
Then set their info and picture wrapping elements to 49% each.
Set the image inside the picture wrapping element to 100% and auto for the height.
Do all these widths etc in your CSS file.
That should fix you right up.
Lastly, if you're gonna do the floats put a "clearing div" after each team member so the next section if forced below the previous run. Otherwise things will run into each other.
Like this:
<div class="clear"></div>
.clear { clear: both; }
In the end, you should really simply your code. There's too many classes etc. All the team member sections could have the same class so you can apply global rules etc.
I'm currently trying to understand how stumbleupons navigationbar works by recreating it.
I'm using 3 lists in 1 like this:
<nav role="navigation">
<ul id="rightnav">
<li></li><!--
--><li></li><!--
--><li></li>
</ul>
<ul id="leftnav">
<li></li><!--
--><li></li><!--
--><li></li>
</ul>
<ul id="centernav">
<li id="dislike"> </li><!--
--><li id="stumble">STUMBLE</li><!--
--><li id="like"> </li>
</ul>
</nav>
This is what I've got so far:
http://jsfiddle.net/litari/yCT4D/1/
the three lists wont line up propperly no matter what I try.
I'm quite new to CSS so it's probably something obvious I'm missing.
I would also appreciate any additional comments on my css. If it sucks, let me know (and let me know WHY. I want to get better!) :) Thanks!
Try something like this
FIDDLE
ul
{
list-style-type: none;
}
nav{
height: 30px;
top: 0;
right: 0;
left: 0;
position: fixed;
width: 100%;
background-color: red;
text-align: center;
}
#lefttnav{
float:left;
}
#centernav{
display:inline-block;
}
#rightnav{
float:right;
}
Try below CSS:
#leftnav, #centernav, #rightnav{
display: inline;
}
Check this JSFiddle
Use this fiddle: http://jsfiddle.net/Hive7/yCT4D/6/
HTML:
<body>
<nav role="navigation">
<div align='left' style='margin-left: -10px;'>
<a href='#'>item 1</a>
<a href='#'>item 1</a>
</div>
<div align='center' style='margin-top: -18px;'>
<a href='#'>item 1</a>
<a href='#'>item 1</a>
</div>
<div align='right' style='margin-top: -18px; margin-right: 15px;'>
<a href='#'>item 1</a>
<a href='#'>item 1</a>
</div>
</nav>
</body>