July 15, 201313 yr I hold my hands up - I'm a novice trying to put together coding from several different websites to create the content that I want for a new site. Also I have taken the tutorials online (or so I thought) about the sections I require. But I now have hyperlinks in paragraph text, animatedcollapse (or even just links in general) taking the attributes of the menu bar items. Not sure if there's some way to distinguish between the two - have done this before with <li> and <li2> for example, but it's definitely not working this time... I'm also probably mixing up html and css for styling which presumably won't help! All help greatly appreciated Thx C
July 15, 201313 yr Hi I don't think there is tag <li2> in HTML. Show us your code (copy/paste here or post a link) and we'll be able to help then
July 15, 201313 yr Author Hi I don't think there is tag <li2> in HTML. Show us your code (copy/paste here or post a link) and we'll be able to help then Ok, here is the link - http://www.gene-genie.com/findyourfamily.html - no laughing, I did say I'm a novice
July 15, 201313 yr OK, the problem is you have set global link styles (so every <a> element inherits them). What you can do is: 1. Your menu is ul, you can give it an id, for example: <ul id="nav"> <li><a href="http://www.gene-genie.com/">Home</a></li> ... </ul> 2. Remove the styles from a, a:visited and then instead assign them to ul#nav li a, that means only the <a> of an <ul> element with an id nav will be styled this way. ul#nav li a{ font: bold 23px Berlin Sans FB Demi; font-weight: bold; color: #494949; border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; -moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); -webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); text-shadow: 0 -1px 1px #cfcfcf; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-align: center; padding: 5px; text-decoration: none; text-transform: uppercase; } Then you can set up basic styles (if you wish), like color for the global link styles, and you can override them the same way as above. Hope that helps, ask if there is anything unclear Edited July 15, 201313 yr by teodora
July 15, 201313 yr Author Thank you Teodora, you're a star! I'm going to try it now...I'll be back...
July 15, 201313 yr Author Hope that helps, ask if there is anything unclear All good and works, thank you. But how do I get my menu buttons to change colour as before when hovered over or clicked.... Thx C
July 15, 201313 yr For hover, you can set ul#nav li a:hover and define the styles you wish. When the link is clicked it would be ul#nav li a:active The active state is when you click on the link, for a second, before you are taken to the page the link in question links to. Hope I explained that well
July 16, 201313 yr Author Ha,ha, no worries, glad I could help Hi Teodora Got all the links and nav bar working lovely now - thanks again for your help yesterday. In fact if you ever feel the urge to trace your family, please drop me a line and I'll be happy to offer a generous discount :) On another separate matter, I'm now struggling to get a consistent display across browsers and mobile - I use Firefox so it displays fine in that. Chrome also seems fine. But on IE it seems to be reduced to a really small size that looks rubbish. In terms of mobile - my phone is the Google one, so again looks OK (as it uses Chrome) - although the menu bar collapses into two rows. On iPhone (presumably Safari) it makes the display into portrait (even on the landscape view with the phone turned sideways). Not sure about others. Is this anything you are able to answer or is this a whole new can of worms (in which case should I post it as a new question?) Many Thx C
July 16, 201313 yr Hi Which version of IE? (*welcome to our world btw - cross browser issues and stuff...) I have checked in IE9, 8 and even 7, although 7 is dying. The menu links appear to be not styled in 8 and 7, this is because these versions of IE don't support the CSS3 properties you have applied, like drop-shadow for example. Possible solution is to use an image for the links backgrounds (for IE only as other modern browsers support them). As for the iPhone, the problem arises, because your container div .container is taking 75% width, but some of the divs within this container are having fixed width, therefore on smaller screens they are wider than the container itself and cause an empty space on the right. A solution would be to - either make the div.container fixed width (for example 960-980px is recommended for container fixed widths) - or make sure all the elements inside the container don't exceed its width, maybe assign max-width to them like max-width:100%; At the moment the site is kind of half responsive half fixed, that causes troubles with mobile devices. That is what causes your menu bar to collapse on two and more lines. If you make it fixed width, this problem will disappear, but you will have to zoom, most likely. Maybe read a bit about responsive sites and see if that helps http://www.targetlocal.co.uk/responsive-web-design-resources/ http://www.hongkiat.com/blog/responsive-web-nav/
July 16, 201313 yr Author Maybe read a bit about responsive sites and see if that helps OK, so from the links it's kinda clear that I'm out of my depth - I'd get there, but don't have that time to invest at the moment. I knew I was way out of date, but hoped by patching some code together, I could get by, but obviously not! So I'll try the solutions you suggested re fixed width - I thought it was the opposite ie that if I put 75%, it would resize to 75% of whatever screen it displayed on. I know people will have to zoom in, but most sites that I visit are the same, so I don't think people will be put off (hopefully!) Plus the site is not complex, just text mainly, so shouldn't cause too much trouble with slow loading etc! Thx Teodora
Create an account or sign in to comment