Div around contact form

hello!

i made a div around a content form and it not in is place almost every time it is happen to me with div that is not in is place that i want is there a rules to do it well?

the code

contect.txt (7.2 KB)

image

thanks galia

Where did this code come from?

The entire form is created in nested tables. This is a horrible way to design a form.

What is it supposed to look like?

What is the purpose of that green box?

This code was most likely made in Dreamweaver. :frowning: I would scrap it all if possible. It is bad, inefficient, non-semantic… as you can probably see …difficult to maintain.

I cant really tell what your actual goal is, but I am going to guess that you want the border to be the border for your table.
in which case:
DELETE the DIV you made… then DITCH THE WYSIWYG part of Dreamweaver and work solely in code mode… you’ll thank me later.

think of your form element itself as the container and use this selector:

#form1{ ....your CSS rules here..}
for example:
#form1{ border:1px solid green;}
hope that helps

hi ron!

  1. The code come from the page that the image i sent (dreamweaver)
  2. That is how they taught me how to make a contact form
    3.i show you how i want it to look like and you see the purpose of the green box and how it supposed to look( i do it in green that you know were the div is).

the plan

thanks galia

Who is “they”? What company or school taught you this and when? The name, please.

2 Likes

really Ron
i explaine to you again i did with a teacher after I finished the course to do like that the contect form (and the truth I was not at the course that day, but I have the stuff) this form was from my previous project that I did and was not enough score for a certificate and the only thing that was not good in this that I did not do vadilate ( i learned in college in israel were i live) can you help me it is in dreamwevar

galia

The very first time that you posted on the old SitePoint forum, and again the day before yesterday and again yesterday, I showed you that fixed heights on most boxes, especially outer boxes, are not good practice. Today, you post the code for this new page and it says:

#container { height: 1200px; }
You repeat the same bad practice… again and again… and you want me/us to show you how to fix the same bad code… again and again.

You will never learn to write good code as long as Dreamweaver writes it for you.

I would prefer to use my time helping someone who leaves me believing that my time spent with them was worthwhile and not fruitless.

I am discouraged. Perhaps someone else would enjoy “helping” you. I need to think about it.

Do you have the Firefox browser on your computer? IF not, what browser do you use?

3 Likes

i use ie and chrome
and for fix “that” code i know about it and i try to do so but it look better in fixed div
Perhaps someone else would enjoy “helping” you. it is not very nice what you said

galia

Does it not occur to you to ask, “why?”

You might learn something if you ask, “Why”. If you are not curious about how code works, if you do not want to know how it works, you should not be involved in web design. Find something that interests you. You do seem to be quite artistic.

so what to do i am stuck?
And thanks for the compliment that you think that i am artistic
an yes i whant to know why to do that code or the other
so that why i askif there rules to do well divs
thanks galia

STOP using DreamWeaver in design view and only use it in code view.
You seem to have finally got it that it is not a browser, :thumbsup:
But you still use design view as a way to assess how a page looks.

OK, it looks good to you, but is everyone viewing the page going to be seeing it with the same conditions you are seeing it? Most certainly not.

If you want to use the simplicity allowed by using design view and don’t mind how professional a page is, fine.
But if you want to have professional pages that will be up to current best practice, you really need to make the disnction between what DreamWeaver does and what a web page is.

1 Like

Again, chances are you DONT NEED the extra DIV at all.

You can use the form to hold your background imagery (the book) …

#form1{ border:1px solid green; padding: 10px 10px 10px 300px; /* you are making room for your mages here... adjust the numbers as needed*/ background: url(yourImage.jpg) no-repeat 0 100%; }

you could also use a pseudo element and absolute positioning… if you need to control the book as a independent element

#form1{ border:1px solid green; padding: 10px 10px 10px 300px; /* you are making room for your mages here... adjust the numbers as needed*/ background: url(backgroundImage.jpg) no-repeat 0 100%; position:relative; } '#form1:after{ position:absolute; content: url(backgroundImage.jpg) ; bottom:0; /*change this to suit you*/ left:0; /*change this to suit you*/ }

essentially thats the rough idea.

hope it helps

Galia,

I like to ask “why” a lot. When I look at a page on the web, I often ask myself how the person created the layout. I find it very interesting.

When someone gives me a page and asks for help, I also ask “why” a lot. I often ask “why” certain styles are used in the layout. By asking questions, I learn how much the person understands about writing code.

For example, I would like to know WHY the following styles are used in almost of your divs. Why do you have them there? What are they supposed to do? What is their purpose?

