Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

noobtouch

Members
  • Joined

  • Last visited

  1.    noobtouch reacted to a post in a topic: Navigation Bar Issues
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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; }
  7. oh wait does anyone know a method that doesnt require me to start from scratch?
  8. brilliant example cheers
  9. 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
  10. noobtouch posted a topic in Frontend
    Hi, I was wondering how grid systems are used and what advantages they bring. http://960.gs - This is an example. Thanks
  11. cheers all working now
  12. 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; }
  13. Problem solved! (http://img545.imageshack.us/img545/4440/12936079.gif) Thanks alot for taking your time to help me out.
  14. 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
  15. 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

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.