Div around contact form

HTML & CSS
64

so you say to do in html rtl and to do class on the words

galia

65

Yes, always put the rtl in your HTML. If you have no actual English words in your text - just images of English words - then there will be no need to over-ride the rtl direction and no need for classes anywhere to do this. But yes - if you did have a section of English text, that would be the way to do it.

66

Hi, Galia,

The only thing that still needs to be removed is the width on #notebook

    #notebook {width:960px}    /* DELETE ME. Unnecessary */

Please let me explain the reason that I told you to restore the “rtl” code to your original values.
You were blaming the deleted floats, fixed widths and margins for messing up the content.
The deleted floats, fixed widths and margins were not doing that.
The new “rts” code was doing that.
To show you which changes were actually causing the “problem”, I chose to restore the old “rtl” code until we get the page properly framed.

I believe that @TechnoBear may have already asked you to change part or all of the “rtl” code back to the new code, but I am not sure what you have done right now.

In any event, I should not have changed the “rtl” code at the same time as the widths and margins because doing so confused you. That was too much change. Sorry.

67

Hi!

so to do like you suggest do it again like it was?
why to Shrinking or go down in dreamweaver But of course look on the web good and why all the frame of the divs in dreamweaver in Dotted line like i did static position maybe it can be with static position?
and what about dropbox it is on my computer now what to do with that?

sending the code
contect.txt (6.4 KB)

the image on dreamwaver just to look

1680×1050 266 KB

on chrome

1680×1050 121 KB

thanks galia

68

I suggest leaving the code the way it is now until we finish framing and testing the page.
When we start coding the content, the form, we will have to decide between “rtl” at the top of the page, which I would expect you to have; or “rtl” elsewhere.

I do not use Dreamweaver, so I do not know.

You did not need to install Dropbox on your computer. It is OK if you did, but it was not necessary. You only need to download a file from my dropbox to your computer. That is coming up in the next message.

PLEASE NOTE: You have not tried to put the green box around the form, yet. The green box is still below the form. How do you write the code to put the green box around the form?

69

An Interlude

