-
1. Re: Using AP Div's and Editing them
Nancy O. Dec 30, 2011 11:02 AM (in response to WebGuyDesign)If you rename a CSS selector, you must also rename the div ID or class name that referernces it in your html.
<div id="DivName">
content
</div>
Also, APDivs are not a good primary layout method. Here's why:
http://apptools.com/examples/pagelayout101.php
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
2. Re: Using AP Div's and Editing them
WebGuyDesign Dec 30, 2011 12:31 PM (in response to WebGuyDesign)Thanks, next i'm trying to create a menue that looks like this where when i hover over each button, it changes color. What is the best way at approach this? I basically just need the menue from here; how can i add it to my site?
!DOCTYPE html><html xmlns:og="http://ogp.me/ns#"><head>
<title>THIS IS A TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--<meta name="viewport" content="width=device-width,initial-scale=1">-->
<link rel="shortcut icon" href="www.testing.com">
<link rel="canonical" href="http://www.treehugger.com/green-food/alternative-home-remedy-peppermint-oil-to-relieve-ibs .html">
<meta name="robots" content="noodp">
<meta name="keywords" content="demo test">
<meta name="description" ewbsite"="">
<link rel="canonical" href="http://www.treehugger.com/green-food/alternative-home-remedy-peppermint-oil-to-relieve-ibs .html">
<link rel="image_src" href="http://www.fe28.comg">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://static.treehugger.com/stylesheets/treehugger.css">
<!-- OpenGraph -->
<meta property="og:title" content="333">
<meta property="og:type" content="article">
<meta property="og:url" content="this will have to be changed">
<meta property="og:image" content="www.geingsf4">
<meta property="og:site_name" content="TreeHugger">
<meta property="og:description" content="We 'Huggers with our aspiring clean, fiber-rich diets probably aren't as likely to experience the daily (yikes!) Irritable Bowel Syndrome (IBS) that some millions of Americans do, according to The New York Times. ">
<meta property="fb:app_id" content="133255656700169">
</head><body><div id="container">
<div id="header">
<div id="logo-bar">
<div id="logo">
<p>logo page</p>
</div>
</div><!-- end logo-bar -->
<ul id="nav">
<li>
<a href="/stream/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'All',]);">HOME</a>
</li>
<li>
<a href="/design/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Design',]);">ABOUT</a>
</li>
<li>
<a href="/technology/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Technology',]);">SERVICES</a>
</li>
<li>
<a href="/living/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Living',]);">station</a>
</li>
<li>
<a href="/transportation/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Transportation',]);">bass</a>
</li>
<li></li>
<li>
<a href="/science/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Science',]);">PLAYS</a>
</li>
<li>
<a href="/business/" class="" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Business',]);">POTS</a>
</li>
<li>
<a href="/slideshows/" class=" last" onclick="_gaq.push(['_trackEvent', 'Top Nav', 'Slideshows',]);">cost</a>
</li>
</ul>
</div><!-- header -->
<div id="content">
<div class="rail-item"></div>
<div class="rail-item"></div>
</div></div></body></html>
-
3. Re: Using AP Div's and Editing them
Nancy O. Dec 30, 2011 1:53 PM (in response to WebGuyDesign)The menu you have now is not web friendly. The links won't work without JavaScript.
Try this code in a new, blank HTML document
<!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=iso-8859-1" /> <title>Horizontal List Menu</title> <style type="text/css"> /**BEGIN HORIZONTAL MENU STYLES**/ #nav { width: 800px; margin:0.5em auto; } #nav ul {list-style:none;} #nav ul li {display: inline;} #nav ul li a { font: 0.75em/1.5em "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-transform:uppercase; color: #FFF; background: #333; text-decoration: none; float: left; display:block; line-height: 3em; width: 7em; text-align:center; border-top:2px solid silver; border-right: 2px solid silver; border-bottom: 6px solid silver; } #nav ul li a.last {border-right:none} #nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { background: #dadada; color:#000; text-decoration:underline; outline:none; } /**END HORIZONTAL MENU STYLES**/ </style> </head> <body> <!--Begin horizontal menu --> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Station</a></li> <li><a href="#">Bass</a></li> <li><a href="#">Plays</a></li> <li><a href="#">Pots</a></li> <li><a class="last" href="#">Cost</a></li> </ul> </div> <!--end menu --> </body> </html>Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
4. Re: Using AP Div's and Editing them
WebGuyDesign Dec 30, 2011 2:53 PM (in response to Nancy O.)Woundefull thanks this works, but lets say that I want to move the full navagation bar in a specfic location on site, (exactly) for example I created a div tag thats a different color with the size that a little bigger then this navagation. How do I input the code in this html so that it fits over the Div. (see picture) What is the best why to input this in, can you explain how I would do this?
thanks so much!
ps
wish you had a video that showed me how you made this.
-
5. Re: Using AP Div's and Editing them
Nancy O. Dec 30, 2011 3:29 PM (in response to WebGuyDesign)Use margins to align your #nav.
#nav {
width: 800px;
margin: top | right | bottom | left;
}
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists


