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;
}
Related
This is happening to me while I am trying to learn web development.
I am only getting the expected result when I preview my website on IE old version, but not getting the expected result when opening on Firefox or Chrome.
Here is the code, it's a very simple one. It's supposed to change the color of the links when visited but what it's doing is that it is constantly applying visited properties to my text.
What I am trying to do is simply changing color of link while in link and visited state.
HTML :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="CSSworking.css">
<title>Html Working</title>
</head>
<body>
<ul class="main">
<li>Home</li>
<li>Our Kitchen</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
<li>Go Down</li>
</ul>
</body>
</html>
Here is the CSS:
.main {
text-decoration: none;
list-style:none;
margin-left: 60px;
}
.main li {
display: inline-block;
margin: 20px;
}
.main li a:link {
color:pink;
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
border-top: 4px solid red;
}
If you're using '#' as the link for all of these, you're using the same (local) link for all of them, so if you've visited that local anchor once they'll all stay visited.
Can you try changing to external links such as 'http://google.com', 'http://yahoo.com', etc and see if the problem persists?
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
<html>
<head>
<title> Playing with Cascading Style Sheets </title>
<style type = "text/css">
.nav { background-color : green;
height : 35px;
font-size : 25px;
font-weight : bold;
display : block;
}
.nav ul {
list-style : none;
margin : 0;
padding : 0;
display : inline;
}
.nav li {
display : inline;
padding : 100px;
vertical-align : middle;
}
.nav a {
text-decoration : none;
padding : 8px 8px 8px 8px;
color : white;
vertical-align : middle;
}
.nav a:hover
{
color : black;
background-color : white;
}
</style>
</head>
<body>
<div class = "nav">
<ul>
<li>Home</li>
<li>Links</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Query :- While using the background-color style on body tag at the style tag or by another way like using div tag the horizontal menu is not working as it works before without using the background color.
Problem with using background color is that after using it the horizontal menu context get outs of its div block of class= ".nav" when I shrink the browser size.
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?
Taking an ultra-basic HTML class and just need to submit this project so I don't fail the class. On my simply ugly-ass menu I get a vertical black bar inside my buttons to the left of the text on every button except "Home". Thank you for your help stay cool B)
My nav code is:
<style>
nav ul {list-style-type :none;
margin : 0 25% 0 25%;}
nav ul li {
float : center;
}
article {clear : left;}
nav ul li {
float : left;
margin-right : 1em;
margin-bottom : 1em;
text-align:center;
}
nav ul li a {
text-align:center;
padding : 0.25em .5em;
text-decoration : bold;
background-color : tan;
color : black;
border : 1px solid black;
border-top-left-radius : 0em 0em;
border-top-right-radius : 0em 0em;
}
</style>
</head>
<body>
<header>
<h1>Fish Stories</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</li>
<li><a href="teenfishes.html">Teen Fisherman</li>
<li><a href="alienfish.html">Alien Fish</li>
<li>Jean Sot</li>
</ul>
</nav>
Correct your HTML code structure as below.
<ul>
<li>Home</li>
<li>Teen Fisherman</li>
<li>Alien Fish</li>
<li>Jean Sot</li>
</ul>