styling probs with simple feedback form [Archive]

Click to See Complete Forum and Search --> : styling probs with simple feedback form

Stevo22

01-24-2008, 08:17 AM

Ok, this is really crapping me off!

The page validates, the css validates ok with a couple of warnings about color, the form works, but I just can't style it the way I want.

I simply want all the form elements & text to be centred under each other on the page - but this is what it looks like (see attached)

I'm part way there, but I'm unsure how to set the width of the email input box and the submit button doesn't even look like a button!

I know it's my code, and I've mucked about with it for a couple of hours and I give up! - I don't know enough. Please help point me in the right direction.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Feedback</title>

<link rel="stylesheet" type="text/css"
href="../css_stylesheets/kunst_basic.css">

</head>
<body>

<div id="sitewrap">

<div id="leftstripe"></div>

<div id="leftcontent">
<span class="mainpic"><img src="/images/kunst_web_logo.jpg" alt="KUNST Picture"></span>
<div id="kunstaretext">
<h2>KUNST are:</h2>
<div class="dotline"></div>
<p class="verd medium tantext">Munkii</p>

<p class="verd small whitetext">(Matt Spencer)</p>
<p class="verd small italic whitetext">Vocals and Lyrics</p>
<div class="dotline"></div>
<p class="verd medium tantext">Sideshow</p>
<p class="verd small whitetext">(Tony Matticoli)</p>
<p class="verd small italic whitetext">Lead Guitar</p>
<div class="dotline"></div>

<p class="verd medium tantext">Wah Wah</p>
<p class="verd small whitetext">(Chris Godsell)</p>
<p class="verd small italic whitetext">Guitar (wah wah)</p>
<div class="dotline"></div>
<p class="verd medium tantext">Stevo</p>
<p class="verd small whitetext">(Steve Kelepouris)</p>
<p class="verd small italic whitetext">Bass Guitar</p>

<div class="dotline"></div>
<p class="verd medium tantext">Maddog</p>
<p class="verd small whitetext">(Mark Kelepouris)</p>
<p class="verd small italic whitetext">Drums</p>
<div class="dotline"></div>
</div>
</div>
<div id="mainheader">

<div id="menuwrap">

<ul class="menu">
<li><a href="../index.php">Home</a></li>
<li><a href="/pages/ourmusic">Our Music</a></li>
<li><a href="/pages/jammplan">Jamm Plan</a></li>
<li><a href="/pages/pics">Pictures</a></li>

<li><a href="/pages/otherstuff">Other Stuff</a></li>
<li><a href="/pages/feedback">Feedback</a></li>
</ul>
</div>
<div id="centreband"></div>
<h3><span id="quotestart">“</span></h3>
<h3><span id="quoteend">”</span></h3>
<h1><span id="mainquotetext">

We don’t have any particular racial, political or religious
<br>affiliations - We just play the music as we feel it!</span></h1>

</div>

<div id="pagecontent">

<form method="post" action="../php_scripts/sendmailtest.php">
<fieldset>
<legend></legend>
<p class="verd medium greytext center">Please <span class="bold">enter your email address</span> so we can reply to your message:</p>

<input class="verd medium greytext" name="email" type="text" tabindex="1">
<p class="verd medium greytext center">Your message:</p>
<textarea class="verd medium greytext" name="message" rows="40" cols="41" tabindex="2"></textarea><br>
<input class="buttons" type="submit" name="submitButtonName" value="Send Message" tabindex="3">
</fieldset>
</form>
</div>

<div id="rightcontent">

</div>

<div id="rightstripe"></div>

</div> 
</body>
</html>

