Unicris

I have put a few amazon banner links on my website, but I am noticing that they are not clickable when viewing on a smart phone. I am assuming this is because they are wrapped in an Iframe.Is there a way to make this work on mobile devices? I am thinking I could try wrapping the iframe in an <a> tag that points to the same page but with its own link. So the banner link will show like a picture, but it wont be the actual link. Would this work? And would it affect the banner link itself when clicked on in a normal browser. <iframe src="http://rcm.amazon.com/e/cm?t=jonsonliport-20&o=1&p=12&l=ur1&category=software&banner=0BSSVHTA3XB4Y210FD82&f=ifr" width="100%" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>

Hey, I am attempting to place ads on my site. I have a fluid grid layout using dreamweaver in which I have a Left navigation then right content layout. It works well in readjusting my content to view on mobile devices or computer browsers.Anyway, I would like to place ads which would be ok when it has the right and left layout in larger windows. But when switching to mobile, the navigation moves to the top of the content. So since I am including the ads Div inside the Navigation Div so it scales appropriately, I would like to not have the ads shown on the mobile version of the site, or to display a different size ad that would not be as intrusive. I saw somewhere that adding to my CSS would apply to any browser less than 481 px. I am testing on a galaxy s3. @media only screen and (max-width: 481px) { #ads1 a { display: none; }} , but the ad still shows up. In this case its not a huge deal, but if I include a skyscrapper ad, I don't want that showing up in front of all my content.Here is the HTML for the particular DIV arrangement <div id="CareerNav"> <?php include ('../../navigation/careerNav.php'); ?><div id="ads1"><br><hr><br> <a href="http://click.linksynergy.com/fs-bin/click?id=2mtHBT8Zwf4&offerid=145240.10000074&subid=0&type=4"><IMG border="0" alt="234X60" src="http://ad.linksynergy.com/fs-bin/show?id=2mtHBT8Zwf4&bids=145240.10000074&subid=0&type=4&gridnum=3"></a> </div> </div> The site in question is at http://jonccody.com/career/skills/business.php I plan on adding different ad blocks to different pages depending on the size of the adjacent content. But I've gotta get it not to show in the browswers in which the navigation moves above the content. (IE Mobile phones) If I can figure out a way to display a different set of code for those situations, that would be good. I'd probably add a Div below the content for mobile browswers.

Thanks guys, that did the trick. I'll have to do some styling later, but this will work for now.

nevermind on the notification thing, i just found the button to follow the thread.

I have it on two temporary domains at the moment. the one with styling is the one I'm having trouble editing correctly. That is at this location http://christconnect.net76.net/ (I know the domain doesn't make sense, it was just an old project I was working on that I no longer have, and I needed a place to test my files. )My other version is at http://jonsonlineportfolio.site40.net Currently its navigation bar is set in a verticle alignment despite the fact it shows up horizontal in dreamweaver.Thanks.Also, while I am at it, what do i have to do to get notified when someone replys to this thread. I tried turning on some notifications but I'm not getting any. Perhaps I'm turning on the wrong ones.

Thanks, as far as the left/ right 50%, I'm not sure the logic behind it, but that is what I have seen several times in order to center the navigation bar. I changed all the display blocks to display inline, and that did not fix the issue.and thanks for clarifying the css syntax, I was never sure the correct way to do that. Though for some reason, even if I just do a #Header h1 adjustment, it is still not displaying correctly in dreamweaver. I haven't attempted to upload it to a server yet. But you'd think it would still display correctly considering everything else does.Either way, I suppose I need to design a header for the site. I'll add that to my to do list.Regarding the menu, I know there is code for an active state as well. right now I took the active class off the menu because it wasnt switching. What do I need to do to have the correct page displayed as active? Thanks

nevermind, I found my other post, how do I delete this one.

