-
-
Navigation Bar Issues
could you please, i keep trying, but seem to muck it up for some reason. I'm new and i'm just pretty much doing this for one unit in my ict coursework. Cheers
-
Navigation Bar Issues
Hi, I appreciate you taking your time to come and help me out. It's looking great. It's also compatible at last so many again many thanks on that, but my links dont seem to be working anymore and the arrows from 'online services' and 'information age' are missing. Cheers
-
Navigation Bar Issues
Hi, The Navigation Bar I recentally made has some problems. The html is validated with no warnings, and the css is validated with some warnings. How it should look (internet explorer : Problems #1. Page displayed incorrecty with Internet Explorer 7 #2. Page displayed completely incorrectly with Firefox, etc. (it was working fine earlier). #3. Some incorrect coding with colours, causing wrong sections hightlighted. When clicked. This should not colour change at all when clicked. You need to download this so it displays correctly e.g. images, etc. Download Link: http://www.megaupload.com/?d=VC5X0W71 instructions: click the download link, wait for the timer, start the download, extract the .zip file, open e-book folder, the css will be style.css and can be found in the css folder and the index.html can be found inside the e-book folder. Thank You for your help if you decide to help me. I really do appriecate any help. I'm also on a tight deadline, so please help me if you have the time. Thanks again
-
Navigation Bar Problems
oh sorry i didn't realise that. for some reason i cant edit it so i will post the correct one below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css"> <title>Home</title> </head> <body> <div id="header_wrap"> <div id="header"> </div> </div> <div id="navbar_wrap_outer"> <div id="navbar_wrap_inner"> <div class="navbar"> <div class="button"><a href="#">Home</a></div> <div class="button"><a href="#">Online Services</a></div> <div class="button"><a href="#">Information Age</a></div> <div class="button"><a href="#">Digital Divide</a></div> <div class="button"><a href="#">Site Map</a></div> </div> </div> </div> <div id="navbar2"> </div> <div id="content"> </div> </body> </html> its an index.html by the way not .css
- Navigation Bar Problems
-
Navigation Bar Problems
Hi, I made a navigation bar a while back,however later I found the need to add drop downs. The problem is I made my own navigation bar using Divs. I changed it so it's a normal navigation with drop downs, but I want to keep the styles for my previous navigation bar, which i made using divs. So can anyone help Index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/navigation.css" media="screen" rel="stylesheet" type="text/css" /> <title>Home</title> </head> </style> <!--[if lte IE 7]> <script type="text/javascript" src="/generic/js/jquery.js"></script> <script type="text/javascript" src="js/jquery.helper.js"></script> <![endif]--> </head> <body> <div id="header_wrap"> <div id="header"> </div> </div> <ul id="nav" class="Navigation Bar"> <li><a href="./">Home</a></li> <li class="dir">Online Services <ul> <li class="dir"><a href="./">Commerce</a> <ul> <li><a href="./">Internet Auctions</a></li> <li><a href="./">Online Shopping</a></li> </ul> </li> <li class="dir"><a href="./">Communication</a> <ul> <li><a href="./">Blog</a></li> <li><a href="./">Email</a></li> <li><a href="./">Instant Messaging</a></li> </ul> </li> <li class="dir"><a href="./">Education</a> <ul> <li><a href="./">Online Learning</a></li> <li><a href="./">VLE</a></li> </ul> </li> <li class="dir"><a href="./">Entertainment </a> <ul> <li><a href="./">Multiplayer Gaming.doc</a></li> <li><a href="./">Online Videos</a></li> </ul> </li> <li class="dir"><a href="./">Real Time</a> <ul> <li><a href="./">News Services</a></li> <li><a href="./">Weather Forecasts</a></li> </ul> </li> <li class="dir">Information Age <ul> <li><a href="./">Banking</a></li> <li><a href="./">Civil Rights.</a></li> <li><a href="./">Communication.doc</a></li> <li><a href="./">Crime & prevention</a></li> <li><a href="./">Education</a></li> </ul> </li> <li><a href="./">Digital Divide</a></li> <li><a href="./">Site Map</a></li> </li> </ul> <div id="content"> </div> </body> </html> Style.css @charset "utf-8"; /* CSS Document */ body { margin:5px; padding:0px; background:url(../images/background.gif) repeat; } #header_wrap { width:100%; height:80px; margin:0px; background:url(../images/background.gif) repeat-x; } #header { width:960px; height:80px; margin:0 auto; background:url(../images/banner.gif) no-repeat; } #navbar_wrap_outer { overflow: hidden; width: 960px; height:30px; margin: 0 auto; background: url(../images/nav-background-repeat.png) repeat-x; } #navbar_wrap_inner { position: relative; float: left; left: 50%; height:30px; margin:0px; background:url(images/background.gif) repeat-x; } .navbar { position: relative; left: -50%; background: url(../images/nav-background.png) height:30px; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:30px; font-weight:bold; border:1px solid #FFF } .button { float: left; } .button a { background: url(../images/nav-background.png); float:left; color:#777777; padding: 0 10px; height:30px; text-decoration:none; text-align:center; } .button a:link, #list-menu a:active, #list-menu a:visited { color: #7777777; } .button a:hover { color:#3D85C6; } Old Index @charset "utf-8"; /* CSS Document */ body { margin:5px; padding:0px; background:url(../images/background.gif) repeat; } #header_wrap { width:100%; height:80px; margin:0px; background:url(../images/background.gif) repeat-x; } #header { width:960px; height:80px; margin:0 auto; background:url(../images/banner.gif) no-repeat; } #navbar_wrap_outer { overflow: hidden; width: 960px; height:30px; margin: 0 auto; background: url(../images/nav-background-repeat.png) repeat-x; } #navbar_wrap_inner { position: relative; float: left; left: 50%; height:30px; margin:0px; background:url(images/background.gif) repeat-x; } .navbar { position: relative; left: -50%; background: url(../images/nav-background.png) height:30px; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:30px; font-weight:bold; border:1px solid #FFF } .button { float: left; } .button a { background: url(../images/nav-background.png); float:left; color:#777777; padding: 0 10px; height:30px; text-decoration:none; text-align:center; } .button a:link, #list-menu a:active, #list-menu a:visited { color: #7777777; } .button a:hover { color:#3D85C6; }
-
Navigation Bar / Drop Down
oh wait does anyone know a method that doesnt require me to start from scratch?
-
Navigation Bar / Drop Down
brilliant example cheers
-
Navigation Bar / Drop Down
Hi, i'm trying to make my navigation bar (http://dhkim.110mb.com/e-book/index.html) resemble this design (http://www.hv-designs.co.uk/tutorials/interior_design/step6.gif), however i'm not sure how to code the submenu because its vertical (i'm still learning css). The idea is once the first navigation bar is clicked or hovered over it opens another one below it with another menu bar. (http://uk.aiononline.com) - is a live example of how i want to base the design around. Any help would be highly appreciated. Thanks
-
Grid Systems
Hi, I was wondering how grid systems are used and what advantages they bring. http://960.gs - This is an example. Thanks
-
css content area - help please
cheers all working now
-
css content area - help please
Hi, my content area seems to shift to the side for some reason. I don't really need to explain the problem in detail, as it can clearly be seen through the image below. can anyone help me resolve this problem. I'm new to css and it's really confusing me. Thanks My index and style code can be seen below: Index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <link href="css/style.css" rel="stylesheet" type="text/css"> <title>Home</title> <body> <div id="header_wrap"> <div id="header"> </div> </div> <div id="navbar_wrap_outer"> <div id="navbar_wrap_inner"> <div class="navbar"> <div class="button"><a href="#">Home</a></div> <div class="button"><a href="#">Online Services</a></div> <div class="button"><a href="#">Information Age</a></div> <div class="button"><a href="#">Digital Divide</a></div> <div class="button"><a href="#">Site Map</a></div> </div> </div> </div> <div id="content_wrap"> <div id="content"> </div> </div> </body> </html> Style.css @charset "utf-8"; /* CSS Document */ body { margin:5px; padding:0px; background:url(../images/background.gif) repeat; } #header_wrap { width:100%; height:80px; margin:0px; background:url(../images/background.gif) repeat-x; } #header { width:960px; height:80px; margin:0 auto; background:url(../images/banner.gif) no-repeat; } #navbar_wrap_outer { overflow: hidden; /*NOTE THIS*/ width: 960px; height:30px; /*margin:0px;*/ margin: 0 auto; background: url(../images/nav-background-repeat.png) repeat-x; } #navbar_wrap_inner { position: relative; float: left; left: 50%; /*NOTE THIS*/ height:30px; margin:0px; background:url(images/background.gif) repeat-x; } .navbar { position: relative; left: -50%; /*NOTE THIS*/ background: url(../images/nav-background.png) /*width:960 px;*/ height:30px; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:30px; font-weight:bold; border:1px solid #FFF } .button { float: left; } .button a { background: url(../images/nav-background.png); float:left; color:#777777; /*width:50px;*/ padding: 0 10px; height:30px; text-decoration:none; text-align:center; } .button a:link, #list-menu a:active, #list-menu a:visited { color: #7777777; } .button a:hover { color:#3D85C6; } #content_wrap { } #content { float:left; color:#333; background:#FFFFFF; height:350px; width:960px; display:inline; }
-
css navbar problems
Problem solved! (http://img545.imageshack.us/img545/4440/12936079.gif) Thanks alot for taking your time to help me out.
-
css navbar problems
Hi again, sorry for bumping this thread again with stupid questions. I did as you said and this was the result (http://img255.imageshack.us/img255/1672/39072478.gif), which is looking really good, however it expanded beyond the background and i want to keep it level, so any tips on that. My dreamweaver looks like this: (http://img832.imageshack.us/img832/5763/77120345.gif) for some reason aswell, so any way of fixing that. Once again thx i really do appreciate your help. Cheers
-
css navbar problems
Yes! thx i managed to get it working and with the hover (x so thats alot. btw if theres one more thing how can i make the extra space (left over from navigation bar, which is background) into a full bar like the one seen on this website: http://www.getdarker.com/home/ I tried but it ruined the whole thing .. cheers