I am using the skeleton framework and am trying make a simple nave bar?
When I try and create a nav-bar div and set the css nav- bar id colour to blue the background won't change. However if i try and change the individual columns the colour will change. Is there a way will a grid framework to create a consistent nav bar on top with out telling each column to be a certain colour. this seems silly.
Also is it possible to have a nav bar that extends past the frameworks 960px length? I would like to have the bar background extend to both sides of the screen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="skeleton.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<div class="container">
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar--->
</div><!---container--->
</html>
CSS:
.container {
margin-top: 50px;
}
#nav-bar {
background-color: blue;
}
#nav {
margin: 13px 0 0 0;
}
#nav ul li {
display: inline;
margin: 0 20px 0 0;
margin-bottom: 130px;
}
#nav a {
text-decoration: none;
color: black
}
#nav a:hover {
text-decoration: underline;
}
https://jsfiddle.net/gp9d7yvz/
the #nav children is floating left that make #nav has no height.
Let append <div style="clear:both"></div> before the closing tag of #nav to make it have height like this fiddle.
https://jsfiddle.net/gp9d7yvz/2/
There is an error on the third line of your CSS code : there is no closing } tag. This causes the following CSS to malfunction. You also forgot to put the closing ";" at the end of your "color:black;" property. If it doesn't work also add a fiddle please.
First question:
Try adding background-color under #nav not under #nav-bar
#nav {
margin: 13px 0 0 0;
background-color: blue;
}
Second question:
All your content is inside a .container with a width of 960px. You cannot get these div's to be 100% in width when they are inside this container. So what you need to is to change your code by moving the header outside of the container.
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar-->
<div class="container">
</div><!---container-->
Here is an example:
https://jsfiddle.net/gp9d7yvz/5/
When using grid 960, can I still have a 100% width header section?
Related
I have a tutorial, where the following CSS is used to separate list items from each other.
But why do I adress the nav a and not the li ? Can someone tell me a proper reason to not define the padding in li? It has a similar effect.
main-header .header-logo {
float:left;
}
.main-header nav {
float: right;
}
.main-header ul {
list-style: none;
}
.main-header li{
float:left;
}
.main-header nav a {
padding: 20px;
}
<div class="container">
<div class="main-header-container">
<header class="main-header clearfix">
<a class="header-logo" href="index.html"><h1>ContactFile</h1></a>
<nav>
<ul class="header-main-menu clearfix">
<li>contact</li>
<li>contact2</li>
<li>contact3</li>
<li>contact4</li>
</ul>
</nav>
</header>
</div>
</div>
Everything will work perfect if you apply styles to li but consider you give a padding to a lielement instead of a. It will create this type of effect where only text will be clickable as a link while all the other space will be unclickable as it will be li not a
So, I have this menu:
What can I do to the menu fill horizontally the entire page? Am I using the wrong bootstrap classes? It just fills a part of the page. Can someone teach me what to do here?
ul {
list-style-type: none;
border-bottom-style: solid;
border-bottom-color: green;
position: relative;
}
li {
display: inline;
padding: 30px;
}
#menu a {
color: black;
}
#menu a:hover {
color: green;
font-weight: 700;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: green;
border-bottom-width: 6px;
border-radius: 4px;
}
<body>
<section>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid wrapper">
<div class="navbar-header">
<ul id="menu">
<div class="row">
<div class="col-md-12">
<li><img src="Imagens/Logo.png"></li>
<li id="menu1">About us</li>
<li> Act</li>
<li> News</li>
<li> Videos</li>
<li> Contact us</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</section>
</body>
Im not an expert at bootstrap and I don't know for what the class is used to do but if I remove the div-element: <div class="navbar-header"></div> it worked in my Chromium.
With Chromes Developer Tools you are able to find bugs like this
(Ctrl+Shift+I or Ctrl+Shift+C to use the Element Inspector directly)
Maybe you could add style="text-align: justify"; on the wrapping div around your <li> tags to set the spaces between the menu entry's dynamically.
Hope it would help you.
You can set the width of navbar-header to 100% with the below code to make the varbar cover the full length horizontally however it's not going to perfect functional navbar.
.navbar-header{
width:100%
}
The reason being, it does look like this is possibly a Bootstrap 3 navbar that you're trying to use with bootstrap 4 which is why it's not working. The classes are different between BS3 and BS4.
Check http://getbootstrap.com/docs/4.0/examples/navbars/ for examples for how to implement a bootstrap 4 navbar.
I'm learning how to markup with html and css and have been experimenting, and have a little problem that has left me scratching my head.
I'm using text as a placeholder logo rather than a img, but for some reason it displaces the list from the navbar and pushes it below. However, when I remove the logo the list moves back into the navbar.
But! I've tried using inline-block, float, and more following what already asked questions I can find yet nothing seems to solve my issue.
Here is the code with the logo: (made in Notepad++ if it makes any difference)
<!DOCTYPE html>
<html>
<link href="css/styles.css" rel="stylesheet"/>
<body>
<nav class="nav">
<div class="logo">
Website
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
And this is it without the logo:
<!DOCTYPE html>
<html>
<link href="css/styles.css" rel="stylesheet"/>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
edit: I apologize, attempting to format this in the code tags is proving difficult. It merges my css and html into one tag.
body, html {
margin : 0px;
}
nav {
width : 100%;
background-color : #0099cc;
height : 40px;
font-size : 22px;
font-family : Verdana;
line-height : 40px;
}
ul {
list-style-type : none;
margin : 0;
padding : 0
}
nav , logo , ul {
display : inline-block;
}
li{
float : left;
border-right : 1px solid black;
}
li a {
display : block;
padding : 0px 15px;
color : white;
text-align : center;
text-decoration : none;
}
li a:hover {
background-color : #007acc;
color : white;
}
I have the following HTML Code:
body {
margin: 0;
}
header {
background: #999;
color: white;
padding: 15px 15px 0 15px;
}
header h1 {
margin: 0;
display: inline;
}
nav ul{
margin: 0px;
display: inline;
}
nav ul li{
background: black;
color: white;
display: inline-block;
list-style-type: none;
padding: 5px 15px;
margin: 0;
}
nav ul li a{
color:white;
}
<!doctype html>
<html>
<head>
<title>CSS Layouts</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>Links</li>
</ul>
</nav>
</header>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
<footer>2016 My Site</footer>
</body>
</html>
My challenge is to make the "My Page" h1 in line, as stated in the CSS
header h1 {
margin:0;
display: inline;
}
In order to get the h1 header "My Page" to go inline with the unordered list, I need to move the h1 in the HTML to underneath of the <nav> opening tag (as opposed to where it is now underneath of the header opening tag), but I can't figure out why it will go inline when I do that but it won't when I leave it like it currently is.
It is my understanding that in CSS if you have the following:
header h1{
some styling here;
}
...that any h1's underneath of header will be affected, however, that is not happening in my code currently.
Your h1 does have the display inline, but the problem is that it is next to nav which is a block level element. Block elements take up as much width as they can, while inline elements only take up as much width as necessary (see w3schools). You'll need to change the display on the nav to inline or inline-block to stop it from taking up so much width.
As you make your ul and h1 inline, you don't do it with your nav, it still has display: block css property and takes full width.
As other told you, the element is style displayed as a block.
By the way, if you don't want "any h1's underneath of header to be affected" by that :
header h1{
some styling here;
}
You can write it this way :
header + h1 {
some styling here;
}
Selects all "h1" elements that are placed immediately after "header" elements
Source : http://www.w3schools.com/cssref/css_selectors.asp
I need to use an image for my navigation buttons inside of my navigation bar. Right now, I have it set as a color, and when hovered over, it changes color.
However, instead of a color, I need an image. I have sized the button image to the exact height and width as I have set it inside of my css.
For each of the ul's: About Me, Photo Edits, Video Edits, Writing, I must have a button. I have the image and it is correct on its width and height.
Here is my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!--Start Container for Whole Site-->
<div id="container">
<!--Start Header Content-->
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
Logo" border="0" /></a></div>
</div><!--End Header Content-->
<!--Start Navigation ontainer-->
<div id="wrapper">
<div id="navMenu">
<ul>
<li>About Me
</li>
</ul>
<ul>
<li>Photo Edits
</li>
</ul>
<ul>
<li>Video Edits
</li>
</ul>
<ul>
<li>Writing
<ul>
<li>Samples</li>
<li>Recognition</li>
</ul> <!--end inner UL-->
</ul><!--End main ul-->
<br class="clearFloat" />
</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->
<!--Start Media Area-->
<div id="media">
<h1>Images/Rich Media</h1>
<p>(470 x 550)</div>
<div id="text">
<h1>Main Body Text</h1>
<p>(470 x 400)</p>
</div><!--End Text Area Here-->
<!--Start Footer Here-->
<div id="footer">
<h1>Footer (50 x 1024)</h1>
<p>
Voo2Do Public Task List
Sitemap Public Image
Wireframe Public Image
</p>
</div> <!--End Footer Here-->
</div><!--End Container for whole site-->
<div id="w3"><!--Start HTML 5 Validation Button Here-->
<p>
<img src="images/valid_html5.gif" alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></p></div><!--End HTML 5 Validation Button Here-->
</body>
</html>
And here is my CSS Code for the Navigation Bar:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin: 0;
padding:0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #C0C0C0;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 35px;
width: 254px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility: hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background: #09f;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navmenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
I have tried to put url(images/navbutton.jpg) inside #navMenu and that didnt work. No matter what selection I put the image under, nothing happens. And then on top of all that, I also have to have a rollover image for my buttons that is different from my background image. So i'm having two images. One image will be the button, and the second image will appear when hovered over. I'm going cross-eyed, ugh. Can someone please help me?
note I am not using JS or JQ.
Just add the images in HTML instead of CSS, and then style them.
Assuming you don't want the labels "About Me, Photo Edits, Video Edits, Writing"...Just add add this inside your <a> tags:
<img src="/images/about-me.jpg" alt="About Me">
Then in your CSS just target the image:
#navMenu ul li a img { width: 254px; height: 35px; }
You then just need to add any styles for positioning.
For the hover effect, just add another image right next to the first one, add a class to it and then in CSS apply display: none; to that image. On hover of the <a> tag, just display: none; the first image and display: block; the second image.
You will also need to add relative positioning to the containing <a> tag and absolute positioning to the images so that they can sit on top of each other for when you hover on and off of them.
If you would like more specific info please create a codepen or jsfiddle with your current state of things.