This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<title>Main Page</title>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills-justified">
<li><a href "#">about</a></li>
<li><a href "#">blog</a></li>
<li><a href "#">portfolio</a></li>
<li><a href "#">contact</a></li>
</ul>
</div>
</div>
</div>
<script src="js/bootstrap.js">
</script>
</body>
</html>
I want the text in the navbar to be centered-fixed-top.
Here i've posted simple navigation bar with centered nav text. you can use this...
HTML
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav-pills-justified">
<li>about</li>
<li>blog</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
CSS
.nav-pills-justified
{
text-align: center;
width: 100%;
min-width:980px;
background: #EDEDED;
color: #000000;
height: 50px;
list-style-type: none;
}
.nav-pills-justified li
{
display: inline-block;
}
.nav-pills-justified li a
{
text-decoration: none;
padding: 15px 25px;
display: inline-block;
}
.nav-pills-justified li a:hover
{
background: red;
}
DEMO
.nav-pills-justified {
height:50px;
list-style-type:none;
}
.nav-pills-justified li {
display: inline-block;
margin-bottom:1000px;
margin-left:250px;
width:1px;
font-size: 20px;
}
.nav-pills-justified li a {
display: inline-block;
}
Related
I'm new to coding world. I have problem with my Navbar, on 100% zoom on browser it's everything okay,but when i zoom in 150% scale everything will be messed. How can i fix everything to be on the same size when somebody zoom in and zoom out? Thank you in advance.
ZOOM WITH 100%
ZOOM WITH 150%
ZOOM WITH 200%
* {
margin: 0;
padding: 0;
}
.pre-header {
background-color: #111618;
height: 60px;
color: #fff;
padding-top: 15px;
}
.pre-header .secondary-menu {
list-style: none;
}
.pre-header .secondary-menu li {
display: inline-block;
margin-left: 15px;
}
.pre-header .secondary-menu li a {
color: #787374;
text-transform: uppercase;
}
.main-nav .main-menu {
list-style: none;
margin-top: 15px;
}
.main-nav .main-menu li {
display: inline-block;
margin: 10px;
}
.main-nav .main-menu li a {
color: #767676;
text-transform: uppercase;
}
.main-nav img {
margin-top: 10px;
}
.main-nav .main-menu .free-quote-btn a {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="probaferomotosajta.css">
<title>Feromoto - Hidraulicna creva</title>
</head>
<body>
<header>
<div class="pre-header">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>UNDER ATTACK? - S.O.S LINE 880.000.800</p>
</div>
<div class="col-md-6">
<ul class="secondary-menu">
<li>Login</li>
<li>Contacts</li>
<li>Presale Service</li>
<li>Whitepapers</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="slika1.png" width="120" height="120" alt="">
</div>
<div class="col-md-8">
<ul class="main-menu">
<li>Home</li>
<li>News</li>
<li>Blog</li>
<li>Shop</li>
<li>Courses</li>
<li>Rating</li>
<li>Team</li>
<li>Job</li>
<li class="free-quote-btn">Free Quote</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I think it is because window width decreases when you zoom in your browser.
So you can fix it by using #media query.
So I'm re-creating a template I've come across and need some help...
I want the nav bar at the top to cover the screen in width, however the way I currently have the code it's putting it inside the container. Any suggestions how I can do this without affecting the rest of the flow?
body {
margin:0;
}
.container {
margin:auto;
width:80%;
}
nav {
background-color:black;
color:white;
font-size:25px;
height:50px;
opacity:0.5;
}
nav ul {
margin-top:0;
}
nav ul li {
display:inline;
}
nav ul li a {
padding:30px;
text-decoration:none;
}
nav p {
margin-top:0;
}
.showcase,header {
background-image:url("space.jpg");
background-size:cover;
height:500px;
}
#media (max-width: 1800px) {
h1 {
text-align:left;
}
nav ul {
display:none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Space Prospection</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="showcase">
<nav>
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<div class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</div>
<div class="secondary_content">
<h1>Featured Projects</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance
.container should be inside <nav> content, or any contents inside website so here's your code:
HTML:
<div class="showcase">
<nav>
<div class="container">
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<div class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</div>
<div class="secondary_content">
<h1>Featured Projects</h1>
</div>
</div>
</div>
.container works to save all website content on the same width but not all backgrounds
Well, you just have to put your menu outside of your div.container. If you want a max-width for your headers content, you could have another wrapper inside.
body {
margin: 0;
background-image:url("https://picsum.photos/1600/900");
background-size: cover;
min-height: 100vh;
}
.container {
margin: auto;
max-width: 800px;
}
nav {
background-color: black;
color: #FFF;
font-size: 25px;
opacity: 0.5;
}
nav .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
nav ul {
margin:0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration:none;
display: block;
color: #FFF;
}
nav p {
margin-top: 0;
}
.showcase, header {
background-image:url("https://picsum.photos/1600/900");
background-size:cover;
height:500px;
}
#media (max-width: 1800px) {
h1 {
text-align:left;
}
nav ul {
display:none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Space Prospection</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="container">
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<main class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</main>
<aside class="secondary_content">
<h1>Featured Projects</h1>
</aside>
</div>
</body>
</html>
I am creating a navigation bar. I want the bottom border line to appear at the bottom of the navigation bar, like this:
But what i am getting out of my code is this:
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>batman</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<a href="#" class="logo">
<img src="./img/bat_logo.png" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</div>
</body>
</html>
My CSS:
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
}
Use flex with justify-content: space-between on the parent and you can also use align-items to vertically align things. Also changed <div id="header"> to <header id="header">, because it seems like a more semantically appropriate element.
img {
max-width: 50px;
}
.logo {
height: 50px;
display: block;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display: flex;
justify-content: space-between;
align-items: center;
}
nav li {
display: inline-block;
}
<header id="header">
<a href="#" class="logo">
<img src="https://images.coplusk.net/projects/19697/steps/33014/normal_big_cartoon_batman_symbol_1250787261.jpg" alt="batman" />
</a>
<nav>
<ul style="list-style-type: none;">
<li> Villains </li>
<li> Identity </li>
<li> Movies </li>
</ul>
</nav>
</header>
Yoy should use width and float on #header which is main wrapper. With that you should add ul li{float:left}
.logo {
float: left;
height: 50px;
}
#header {
padding: 5px 0px;
border-bottom: 1px solid;
display:block;
float:left;
width:100%;
}
ul li{float:left}
Codepen link: https://codepen.io/bravotanmoy/pen/qjZEbb
I'm trying to display an inline list, with the first 5 elements pulled left, and the last 2 elements pulled right, as shown below:
This inline list needs to cling to the top of the screen when the user scrolls past it, and so I need to set position: fixed and top: 0px. However, when I try to do this, the left side of the list ends up stacking onto the right side, as shown below:
Is there any way to preserve the inline display of the list while using a fixed position? If not, what are other solutions to this issue?
Here's my code, sorry if it's a mess or not formatted correctly. I've just started playing around with web dev:
CSS:
.menu-header {
background-color: #2658C9;
}
.menu-header .pull-left {
margin-left: 10%;
overflow: hidden;
white-space: nowrap;
}
.menu-header .pull-right {
margin-right: 10%;
overflow: hidden;
white-space: nowrap;
}
.menu-header ul {
padding-left: 0px;
display: inline;
}
HTML:
<div class="menu-header">
<div class="row">
<ul class="menu-header-list">
<div class="pull-left">
<li>Home</li>
<li>Tech</li>
<li>Tutorials</li>
<li>Articles</li>
<li>Papers</li>
</div>
<div class="pull-right">
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
Any help would be much appreciated, as I've been trying to fix this for hours. Changing the display & using floats hasn't fixed the problem. Thanks!
Try this Fiddle
.navbar {
background: #2658C9;
color: white;
position: fixed;
top: 0;
width: 100%;
}
.navbar-default .navbar-nav > li > a{
color: white;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav pull-left">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>
The problem is caused because you didn't set width:100% to your header.
.menu-header{
width:100%;
}
Look into these CSS:
.menu-header {
background-color: #2658C9;
width:100%;
overflow:hidden;
}
.menu-header .pull-left {
float:left;
}
.menu-header .pull-right {
float:right;
}
.menu-header ul {
padding-left: 0px;
}
.menu-header ul li {
display:inline-block;
}
float pull left and right and display li in inline-block
this is the solution for you
.row{
width:100%;
position:fixed;
}
fix your .row not the 'ul'
for the complete code , I have created a complete code.if you want you cant try it.
<!DOCTYPE html>
<html>
<head>
<title>working with bootstrap offline</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
div.menuone ul li{
list-style-type: none;
display: inline;
margin:20px;
}
div.menutwo ul li{
ist-style-type: none;
display: inline;
margin: 30px;
}
div.menuone ul li a, div.menutwo ul li a{
color: white;
}
div.menuone{
padding-top: 30px;
}
div.menutwo{
padding-left: 50px;
padding-top: 30px;
}
</style>
</head>
<body>
<div class="menu-header">
<div class="row" style="background-color:blue;">
<div class="col-md-8 menuone">
<ul>
<li>Home</li>
<li>Tech</li>
<li>Tutorials</li>
<li>Articles</li>
<li>Papers</li>
</ul>
</div>
<div class="col-md-4 menutwo">
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>
Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}