I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the "Home" link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren't clickable. All the files are located in the same folder.
<head>
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet" />
<div id="header">
<h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</head>
#header {
background-color: #888888;
height:380px;
margin:0px;
padding:0px;
}
body {
background-color: #C0C0C0;
margin:0px;
padding:0px;
}
#main {
overflow: auto;
}
#content {
float:left;
}
#side {
float:left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li {
float:left;
margin:10px;
width:246px;
text-align:center;
font-family:"Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
As said you need to place your <header>, and <content> in the <body> tags.
This should help you out:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet">
<style>
#header {
background-color: #888888;
height: 380px;
margin: 0px;
padding: 0px;
}
body {
background-color: #C0C0C0;
margin: 0px;
padding: 0px;
}
#main {
overflow: auto;
}
#content {
float: left;
}
#side {
float: left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type: none;
height: 30px;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
margin: 10px;
width: 246px;
text-align: center;
font-family: "Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
</style>
</head>
<body>
<header>
<div id="header">
<h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</header>
<content>
<!-- Page content here -->
</content>
</body>
</html>
Fiddle
Here is a link to help you learn the basics. Link
Related
hello, Please see image, i have to make red box text aligned with "my heading", right now i have fixed this manually but when i resize the window it's going outside.
I know i can make it align if i do not use position absolute but its necessary to use position absolute because i have to call this section dynamically on each page.
so what should i do for this ??
this is my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
right: 167px;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white; width:20%;
}
</style>
</head>
<body>
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white; width:20%;
}
</style>
</head>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
background:#38383d; padding: 10px; float: right; color: white;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
I think this will help you..
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin:0px;
}
.name-list{
position: absolute;
left: 10px;
}
.name-list ul{
list-style: none; padding-left: 0px;
}
.name-list ul li{
float: left; padding-right: 10px;
background:red; color: white;
}
.box{
padding: 10px; float: right; color: white; width:250px;
}
.custom {background:#38383d;display: inline-flex;float: right;position: relative; }
</style>
</head>
<body>
<div class='custom'>
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
</div>
</body>
</html>
Since you can't change your html the best route would be to use percentages to place and size your .name-list
I've got the best results with this code:
.name-list{
position: absolute;
right: 3%;
width:18%
}
Code snippet:
body{
margin:0px;
}
.name-list{
position: absolute;
right: 3%;
width:18%
}
.name-list ul{
list-style: none;
padding-left: 0px;
}
.name-list ul li{
float: left;
padding-right: 10px;
background:red;
color: white;
}
.box{
background:#38383d;
padding: 10px;
float: right;
color: white;
width:20%;
}
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<div class="box">
<br>
<h2>My Heading</h2>
</div>
Unfortunately that's the best I can do without tinkering with your html.
use these css to get your result, hope this will helpful to you.
body {
margin: 0px;
}
.name-list {
position: absolute;
left: 10px;
}
.name-list ul {
list-style: none;
padding-left: 0px;
}
.name-list ul li {
float: left;
padding-right: 10px;
background: red;
color: white;
}
.box {
background: #38383d;
padding: 10px;
float: right;
color: white;
width: 20%;
position:relative;
}
<html>
<body>
<div class="box">
<div class="name-list">
<ul>
<li >Name</li>
<li>Surname</li>
</ul>
</div>
<br>
<h2>My Heading</h2>
</div>
</body>
</html>
I am new here and I am facing a very annoying problem which you would think could easily be fixed. But I have been trying to figure this out for the past hour.
Here is my problem, I have drawn a red box around it to indicate the problem -
See below
Here is the html code -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg">
<div><img src="img/specials.png"></div>
<div class="fix"></div>
</div>
</div>
</body>
</html>
Here is the css -
/* my official site styles */
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
I Appreciate the help!
Try this one...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Darian Steyn">
<title>BMW</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
#menu
{
width: 100%;
height: 60px;
background-color: #232323;
float: right; /*Why when I added this here, did it push it to the top*/
font-family: 'Montserrat', sans-serif;
}
.logo
{
width: auto;
height: 80%;
float: left;
padding: 0.3% 0 0 0.3%;
}
ul
{
padding: 0.3%;
text-align: center;
list-style-type: none;
}
nav li
{
display: inline;
padding-right: 2%;
}
li a
{
text-decoration: none;
color: white;
}
li a:hover
{
color: #1F68A5;
}
nav h1
{
font-family: 'Montserrat', sans-serif;
float: right;
font-size: 100%;
color: white;
margin-top: -0.2em;
margin-right: 1em;
border-style: solid;
border-width: 0.15em;
border-color: white;
}
nav h1:hover
{
color: #1F68A5;
border-color: #1F68A5;
}
#slider
{
width: 100%;
float: left;
}
#slider img:first-child
{
width:70%;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
.fix
{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img class="logo" src="img/logo.png"/>
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
<div class="fix"></div>
</div>
<div id="slider">
<img src="img/bmwConcept2.jpg" style="width:70%">
<img src="img/specials.png" style="width:30%;float:right;">
<div class="fix"></div>
</div>
</div>
</body>
</html>
This is badly formatted, dunno if it is the fix to your problem, but needs to be changed.
<ul>
<nav>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
<h1>REGION</h1>
</nav>
</ul>
should be at least this:
<nav>
<ul>
<li><span>HOME</span></li>
<li><span>VEHICLES</span></li>
<li><span>MY BMW</span></li>
</ul>
<h1>REGION</h1>
</nav>
Without linking to the site and seeing the size of the images, I think your problem is with the CSS that deals with the slider.
#slider img:first-child
{
height: 550px;
width:70%;
float: left;
}
#slider div
{
width:30%;
float: left;
margin-right: -2em;
}
I would start with removing the width and margin settings as I expect that is causing the problem and remove the first child part. First focus on getting the slider working as per the maker of the sliders css, then add your own.
<html>
<head>
<meta charset = "utf-8/">
<title> Jquery </title>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type = "text/javascript" src = "jsi/Scriptz.js" > </script>
<link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/>
<!-- Start Skider -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End Slider-->
</head>
<body onload = "Slider();" background = "black.jpg" >
<div id = "header">
<div id = "nav">
<div class = "Logo"> <img src = "Logo.png" border = "0" /> </div>
<div id = "nav_wrapper">
<ul>
<li> Home</li><li>
About Us</li><li>
Explore <img src = "Arrow.png"/>
<ul>
<li>Series/Movies</li>
<li>Sports</li>
<li>Games</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id = "container" >
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0"/></li>
<li><img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1"/> </li>
<li><img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data1/tooltips/north.jpg" alt="North"/>1</span>
<span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span>
<span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span>
</div></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div class = "shadow">
</div>
</div>
</body>
</html>
body{
padding:0;
margin:0;
overflow-y:scroll;
font-family: sans-serif;
font-size: 18px;
}
#container {
width:1200px;
height:1000px;
margin: 70px auto;
border : 1px solid;
background-color: aliceblue;
top:0;
}
#header{
width : 100%;
height: 60px;
background-color:#212121;
box-shadow: 0px 4px 2px #333;
top:0px;
z-index: 1000;
margin: 0 auto;
position:fixed;
white-space: nowrap;
}
#header h1{
width : 1024px;
margin : 0px auto;
padding:12px;
color:white;
}
.shadow{
background-image : url(shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height:144px;
margin: -60px auto;
}
.Logo{
float:left;
height: 60px;
padding:5px 3px;
line-height:40px;
}
.Logo img{
width:60%;
}
#nav{
background-color: #212121;
}
#nav_wrapper{
width:960px;
margin:0 auto;
text-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
display:inline-block;
}
#nav ul li :hover{
background-color: #FF0000;
}
#nav ul li img{
vertical-align: middle;
padding-left:10px;
width:20;
}
#nav ul li a,visited{
color:#ccc;
display:block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover{
background-color:#FF0000;
text-decoration: none;
height:50%;
}
#nav ul li: hover ul{
display: block;
}
#nav ul ul{
position:absolute;
background-color:#212121;
}
#nav ul ul li{
display:block;
}
Hello guys, I have been following a tutorial on Youtube on how to create a dropdow list. Everything was going great untill I inputted - display: none in the css for dropdown and nothing appears but when I disable it appears underneath the correct tab which is explore. Any Idea how I can fix this?
Please check the following code. I hope this solves your problem.
You can find the updated CSS between the /*********************************/ comment.
<html>
<head>
<meta charset="utf-8/">
<title>Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jsi/Scriptz.js">
</script>
<link rel="stylesheet" type="text/css" href="RizzStyle.css" />
<!-- Start Skider -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End Slider-->
<style type="text/css">
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: sans-serif;
font-size: 18px;
}
#container {
width: 1200px;
height: 1000px;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
}
#header {
width: 100%;
height: 60px;
background-color: #212121;
box-shadow: 0px 4px 2px #333;
top: 0px;
z-index: 1000;
margin: 0 auto;
position: fixed;
white-space: nowrap;
}
#header h1 {
width: 1024px;
margin: 0px auto;
padding: 12px;
color: white;
}
.shadow {
background-image: url(shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height: 144px;
margin: -60px auto;
}
.Logo {
float: left;
height: 60px;
padding: 5px 3px;
line-height: 40px;
}
.Logo img {
width: 60%;
}
#nav {
background-color: #212121;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #FF0000;
}
#nav ul li img {
vertical-align: middle;
padding-left: 10px;
width: 20;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
background-color: #FF0000;
text-decoration: none;
height: 50%;
}
/*********************************/
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
position: absolute;
background-color: #212121;
display: none;
}
/*********************************/
#nav ul ul li {
display: block;
}
</style>
</head>
<body onload="Slider();" background="black.jpg">
<div id="header">
<div id="nav">
<div class="Logo">
<a href="Main.html">
<img src="Logo.png" border="0" />
</a>
</div>
<div id="nav_wrapper">
<ul>
<li> Home
</li>
<li>
About Us
</li>
<li>
Explore <img src = "Arrow.png"/>
<ul>
<li>Series/Movies
</li>
<li>Sports
</li>
<li>Games
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li>
<img src="data1/images/north.jpg" alt="North" title="North" id="wows1_0" />
</li>
<li>
<a href="http://wowslider.com/vi">
<img src="data1/images/wolf.jpg" alt="content slider" title="Wolf" id="wows1_1" />
</a>
</li>
<li>
<img src="data1/images/android.jpg" alt="Android" title="Android" id="wows1_2" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/north.jpg" alt="North"/>1</span>
<span><img src="data1/tooltips/wolf.jpg" alt="Wolf"/>2</span>
<span><img src="data1/tooltips/android.jpg" alt="Android"/>3</span>
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<div class="shadow">
</div>
</div>
</body>
</html>
so, managed to sort my nav bar out the way I like it... However now I've moved onto what I want underneath it. Except I cannot appear to 'gain control' over the 'list' element... What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>St George's League - Home</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<Div class="container">
<ul>
<div class="nav">
<li><img src="images/sgl-logo.jpg" height="145px" alt="SGLLogo" /></li>
<div class="navbar">
<li class="contact">CONTACT</li>
<li class="about">ABOUT
<strong><li class="leagues">LEAGUES</li></strong>
<li class="home">HOME</li>
</div><!--Navbar End-->
</div><!--Nav End-->
</div><!--Container End-->
</div class="list"><strong>
<li>Essex</li>
<li>London</li>
</strong></div><!--Leagues End-->
</body>
</html>
.container {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
z-index: 2;
}
.navbar a {
float: right;
text-decoration: none;
padding-left: 10px;
color: #003399;
}
.nav li {
display: inline;
}
.navbar {
float: right;
padding-top: 67px;
padding-bottom: 45px;
padding-right: 0px;
z-index: 2;
}
#intro img {
position: absolute;
left:0px;
display: block;
margin: 0;
max-width: 100%;
height: auto;
z-index: 1;
}
.list {
position:relative;
top:300px;
}
.list a {
position:relative;
text-decoration:none;
float:left;
font-family:arial;
font-size:75px;
color:black;
}
li a{
color: #000000;
}
This is all you need to gain control of these in css. See the jsfiddle example here
http://jsfiddle.net/fwvc6zsc/
If you want more certainty that you are using the right one you could also change it like this:
strong li a{
color: #000000;
text-decoration: none;
}
Because you using different class
Use this:
.navbar li {
css code
}
See the below images:
the website as viewed in chrome
http://i48.tinypic.com/2rr9zf7.png
the website as viewed in dreamweaver:
http://i50.tinypic.com/mcvey9.png
The problem is the carousel doesnt line up with the navbar at the top (see top right).
it seems to be out of line by 1mm
I believe it may have to do something with the navbar (see second image). As you can see the contact button falls below the rest of the buttons.
my theory is that its causing the carousel to be out of alignment.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="../CSS/styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="outer">
<img src="../Images/webimages/banner top.jpg" />
</div>
<div id="topnav">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Technologies</li>
<li>Contact</li>
</ul>
</div>
<div id="carousel">
<iframe src="../Carousel/HTML/carousel.html" height="280" width="900" scrolling="no" frameborder="0"> </iframe>
</div>
<div id="mainbody">
<div id="bigbuttons">
<img src="../Images/webimages/Meettheteam.jpg">
</div>
</div>
</div>
</body>
</html>
CSS:
/* Reset */
a img {
border: none;
}
html, body {
padding:0;
margin:0;
}
a {
text-decoration: none;
}
ul, li {
list-style-type: none;
}
img.floatLeft {
float: left;
margin: 0px;
}
*
{
margin: 0;
padding: 0;
}
body {background-color:#F1F1F1; }
#outer { width: 900px; margin: auto; }
#topnav { width: 900px; margin: auto; }
#mainbody { width: 900px; margin:auto; clear:both; }
#list-nav li{display:inline-block;width:20%;float:left;}
#carousel { width: 900px; height: 280px; margin:auto; clear:both; }
#bigbuttons { width: 220px; height: 80px; margin:auto; margin-top: 9px; clear:both; float:left }
ul#list-nav li a {
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
padding:5px 0;
width: auto;
background:#999;
color:#eee;
float: left
}
ul#list-nav li a {
text-align:center;
border-left: 1px solid #fff;
width: 100%;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
#content-fullwidth { width:100%; }
Check the code for the carousel that you are filling the iframe with. Looks like your issue is there, not with the code you have provided us.