Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2008
    Location
    killarney, co. kerry, ireland
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    trouble understanding css

    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?

  • #2
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    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.

  • #3
    New Coder
    Join Date
    Feb 2008
    Location
    killarney, co. kerry, ireland
    Posts
    34
    Thanks
    7
    Thanked 0 Times in 0 Posts

    thanks for the tips!

    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&amp;hl=en&amp;msa=0&amp;msid=115240330016309002652.000445f5491ced0929a1a&amp;ll=52.23462,-9.46187&amp;spn=0,0&amp;iwloc=000445f554883c8815185&amp;output=embed&amp;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>&copy;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>&nbsp;|
    <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?
    Regards,

    Tony Dunne
    Kingdom Web Services

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!!
    Last edited by jcdevelopment; 02-12-2008 at 11:00 PM. Reason: realization!!!

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    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.

  • #6
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    146
    Thanks
    5
    Thanked 3 Times in 2 Posts
    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.
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •