Andrewpw Posted July 18, 2011 Share Posted July 18, 2011 <!DOCTYPE html SYSTEM "about:legacy-compat"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><html><body><head><title>Links</title></head><link rel="stylesheet" href="base.css"><style type="text/css"></style><header><h1>Links</h1></header><section><h3>Diocese of Oxford</h3><a href ="http://www.oxford.anglican.org/">Diocese of Oxford</a><h3>Local Churches</h3><ul><li><a href= "http://www.parishes.oxford.anglican.org/cogges"> Cogges Parish Website</a></li><li><a href="http://www.witneycongregational.org.uk/"> Congregational Church Website</a></li><li><a href="http://www.witneymeth.org.uk"> Witney Methodist Church Website</a></li><li><a href="http://www.occ.org.uk/northwitney/">North Witney Community Church</a></li><li><a href="http://www.occ.org.uk/westwitney/">West Witney Community Church</a></li><li><a href="http://www.welcome-church.org.uk/">Welcome Evangelical Church</a></li></ul><h3>Local Schools</h3><ul><li><a href="http://www.henrybox.oxon.sch.uk/page_viewer.asp?section=Home&sid=1">Henry Box School</a></li><li><a href="http://www.woodgreen.oxon.sch.uk/">Wood Green School</a></li></ul><h3>Local Organisations</h3><ul><li><a href="http://www.witneychurches.org.uk/"> Churches Together </a> in Witney and District</li><li><a href="http://www.muoxford.org.uk/">Mothers' Union</a> in the Oxford Diocese</li></ul><h3>Village Sites</h3><ul><li><a href="http://www.haileywestoxon.org/">Hailey</a> is part of Witney (Ecclesiastical) Parish; this site shows a wealth of information about Hailey Village (Civil Parish)</li> <li><a href="http://www.curbridge.net/">Curbridge</a> is part of Witney (Ecclesiastical) Parish; this site shows a wealth of information about Curbridge Village (Civil Parish)</li></ul><hr><address><a href="index.html"> Witney Parish Web Pages </a>/29/1/2010<p></p>E&OE - This site is an attempt to make our parish more accessible and to explain procedures in simple terms. Whilst we have takenreasonable care it has no legal status. No responsibility can be taken for the accuracy of the information given, or the consequences of relying on it. We are of course not responsible for the contents of linked sites.</section><nav><img src="logo.gif" width=48% height=140 alt="logo"/><ul> <li><a href="index.html">Home Page</a></li><li><a href="ministryteam.html">Ministry Team</a></li> <li><a href="">Churches</a> <ul> <li><a href="st_mary.html">St Mary's Church</a></li> <li><a href="holy_trin.html">Holy Trinity Church</a></li> <li><a href="hailey.html">St John's Church, Hailey</a></li> <li><a href="curbridge.html">St John's Church, Curbridge</a></li> </ul> </li> <li> <li><a href="baptism.html">Baptisms</a> </li> <li> <a href="">Weddings</a> <ul> <li><a href="weddings.html">Introduction</a> <li><a href="checklist.html">Checklist</a></li> <li><a href="advice.html">Advice</a></li> <li><a href="info.html">Information</a></li> <li><a href="hymns.html">Hymns<a/></li> </ul> </li> <li><a href="funerals.html">Funerals</a> </li> </li> <li><a href="">Activities</a> <ul> <li><a href="services.html">Services</a></li> <li><a href="mothersunion.html">Mothers' Union</a></li> <li><a href="acorns.html">Acorns</a></li> <li><a href="witneyfeast.html">Witney Feast</a></li><li><a href="activities.html">Other Activities</a></li></ul><p style="color: blue;"> <em>Check what is going on in the parish - link below</em></p> <li><a href="parishdiary.html">Parish Diary</a> </li> </nav>CODE Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2011 Share Posted July 18, 2011 How exactly are they not working?What is your expected result and what is really happening?Just to let you know, the stylesheet need to be included using three attributes: rel, href and type. If it doesn't have all three it won't load the stylesheet. Your current <!DOCTYPE> declaration will probably render the document in quirks mode which means that different browsers will be rendering it differently from eachother. Link to comment Share on other sites More sharing options...
Andrewpw Posted July 18, 2011 Author Share Posted July 18, 2011 How exactly are they not working?What is your expected result and what is really happening?Just to let you know, the stylesheet need to be included using three attributes: rel, href and type. If it doesn't have all three it won't load the stylesheet. Your current <!DOCTYPE> declaration will probably render the document in quirks mode which means that different browsers will be rendering it differently from eachother.Many thanks for your swift response. It appears that the a href links which appear in the body text adjacent to the menu in the nav bar will not work. Below the level of the menu bar they work fine. This happens in Chrome, firefox and IE (all latest versions) so it looks as if it is a positioning problem. When I click on the a href link in the body the adjacent menu text is highlighted but the link is not made. I hope this clarifies the issue. Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2011 Share Posted July 18, 2011 When you click on a link, does it try to send you somewhere? Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2011 Share Posted July 18, 2011 OK. After copying your code to a place where it's easier to read I notice you're using absolute positioning. This is causing the <nav> element to overlap the body.You shouldn't use absolute positioning for layout. Remove that, give your nav element less width and the float it to the left. Link to comment Share on other sites More sharing options...
Andrewpw Posted July 18, 2011 Author Share Posted July 18, 2011 OK. After copying your code to a place where it's easier to read I notice you're using absolute positioning. This is causing the <nav> element to overlap the body.You shouldn't use absolute positioning for layout. Remove that, give your nav element less width and the float it to the left.Reply:Thank you again for your assistance. I have altered the <nav> element to float: left; rather than absolute and tried reducing the space used to 20% from 35% . This certainly enables the links adjacent to where the menu used to be (the original problem), but the menu has now moved to being underneath the body. The links are contained in a section and I have tried to float this right as a further attempt to keep the <nav> menu element in its place on the left, and not to interfere with the links in the section, but to no avail.The page is written in html5 with css3 as you can probably see. The text book I was working from and several posts suggested the minimalist doctype and I added "about:legacy-compat" when I discovered that some accented letters were not properly rendered. This had the desired effect and there have been no other obvious results (until now perhaps!)I shall be grateful for any further help you can give. Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2011 Share Posted July 18, 2011 Don't set a width to the body so that it will remain to the right of the menu while the menu is floated. Link to comment Share on other sites More sharing options...
Andrewpw Posted July 19, 2011 Author Share Posted July 19, 2011 Don't set a width to the body so that it will remain to the right of the menu while the menu is floated.Reply:I tried this option but unfortunately it made no difference. The <nav> menu will only stay to the left of the body (rather than underneath it) if I set <nav> to position: absolute; I still believe that this is a positioning problem as you suggested but I will have to use a work-around solution for now. Having re-written the menu to include many more items, and moved the <nav> menu a little further away from the body, I find that it is only the top few links which do not work. Viewing their source code confirms that these non-working links are coded correctly - clicking on the source code makes the links work! I can only assume that the menu is overlaying the body in some way that is making the body cease to function.I will quite understand if you feel unable to pursue this further; if eventually I discover what I am doing wrong I will return to this thread to let you know. In the meantime many thanks for your time. Link to comment Share on other sites More sharing options...
Ingolme Posted July 19, 2011 Share Posted July 19, 2011 The code for the main content has to be places after the navigation menu, not before. An element is only floated relative to content that follows it. <nav id="left-menu">Navigation</nav><section id="content">Body here</section> #left-menu { float: left; width: 200px;}#content { margin-left: 200px;} Link to comment Share on other sites More sharing options...
Andrewpw Posted July 21, 2011 Author Share Posted July 21, 2011 The code for the main content has to be places after the navigation menu, not before. An element is only floated relative to content that follows it.<nav id="left-menu">Navigation</nav><section id="content">Body here</section> {margin: 0;padding: 0;}nav{float: left;top: 3%;left: 2%;width: 200px;padding-right: 5%}nav ul {margin: 0; padding: 0;list-style: none;width: 140px;}nav ul li {position: relative;}nav li ul {position: relative;left: 135px;top: 0;display: none;}nav ul li a {display: block;text-decoration: none;color: 000066;background: #ccffff;padding: 5px;}nav li:hover ul {display: block;}body{margin-left:200px top: 0;font: 18px/30px Times New Roman, serif;background-color: #fffab2;} section{float: right;}section p{position:relative;}section ul{position: relative;width: 100%;}section iframe {position: relative;margin-left:0;} article{text_align: justify;-moz-column-count: 2;-moz-column-gap: 1.5em;-moz-column-rule: 1px solid #c4c8cc;-webkit-column-count: 2;-webkit-column-gap: 1.5em;-webkit-column-rule: 1px solid #c4c8cc;}h1{font-size: 50px;line-height: 50px;padding: 33px 0;color: #faf519}h2{color: blue; font-size: 24px;line-height: 30px;padding: 22px 0;}h3{color: blue;font-size: 20px;line-height: 20px;padding: 11px 0;}header{text-align: center;clear: right;top: 0;bottom: 80%;background-image: url(barley.jpg);margin-bottom:5px; -moz-box-shadow: 9px 10px 22px #f5ba5c; -webkit-box-shadow: 9px 10px 22px #f5ba5c; box-shadow: 9px 10px 22px #f5ba5c;}footer {float: left;width: 80%;bottom: 10%} [/codebox}CODE Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.