6 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Please see attachemnt to design view.
I've tried several different times to lay this form out without using a table. But because the left column of this page - which you can't see is designed to scale left to right by clicking and dragging. When you pull the left column of the page over to the right all my fields and labels get bumped out of place! But when I put it in a table it stays in place but rather the right items begin to disappear as they should. Does anyone have any advise on how to lay this out so labels and fields don't get bumped out of place when the page is resize? Or is it even possible?

Thanks!

AttachmentSize
sample.jpg17.7 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Screenshot's not much good

Screenshot's not much good without seeing some code or a link.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I realize code would help

I realize code would help but that's not so easily done and there is no link since this is a database in progress. But even if I code find all the appropriate code (gathering css files ect) you are not going to have the same effect or see the problem. It's the wireframe it's in.

I posted both a before and after screen shot of my code. The before is what it looks like before the left bar is pulled to the right. And then the after is abviously the effect it shows...

AttachmentSize
after.jpg 27.42 KB
before.jpg 27.3 KB
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi Appreciating that this

Hi

Appreciating that this code (posted a few weeks ago but in php form) isn't what you want, but it will give you an idea of how to do it:

Enquiry Form

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
#enquireform{
width:401px;
border:1px solid #355981;
padding-bottom:5px;
margin:2em;
}
#enquireform h2{
background:#84ACD8;
border-bottom:1px solid #355981;
margin-bottom:5px;
text-align:center;
font-size:80%;
}
label{
display:inline-block;
}
label{
min-height:1.6em;
font-size:70%;
font-weight:normal;
padding:2px;
border:1px solid #355981;
background:#CDDBE9;
display:block;
width:385px;
margin-bottom:5px;
margin-left:5px;
}
* html label {height:1.6em}
.gr{margin:10px 5px 5px;text-align:center}
.rc{
clear:both;
display:block;
height:1%;
overflow:auto;
border-bottom:5px solid transparent; /* fix for moz & IE7 browsers collapsing margins */
}
* html .rc{margin-bottom:5px;border:0} /* undoes above fix so IE6 is OK */
#enquireform label span{
float:left;
display:block;
margin-top:2px;
margin-bottom:2px;
width:130px;
text-align:left;
}
.tf245{
margin:0px 0px 1px 0px;
float:right;
display:inline;
font-size:103%;
width:245px;
height:1.2em;
}
#comments{
margin:0px 0px 1px 0px;
clear:left;
font-size:103%;
width:373px;
font-family:verdana,arial,sans-serif;
}
#submitme{
display:block;
margin:0 auto;
}
.labeltext font{color:#FF0000}

Enquiry Form



Your Name:




Business Name:



Your Email Address:




Comments:


CT

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks - this is an

Thanks - this is an interesting form... I like the layout a lot.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Aw shucks

Aw shucks

:blushing:

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 20 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Well - I think I resolved

Well - I think I resolved the intial problem. As long as there is a table or blank container that keeps the div layers from caving in when the wire frame is resized it works fine.

Thanks!