Before we start, if you have not done so already, please test the code on your resume page with the HTML validator (http://validator.w3.org/) and write the number of errors found. I find 31 errors. What do you find?

The file you are about to download is a rewrite of your resume page. It demonstrates WHY I recommended all of those changes to #container, #header, and the other divs on this contact page and more.

I want to show you this example while you still remember how much work it was to adjust the height of the background images and their divs on your resume page. Do you remember how many hours it took to do that?

And do you realize how much work you would have to do if you want to change the height of one of those divs now?… how many heights you would have to change?.. and you would also need to change the heights of the background-images in PhotoShop. Do you remember that?

Would it be nice if you could add text or delete text from your resume (or the other divs) and not have to change the height of the divs and the height of the background-images?

This link opens a Dropbox containing a folder with your name. Please download that folder to your computer. Inside the folder is a revised version of your Resume page complete with the necessary images (some are new). Double-click the HTML page to open it in your browser. It is a demonstration page that shows what you can do with simple, modern code that does not use unnecessary styles. You can test some of the behaviors using Chrome and your new Zoom tool.

https://www.dropbox.com/sh/xs7bgbr8o52bnvv/AACO4lK1H2YUY9Yiobiyc4Y6a?dl=0

Top of HTML page:

  1. The modern HTML5 doctype is easy to write.

  2. <html dir="rtl"> is at the top of the page in the HTML tag.

Framing:

  1. #container has {width:950px} and NO height assigned. The height of #container is determined by the height of everything inside it. #container adapts to the height of its contents.

  2. The total width of the page is now 960px. 950px + 2 times {border:5px} = 960px. It was 970px before this. Remember, the total width or height of an object (such as a div) = width + padding + border. http://www.sitepoint.com/community/t/divs-to-go-to-the-end-of-the-container/99957/98?u=ronpat

  3. #upper and #apDiv8 have been given {min-height:} instead of {height:} which means they will always have a minimum height but can extend taller if you put content in either of them.

  4. One background-image is shared by all three content divs.

  5. The three content divs do not have fixed heights. Their height is determined by their contents. If you add text to (or remove text from) one of them, the other two will grow taller (or shorter), also. They change height together.
    -TEST-
    (a) Zoom text-only to see what this means… Zoom very small first, then very large!
    (b) Watch the height of all 3 divs, the background-image, and the height of the page change with the text (content) height.

  6. This is an important extra. IF you want to change the width of the page, the width of #container is the ONLY number that you need to change.
    (a) Try {width:1000px}, the whole page becomes wider. You do not have to change the width of inner divs because they are blocks with no width assigned; therefore, they adapt to the width of #container.
    (b) Try {width:90%} and drag the width of your browser window wider and narrower. The page width changes with the browser’s window width.
    (c) This is how you code fluid and responsive pages.

  7. Change #container back to {width:950px} now.

The Menu:

  1. There is NO ugly space at one end of the menu because of 2 changes:
    (a) #container is now {width:950px} instead of {width:960px} AND
    (b) The menu items are in table-cells which are in a table with a width of 100%. (This table must be given a width of 100%.)

Smoke and Mirrors:

  1. The double border around the middle content div is not really a border; it is a box-shadow.
    If it were a real double border, the background image would show between the double lines instead of the white area.

The Code Validates clean. (try it!)

Remember, this is just a demonstration page. It is OK if you do not like the look of this demonstration page. How the page behaves is the important part.

Read this post again while you are experimenting with the code.

Try anything you wish. If you damage the code, you can always download another copy.

Most of all, Have fun imagining and learning something new and useful.
Understanding is the key to learning.

1 Like
70

Hi ron!

first about what you send to me the example file from dropbox i will “sit on it” Later and tell you what i think but for now i tried to put the code of the green box before the connect div before the notebook div even in the connect div it did not works i do not know were to put it? (<div id="apDiv5"></div>)

and i test the page in HTML validator you were right there is 31 errors and 22 Warnings i test the original page that no changes were made and they have The same amount errors and warnings and yes in the file that you send there no errors just one warning

thanks galia

71

Galia, think about containers (boxes)…

Let’s pretend that you have a green suitcase. When you prepare for a long trip, do you put clothes inside the suitcase, or do you put clothes above or below (outside) the suitcase?

Hint: Remember that divs are containers.

If the green box were your suitcase and the form were your clothes, how would you arrange the code so the form (your clothes) would be inside the your suitcase (the green box)?

72

Hi ron!

first thanks for the example for this kind of divs i read it again and i will try it with my self to learn but on Section 5 i can zoom text only in chrome it says that i can and on Section 6 i do no know how to drag the width wider and narrower

thanks galia

73

Hi ron!

tell me if do it well becuse it is not looking good

contect.txt (2.2 KB)

thanks galia

74

Galia, that is not all of the code. Can you please post all of the code for the page?

To drag the edge of the browser window, the browser must not be opened full screen… the browser must not be the same size as computer screen… it must not fill the computer screen completely. It must be less than full screen. Then you can click the edge of the browser window and drag it wider and narrower.

EDIT:

I see what you did and it is correct! You put the form inside the green box.
Give yourself a pat on the back .

I still need to see all of the code, though, so please send all of the code for that page.

75

Hi ron!

I see what you did and it is correct! You put the form inside the green box.
Give yourself a pat on the back

first thanks for your the encouragement .

here is the full code
contect.txt (6.4 KB)

image how it look

1680×1050 153 KB

thanks galia

76

Thank you for the code.

Let’s pretend for a minute that you did not have Dreamweaver on your computer.

Could you open “NotePad” or whatever text editor you have and write a very simple web page. One with just a box and some text in that box. Nothing fancy.

Do you know how to create an HTML file with “NotePad”, make a simple box with a border around it or a background-color in it in the body of a page, close the bottom of the file, and name the file so it will open in your browser?

Can you write a very simple HTML page without using Dreamweaver?

77

Hi ron!

To tell you the truth I do not I can try but I can not guarantee it will work for me

thanks galia

78

The truth is good. I can work with the truth

Please do give it a try. Close and Quit Dreamweaver. Type all of the code by hand in the text editor and let’s see what happens.

Another question, if I may.

On your contact page, I see #notebook outside of #apDiv5. On your drawing near the top of the page, you seem to show #notebook inside of #apDiv5. Should #notebook be inside of #apDiv5?

79

i have to write the doctype and container first
galia

80

This is meant to be easy.

Write the doctype from the top of the page that I sent you in the Dropbox. Very easy. No Dreamweaver required.

81

i copy what you write is that what you mean
and i look at the contect code the notbook is outside apdiv5 and close after the close of apdiv5
exmple.txt (143 Bytes)
i think it is hard and take me a lot of time
galia

82

Yes, this is all you need for a simple web page. SAVE the file with a suffix of .htm or .html and it will open in your browser when double-clicked. You should be able to write this from your memory.

<!doctype html>
<html dir="rtl">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
/* write styles between these style tags */
    </style>
</head>
<body>

</body>
</html>
84

is it like that
exmple.txt (280 Bytes)

galia