{ position:relative; z-index:#; }

I also ask myself WHY most of the divs have fixed heights? Some of them make sense, such as the ones with the curtains and the silver bars (after all, there is no content inside those boxes so they would collapse without a height). But others do not make sense, such as div#container.

On the new page that you just posted, I wonder why you have {direction:rtl;} in the CSS. I wonder because I remember how long @TechnoBear spent explaining to you that the direction rtl should be declared in the HTML, not the CSS; yet, here it is again in the CSS.

Divs do not have any padding unless it is assigned. I do not understand in #header why you spend 3 lines of CSS setting

    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;

when no padding has been assigned at all in #header. They serve no purpose.

And why does #header have these styles set? They serve no purpose.

    left: 0px;
    top: 0px;

These are just some of the issues in your code. If you would like to talk about these and clean up your code, I will be glad to help. If you are not interested, I will go away and someone else can help.

hi ron!

yes i whant talk about this issues and clean up my code
if you whant answers i will give you if not today tomorrow

thanks for helping galia

Do you want to know why Ron has been the only person helping you so far nono29? Because you refuse to listen to anyone and you refuse to take the effort to learn. I’m sorry to say this.

Please note that you have repeatedly ignored our advice to stop using Dreamweaver (even the design view) approximately 100 times. You only take advice you want.

I’m not sure why this is the case - we are all trying to help. This is not meant to flame you at all but Ron is making an honest effort to help you. He has gone above and beyond what I expected him to do and it’s disrespectful to insult him when he’s the last option you have here. If your barrier with English language is hte issue, we have suggested getting a translator and you have said you have someone who could do that - yet this is not being utilized for some reason.

To be 100% honest with you, you should almost always take school classes light heartedly. They are almost always a joke. I have sat in 4 classes that taught “web design” and they were years behind what they should be teaching. Generally, what we advocate here, in terms of advice, you should generally listen to and learn and understand it. I hate to say it but your teacher sounds like they are more of a beginner or learned their coding skills years and years ago, and they haven’t kept up. Like almost all teachers.

Good morning, Galia.

You will probably be awake before I am. You can go ahead and tell me why most of your divs have {position:relative} and {z-index:#}. How did it get in your code? What is the purpose of those properties in your code? You can look them up on the web, if you need to, of course.

Your drawing shows that there is a notebook background image on this page. Would you please post that notebook image and any other images used by this form page?

The code and screen shot that you posted puts the green box below the form, The drawing shows the form inside the green box. How do you think you should write your code so the form is inside the green box?

HI!
Before I send you the answers later on I apologize if the words i said hurt you for most reason I’m really sorry you really relate to what I want to achieve and it’s not that I do not want to listen to others or Learn but i have project to send and you the most approaches to the subject matter i learned I really appreciate all your help sorry if i was insulting you sorry thanks to continue to helping me.

galia

1 Like

hi ron!
later i will answer to your question but i did not yet do the image for the form so i do not when i full give yoy all the images

thanks galia

Galia,

There is no need to apologize. You have said nothing that hurt me. My goal is to help you understand code and help you finish your page(s).

My time here is limited so I try to use my time wisely and not wastefully. That is all.

The notebook image can wait. It is more important to talk about code.

Would you be willing to install Firefox on your computer? You do not have to, of course. I ask because in Firefox, one can very easily Zoom Text-Only and see how the page responds if the user has a font on his computer that is not the one that you have specified or is using a larger font-size because he cannot see very well. I find that one feature in Firefox to be very valuable. If you can do this in Chrome, then you do not need to install Firefox. If you cannot do this in Chrome, then I recommend installing Firefox, at least until you finish these pages.

May I ask where you obtained the design for your pages? Is it a theme that you found on the web? Was it provided by your teacher in college? Did it come with Dreamweaver? Did you design it completely yourself? Where did it come from? I ask because I am still trying to learn where the code came from.

hi ron!

ok i am happy that you do not offended of me about firefox i willing to install it but there is zoom in chrome(not like photoshop) how it is in firefox and what do you think i should do
about your question why i have position:relative because I learned that if you do that the div like that will not move like in absolute and for z:index i do not remember why it is not writing in my notebook but i saw on the web like i did with the number is sets the stack order of the element (the divs) like layers
for how do i think the code will be i think i tell you in words i think that the div will came first and after that the form
and for the images i downloading from sites that have free or have comb example image or i am finding free images on google and i design in photoshop ( Adds lettering or
Deleted something I do not want
Adding another picture to Current picture

thanks galia