trouble understanding css

kingdomweb · 02-12-2008, 10:26 PM

I am designing a site www.susieconwayinteriordesign.com and am trying to use CSS to build it. As I am new to this I am having trouble with some formatting of tables (on services page) and getting a form to have active fields (on contact page). Can anyone offer any advice?

Andrew Johnson · 02-12-2008, 10:37 PM

It helps to post the specific code snippets and what the problem is. I like to help people but I don't like wading through their websites.

kingdomweb · 02-12-2008, 10:46 PM

I am including the page code first and the css file second
HTML code (from body tag)
<BODY>
<A href="susie_conway_interior_design_portfolio.html">
<IMG id=corner height=105 src="images/img_corner.jpg" width=95></A>
<DIV class=name>
<IMG title="Welcome to Susie Conway Interior Design" height=400 alt="Welcome to Susie Conway Interior Design." src="images/spacer.gif"
width=166></DIV>
<DIV id=mainContainer>
<DIV class=inner>
<DIV id=content><table class="tab1" border="0" cellspacing="0" cellpadding="0">
<h1><b>How to find us</b></h1><BR><iframe id="map" name="map" align="top" width="350" height="350" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=115240330016309002652.000445f5491ced0929a1a&ll=52.23462,-9.46187&spn=0,0&iwloc=000445f554883c8815185&output=embed&s=AARTsJocaZRkqkNceOwft9IlW JaWH2EMYw"></iframe>
</table>
<DIV id=content_left><table border="0" cellspacing="0" cellpadding="0">
<tr><h1><b>How to contact Susie Conway Interior Design</b></h1>
<br></tr>
<tr><br>
<b>Call us today for a free consultation on +353 (0)66 7142149 or<br>+353 (0)86 1098647<br></b>
Or e-mail us with your enquiry to <a class="link1" href="mailto:info@susieconwayinteriordesign.com">info@susieconwayinteriordesign.com</a><br>
<br><b>Alternatively you can fill in our online enquiry form with your details (please note some fields (*) are compulsory.</b><br>#
<form action="form.php" method="post" name="enquiry">
<b>Contact name:<br>
<input type="text" name="realname" size="20" tabindex="1"></b>
<font size="4">*<br></font>
<b>Address:<br><input type="text" name="address" size="50" tabindex="2"><br>
Email:<br><input type="text" name="email" size="20" tabindex="3"></b>#
<font size="4">*<br></font>#
<b>Landline:<br>
<input type="text" name="telephone" size="20" tabindex="4"><br>
Fax:<br>
<input type="text" name="fax" size="20" tabindex="5"><br>
Mobile:<br>
<input type="text" name="mobile" size="20" tabindex="6"><br>
<br>
Details of enquiry:</b><font size="4">*<br>
<textarea name="details" rows="5" cols="48" tabindex="7" wrap="PHYSICAL"></textarea><br><br><input type="submit" name="Submit" value="Send" tabindex="8"><input type="reset" name="Reset" value="Reset" tabindex="9"></font>
</form>
</tr></table>
</DIV>
</DIV></DIV></DIV>
<DIV id=footer><DIV style=" color: #727272; font-size: 12px; font-family: verdana; line-height: 20px; background: url(images/img_logo.jpg) no-repeat center top; visibility: visible; display: block; margin-top: -102px; position: relative; z-index: 1; height: 309px;">
</DIV>
<DIV id=img_footer>©2008 Suzie Conway Interiors | all rights reserved | designed and powered by <a href="http://www.kingdomwebservices.com" target="_blank">Kingdom Web Services</a><br>
<a href="index.html">home</a> |
<a href="sitemap.html">sitemap</a> |
<a href="susie_conway_interior_design_portfolio.html">portfolio</a> |
<a href="contact_susie_conway_interior_design.html">contact us</a><br>
</DIV>
</DIV>
</BODY>

CSS:
BODY {
HEIGHT: 100%
}
HTML {
HEIGHT: 100%
}
BODY {
FONT-SIZE: 10px; MARGIN: 0; COLOR: #727272; LINE-HEIGHT: 16px; FONT-FAMILY: verdana
}
* HTML #mainContainer {
HEIGHT: 100%
}
#mainContainer {
MIN-HEIGHT: 100%; BACKGROUND: #dce9eb url(../images/bg_pattern.gif) repeat-y center 100%
}
.inner {
PADDING-BOTTOM: 445px; WIDTH: 100%
}
#footer {
BORDER-RIGHT: #dce9eb 1px solid; BORDER-TOP: #dce9eb 1px solid; MARGIN-TOP: -447px; BACKGROUND: url(../images/bg_footer.gif) repeat-x 50% bottom; BORDER-LEFT: #dce9eb 1px solid; BORDER-BOTTOM: #dce9eb 1px solid; HEIGHT: 445px
}
P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H1 { color: #a97cb7; font-size: 15px; MARGIN: 0; P;padding: 0; }
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

A { color: #fff; TEXT-DECORATION: underline
}
A:hover {
COLOR: #59929d; TEXT-DECORATION: none
}
IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: top; BORDER-RIGHT-WIDTH: 0px
}
A.link1 { color: #727272; text-decoration: none; Z-INDEX: 1000; BORDER-BOTTOM: 1px dashed #59929d; POSITION: relative
}
A.link1:hover { color: #727272; text-decoration: none; BORDER-BOTTOM-WIDTH: 0
}
#content { top: 0; left: 12px; MARGIN: 0 auto; WIDTH: 1020px; PADDING-TOP: 39px; HEIGHT: 530px
; z-index: 1; }
#footer_holder { MARGIN: 0 auto; WIDTH: 870px; PADDING-TOP: 112px
}
#footer_holder2 {
FLOAT: right; WIDTH: 325px; LINE-HEIGHT: 20px
}
#footer_holder2 P {
MARGIN-BOTTOM: 27px
}
#img_footer { FONT-SIZE: 10px; BACKGROUND: url(../images/img_base.jpg) no-repeat center bottom; COLOR: #dce9eb; line-height: 14px; PADDING-TOP: 205px; HEIGHT: 33px; TEXT-ALIGN: center
; vertical-align: 10px; }
#corner { Z-INDEX: 10000; POSITION: absolute; TOP: 0
; right: 0;
}
.name {
BACKGROUND: url(../images/img_title.gif) no-repeat center 50%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 39px; TEXT-ALIGN: center
}
.tab1 { position: relative; FLOAT: left; WIDTH: 400px
}
.tab1 TH {
FONT-WEIGHT: normal; TEXT-ALIGN: right
}
.tab1 TD {
PADDING-LEFT: 8px
}
#content_left { WIDTH: 400px
; height: 600px; z-index: 1; float: right; }
.red {
COLOR: #c42c2f
}
.tab2 { position: absolute; FLOAT: right; WIDTH: 480px
}
.tab2 TR { FONT-WEIGHT: normal; text-align: left; }
IMG.service { VERTICAL-ALIGN: top; margin: 5px; padding: 0; border-color: #727272; border-width: 1px; }

I cannot figure out why the form on the right of the page will not let you fill it out? Any ideas anyone?

jcdevelopment · 02-12-2008, 10:49 PM

that i srag i took a look at it ad o matter what is done it wont let you typ into it, i am interstd to know tht problem as well!! I will keep looking though. Do you hav any javascript ttched to the site at all?

also i dont know if you knew that the map is not able to be click on!!

VIPStephan · 02-12-2008, 10:50 PM

Looks like you should read up on the basics of HTML before you get to styling it with CSS.

Number one to know: HTML is for the structure/content/markup, CSS is for the style/look of the page. These two components make up a web page, and they should always be separate (i.e. HTML in the HTML file, CSS in a CSS file) but work together to achieve the desired effect. Effectively this means that presentational HTML attributes (like width, height, align, bgcolor, among others) are to be replaced by CSS.

Also, and most importantly, the HTML you are using just has to be semantic in order to get a clean website that works equally in all major browsers. Semantic means that everything has a certain meaning. <h1> is to mark up level 1 headlines, <p> is to mark up paragraphs, <ul> to mark up an unordered list, <div> to mark up a division, and <table> to mark up a table. And a table is just what it says: A table to semantically structure and represent tabular data (e.g. a telephone directory, sports results, stock exchange tables, etc.). This means to create a page layout tables are forbidden! CSS is there to do that as a layout is counted towards design/style, not structure in terms of semantics.

Look at http://csszengarden.com thoroughly and learn how one and the same HTML file (consisting only of semantically marked up text) can be styled in many ways to look completely differently. This is the approach you should take.

Remember: at first structure your content semantically with the correct HTML, and only then, if that’s done you apply CSS (and JS) to enhance the page.

Good luck.

Andrew Johnson · 02-12-2008, 10:51 PM

You can tab in you just have some kind of layer over the inputs, probably a DIV tag.

I'll look more into this when I get home.

doctordew · 02-13-2008, 05:17 AM

You should probably set a defined text area to be on one side of the pillar thing. You obviously cannot read this text, and it would look a lot cleaner if you moved the text all to one side or the other.