* {
border : 0;
padding : 0;
margin : 0;
}
html, body {
background-color : #2b2b2b;
margin : 0;
padding : 0;
height : 100%;
border : 0;
}
p {
margin : 0;
}
#sitewrap {
margin : 0 auto;
position : relative;
width : 910px;
height : 100%;
min-height : 100%;
overflow : hidden;
}
#leftstripe {
background-image : url("../images/left_stripe.jpg");
background-repeat : repeat;
display : inline;
position : relative;
width : 20px;
height : 100%;
float : left;
}
#leftcontent {
background-color : #000058;
display : inline;
position : relative;
width : 144px;
height : 100%;
float : left;
}
#mainheader {
background-color : orange;
display : inline;
position : relative;
width : 582px;
height : 181px;
float : left;
}
#pagecontent {
background-color : orange;
display : inline;
position : absolute;
top : 181px;
left : 164px;
width : 582px;
height : 100%;
min-height : 100%;
}
#centreband {
background-color : #e29606;
display : inline;
position : absolute;
top : 90px;
width : 582px;
height : 90px;
float : left;
border-top : 1px solid #dc9000;
border-bottom : 1px solid #dc9000;
}
#rightcontent {
background-color : #000058;
display : inline;
position : relative;
width : 144px;
height : 100%;
float : left;
}
#rightstripe {
background-image : url("../images/right_stripe.jpg");
background-repeat : repeat;
display : inline;
position : relative;
width : 20px;
height : 100%;
float : left;
}
.clear {
clear : both;
}
.mainpic {
background-image : none;
display : block;
position : relative;
width : 144px;
height : 181px;
float : left;
border-bottom : 1px solid black;
}
#mainquotetext {
display : block;
position : absolute;
top : 111px;
left : 52px;
width : 502px;
float : left;
}
#kunstaretext {
display : block;
position : relative;
top : 10px;
left : 10px;
float : left;
}
p {
color : black;
font-family : Verdana;
text-align : left;
}
.verd {
font-family : Verdana;
}
.treb {
font-family : "Trebuchet MS";
}
h1 {
color : #484848;
font-size : 18px;
font-family : "Trebuchet MS";
font-style : italic;
font-weight : bold;
line-height : 24px;
background-color : transparent;
text-align : left;
}
h2 {
color : white;
font-size : 12px;
font-family : Verdana;
font-style : normal;
font-weight : bold;
line-height : 14px;
background-color : transparent;
text-align : left;
}
h3 {
color : orange;
font-size : 90px;
font-family : "Times New Roman", Times;
font-style : italic;
font-weight : bold;
text-align : left;
}
#quotestart {
position : absolute;
top : 80px;
left : 5px;
float : left;
}
#quoteend {
position : absolute;
top : 113px;
left : 465px;
float : right;
}
.italic {
font-style : italic;
}
.bold {
font-weight : bold;
}
.small {
font-size : 10px;
line-height : 13px;
}
.medium {
font-size : 12px;
font-style : normal;
line-height : 16px;
}
.greytext {
color : #252525;
font-family : Verdana;
}
.tantext {
color : #f0e68c;
}
.whitetext {
color : white;
}
.center {
text-align : center;
}
.dotline {
margin-top : 6px;
margin-bottom : 4px;
position : relative;
width : 124px;
height : 1px;
border-top : 1px dotted orange;
}
#menuwrap {
position : relative;
width : 582px;
height : 88px;
}
ul {
list-style-type : none;
width : 100%;
}
li {
float : left;
}
.menu a {
color : white;
font : bold 10px Verdana, Arial;
text-decoration : none;
background : black;
text-align : center;
display : block;
padding-top : 2px;
position : relative;
top : 29px;
left : 15px;
width : 82px;
height : 16px;
float : left;
border-style : solid;
border-width : 1px 5px;
border-color : orange;
}
.menu a:hover {
color : white;
background : #b2001a;
border-style : solid;
border-width : 1px 5px;
border-color : white;
}
fieldset {
text-align : center;
display : block;
margin-right : auto;
margin-left : auto;
position : relative;
width : 560px;
height : 100%;
}
textarea {
font-size : 12px;
font-family : Verdana;
font-style : normal;
font-weight : normal;
line-height : 16px;
background-color : white;
display : block;
margin : 4px auto;
padding : 6px;
position : relative;
width : 420px;
height : 260px;
border : 1px inset silver;
}
.buttons {
text-align : center;
display : block;
}

smyhre

01-24-2008, 08:50 AM

<input class="verd medium greytext" name="email" type="text" tabindex="1" cols="40">

For the email input try putting a set number of cols for the width otherwise it will go to browser default length.

smyhre

01-24-2008, 08:58 AM

As for the button you could either replace it with an image to make it more button like:
<input class="noborder" type="image" value="Submit Form" src="location/of image.jpg" alt="picture button" />

