Jump to content

Wickham

Advanced Member
  • Posts

    1,114
  • Joined

  • Last visited

  • Days Won

    5

Everything posted by Wickham

  1. Have a look at examples here (three column layouts fixed/fluid):- http://www.visibilityinherit.com/tools.php and here:- http://www.visibilityinherit.com/code/height-stickyfooter-centered-example.php and two methods items 1a and 1b here:- http://www.wickham43.net/headerfooterfix.php
  2. My original code was not designed for fixed header and footer, and you have added height: 100% in too many places. This code is only a partial solution as I haven't had much time. http://www.wickham43.supanet.com/forumposts/htwingnut090417.html You may need to look at items 17a or 19 here to drag down side column backgrounds:- http://www.wickham43.net/firefoxbackground.php and this is an example for fixed header and footer, it involves hacks but does work on all browsers that I have tried:- http://www.wickham43.net/headerfooterfixexample.php
  3. WAMP5 is now called Wampserver 2 and that is what I have. During the installation you are given two options for the name, one was localhost and I can't remember what the other was but it might have been 127.0.0.1, so you may have chosen the alternative without realising it.
  4. From what you say, Agian Napa is the greek way to spell the name, so they have a right to use that name. There are lots of situations where a domain name is similar to a competitor's domain name, but designers must not copy the design of another website. So, if the website looks like your website, then I think you would have a good claim against them.
  5. As you say, when you click a line the line moves to the right and a different image shows, so that works as it should. If you want the lines to move when you click on the words MOVE THE LINE, how does it know which line to move? There are three lines and you can only set it to move one of them. I'm not sure how you can make it work except by removing the link from MOVE THE LINE so that it is only text and changing the text to CLICK A LINE and then people will know that they have to click one of the lines.
  6. These edits get IE7 and Firefox showing the same and your problems solved:- CSS edits to center thumbnails in IE7:- .hoverbox { margin: 0; cursor: default; list-style: none; } html:- CONTACT © Zepheras.com 2009 nil-height div added to drag down background in Firefox and closing div moved down below #footer:- ............... © Zepheras.com 2009 Edit: there are still some errors to be sorted out; use the validator http://validator.w3.org/ I found 7 errors after my edits but could reduce them to one error by omitting this <?php echo $num;?> from the url url(images/layout/header<?php echo $num;?>.jpg) which seems to raise other unconnected errors like a tag error which is not an error, just the result of having the php code. It's probably because I was testing with a .html page not a .php page so you may not get the errors.
  7. You can use javascript for an expand/collapse paragraph so that div 2 will only show after clicking div 1. See http://javascript.internet.com/miscellaneous/expand-collapse-paragraph.html
  8. This site http://www.cssplay.co.uk/menus/drop_line.html which you said you liked has a horizontal submenu and I extracted the code for you in my previous post. It's much better for a beginner to use a menu that already works than to try to make your own. Edit the CSSplay menu.
  9. You asked about horizontal menus here:- http://www.killersites.com/forums/topic/1172/horizontal-menu-with-a-submenu/
  10. If you are new to CSS I suggest that you use the cssplay menu from your other post and adapt that one.
  11. I made an example here:- http://www.wickham43.com/forumposts/khi090412.html which uses your code (slightly adapted) has three-part images for the link, hover and active states. Edit: the above link works using the s attribute but doesn't validate, so this is the same using divs which does validate:- http://www.wickham43.com/forumposts/khi090412-2.html Remember that people with bad eyesight using a screen reader won't have any link text to read, so I believe that you can add a title to the links so that a screen reader will read something and let a blind person know where to click.
  12. See your other topic. You need a lot more styles than you have shown in this topic and the second level ul has to nested inside the top level li tag. Also add ul opening and closing tags top and bottom of the code you show in the post.
  13. Open this page http://www.cssplay.co.uk/menus/drop_line.html Click View, Source to see the source code. Look for the sections that relate to the menu you want to copy. /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_line.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .menu { position:relative; width:750px; height:2em; background:#b7c6ac; border-top:10px solid #b7c6ac; padding-bottom:1px; background:#b7c6ac url(drop/line.gif) bottom left repeat-x; margin-bottom:5em; margin-top:50px; } * html .menu {padding-bottom:0;} .menu ul{ list-style-type:none; padding:0; margin:0 0 0 20px; width:730px; height:100%; } .menu li{ float:left; } .menu table{ position:absolute; border-collapse:collapse; left:0; top:0; } .menu a, .menu :visited { color:#fff; text-decoration:none; } .menu a em.lft, .menu :visited em.lft { display:block; float:left; width:5px; height:2em; background: transparent url(drop/lefta.gif); border-bottom:1px solid #777; } .menu a b, .menu :visited b { display:block; font-weight:normal; float:left; padding:0 10px; height:2em;line-height:1.9em; background: transparent url(drop/mida.gif); cursor:pointer; border-bottom:1px solid #777; } .menu a em.rgt, .menu :visited em.rgt { display:block; float:left; width:5px; height:2em; background: transparent url(drop/righta.gif); border-bottom:1px solid #777; } .menu ul ul { visibility:hidden; position:absolute; height:2em; top:2em; left:-20px; width:749px; border-bottom:1px solid #777; border-right:1px solid #777; background:#ccc; } .menu :hover { white-space:normal; } .menu a:hover b { color:#000; background: transparent url(drop/midb.gif); border-bottom-color:#ccc; } .menu a:hover em.lft { background: transparent url(drop/leftb.gif); border-bottom-color:#ccc; } .menu a:hover em.rgt { background: transparent url(drop/rightb.gif); border-bottom-color:#ccc; } .menu li:hover > a b { color:#000; background: transparent url(drop/midb.gif); border-bottom-color:#ccc; } .menu li:hover > a em.lft { background: transparent url(drop/leftb.gif); border-bottom-color:#ccc; } .menu li:hover > a em.rgt { background: transparent url(drop/rightb.gif); border-bottom-color:#ccc; } .menu ul li:hover ul, .menu ul a:hover ul{ display:block; visibility:visible; top:2em; margin-top:1px; } .menu ul :hover ul li { display:block; border-left:1px solid #777; background:#ccc; height:2em; } .menu ul :hover ul li a { display:block; font-size:0.8em; height:2em; line-height:2.5em; width:auto; float:left; color:#444; padding:0 10px;} .menu ul :hover ul li a:hover { color:#c00; } which is inside head section style tags or, even better, inside a stylesheet. This is the html markup:- John Constable The Hay Wain Brighton Beach Malvern Hall Salisbury Cathedral Weymouth Bay William Turner Fishermen at Sea The Shipwreck The Vale of Ashburnham Crossing the Brook Henri Matisse The Girl with Green Eyes The Dream Woman in Blue The Yellow Dress Paul Cezanne The Large Bathers Onions and Bottles Mardi Gras Still Life Boy in a Red Waistcoat You may need to put all of the above in a containing div or add styles to #menu
  14. Yes it is possible. You probably have float: left for the top level li tags now, something like:- li { float: left; } and for the second level you need float left for the second level li tags:- li li { float: left; } The above is the simplified principle but may need adapting for your menu.
  15. Then change the id just to the News page:- Leave the main stylesheet like it was:- #primarycontent { margin: 1.5em 22.0em 0em 0em; } but add a style:- #primarycontent2 { margin: 1.5em 0em 0em 0em; } and edit the html file only on the News page:-
  16. Good Friday is a holiday in the UK and of course the weather was rainy, windy and dull. Last week was sunny and hot and I went out on my mountain bike over the hills on farm tracks and footpaths, but the TV last night showed empty beaches on the South Coast as holidaymakers stayed indoors. However, the UK holiday resorts have had more visitors this year because of the fall in the ? against the Euro and Dollar, but they had to find indoor entertainment yesterday.
  17. Your page structure is:- #outer width: 82% centered inside that is #primarycontainer width: 100% (of what it is inside) and margin-right: -18.00em inside that is #primarycontent with margin-right 22em inside that is #post with the text starting "Latest New" but this doesn't spread across the screen because of the margin-right in #primarycontent I edited only one style like this:- #primarycontent { /*margin: 1.5em 22.0em 0em 0em;*/ margin: 1.5em 0 0em 0em; } and #post with the text spread across to fill the space on the right. The negative margin-right of #primarycontainer still concens me but didn't seem to cause a problem.
  18. PHP could be used with a form that adds to the page when refreshed but you would need to have a username and password included to stop other viewers from adding to the page. This page http://www.wickham43.net/formphptomysql.php shows a form linked to a MySQL database and the result is displayed in a table on the page. However, you need to consider what would happen if an entry was incorrect and needed to be deleted - you would have to edit the database rather than the untrained person. A username and password is not incorporated in the example. Another method is to use a CMS (content management system) which are designed so that untrained clerical people can edit a web page without wrecking the format. CMS means that there is not a form on the page, the person edits the page code but only where allowed to do so. Snippetedit is a very simple one where and tags are placed around sections of text or image urls so that the untrained person can use a username and password to edit those sections only. http://www.snippetedit.com/ There is a demo. The snippet tags won't validate and some people criticise snippetedit but it is very simple to set up and use. It's only suitable for straightforward text and image edits. A more advanced CMS is Joomla but it's complicated to set up and might be too complicated for the person you describe. http://www.joomla.org/
  19. Your rar file is 18.2MB and I haven't opened it yet; it seems a lot larger than a normal page, does it contain video? Pages formed from Photoshop and sliced up are nearly always tables with hundreds of table, tr and td tags; very difficult to edit; is your's like that? If so, you could try adding negative margin-top to the table below each space to drag it up. The best way would be to re-code without using tables. Tables are not recommended for page layout, only for parts of a page that require a tabular layout like a calendar or schedules of products and prices.
  20. That means changing your avatar as well, Thelma, so I'm waiting http://wpengineer.com/css-naked-day-2009/
  21. Have you uploaded the big images? This is a thumbnail and I can download it:- http://www.justk.me/images/thumb/1.jpg This is the url for a big image but I can't download it:- http://www.justk.me/images/big/1flower.jpg 1flower.jpg needs to go into a directory on your host's server called big in the images directory.
  22. The usual way is to add borders to the li tag style. If you add right borders to all of them, the first li tag then needs a class to add a left border just to that one:- #centeredmenu ul li { border-right: 1px solid #fff; display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #centeredmenu ul li.left-border { border-left: 1px solid #fff; } and the html markup gets edited to:- Item one Item two Item three Item four Make sure that the extra widths added by the borders doesn't cause a problem, but it didn't in my test in IE7 and Firefox.
  23. border-right: thin red; border-right: thick #0000FF; You have two styles for border-right and you haven't defined whether it is solid, dashed, etc. I don't like using thin, medium or thick for borders as I find that different browsers give different thicknesses and if the total width is critical, some browsers will make the total width too much and cause disruption to the layout. I prefer to use px border-right: 3px solid #0000FF;
  24. Sometimes when you think you have saved a file as root.css or file.html, they have actually been saved as root.css.txt and file.html.txt and the .txt extension should not be there. Use Windows Explorer with View/ Details and with file extensions visible and check and delete .txt if necessary. (In Tools, Folder Options, View, uncheck Hide file extensions for known file types (so that they will show).
×
×
  • Create New...