Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    My navigation bar has messed up

    When I was doing this work at uni, everything was fine but when I got back home with all the files and wanted to continue with this webpage I've realised that the navigation bar has messed up. The hover doesn't work and the entire layout is weird. Which piece of code should I change? I don't know where to start. Let me show you the image and the code.



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- saved from url=(0080)https://vle.dmu.ac.uk/courses/1/CTEC1412_2014_Y/content/_2889413_1/template.html -->
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<title></title>
    
    <!-- CSS file -->	
    
    <link href="style.css" type="text/css" rel="stylesheet" />
    	
    	
    <style>
    
    <!-- Navigation bar settings -->
    
    ul#navbar
    {
    list-style-type:none;
    margin:0;
    margin-bottom: 75px;
    margin-top: 40px;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    
    }
    a
    {
    display:block;
    width:247.5px;
    height:60px;
    background-color: lightblue;
    font-family:verdana;
    font-size: 16px;
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    line-height:55px;
    }
    
    
    <!-- Navigation bar hover -->
    
    ul#navbar li a:hover {
      background: navy;
      color:white;
    }
    
    
    </style>
    
    </head>
    
    
    <body>
    
    <!-- Banner -->
    
    <div id="webpage">
    <div id="banner">
    <img src="banner.png" alt="banner" width="980" height="120">
    </div>
    
    
    <!-- Header -->
    
    <div id="header">
    <h1 style="font-family:verdana;text-align:center;color:white;background-color:navy;">Welcome to GamerNews!</h1>
    <h4 style="font-family:verdana;text-align:center;color:white;background-color:black;">You can find all the news about upcoming games right here in one place.</h2>
    </div>
    
    
    <!-- Navigation bar -->
    
    <div id="navigationbar">
    <ul id="navbar">
    <li><a href="#webpage">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    <br>
    </div>
    
    
    <!-- Content -->
    
    	<!-- Call of Duty post -->
    
    <div id="content">
    	<div id="cod">
    			<h3 style="font-family:verdana;text-align:left;color:white;background-color:black;">
    			The new Call of Duty broke a record of the amount of copies sold within the first 24 hours!
    			</h3>
    		<div>
    			<img src="cod.jpg" alt="cod" width="300" height="150" class="cod" style="float:left;clear:right;"> 
    			<p style="font-family:verdana">
    			The new Activision's baby has become the new title holder for the highest amount of copies sold within the first 24 hours. It is the third time that Activision has beated their previous title's record.
    			</p>
    		<br><br><br><br><br>
    	</div></div>
    	
    	
    	<!-- League of Legends post -->
    	
    	<div id="lol">
    			<h3 style="font-family:verdana;text-align:left;color:white;background-color:black;">
    			Let the third season begin!
    			</h3>
    		<div>
    			<img src="lol.jpg" alt="lol" width="300" height="150" class="lol" style="float:left;clear:right;"> 
    		</div>
    			<p style="font-family:verdana">
    			The new League of Legends season is just about to start. Prepare for new champions, tournaments and a lot of fun.
    			</p>
    	
    	
    </div>
    
    
    
    
    
    </div>
    </div>
    
    </body></html>

  • #2
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I got rid of the bullet points using this CSS code but the hover function doesn't work at all.
    Code:
    ul{
    list-style:none;
    margin:0;
    padding:0;
    }
    It looks like this now.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mrlazio,
    When you say "but when I got back home with all the files and wanted to continue" it really makes me think you didn't get all the files.
    You posted your markup but we need to see the CSS as well, post your style.css here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm 100% sure I've got all the files. I have zipped the entire folder and also sent myself each and every single file by email.
    Code:
    #webpage{
    margin-left: auto;
    margin-right: auto;
    width: 990px;
    }
    ul#navbar{
    list-style:none;
    margin-bottom: 60px;
    padding:0;
    }

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm also having problems with my bullet points. This is how it looks:


    This is the code:
    Code:
    			<p>
    			<b style="font-family:verdana;">PlayStation 4</b>
    			<ul id="games">
    			<li> Fez							</li>
    			<li> Foul Play						</li>
    			<li> Hotline Miami 2: Wrong Number  </li>
    			<li> inFamous: Second Son			</li>
    			<li> Octodad: Dadliest Catch		</li>	
    			<li> Shadow Warrior (2014)			</li>			
    			<li> The Swapper					</li>									
    			<li> Titan Invasion					</li>
    			</ul>
    			</p>
    			
    			<p>
    			<b style="font-family:verdana;">PlayStation Vita</b>
    			<ul id="games2">
    			<li> Fez				</li>
    			<li> Gunslugs			</li>
    			<li> Luftrausers		</li>	
    			<li> MouseCraft			</li>
    			<li> OlliOlli			</li>
    			<li> Surge Deluxe		</li>	
    			<li> TxK				</li>
    			</ul>
    			</p>

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by mrlazio View Post
    I'm 100% sure I've got all the files. I have zipped the entire folder and also sent myself each and every single file by email.
    Code:
    #webpage{
    margin-left: auto;
    margin-right: auto;
    width: 990px;
    }
    ul#navbar{
    list-style:none;
    margin-bottom: 60px;
    padding:0;
    }
    That is your included CSS. You also have an external CSS file named style.css. See your link highlighted in red below -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- saved from url=(0080)https://vle.dmu.ac.uk/courses/1/CTEC1412_2014_Y/content/_2889413_1/template.html -->
    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<title></title>
    
    <!-- CSS file -->	
    
    <link href="style.css" type="text/css" rel="stylesheet" />
    	
    	
    <style>
    
    <!-- Navigation bar settings -->
    
    ul#navbar
    {
    list-style-type:none;
    margin:0;
    margin-bottom: 75px;
    margin-top: 40px;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    
    }
    a
    {
    display:block;
    width:247.5px;
    height:60px;
    background-color: lightblue;
    font-family:verdana;
    font-size: 16px;
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    line-height:55px;
    }
    
    
    <!-- Navigation bar hover -->
    
    ul#navbar li a:hover {
      background: navy;
      color:white;
    }
    
    
    </style>
    
    </head>
    
    
    <body>
    
    <!-- Banner -->
    
    <div id="webpage">
    We need to see the contents of that file.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •