Div around contact form

HTML & CSS
43

What I mean is, do you have to include all the things which do not say optional?

44

i do not thing so but i think something from head or body the most of the optional

galia

45

Ok, for the benefit of @ronpat, @RyanReese and others who may wish to help, Iโ€™ll post here the list, as translated by Google. (Iโ€™ll also post the Hebrew at the bottom, in case anybody can offer a better translation, because in places itโ€™s rather strange. )

Treatment head-

Title pages writing headlines

Using Meta tags and Keywords abstract

Treatment Body-

Using the distribution page by tables

Creating tables are designed in conjunction with images

Designing with external CSS

Inserting images JPG or PNG or Gif animations Jeff

Use a picture as the background

Using alt images

Create a link from an image

Create a hyperlink to an image

Flash Knesset

Implementing YouTube video

Using marguee

Using a script to stop marguee Jabhat

Enter Text Using correct language encoding (charset)

Change of direction subtitles (dir-โ€œrtlโ€)

Opening pages in a blank

Creating Menus

Using Vsteilim exchanging links backgrounds

Using anchors and bumps in the columns

Create a form with validation

Postcard mail address and a link to Facebook

Opening a popup window or layers

Create photo galleries

Add a link to turnaround

Preparing small image to gallery home page

Optional - Using Iframe

Optional - Synagogue Music / Movies

Optional - Knesset widjets

Optional - Create a drop-down menu

Optional - Effect page breaks

There is a comment from the tutor saying

Design - Not uniform enough

but I see nothing to suggest that the pages need to have a fixed height, or use z-index or position: relative.

@nono29, may I ask why youโ€™re trying to complete this project? Is it simply to get a pass for your college course, or is it because you want to go on and work in web design? Iโ€™ve asked this before and you didnโ€™t answer, but it would help us to know how best to handle this if we knew what your aim was. Is this the only site you are ever likely to build, or do you intend to pursue this as a career?