Or you might add a border to it to make it pop a little from the page using {border: 4px outset #555;}

Or other properties can be found here:
http://www.w3schools.com/css/pr_border-style.asp

Stevo22

01-25-2008, 12:22 AM

Thanks smyhre,

Ahah,! I wasn't aware of the cols attribute in an input text box - I'll do it.

Something that confuses me though is that you can define the size in css like I have done with this textarea:

textarea {
font-size : 12px;
font-family : Verdana;
font-style : normal;
font-weight : normal;
line-height : 16px;
background-color : white;
display : block;
margin : 4px auto;
padding : 6px;
position : relative;
width : 420px;
height : 260px;
border : 1px inset silver;
}
<textarea name="message" rows="40" cols="41" tabindex="2"></textarea><br>
But the rows and cols attributes seem to have no bearing in the html on the actual size!
The size is being defined in 2 places - What The?
Can someone explain this?

BTW, I did style the "input" in css, but because the SubmitButton is an input also, it completely stuffed it up as well - I imagine I would have to style them seperately as an ID?

smyhre

01-25-2008, 01:11 AM

But the rows and cols attributes seem to have no bearing in the html on the actual size!
The size is being defined in 2 places - What The?
Can someone explain this?

Most of the time when I make a form I only define the size in the html and the css is used only for position, though to be honest i've only done maybe 5 forms total. If you have the attribute defined in css you shouldn't need it in the html though. Is the css actually defining the width though? Cause you said before you didn't know how to set the width? I've always done the width with cols though for a form input.

BTW, I did style the "input" in css, but because the SubmitButton is an input also, it completely stuffed it up as well - I imagine I would have to style them seperately as an ID?

Different id's or classes either way will work.

Stevo22

01-25-2008, 06:29 AM

Hi smyhre,

Thanks for your input - but still no comprehendo!

If you have the attribute defined in css you shouldn't need it in the html though.

But you do! - Let's forget about the input box for the moment - The only reason I was alerted that the textarea needed the rows & cols properties set in html was when I validated the page - the page did not validate and the validation error informed me that I needed to have rows & cols defined.

Yep! sure, no probs, I then referred to my html source book and it also informed of the same. ok, understood (I thought)

So I chucked in a couple of arbitary values just to satisfy the validator - fine, all is sweet - but the size still seems to be determined by the css width and height property.

I tested define rows=1 and cols=1 and that works fine and satisfies the validation - so what's the bloody point?.

OK then - problem gone - no errors - but what does it mean?

The validation might be satisfied but I'm not!

I'm confused - please enlighten me.

Maybe it doesn't matter, but this is really ****tin' me big time!

If there are contradictions - ok, I accept that (I think)

smyhre

01-25-2008, 09:17 AM

Have you tried taking out the sizing in the css, refreshing the page, dumping the cashe, and messing with the html cols and rows to see if it resizes. It should resize the form parts. But as I've said before I have never sized an input box of a form in css I've only done it is the html part and it has always worked. I guess I always will size with html now that I know the validator doesn't like it without those values.

Stevo22

01-25-2008, 10:41 AM

Have you tried taking out the sizing in the css, refreshing the page, dumping the cashe, and messing with the html cols and rows to see if it resizes. It should resize the form parts.

Yep - sure, I'll try that, I'm sure that would work.

But, but, but - I thought that css would be the overiding factor here!

So what you are saying is: use css to style the textarea except for it's dimensions?

Sorry, but that doesn't cut the mustard!

smyhre

01-25-2008, 12:12 PM

Sorry but that is how I know it. I have never yet seen a form with the widths of the input boxes styled with css........

On second thought I did a little search and this might or might not be of use but its worth looking into I guess. http://jeffhowden.com/code/css/forms/ You will probably have to look at the source to see what he did in the html but the css is at the bottom.

The other thing I wonder if the doctype you have won't allow forms without cols and rows. In the link above what I could see is that he had no rows and cols in his html but it was of doctype XHTML transitional not html 4.01.

Stevo22

01-25-2008, 10:10 PM

Thanks smyhre,

Thanks for the info - I had a quick look at that link and I'll have to study the css code in more detail when I get the time. Just from a quick look, I reckon I'll be able to get something out of it.

I think you could be correct about the doctype.

Originally I was using xhtml transitional, but was advised to use a strict doc type, and after doing a lot of reading on these forums I decided not to bother with xhtml and go for strict html 4.01 which I'll most likely stick with.

I'm on a big learning curve at the moment, just starting out with html and css, so that's why I'm getting confused and frustrated. But I'll get there!

Thanks for your help.

Stevo22

01-26-2008, 12:14 AM

Actually the correct attribute for the width of an input text box is not "cols" it is size="foo"

Anyway I have now got the form to look like I want, it works and also validates - so that's good.

Now I have a more complex form page to do next - that'll be fun :eek:

smyhre

01-31-2008, 03:00 PM

Took a longer look at the code and had a little bit of experimentation in a form I'm currently working on. In the link I provided the person did have cols and rows in his html for his textarea but not for his input. Without the cols and rows in the textarea it will not validate, and yes, you are correct about the size attribute for the inputs.

CSS does override the cols and rows attributes in the html, but it still needs the cols and rows in the html. I don't really understand why though.

Stevo22

02-01-2008, 12:38 AM

Thanks for your input (pardon the pun)

CSS does override the cols and rows attributes in the html, but it still needs the cols and rows in the html. I don't really understand why though.
I don't understand either, but perhaps viewing in an older browser that doesn't handle css well it would "drop back" using the rows and cols properties instead.

Therefore I guess I should set them to something meaningful instead of leaving them set with a value of "1"

Anyway, it works fine, so I've gotten over it.

I'm probably more annoyed about the look of the buttons - In Safari for the Mac the buttons look nice and 3D - So I guess it's more of a Browser issue.

Cheers,
Steve.

smyhre

02-01-2008, 10:13 AM

Yeah if you don't specify a specific button type or image then it will reset to browser default and all browsers handle it different. You could have it 3d like safari in other browsers if you created an image for it. Which if you don't know how you could get someone to do it or get a tutorial on how to off the web. It's a pretty easy process.