Hey, I posted this yesterday, but for some reason I do not see it today. I'm not sure what happened. Anyway, I have a horizontal navigation bar that I managed to find a solution to center it which is good. Unfortunately, I also need it to wrap to an additional line when on a smaller browser window, such as a smart phone. Currently the links that don't fit within the window just do not show up. Any ideas how to fix this? And if I am using a background image to create the buttons, is that going to effect things? I can probably just replace the image with a color.I currently have the naigational element inserted with a php include with a div id="mainNav" <ul class="menu"> <li><a href="/index.php" target="_self"><span>Home</span></a></li> <li><a href="/career/index.php"><span>Career</span></a></li> <li><a href="/portfolio/index.php"><span>Portfolio</span></a></li> <li><a href="/fun/index.php"><span>Just For Fun</span></a></li> <li><a href="/contact/index.php"><span>Contact</span></a></li></ul> #mainNav {text-align: center;width: 100%;position: relative;overflow: hidden;background: url('/images/topMenuImages.png') repeat-x;}.menu {margin: 0;padding: 0;height: 30px;background: url('/images/topMenuImages.png') repeat-x;left: 50%;clear: left;float: left;position: relative;}.menu li {padding: 0;margin: 0;list-style: none;display: block;float: left;position: relative;right: 50%;}.menu li a {float: left;padding-left: 15px;display: block;color: rgb(255,255,255);text-decoration: none;font: 12px Verdana, Arial, Helvetica, sans-serif;cursor: pointer;background: url('/images/topMenuImages.png') 0px -30px no-repeat;}.menu li a span {line-height: 30px;float: left;display: block;padding-right: 15px;background: url('/images/topMenuImages.png') 100% -30px no-repeat;}.menu li a:hover {background-position: 0px -60px;color: rgb(255,255,255);}.menu li a:hover span {background-position: 100% -60px;}.menu li a.active, .menu li a.active:hover {line-height: 30px;font: 12px Verdana, Arial, Helvetica, sans-serif;background: url('/images/topMenuImages.png') 0px -90px no-repeat;color: rgb(255,255,255);}.menu li a.active span, .menu li a.active:hover span {background: url('/images/topMenuImages.png') 100% -90px no-repeat;} Also, while I'm at it, what do I need to establish the "active" link

Hey, So I have started styling some of my website I am working on. I am working on the navigation currently and managed to get the horizontal menu centered. Unfortunately, I need it to also drop to a new line when on a small window such as a smart phone. Currently the first couple of links show up while the rest disappear. Any ideas? ThanksI have the menu inserted with php include inside a div id="mainNav" the menu is <ul class="menu"> <li><a href="/index.php" target="_self"><span>Home</span></a></li> <li><a href="/career/index.php"><span>Career</span></a></li> <li><a href="/portfolio/index.php"><span>Portfolio</span></a></li> <li><a href="/fun/index.php"><span>Just For Fun</span></a></li> <li><a href="/contact/index.php"><span>Contact</span></a></li></ul> #mainNav {text-align: center;width: 100%;position: relative;overflow: hidden;background: url('/images/topMenuImages.png') repeat-x; .menu {margin: 0;padding: 0;height: 30px;background: url('/images/topMenuImages.png') repeat-x;left: 50%;clear: left;float: left;position: relative;}.menu li {padding: 0;margin: 0;list-style: none;display: block;float: left;position: relative;right: 50%;}.menu li a {float: left;padding-left: 15px;display: block;color: rgb(255,255,255);text-decoration: none;font: 12px Verdana, Arial, Helvetica, sans-serif;cursor: pointer;background: url('/images/topMenuImages.png') 0px -30px no-repeat;}.menu li a span {line-height: 30px;float: left;display: block;padding-right: 15px;background: url('/images/topMenuImages.png') 100% -30px no-repeat;}.menu li a:hover {background-position: 0px -60px;color: rgb(255,255,255);}.menu li a:hover span {background-position: 100% -60px;}.menu li a.active, .menu li a.active:hover {line-height: 30px;font: 12px Verdana, Arial, Helvetica, sans-serif;background: url('/images/topMenuImages.png') 0px -90px no-repeat;color: rgb(255,255,255);}.menu li a.active span, .menu li a.active:hover span {background: url('/images/topMenuImages.png') 100% -90px no-repeat;} in addition, in my header section I tried creating a background with a dark blue which I did fine, but when I then attempted to change the text to a white color, for some reason it is not allowing me to do so. I made a #Header h1 h2 { color:FFF;} yet nothing changed. I tried putting this style inside the include file for the header, and inside the external CSS, neither worked. The only thing that worked was when i did a style for the specific page. But since this needs to go through the entire site, this wont work. Any ideas what is preventing the style from showing up?