Alex442
Members
-
Joined
-
Last visited
-
Thanks a lot guys. I'll toy with a bit of JavaScript then. I'm not really familiar with it so it will be fun learning I'm sure
-
-
-
Hi there, I'm just starting out and am a little bit hazy on the best way to design a nav menu. I'm hearing talk of pure CSS, which sounds simple but these menus look a little basic from what I've seen. So for a design with any credibility should I be using Javascript and JQuery? Or a mixture of all? I want my menu to look stylish and be compatible with mobile devices. Thanks
-
Thanks for taking the time to read through all of that. I won't be using image sprites for nav menus again in a hurry. Now my problem is choosing on a best way forward. Seems like a lot of options. JQuery, Javascript, pure CSS...any suggestions?
-
Hi there, when I hover over sections on my navigation menu they won't line up with the width of each tab. Here's my website HTML: <html> <head> <link href="marketingstyle.css" rel="stylesheet" type="text/css"> </head> <title> Alex Francis Designs </title> <header>` <img src="Images/AFD5.png" alt="country" id="logo"> <ul id="topnav1"> <li><a href="#logos" class="Logos">Logos</a></li> <li><a href="#Web" class="Web">Web</a></li> <li><a href="#Print" class="Print">Print</a></li> <li><a href="#Newsletters" class="Newsletters">Newsletters</a></li> <li><a href="#GraphicDesign" class="GraphicDesign">Graphic Design<a/></li> </ul> </header> <body> <div id="humbletext"> </div> <div id="form2"> <div id="formfields"> <label for="name">First Name</label> <input type="text"><br> <label for="e-mail">Last Name</label> <input type="text"><br> <label for="e-mail">Email</label> <input type="text"><br> <label for="e-mail">Phone</label> <input type="text"><br> <label for="e-mail">Company</label> <input type="text"><br> <label for="e-mail">Country</label> <input type="text"><br> </div> <div id="formheader"> See how easy it is to do Marketing big and thrive </div> <span style="text-align: center; display:block; font-size:14px; color:white;"> Fill out the form and one of<br> our representatives will contact you</span> </div> </body </html> CSS: * {Margin: 0; Padding: 0;} html { min-width: 1200px; } #logo { height: 90px; width: 280px; padding-bottom: 15px; } header { width:80%; left: 0px; top: 0px; margin-left: auto; margin-right: auto; margin-top: 20px; } body { height: 1200; } ul#topnav1 { float: right; width: 680px; list-style: none; position: relative; top: 38; } ul#topnav1 li { display: inline; } ul#topnav1 li a { Position: relative; display: block; float: left; height: 52px; background-image: url(menu-sprite.png); text-indent: -9999px; } ul#topnav1 li a.logos { width: 105px; background-position: 0 0; } ul#topnav1 li a.Web { width: 70px; background-position: -100px 0; } ul#topnav1 li a.Print { width: 105px; background-position: -170px 0; } ul#topnav1 li a.Newsletters { width: 158px; background-position: -279px 0; } ul#topnav1 li a.GraphicDesign { width: 198px; background-position: -440px 0; } ul#topnav1 li a.logos:Hover, ul#topnav1 li a.logos:focus { background-position: 0px -51px; } ul#topnav1 li a.Web:Hover, ul#topnav1 li a.Web:focus { background-position: -100px -51px; } ul#topnav1 li a.Print:Hover, ul#topnav1 li a.Print:focus { background-position: -170px -51px; } ul#topnav1 li a.Newsletters:Hover, ul#topnav1 li a.Newsletters:focus { background-position: -279px -51px; } ul#topnav1 li a.GraphicDesign:Hover, ul#topnav1 li a.GraphicDesign:focus { background-position: -440px -51px; } #humbletextbox { line-height: 150%; margin-left: 30px; color: grey; width: 430px; top: 350px; } #humbletext { line-height: 150%; margin-left: 30px; color: grey; width: 430px; top: 280px; } #form2 { position: relative; top: 500px; float: right; width: 350px; height: 600px; background-color: rgb(107, 179, 39); } } #offeringtext { left: 108px; position: relative; margin-top: -70px; line-height: 95%; } .imageclass1 { width: 60px; height: 60px; position: relative; margin-left: 28px; margin-top: 30px; } #formfields { position: absolute; top: 120px; right: 75px; } #formheader { width: 350px; height: 70px; background-color: #0066FF; color: white; text-align: center; font-size: 24px; font-family:lato; } label { width: 4em; margin-right: 4em; display: inline; } #middle input { width: 200px; height: 32px; display: block; margin-left: 15px; } I'll paste the code from the tutorial I'm using because this guy has it done right. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Menu of Awesomeness</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <ul id="awesome-menu"> <li><a href="#ninja" class="ninja">Ninja</a></li> <li><a href="#zombie" class="zombie">Zombie</a></li> <li><a href="#robot" class="robot">Robot</a></li> <li><a href="#assassin" class="assassin">Assassin</a></li> <li><a href="#jedi" class="jedi">Jedi</a></li> </ul> </body> </html> CSS * { margin: 0; padding: 0; } /* Reset stuff */ ul#awesome-menu { width: 517px; margin: 250px auto; list-style: none; } ul#awesome-menu li { display: inline; } ul#awesome-menu li a { display: block; height: 56px; background-image: url(menu-sprite.png); text-indent: -9999px; } ul#awesome-menu li a.ninja { width: 96px; background-position: 0 0; } ul#awesome-menu li a.zombie { width: 108px; background-position: -96px 0; } ul#awesome-menu li a.robot { width: 97px; background-position: -204px 0; } ul#awesome-menu li a.assassin { width: 121px; background-position: -301px 0; } ul#awesome-menu li a.jedi { width: 94px; background-position: -422px 0; } ul#awesome-menu li a.ninja:hover, ul#awesome-menu li a.ninja:focus { background-position: 0 -56px; } ul#awesome-menu li a.zombie:hover, ul#awesome-menu li a.zombie:focus { background-position: -96px -56px; } ul#awesome-menu li a.robot:hover, ul#awesome-menu li a.robot:focus { background-position: -204px -56px; } ul#awesome-menu li a.assassin:hover, ul#awesome-menu li a.assassin:focus { background-position: -301px -56px; } ul#awesome-menu li a.jedi:hover, ul#awesome-menu li a.jedi:focus { background-position: -422px -56px; } a { outline: none; } I could just use the code in the example but I really want to know what it is I'm doing wrong. Thanks guys
