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>
Related
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;
}
I am trying to implement a navbar and I want to position several elements in three different positions (align left, right and center).
My problem is that the elements in the center, are not centered on the screen, can someone help me solve my problem and understand what my mistake?
Is there also a way to make the navbar fixed, ie when scrolling it never disappears?
Thanks!
My code DEMO
HTML
<nav class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-center divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<button>My buttons</button>
<button>My buttons</button>
</li>
<li class="nav-item">
<button>My buttons</button>
</li>
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
<li class="nav-item">
<a class="btn"> <img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
</ul>
</nav>
I don't know if I understand your question, but if I do I think I have the answer, You can do what you write just by giving at the left & right "group" of the navBar a specific margin, You have to set a div's width first, in this case each div has a width of 20% (60% tot.), the left div has a margin-right of 20% and then the riht div has a margin-left of 20%, to get everything fully centred you have to set div's text-align to center, You can run my code just by clicking on run code snippet, below:
.navBar {
display: flex;
position: fixed;
top: 0;
left: 0;
background: #ccc;
width: 100%;
padding: 5px 0;
}
.navBar div {
width: 20%;
text-align: center;
}
.navBar div a {
margin: 0 4px;
padding: 0 4px;;
background: rgb(0, 0, 0);
color: #fff;
text-decoration: none;
}
.left {
margin-right: 20%;
}
.right {
margin-left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="navBar">
<div class="left">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>
<div class="center">
4
5
6
</div>
<div class="right">
7
8
9
</div>
</div>
</body>
</html>
To fix the navBar at the top I used "position: fixed" but even "position: sticky" is good.
.topfixed{
position: sticky !important;
top: 0;
z-index: 10;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar nabBarContainer topfixed">
<ul class="nav divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-center divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png"></a>
</li>
</ul>
<ul class="nav justify-content-end divBtn">
<li class="nav-item">
<a class="btn"><img style="width:45px; height:45px" src="https://cdn3.iconfinder.com/data/icons/2018-social-media-logotypes/1000/2018_social_media_popular_app_logo_reddit-128.png">
</a>
</li>
</ul>
</nav>
<div style="height:1000px;"></div>
To fix van header.. you can add the class below:
HTML
<nav class="navbar nabBarContainer topfixed">
CSS
.topfixed{
position: sticky;
top: 0;
z-index: 10;
}
Not sure which buttons you want to center.. there 8 buttons.. how do you trying to get them aligned?
//For fixed navbar:
position: fixed;
//For centering an element:
margin: 0 auto;
//For placing an element at the right side:
position: absolute;
right: 0;
top: 0;
//For placing an element at the left side:
position: absolute;
left: 0;
top: 0;
I'm very new to HTML and CSS. I'm trying to center the navbar at the top of a site. Here is my HTML code:
<!-- Navigation -->
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav page-scroll" style="text-align:center">
<li>
<a class="page-scroll" href="#page-top">Start</a>
</li>
<li>
<a class="page-scroll" href="#packages">Packages</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#showcase">Showcase</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
And here is (some) relevant CSS code:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
#media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.nav_container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
opacity: 1;
text-align: center;
}
.nav_container nav {
display: inline-block;
text-align: center;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
I must apologise in advance if this question looks like a duplicate of other questions. I have tried out different permutations of how the CSS code should be set according to other answered questions, but to be honest how and which class in the CSS code takes precedence is still not clear to me and my navbar is just not centering. I took the code from a bootstrap site, and am simply reverse engineering. It could be that what is already written contains some redundant code (for example, there may be too many divs) and so may need to be cleared up.
change :
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
<div class="container">
To :
<div class="container">
<div class="nav_container">
<nav class="navbar navbar-default navbar-fixed-top top-nav-collapse" role="navigation">
Demo
Note : For See Result increment Result Page.
I want my logo on the left side, and About Us and Log In on the other.
I tried using floats, but the right float was pinned to the bottom of the header.
I'm also trying flexbox but things are not doing what I want.
<header>
<a id="logo" href="#">Logo</a>
<nav>
<ul>
<li><a id="aboutus" href="#">About Us</a></li>
<li><a id="login" href="#">Log In</a></li>
</ul>
</nav>
</header>
Any advice on the simplest way to do this?
<style>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
}
</style>
<header>
<a style="float:left" id="logo" href="#">Logo</a>
<nav >
<ul >
<li><a id="aboutus" href="#">About Us</a></li>
<li><a id="login" href="#">Log In</a></li>
</ul>
</nav>
</header>
Try this
http://xanlz.com/test/
why under IE7,6 , the box which including the text "code" "book" are above on the border? not joining together. the red part in the image
but ok under firefox.and how to remove the bottom line.when the mouser hover on the text(code or book) and under the default state with text code.
the html code:
<div class="week-down rounded-corner">
<h2>week test</h2>
<div class="ranktitle">
<ul>
<li class="tab1 rankactive">code</li>
<li class="tab2">book</li>
<div class="clear"></div>
</ul>
</div>
<div class="weekrank">
<div class="code-down tab1" style="display: block;">
<ul class="item-list itemlist">
<li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
</ul>
</div>
<div class="book-down tab2" style="display: none;">
<ul class="item-list itemlist">
<li><a href="#" >test</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >test</a></li>
<li><a href="#" >asp</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
<li><a href="#" >phpp</a></li>
<li><a href="#" >java</a></li>
</ul>
</div>
</div>
</div>
the main style:
.ranktitle {
margin-top: 5px;
}
.code-down ul.item-list, .book-down ul.item-list {
border-top: 1px solid #D5D5D5;
padding-top: 8px;
}
#tabs-content ul, ul.item-list {
padding: 3px 0 0 7px;
}
.ranktitlewhole ul li.rankactive, .ranktitle ul li.rankactive {
background-color: #FFFFFF;
}
i use jquery to add a class rankactive to the li text. when the mouse on.
You have a <div class="clear"></div> inside the <ul>. This is not valid. Remove it and add to <ul> overflow: hidden; property.
For IE6 zoom: 1; property has to be added. Without this overflow: hidden; doesn't work.
And for the second part of the question, try this:
li:hover {
position: relative;
top: 1px;
padding-bottom: 1px;
}
UPDATE
Let's make it simple.
Remove overflow: hidden; and zoom: 1; and set to <ul> fixed height, for example 15px.
And for li:hover
li:hover {
position: relative;
top: 1px;
}