I am very new to programming.
I am trying to get three col-md-4s to have equal width. I assumed that CSS would not be required for this if Bootstrap was referenced correctly in HTML. Any advice would be much appreciated.
Code:
/*NAV LOGO*/
.logo {
text-decoration: none;
color: black;
}
.logo img {
margin-left: auto;
margin-right: auto;
display: block;
}
/*NAV MENU*/
.menu {
text-align: center;
}
.menu ul li {
display: inline-block;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
}
.menu ul li a:link {
text-decoration: none;
background: white;
color: black;
border: 1px solid black;
padding-left: 18px;
padding-right: 18px;
padding-top: 10px;
padding-bottom: 10px
margin-top: 10px;
text-align: center;
}
.menu ul li a:hover {
background: blue;
color: white;
}
/*SUPPORTING*/
/*FOOTER*/
.footer ul li {
color: white;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
}
.footer .container {
text-align: center;
background: black;
height: 100px;
}
.footer ul li a:link {
color: white;
text-decoration: none;
}
.footer p {
color: white;
margin-top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>WASTEdar | Waste Management and Recycling in Dar es Salaam, Tanzania</title>
</head>
<body>
<!--NAV-->
<div class="nav">
<div class="container">
<div class="logo">
<img src="http://static1.squarespace.com/static/53e6b408e4b0cc1fd4cb6a46/54d8bc16e4b050b6c2864e96/54db5b74e4b00d17d9bb0442/1423661993508/wastedar_logos+(1)-page-001.jpg" style="width:505px; height:85px;" align="center"/>
<p align="center"><strong>Waste Management and Recycling in Dar es Salaam, Tanzania</strong></p>
</div>
<div class="menu">
<div class="center">
<ul class="nav">
<li>Home</li>
<li>Our Story</li>
<li>Programmes</li>
<li>Resources</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</div>
<!--SUPPORTING-->
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Our Vision</h1>
<p>We the only NGO operational in Dar es Salaam <br> addressing issues concerning waste management and recycling</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<div class="container">
<ul class="footer">
<li>Home</li>
<li>Our Story</li>
<li>Programmes</li>
<li>Resources</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
<p align="center">Copyright Joshua Palfreman</p>
</div>
</div>
</body>
</html>
You need to add the bootstrap.css as well the bootstrap.js, I added the col-xs-4 so you can see those columns having same width in small screens such this snippet.
Snippet
/*NAV LOGO*/
.logo {
text-decoration: none;
color: black;
}
.logo img {
margin-left: auto;
margin-right: auto;
display: block;
}
/*NAV MENU*/
.menu {
text-align: center;
}
.menu ul li {
display: inline-block;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
}
.menu ul li a:link {
text-decoration: none;
background: white;
color: black;
border: 1px solid black;
padding-left: 18px;
padding-right: 18px;
padding-top: 10px;
padding-bottom: 10px margin-top: 10px;
text-align: center;
}
.menu ul li a:hover {
background: blue;
color: white;
}
/*SUPPORTING*/
/*FOOTER*/
.footer ul li {
color: white;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
}
.footer .container {
text-align: center;
background: black;
height: 100px;
}
.footer ul li a:link {
color: white;
text-decoration: none;
}
.footer p {
color: white;
margin-top: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--NAV-->
<div class="nav">
<div class="container">
<div class="logo">
<img src="http://static1.squarespace.com/static/53e6b408e4b0cc1fd4cb6a46/54d8bc16e4b050b6c2864e96/54db5b74e4b00d17d9bb0442/1423661993508/wastedar_logos+(1)-page-001.jpg" style="width:505px; height:85px;" align="center" />
<p align="center"><strong>Waste Management and Recycling in Dar es Salaam, Tanzania</strong>
</p>
</div>
<div class="menu">
<div class="center">
<ul class="nav">
<li>Home
</li>
<li>Our Story
</li>
<li>Programmes
</li>
<li>Resources
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
</div>
</div>
</div>
<!--SUPPORTING-->
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-4">
<h1>Our Vision</h1>
<p>We the only NGO operational in Dar es Salaam
<br>addressing issues concerning waste management and recycling</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-xs-4 col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-xs-4 col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<div class="container">
<ul class="footer">
<li>Home
</li>
<li>Our Story
</li>
<li>Programmes
</li>
<li>Resources
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
<p align="center">Copyright Joshua Palfreman</p>
</div>
</div>
Related
I'm trying to make a dropdown menu where it will display images once you hover over the menu item called Tournaments, but it doesn't seem to be working.
I suspect there might be something wrong with these CSS instructions:
.menu ul li .submen
.menu ul li: hover .submen
but I'm not able to identify the error.
Here is the nav CSS and HTML:
.menu_wrap{
width: 100%;
}
.menu{
width: 100%;
height: 100px;
}
.menuimg a img{
height: 100px;
width: auto;
}
.menu ul{
width: 100%;
height: 100%;
background: #282933;
text-align: center;
line-height: 50px;
position: relative;
}
.menu ul li{
display: inline-block;
margin: 0 15px;
padding: 0 10px 0 10px;
}
.menu ul li a{
text-decoration: none;
color: #d43a5b;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
display: block;
}
.menu ul li .submen{
position: absolute;
background-color: #c2c2c2;
width: 80%;
right: 10%;
padding: 25px 15px;
display: flex;
justify-content: space-around;
line-height: 20px;
visibility: hidden;
}
.menu ul li: hover{
background: #169cc3;
}
.menu ul li: hover .submen{
visibility: visible;
}
.submen .col img{
width: auto;
height: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/layers.css">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="stylesheet" type="text/css" href="css/tacks1.css">
</head>
<body>
<div class="container">
<div class="menu_wrap">
<div class="menu">
<div class="menuimg">
<img src="Images/dragon.png">
</div>
<nav class="navv">
<div class="navup">
<ul>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="navdown">
<ul>
<li>Tickets</li>
<li>Tournaments</li>
<div class="submen">
<div class="col">
<img src="images/dragon2.png">
<h5>Tournament</h5>
</div>
<div class="col">
<img src="images/dragon2.png">
<h5>Tournament</h5>
</div>
<div class="col">
<img src="images/dragon2.png">
<h5>Tournament</h5>
</div>
</div>
<li> Players</li>
<li>Meritorder</li>
<li>Sponsers</li>
<li>About SAKDC</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- All content____________________________________________________________________-->
<div class="bodystuff">
You can try this..
write submenu code inside <li></li> tag.
do not space between tag and hover .menu ul li: hover instead this try .menu ul li:hover
.menu_wrap{
width: 100%;
}
.menu{
width: 100%;
height: 100px;
}
.menuimg a img{
height: 100px;
width: auto;
}
.menu ul{
width: 100%;
height: 100%;
background: #282933;
text-align: center;
line-height: 50px;
position: relative;
}
.menu ul li{
display: inline-block;
margin: 0 15px;
padding: 0 10px 0 10px;
}
.menu ul li a{
text-decoration: none;
color: #d43a5b;
text-transform: uppercase;
font-weight: bolder;
letter-spacing: 2px;
display: block;
}
.menu ul li .submen{
position: absolute;
background-color: #c2c2c2;
width: 80%;
right: 10%;
padding: 25px 15px;
display: flex;
justify-content: space-around;
line-height: 20px;
visibility: hidden;
}
.menu ul li:hover{
background: #169cc3;
}
.menu ul li:hover .submen{
visibility: visible;
}
.submen .col img{
width: auto;
height: 200px;
}
<div class="container">
<div class="menu_wrap">
<div class="menu">
<div class="menuimg">
<img src="Images/dragon.png">
</div>
<nav class="navv">
<div class="navup">
<ul>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="navdown">
<ul>
<li>Tickets</li>
<li>
Tournaments
<div class="submen">
<div class="col">
<img src="images/dragon2.png">
<h5>Tournament</h5>
</div>
<div class="col">
<img src="images/dragon2.png">
<h5>Tournament</h5>
</div>
<div class="col">
<img src="images/dragon2.png">
<h5>Tournament</h5>
</div>
</div>
</li>
<li> Players</li>
<li>Meritorder</li>
<li>Sponsers</li>
<li>About SAKDC</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
I am trying to create a website using this codepen(enter link description here).
The problem I'm having is when I make the window size smaller, the profile section and main content section start to overlap. I think the codepen is using bootstrap grid system here so I don't really understand why this is happening.
content overlapping image
Here are the codes.
HTML
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Bootstrap</a>
<div>
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="btn btn-primary my-2 my-sm-0" type="submit"><i class="fa fa-sign-out"></i> Log out</a>
</li>
</ul>
</div>
</div>
</nav>
<!--our content goes here-->
<div class="container content">
<div class="row profile">
<div class="col-md-3">
<div class="profile-sidebar position-fixed">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="https://media.rockstargames.com/chinatownwars/global/downloads/avatars/zhou_256x256.jpg" class="img-responsive" alt="">
</div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Jason Davis
</div>
<div class="profile-usertitle-job">
Developer
</div>
</div>
<!-- END SIDEBAR USER TITLE -->
<!-- SIDEBAR BUTTONS -->
<div class="profile-userbuttons">
<button type="button" class="btn btn-success btn-sm">Follow</button>
<button type="button" class="btn btn-danger btn-sm">Message</button>
</div>
<!-- END SIDEBAR BUTTONS -->
<!-- SIDEBAR MENU -->
<div class="profile-usermenu sidebar-sticky">
<ul class="nav flex-column">
<li class="active nav-item">
<a href="#" class="nav-link active">
<i class="fa fa-home"></i>
Overview </a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://codepen.io/jasondavis/pen/jVRwaG?editors=1000">
<i class="fa fa-user"></i>
Account Settings </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" target="_blank">
<i class="fa fa-check"></i>
Tasks </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
Some user related content goes here...
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9 ft">
<footer class="footer">
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © Your Website 2018</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://github.com/ELMORABITYounes">
<i class="fa fa-github"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com/younes.elmorabit.92">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/younes-elmorabit-2a162310b/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
Privacy Policy
</li>
<li class="list-inline-item">
Terms of Use
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
background: #F1F3FA;
}
body {
overflow-x:hidden;
}
#mainNav {
background-color: darkslategrey;
color:white;
}
#mainNav .navbar-brand {
color: #fed136;
font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
footer {
text-align: center;
background-color: white;
}
.ft{
padding-left:22px;
padding-right:31px;
}
footer span.copyright {
font-size: 90%;
line-height: 40px;
text-transform: none;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color:blak;
}
footer ul.quicklinks {
font-size: 90%;
line-height: 40px;
margin-bottom: 0;
text-transform: none;
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul.social-buttons {
margin-bottom: 0;
}
ul.social-buttons li a {
font-size: 20px;
line-height: 40px;
display: block;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
color: white;
border-radius: 100%;
outline: none;
background-color: #212529;
}
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
background-color: #fed136;
}
.content{
margin-top:60px;
}
/* Profile container */
.profile {
margin: 20px 0;
}
/* Profile sidebar */
.profile-sidebar {
padding: 20px 0 10px 0;
background: #fff;
}
.profile-userpic img {
float: none;
display:block;
margin:auto;
width: 50%;
height: 50%;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border-radius: 50% !important;
}
.profile-usertitle {
text-align: center;
margin-top: 20px;
}
.profile-usertitle-name {
color: #5a7391;
font-size: 16px;
font-weight: 600;
margin-bottom: 7px;
}
.profile-usertitle-job {
text-transform: uppercase;
color: #5b9bd1;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.profile-userbuttons {
text-align: center;
margin-top: 10px;
}
.profile-userbuttons .btn {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
padding: 6px 15px;
margin-right: 5px;
}
.profile-userbuttons .btn:last-child {
margin-right: 0px;
}
.profile-usermenu {
margin-top: 30px;
}
.profile-usermenu ul li {
border-bottom: 1px solid #f0f4f7;
}
.profile-usermenu ul li:last-child {
border-bottom: none;
}
.profile-usermenu ul li a {
color: #93a3b5;
font-size: 14px;
font-weight: 400;
}
.profile-usermenu ul li a i {
margin-right: 8px;
font-size: 14px;
}
.profile-usermenu ul li a:hover {
background-color: #fafcfd;
color: #5b9bd1;
}
.profile-usermenu ul li.active {
border-bottom: none;
}
.profile-usermenu ul li.active a {
color: #5b9bd1;
background-color: #f6f9fb;
border-left: 2px solid #5b9bd1;
margin-left: -2px;
}
/* Profile Content */
.profile-content {
padding: 20px;
background: #fff;
min-height: 460px;
}
.nav>li {
position: relative;
display: block;
}
Any help would be appreciated as I have tried multiple methods with no success.
Thank you in advance.
I see you have added a class position-fixed to the element with class profile-sidebar, so this element will remain fixed no matter what.
You could remove the class position-fixed and handle everything in the CSS, using media queries to set its position for smaller and larger screens.
<div class="profile-sidebar position-fixed">
The position-fixed does not allow your profile-sidebar to move away.
It works otherwise https://jsfiddle.net/f9hot4yk/
Instead of adding the position fixed class you can add profile-sidebar into a min-width location in your CSS where you add the fixed property to the sidebar.
Like this:
#media only screen and (min-width: 1200px) {
.profile-sidebar {
position: fixed;
}
}
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 am really new to coding. Formatting is always an issue with me and I spend lots of time looking at similar questions in here and reading tutorial etc and tried different things. I have the exact same code on one page and it seems center. However I can't get my items centered here or replicate. Once I have my header centered I would like my nav bar to be centered underneath. PLease help.
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
width: 470px;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
To center the title: make .box width:100% and the h2 text-align:center.
To center the ul menu I followed the solution three: align ul to center of div
html,
body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 100%; // NEW WIDTH
padding: 10px;
display: inline-block;
}
.box h2 {
text-align: center; // CENTER TITLE
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align: middle;
border-radius: 0px;
background-color: white;
display: inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: table; // SOLUTION 3
margin: 0 auto; //
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home
</li>
<li>About
</li>
<li>Gallery
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
I see that you're using Bootstrap. You can do what you want with a lot less markup.
.nav-pills > li {
float: none;
display: inline-block;
}
<div class="container text-center">
<h2>lewis <br><span>Designs</span></h2>
<ul class="nav nav-pills text-center">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Demo JSFiddle
You can make use of better semantic code to make it clear how this section is functioning and then simplify the code with built-in classes in Bootstrap, e.g., text-center.
<header class="header text-center" id="header">
<h1>lewis Designs</h1>
<nav>
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
The only CSS needed to center the nav is this:
nav {
display: inline-block;
}
I'd definitely recommend familiarizing with documents pertaining to things like utility classes in Bootstrap. You may not be able to do everything you want, but you can minimize the need to go markup heavy and create a bunch of classes that Bootstrap already has covered in various ways.
Is this good for you? (please look at the snippet)
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
text-align: center;
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
width: 100%;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.center-box{
margin-left: auto;
margin-right: auto;
width: 391px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class="box">
<h2>lewis <br />
<span>Designs</span>
</h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class='center-box'>
<ul class="nav nav-pills">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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