ื˜ื™ืคื•ืœ ื‘head-
ื›ืชื™ื‘ืช ื›ื•ืชืจื•ืช ืœืขืžื•ื“ื™ื Title
ืฉื™ืžื•ืฉ ื‘ืชื’ื™ ืžื˜ื” ืœืชืงืฆื™ืจ ื•ืžื™ืœื•ืช ื—ื™ืคื•ืฉ
ื˜ื™ืคื•ืœ ื‘Body-
ืฉื™ืžื•ืฉ ื‘ื—ืœื•ืงืช ืขืžื•ื“ ืขืœ ื™ื“ื™ ื˜ื‘ืœืื•ืช
ื™ืฆื™ืจืช ื˜ื‘ืœืื•ืช ืžืขื•ืฆื‘ื•ืช ื‘ืฉื™ืœื•ื‘ ืขื ืชืžื•ื ื•ืช
ืขื™ืฆื•ื‘ ื‘ืขื–ืจืช CSSื—ื™ืฆื•ื ื™
ื”ื›ื ืกืช ืชืžื•ื ื•ืช PNG JPG ืื• Gif ืื• ืื ื™ืžืฆื™ื•ืช ื’ื™ืฃ
ืฉื™ืžื•ืฉ ื‘ืชืžื•ื ื” ื›ืจืงืข
ืฉื™ืžื•ืฉ ื‘-alt ืœืชืžื•ื ื•ืช
ื™ืฆื™ืจืช ืงื™ืฉื•ืจ ืžืชืžื•ื ื”
ื™ืฆื™ืจืช ืงื™ืฉื•ืจ ืžื—ืœืง ืฉืœ ืชืžื•ื ื”
ื”ื›ื ืกืช ืคืœืฉ
ื”ื˜ืžืขืช ืกืจื˜ื•ืŸ ืžื™ื•ื˜ื™ื•ื‘
ืฉื™ืžื•ืฉ ื‘marguee
ืฉื™ืžื•ืฉ ื‘ื’โ€™ื‘ื” ืกืงืจื™ืคื˜ ืœืขืฆื™ืจืช marguee
ื”ื›ื ืกืช ื˜ืงืกื˜ ืฉื™ืžื•ืฉ ื‘ืงื™ื“ื•ื“ ืฉืคื” ื ื›ื•ืŸ (charset)
ืฉื™ื ื•ื™ ื›ื™ื•ื•ืŸ ืœืขื‘ืจื™ืช (dir-โ€œrtlโ€)
ืคืชื™ื—ืช ืขืžื•ื“ื™ื ื‘ืžืฆื‘ blank
ื™ืฆื™ืจืช ืชืคืจื™ื˜ื™ื
ืฉื™ืžื•ืฉ ื‘ืกื˜ื™ื™ืœื™ื ืœื”ื—ืœืคืช ืจืงืขื™ื ืฉืœ ืœื™ื ืงื™ื
ืฉื™ืžื•ืฉ ื‘ืขื•ื’ื ื™ื ื•ื”ืงืคืฆื•ืช ื‘ืชื•ืš ื”ืขืžื•ื“ื™ื
ื™ืฆื™ืจืช ื˜ื•ืคืก ืขื ื•ืœื™ื“ืฆื™ื”
ื›ืชื•ื‘ืช ืžื™ื™ืœ ื’ืœื•ื™ื™ื” ื•ืงื™ืฉื•ืจ ืœืคื™ื™ืกื‘ื•ืง
ืคืชื™ื—ืช ื—ืœื•ืŸ ืคื•ืคืืค ืื• ืฉื›ื‘ื•ืช
ื™ืฆื™ืจืช ื’ืœืจื™ื•ืช ืฉืœ ืชืžื•ื ื•ืช
ื”ื•ืกืคืช ืงื™ืฉื•ืจ ืœืืชืจ ืชืคื ื™ืช
ื”ื›ื ืช ืชืžื•ื ื” ืงื˜ื ื” ืฉืœ ืขืžื•ื“ ื”ื‘ื™ืช ืœื’ืœืจื™ื”
ืื•ืคืฆื™ื•ื ืœื™ โ€“ ืฉื™ืžื•ืฉ ื‘Iframe
ืื•ืคืฆื™ื•ื ืœื™ - ื”ื›ื ืกืช ืžื•ืกื™ืงื”/ืกืจื˜ื™ื
ืื•ืคืฆื™ื•ื ืœื™ โ€“ ื”ื›ื ืกืช widjets
ืื•ืคืฆื™ื•ื ืœื™ - ื™ืฆื™ืจืช ืชืคืจื™ื˜ ื ืคืชื—
ืื•ืคืฆื™ื•ื ืœื™ โ€“ ืžืขื‘ืจื™ ืขืžื•ื“ ื‘ืืคืงื˜

46

Hi technobear!

yes it for getting good pass for my college course to have a diploma that i pass this course and do that course and also to work as a web designer

thanks galia

47

OK. Well, from that list, it looks as if some of what you have been taught is very out-of-date. If you want to go on and work as a web designer you will need to learn the updated techniques weโ€™ve been trying to teach you here, and you will need to understand how the code works.

But as I said above, I see nothing anywhere that says you must use z-index or position:relative, so go ahead, follow ronpatโ€™s instructions and remove all that unnecessary code before we go any further.

48

Hi!

ok thanks

galia

49

Hi ron!

what i can do i am removed all the codes here is it the code now

contect.txt (6.9 KB)

thanks galia

50

Ron doesnโ€™t seem to be around at the moment.

There is more tidying-up to do with your code, but first of all, I want to make sure the structure of your page is correct.

You said in your first post that you have

[quote=โ€œnono29, post:1, topic:101538โ€]
made a div around a content form and it not in is place
[/quote]There are two divs around your contact form. Which one is not in place, and exactly what is the problem with it? Where should it be?

If you mean apDiv5, which is the one with the green border, then your first problem is that it is not around the form in your code.

51

