Wickham

April 15, 2009

My take is the same as Susie, he is suggesting someone here write a step by step tutorial on implementing a CMS but as newseed said, that is a vast problem.

so perhaps it should be moved to the CMS board.

April 15, 2009

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.

April 14, 2009

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.

April 14, 2009

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.

April 14, 2009

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

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.

April 14, 2009

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

April 13, 2009

but how can i make the submenu horizantal.
.........is there any javascript attached to this, i need only CSS

Thanks

Fazli

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.

April 12, 2009

You asked about horizontal menus here:-

http://www.killersites.com/forums/topic/1172/horizontal-menu-with-a-submenu/

April 12, 2009

If you are new to CSS I suggest that you use the cssplay menu from your other post and adapt that one.

April 12, 2009

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.

April 12, 2009

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.

April 12, 2009

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

April 11, 2009

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.

April 11, 2009

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:-

April 11, 2009

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.

April 10, 2009

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.

April 10, 2009

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/

April 10, 2009

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.

April 9, 2009

That means changing your avatar as well, Thelma, so I'm waiting

http://wpengineer.com/css-naked-day-2009/

April 9, 2009

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.

April 9, 2009

As mentioned earlier, is it possible to alter the CSS so the vertical white lines appear between the menu "buttons" as seen in my example?: http://xrl.us/ben8g7

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 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.

April 9, 2009

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;

April 9, 2009

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).

April 8, 2009

802px with two side margins of 10px should be correct within #wrapper 822px wide, but remove the float: left; as it isn't needed if the div fits exactly and IE6 does have a habit of doubling up margins where there is a float, so this should work in IE6 but I can't test IE6 at the moment:-

#centeredmenu { background-color: #ddd; margin: 10px;

/*float:left;*/

width:802px;/*100%; */

overflow:hidden;

position:relative;

}

April 8, 2009

Newseed said If you have a 700px wide content div and you want to add 20px padding for both left and right of the div, then you will need to reset the width of the content div to 660px.

Your #wrapper is 822px and that is why I edited the width of #centeredmenu to 802px with its new 10px side margins and that was OK in IE7 and Firefox, but I admit I didn't check IE6.

Sign In

Profiles

Forums

Events

Downloads

Gallery

Store

Posts posted by Wickham