I have a menu in which some of the menu should be on right and some of it must be on left.
I'm able to do this using BootStrap Framework,I want to do this without it. Here is my code.
HTML
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="index_style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Categories</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Register</li>
<li>Login</li>
</ul>
</div>
</div>
</body>
CSS
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
body{
margin: 0;
}
You have to separate/define your CSS rules: Pull-right/Pull-left aren't defined in anyway along with the majority of your classes.
*You tagged your question with Twiiter-Bootstrap which most of these classes are used in.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
.nav {
margin-left: -35px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
ul.pull-left {
float: left;
}
ul.pull-right {
float: right;
}
.nav li {
display: inline-block;
}
.nav ul > li > a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home
</li>
<li>Categories
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
<ul class="pull-right">
<li>Register
</li>
<li>Login
</li>
</ul>
</div>
</div>
Yes you can make navigation menubar without Bootstrap.Here,I make Demo.
http://jsfiddle.net/Xroad/33ovfgeL/
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Categories</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Register</li>
<li>Login</li>
</ul>
<div class="clear"></div>
</div>
</div>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.pull-left{float:left}
.pull-right{float:right}
.clear{clear:both}
.container{background-color:#bbb}
Related
I am trying to add a different styling to the second unordered list under the navBar2 section. I've tried using a class like ul.navBar2 to apply it on the second div section but I can't get it work.
ul {
list-style-type: none;
color: white;
margin: 0;
}
li {
display: inline;
float: right;
}
li a{
text-decoration: none;
color: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
}
li a:hover {
background: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
color: #171717;
}
<div id="navBar1">
<nav>
<ul>
<li>About Us</li>
<li>Downloads</li>
<li>Sign Up</li>
</ul>
</nav>
<div id="navBar2">
<ul color: black; font-size: 20px;>
<li>home</li>
<li>services</li>
<li>gallery</li>
</ul>
</div>
I'm confused why adding a class to the ul hasn't been suggested.
<nav>
<ul class="ul_class1">
<li>About Us</li>
<li>Downloads</li>
<li>Sign Up</li>
</ul>
</nav>
<div id="navBar2">
<ul class="ul_class2">
<li>home</li>
<li>services</li>
<li>gallery</li>
</ul>
</div>
css:
.ul_class1 li {
//My CSS
}
.ul_class2 li {
//My CSS 2
}
For future reference inline styles are written <ul style="color: black; font-size: 20px;">
<ul color: black; font-size: 20px;> is invalid HTML and won't work. You can use a style attribute instead: <ul style='color: black; font-size: 20px;'>
A second detail: You wrote: "I've tried using a class like ul.navBar2". First of all, your element is <div id="navBar2">, so that's an ID, not a class, which would address as ul#navBar2 instead of ul.navBar2. And second, if you want to change the style of the lielements inside the ul indise that div, you'd have to use the selector #navBar2 li { ... }.
What about something like this? You can keep the nav tag if you want, but they'd purely be for content separation / personal styling:
CSS Section:
<style>
#navBar2 ul {
list-style: none;
}
#navBar2 ul li {
font-weight:bold;
}
</style>
HTML section:
<div id="navBar1">
<ul>
<li>About Us</li>
<li>Downloads</li>
<li>Sign Up</li>
</ul>
</div>
<div id="navBar2">
<ul style="color: black; font-size: 20px;">
<li>home</li>
<li>services</li>
<li>gallery</li>
</ul>
</div>
Hope this helps - any more questions about styling, etc just ask!
PS - unsure if it was a copypasta error, but the closing div for #navBar1 wasn't there :)
I am learning html and css for front-end web development. While writing code for drop-down box in navigation-menu, i am not getting the desired output. In the navigation menu drop down is opening at the left corner but the navigation link is somewhere else. Please help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul></li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul></li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
CSS code:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul>
</li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>
When i am putting no options in the navigation menu then the options Home, About, Couses & Settings are in line but when i am adding options in the menu in dropdown the individual options come downward.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or
right to left with the left and right properties.
CSS code
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
And HTML code is
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I studied a little bit of html and css through high school but I'm having a little bit of trouble creating my website for my small business. I have created my nav bar design but I can't center it in my wrapper. My current code is below.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#navigation: {
margin-left: auto;
margin-right: auto;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
I have tried a couple different things that were posted on here but nothing seems to work. I'm sure it will be an easy fix and feel like im getting tunnel vision. Thank you for you help in advance!
First remove BR from ur html code this is bad idea to create vertical space use padding or margin.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
padding: 20px 0 40px;
background-color: white;
}
#navigation {
text-align: center;
}
#navigation ul {
display: inline-block;
padding: 0;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
hope this help :D
Hi there you can use HTML to do that:
use the <center> tag, your code would become something like that:
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<center>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact Us</li>
</center>
</ul>
</div>
<br>
<br>
</div>
</body>
Please test it and let me now if it works :)
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;
}
I am trying to build a simple website and i cannot figure out how to do a couple of things.
There is a nav bar, but it is stuck underneath the image at the top, how do i move it down?
I would like to arrange all of the ul's to be alongside each other, horizontally not vertically.
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.nav a {
color: #ff0000;
font-size: 50px;
padding-top: 250px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 0px;
height: 350px;
}
.page h3 {
color: #000000;
font-size: 30px;
font-family: Calibri;
padding-top: 250px;
padding-left: 50px;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
}
.nav li {
display: inline;
left: 20px;
position: relative;
}
background:url(./image.png) no-repeat top center;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="page">
<div class="container">
<div>
<div>
<div>
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Well you can either change the jumbotron to position: relative/static
or
make the nav go down a bit:
.nav{
margin-top: 350px;
}
Regarding the uls:
ul {
text-align: center;
background: grey;
}
ul li {
display: inline;
}
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<ul>
Here's what I would do:
First move all of the jumbotron above the nav in the HTML. Set them both to display: block; if you need to.
For the uls, add
.page ul li {
display: inline-block;
}
or
ul li {
display: inline-block;
}
for all of them on the page