Hi!
first you can see with my paln were i want to be rhe div and yes i whant that apdiv5 will be around the from (Half of it like in the plan (4)

thanks galia

52

Well, as I said, apDiv5 is not around your form in your code. It is after your form. The first thing to do is to make sure the div is in the right place.

54

Hi, Galia.

First, I apologize for not being here yesterday. My computer is sick and did not want to work yesterday.

I have your code and the changes look very good.

Today we will delete more unnecessary properties from the CSS.

The most important question I would ask is, โ€œWHY are those properties in this CSS?โ€
It is a rhetorical question, onlyโ€ฆ a question for thought. You do not have to answer the question to me.
However, I hope you will use the question as a โ€œstudy questionโ€ and ask yourself WHY you put them in the code - what purpose were they supposed to serve?
It is important to understand why styles are used. It is also important to avoid using unnecessary styles that do not perform a needed function or do not perform it correctlyโ€ฆ styles that are not needed should not be used.

What I am about to demonstrate (show) is that these properties are unnecessary. There will be a couple of small changes when certain styles are deleted, but the changes are for the best. After they have been deleted, the look of the page will change only slightly.

Make a backup of your page first!

At the top of your CSS, delete the first entry

object * {      /* DELETE COMPLETELY.  WHY?  There is NO `<object>` tag in the HTML */
    padding: 0;
    margin: 0;
}

Delete the fixed height and unnecessary padding from #container.

#container {
    padding-bottom: 4px;  /* DELETE ME.  Unnecessary. */
    height: 1200px;  /* DELETE ME.  #container should NOT have a fixed height assigned. */
}

Delete the fixed width and ALL of these properties from #header.

#header {
    width: 958px;  /* DELETE ME.  Unnecessary. */
    padding-top: 0px;  /* DELETE ME.  Unnecessary. */
    padding-right: 0px;  /* DELETE ME.  Unnecessary. */
    padding-left: 0px;  /* DELETE ME.  Unnecessary. */
    margin-right: auto;  /* DELETE ME.  Unnecessary. */
    margin-left: auto;  /* DELETE ME.  Unnecessary. */
    left: 0px;  /* DELETE ME.  Unnecessary. */
    top: 0px;  /* DELETE ME.  Unnecessary. */
}

Delete #bottom completely. WHY? There is NO #bottom in the HTML.

#bottom {      /* DELETE COMPLETELY.  There is NO #bottom in the HTML */
    top: 987px;
    width: 960px;
    height: 66px;
    background-color: #78083b;
    clip: rect(auto,auto,auto,auto);
    margin-bottom: 0px;
    left: 0px;
}

Delete this fixed width from this inner container.

#tab {
    width: 960px;  /* DELETE ME.  Undesirable. */
}

Delete this fixed width, float and margins from this inner container.

#notebook {
    width: 960px;  /* DELETE ME.  Undesirable. */
    margin-top: 0px;  /* DELETE ME.  Unnecessary. */
    margin-left: 0px;  /* DELETE ME.  Unnecessary. */
    float: left;  /* DELETE ME.  Undesirable. */
}

Delete this fixed width, float and direction from this inner container.

#down {
    width: 960px;  /* DELETE ME.  Undesirable. */
    direction: rtl;  /* DELETE ME.  Unnecessary. */
    float: left;  /* DELETE ME.  Undesirable. */
}

We do not want dir=โ€œrtlโ€ in the CSS. It is better if applied to the HTML tag instead.

.heb  {
    direction: rtl;  /* DELETE ME.  Unnecessary. */
}

Add dir=โ€œrtlโ€ to the HTML tag

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">

Delete this fixed width and float from this inner container.

#apDiv8 {
    width: 960px;  /* DELETE ME.  Undesirable. */
    float: left;  /* DELETE ME.  Undesirable. */
}

There are other changes that we can consider, but these are the most obvious and would be immediately helpful.
Essentially, we are removing most fixed widths and floats on inner containers and obviouly unnecessary styles such as some padding and margins.

Compare the page before these changes to the page after these changes. Very little has changed

Look at these recommendations. Study them. If you agree, please delete them. If unsure about some, ask specific questions.

Remember, too, most of these styles are not needed on your master template.

55

HI ron!

first of all i am glad you came back i hope your computer will work well to me it was happened many times it is ok
and did you see what i send to techobear my score of my project that wasnt good and what do you think?
you said that i have a master template but i have no master template i build it without template
and for the codes

  1. for object- someone told me to do that to fix somthing in my home page i do not remember why i think it was div proublem

  2. why to delete the width what i have in header i have in my Other pages and it works well why to that there is not proublem with that and padding it is for to stick to the container why not to Leave it like that

3.for bottom it true there is no bottom div at the page so it is fine

  1. for notebook why to delete the tab width i do not finding were it was can you show me were

5.you told me to remove the float but it goes to the side and not were i whant too

6.and why to remove the margin it make the div to be stick to the conteiner and why the width

7 to rtl i do it like tecnobear and you now but the words goes to the Other side and i can Design the words

8.and for ap div 8 why removed the width

and why to removed all the fixed divs i thought only the container

i show you how look right now the copy page and the page that i did not change (i did not save)

the copy page

1680ร—1050 115 KB

the original page the page before

1680ร—1050 117 KB

thanks galia

56

The page looks much stronger without the fixed widths on the inner boxes.

OK. There is no object tag on this page. I did not remember that it was used on the first page. If you wish to leave it on this page, that is OK. I will remember that it is used on the first page.

The fixed width on #header and others was never necessary on any of your pages. The fixed width does nothing useful. It is there because you would not take our advice and delete it when you coded your first page. You said that you were not comfortable doing that.

Why is the fixed width not needed on #header and others? Because a div is a โ€œblockโ€ object; and by default, a block object (such as a div) will expand to the full width of its parent container (#container has width:960px) so #header and others will expand to 960px without needing a width assigned. All divs do this unless they are styled to do something different. That is why it is OK to delete the fixed widths on most of those divs. The widths do nothing useful. You can see that when you delete them the page still looks goodโ€ฆ stronger than it did before. Plus, declaring a width unnecessarily can sometimes make coding more difficult.

If #bottom is on another page, then you can leave it on this page. Please let me know and I will remember that it is used on another page.

<div id="container">
<div id="header"></div>
    <div id="tab">

The width on #tab should be deleted because it is not needed. #tab is a div (a block object) and it will expand to the full width of #container, which is 960px.

We will fix that later; after we have a strong frame around the page.

Again, we will fix that later, after we have a strong frame around the page. Please remember that you have not yet put the green box around the form. Why not? That is where you want it, isnโ€™t it?

Yes, the page is now being built right to left. It was being build left to right. The form needs to be redesigned now.

I do not understand what you mean by โ€œI can Design the wordsโ€.

Again, because it is not needed, It is not necessary. It is needless code. Wasted ink.

We removed the fixed HEIGHT from #container, NOT the width. The width is still there.

