Wickham
-
Posts
1,114 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Wickham
-
-
I expect your Mum's computer has a different screen resolution.
You have a lot of elements with % widths, like p, but your logo.jpg header logo is a fixed width (956*67px), so when viewing the page in a large screen resolution it doesn't reach the right side, conversely if you make the viewing window a small width the logo extends out beyond the right side where you have to scroll to see it all.
You can make the image resize with 100%:-
but that isn't very satisfactory as it will increase in height in proportion at larger screen resolutions and may overlap lower content.
If you make all your elements have fixed widths you will avoid the problems.
When testing your page I deleted
{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fswiss\fcharset0 Arial;}}
{\*\generator Msftedit 5.41.15.1515;}\viewkind4\uc1\pard\f0\fs20 p\{\par
width: 80%;\par
\par
\}\par
}
at the top of the css file; I don't know why it's there. Just start the css file with
p {
width: 100%;
color: black;
background: lime;
font-size: 20px;
}
changing the width if you want to use fixed widths. It worked for me.
Fluid or flexible widths do need some practice to get right.
-
nathanschild is on the right track. If you enter a url without a filename, like www.mydomain.com or a folder url like www.mydomain.com.folder/ browsers look for a file called index.htm or index.html or index.php, any file called index with any filename extension.
I expect that your html file is not called index.html, so you need to create one in the root directory. Most people call the homepage index.html or it could be a very simple page with a redirect to your main html page.
If there is no file called index.??? then browsers show the file list which can be a security issue as anyone can see all your files and you might have stored your password list there. You should go into your host's control panel and look for an index manager where you will find a way to disable the index of a list. You should do this for all your directories, even image directories so that you then don't need an index file in every directory, but the root directory should always have an index file so that people just entering the domain name will get to a page rather than a list (or just get the "cannot find the webpage" message if you have disabled the indexing of a list but haven't got an index file either).
-
My second solution had fixed heights so you could edit the top position of the div with the image:-
Text under image
or increase the heights in:-
#content_column { }
#left_column { }
#right_column { }
As I said, creating fluid heights where the background-colors or border heights are the same for all divs is more difficult.
-
You can do it with position: relative for the image to move it across under the middle of the left and right columns like I have done here:-
http://www.wickham43.com/forumposts/zad090316.html
or use position: absolute.
You only showed one image in your example
http://ibennia.fileave.com/positioning.JPG
so I haven't shown the second one which you have in the code.
I didn't like your very large side margins and negative margins so I rearranged the divs.
It also didn't validate so I cured that too. I used the HTML 4.01 doctype as we prefer that on this board.
You still have lots of nested divs which could be combined into the containing div to simplify the coding.
Your example image shows borders to the divs which I've shown here:-
http://www.wickham43.com/forumposts/zad090316-1.html
I had to add heights to the divs. There is a way to make the divs flexible in height and all keep the same height as the div with the most content, but I haven't had time to code that method.
-
I think Eric was just saying that I've offered an alternative that's probably confused you.
Divs that have no position stated or position: relative just follow the order in which they are coded, generally divs set themselves one below the other unless they have float: left or right. Fine-tuning of positions is done with margins and padding and can be position: relative top or left from where they would normally place themselves, so you can raise or lower them a bit or move them a bit side to side related to the previous div or element.
Position: absolute divs take no notice of the position of any other element, they have a top and left position and that's all they need, but as I said, if they are inside a position: relative element they take those fixed top and left positions from the top left corner of the container with position: relative.
-
Right click and Open with Notepad to edit a html file, just double click it to open in your default browser to see what it will look like online, assuming the file is filename.html and not filename.html.txt as Ben said.
-
Get rid of all the codes in the body style which are mainly an old coding method that you don't need; Try this:-
Untitled Document <br /><!--<br /><br />body,td,th {<br /> font-family: Verdana, Geneva, sans-serif;<br /> font-size: 14px;<br /> color: #000;<br /> float:auto;<br />}<br />body {<br /> background-color: #000;<br /> margin: 0 auto;<br />}<br />#apDiv1 {<br /> position:relative;/*absolute;*/<br /> visibility:visible;<br /> width:1024px;/*200px;*/<br /> height:625px;/*115px;*/<br /> z-index:1;<br /> margin: 0 auto;<br /> /*left: 0;<br /> top: 0;*/<br />}<br />--><br />The image in the div is 1024*625 but the div is only 200*115 so the image won't fit. Margin: 0 auto won't work with position: absolute divs, the auto cannot work if the div has a fixed top and left position. The left: 0; is stopping it from centering.
-
How do you fix the absolute location of a div within a containing div?
There are always lots of ways to do the same thing. I would put position: relative; in the #wrapper div then use position: absolute; for the inner div.
Position: absolute elements normally take their position from the top left corner of the viewing window but if inside an element with position: relative they take their position from the top left corner of the element like a div. This means that if the position: relative div centers in different viewport resolutions, where it may sometimes be away from the left side of the window, sometimes tight to the left side, the inner position: absolute div will move with it, retaining the position within the position: relative div.
Text -
I agree almost entirely with LSW; blind people won't see the logo or banner so they will have the alt tag and the h1 should be for the page title.
HOWEVER, just suppose the site designer is designing different pages for cameras, TVs and computers and he has a logo on each page showing an image and text in the image showing cameras, TVs and computers which forms the page title and there is no other page title, then I would put that in an h1.
-
This code should center the div when you have a doctype because it has a width and side margins auto:-
#first_container
{
margin: 0 auto 0 auto;
display: table;
height: 100%;
position: relative;
overflow: hidden;
width: 660px;
}
This code align="center" is old-fashioned; you should use an id or class with a width and side margins auto:-
-
One option is to use a Content Management System (CMS) like Joomla where viewers can edit text in certain places (each appointment space). However, if you set it up without needing a username and password, someone could delete someone else's appointment, so that's no use.
You could use a form linked to a database. The form would ask for name and email address and the desired date but the webpage would only take the name and appointment date from the database and display that on the webpage.
An example is here:-
http://w ww.wickham43.net/formphptomysql.php
which shows how some fields can be shown on the webpage. You could show the entries in appointment date order instead of id or entry date order and probably code it so that the entry could be put in a conventional calendar format of rectangles for each day, with a bit of different coding
-
There's another javascript curved corners method here:-
-
You have a #content that is 516px wide, and both inner divs are 230 px wide with a margin on one side of 15px, totalling 490px so if both are float: left they will both be on the left side of #content. Make one float: right; and change the side margin to the other side and you will get a space in the middle.
#content {
float: left;
width: 516px;
height: 730px;
padding: 10px;
margin: auto;
border: 1px solid #FFFFFF;
background-color:#FFFFFF;
}
.col1 {
float: left;
width: 230px;
height: 230px;
padding: 0 0 15px 15px; /*15px padding on bottom and left*/
/*margin: 0px 0 15px 15px; 15px margin on bottom and left*/
}
.col2 {
float: right;
width: 230px;
height: 230px;
padding: 0 15px 15px 0px; /*15px padding on right and bottom*/
/*margin: 0px 15px 15px 0px; 15px margin on right and bottom*/
}
.clear: { clear: both;
width: 100%; height: 0;
visibility: none;
}
IE has a habit of doubling up side margins if on the same side as the float, so I changed the side margins to padding but you could try it as margin.
-
Edit these:-
#menu{
margin: 0 0 0 32px;/*auto;*/
width: 800px;
height: 40px;
padding-top: 3px;
}
#menu ul { margin: 0; padding: 0;
list-style: none;
/*margin-left: 32px; */
}
-
There is general advice here:-
http://w ww.wickham43.net/specialeffects.php#highlightedlinks
which shows how the whole of a div can be clickable, not just the text. If you cannot do this directly with a table td tag, then put a div inside the td tag with the same width and height and follow the code to make the whole area clickable. The page above has the three columns of links at the top of the page also clickable for the whole width with a different background color, instead of just the text clickable.
-
The reason for the space in Firefx is that you have a p tag
About
right at the top of the #body div which has no top padding or margin and the p tag has a default top margin in Firefox whch forces a space.
If you add
p { margin-top: 0; }
to your stylesheet the space will disappear. However, this will affect all p tags elsewhere so it would be preferable to add a padding-top to #body but it is a good idea to make padding the same for all browsers for p tags and some other tags by including
p { margin: 3px 0; }
which makes top and bottom padding 3px and side padding 0 so that paragraph separation is the same in all browsers.
#body{ padding-top: 5px;
background-image: url('../img/hbfbg.png');
margin: auto;
width: 800px;
background-color: #544E4F;
}
You have an incorrect
tag here shown as :-
About
...........
You don't need it when the padding-top is added to #body and you should not use
tags to create line space, try to use padding or margins to the following element.
Experts prefer to use ... instead of ...
.. is deprecated, use text-decoration: underline; in a class instead.
-
Make your link on the first page
You put the anchor at the place on the other page that you want to show at the top of the viewing window, so that a page appears to start with a scroll.
This assumes that both files are in the same folder/directory.
When I said Heading I was just assuming that you have a paragraph heading that you want to show at the top of the viewing window. You can have several anchors on a page with their different links and ids.
-
I think Thelma is referring to an anchor. You can have an anchor for the same page so that when you click the link it will take you to another place on the same page (like a link at the bottom of the page that says "top" and takes you back up to the top) or you can have a link that takes you to a place on another page that is not the top, it can be anywhere on the page.
The link on the first page would be:-
and in the code for the page 5 just above the heading for Item 15 you would put in the anchor code:-
You can use absolute urls if more convenient:-
and
-
Yep, they are good. My thanks too.
-
Your images directory here:-
http://www.weightlosslive.biz/personal/images/
has logo.jpeg while your html file has logo.JPEG which has upper case. They need to be the same, use lower case all the time.
http://www.weightlosslive.biz/personal/images/logo.jpeg with lower case will open the image.
I suggest that you find the Insdex Manager on your host server and disable the index list in every directory so that people like me cannot see the list of files.
Your doctype is incomplete; see
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Validate using this site http://validator.w3.org/
You have without an opening tag and other errors:-
PLEASE, Every Piece Of FeedBack Is Highly Appreciated
-
-
General principles for audio and video here
http://w'>http://w'>http://w ww.wickham43.net/soundandvideo.php
video for .mpg and .mp4 files here with QuickTime
http://w ww.wickham43.net/videoexample.php
and flash here
http://w ww.wickham43.net/flashvideo.php
However, I don't claim to be an expert and embedding audio and video can be difficult; there are so many formats requiring slightly different code and different solutions. I just know what works for me.
Most of the big sites like YouTube use an object tag with a nested embed tag even though the embed tag is deprecated and doesn't validate as the embed tag is needed for older browsers. Code which validates can be done without the embed tag for modern browsers only.
-
For drop down menus I suggest cssplay
http://www.cssplay.co.uk/menus/
Choose one, open View / Source and look for the code for the example and copy the head section style tag styles (probably beginning #menu) and the relevant html markup probably inside
-
The code is
which must be put just after the
tag, lower down the head section may not work.However, I understand that this may be just a temporary code for IE8 beta 2 and RC1 and may be withdrawn in the final IE8 version, so it's best to try to get IE8 RC1 to work properly without it.
Contribute Question
in Beginners Web Design
Posted
This site http://www.nattyware.com/pixie.php says that it can identify any color on a webpage by running your mouse over the color, so you can then match the color for another part of your page.
I've never used Nattyware but it sounds useful.