As I explained above, the fixed widths on the inner boxes are not needed because โ€œdivsโ€ without a width will expand to fit the width of their parent container (#container) by default.

That is how CSS works.

57

Hi ron!

first yes sorry and do not be angry i am still not comfortable with the header and all the divs except the container even i understand what it for it is a smart way why because it is the opposite from what i have learned and again i do want to learn new things is like i did not learn nothing on the course
and no there is not from any of my pages a bottom div
i meant for the design on the words that i can now changing the font size or color my it more bold like i did in the class menu on dreamweaver

thanks galia

58

I am not at all angry. Just a bit disappointed.

There is nothing in the critique or requirements that you gave to @TechnoBear that says that you must use unnecessary properties on your web page. It does not make sense that they are there. It makes even less sense that you are reluctant to delete them after you have tested and seen that almost nothing changes when they are removed. You have tested for yourself and seen the results, yet your are uncomfortable removing those unnecessary styles. I guess you are afraid of being penalized with a lower grade if you do not use them.

The best that I can suggest is that you start a new Web Design notebook, take a new course or read a new book about web design that is written in Hebrew so it is easy to understand, continue to ask questions, and trust us to show you good code techniques.

It is unfortunate, but it sounds like you learned very outdated techniques for writing code in your college course and now you are afraid to learn modern techniques. Maybe you are just tired and afraid that learning new techniques will be too much work or take too much time. Unfortunately, one MUST be willing to take the time and learn new things continuously if one is to write good web pages. New versions of browsers and new smartphones and new tablets and new CSS are introduced all the time. We must learn how to write code for them. The learning never stops.

I worked for a company 13 years ago where Dreamweaver was the tool that they used to help write web pages. Dreamweaver was barely adequate even then. Nowadays, Dreamweaverโ€™s best feature is its code editor. Designview is a disaster of old, antiquated code.

You said that you would like a career in web design. Are you thinking about being an independent consultant or about being hired by a company? I can tell you from experience that employers are very smart. They will ask to see samples of your code (so will smart customers). They may even give you a written test of your knowledge. An employer who sees your code today would not hire you because he would recognize your code as old Dreamweaver code (yes, it is obvious). Based on the questions that you ask here, I do not believe that you would pass a written test either.

I seriously recommend that you start a new notebook and learn how to write code again using newer, modern code techniques. If you remain โ€œuncomfortableโ€ about replacing your old learning with new learning, I am afraid that you will not succeed in web design. Web Designers do not have the luxury of living in the past and ignoring new styles and devices. A certificate will not get you a job. Only your skills and knowledge will do that. If you are uncomfortable with change, you should find another career or you will be sadly disappointed.

Thank you. We can safely delete #bottom from the CSS.

Please send me a copy of your code with the designated styles deleted.

Do you know how to download a file from Dropbox? If yes, I will send you a demonstration page to examine. It is a different version of your โ€œresumeโ€ page. If you believe in writing simple, efficient code, I think you will find it interesting because it shows design behaviors that you could use someday.

59

Galia, I believe I understand what is causing some of your concern.

First, the recommendations that I gave you to delete certain styles is GOOD.

Second, deleting the floats and fixed widths is NOT causing the form box and green box to change sides and stick to the edge. NO margin has been deleted that would cause those โ€œproblemsโ€ either.

To restore the position of the form and the green box, restore .heb {direction:rtl}

.heb  {
    direction: rtl;
}

and delete dir=โ€œrtlโ€ from the html tag.

<html xmlns="http://www.w3.org/1999/xhtml">

I believe that will make you feel better about all of these width and float changes.

We can change these again later if desired.

60

Hi ron!

first i will give to my attention what you said to me about learning new technique thank you
and what you say now to delete or not to delete what you told me to delete
here the code of the copy page now

contect.txt (6.4 KB)
i do not familiar of that but i download it and tell me what to do with that

thanks galia

61

@nono29 - part of the problem is that your page is using a mixture of Hebrew and English, which means a mixture of rtl and ltr. Thatโ€™s OK - it can be coded correctly for that, but you have to learn to plan in advance. If most of your page will be English, then you can just change the direction of the Hebrew sections. If most of your page is in Hebrew, then you should set the direction at the top of the page, as weโ€™ve shown you, and just change the direction for the English sections. Only you know what your content is, so only you can make that decision.

But whichever you choose, you should always over-ride the direction in the HTML, not the CSS. CSS is just about styles - making your page good to look at. Your page should still work - although it wonโ€™t look at all pretty - if you disable all styles on it.

HTML is about the structure of the page. Used correctly, this is what makes your page usable and understandable, even without any styles. The direction of text is an important part of the structure; it is not just a decoration. So it should always be coded in as part of the structure in the HTML. Do you understand this?

Look again at your first page. There, we set the page to rtl, then changed the direction of the table to ltr, and where there were Hebrew titles within that table, we changed those back to rtl. It was all done in the HTML.

62

Hi!
but how to design the words it there no calssmenu and by the way the english in my page is just an image

thanks galia

63

Youโ€™ve misunderstood me. The structure of the page - which includes the direction of the text - should always be in the HTML. Once you have that set, then you use CSS to add the styles and make the design, but those things are all โ€œextrasโ€. The text direction is something that must be there for the page to make sense.

If you have no actual English text - just images - then you should certainly set the direction rtl on the page, as Ron has already explained, and then use CSS to design the page as you want it.

(You should also be aware that using images for text is generally a bad idea, but we can go into that later.)