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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning and Styling problems! Help!

    Ok guys, I haven't coded in a LONG time, so I know I'm very messy and have obviously done things I probably shouldn't have when it comes to coding a website.

    If you guys will take a look at www.houseonthe-hill.com

    and please tell me how to reposition the text/textboxes so that on every monitor it appears the same. As it is right now on my monitor it looks fine, but when I switch to a larger or smaller monitor the text appears out of place and not contained within the background image like I had hoped.

    Also, on the "contact us" page I was wondering how to correctly set up the form so that when I click "submit" it sends it to a particular email with the appropriate forms in the appropriate sections of the email. Right now the submit button wont work for some reason.

    I would greatly appreciate it if someone helped me out. I know its a lot of mess to scroll through! Hopefully I'll get good enough to be answering someone elses questions some day. Thanks guys.

    PS (I don't care whether or not if the solution is in CSS or HTML...if someone can just correct the code and tell me what to do I should be fine) thanks again.

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    you are using absolutely positioned DIVS which is not a great way of displaying content. Sure, absolute is handy in some instances, but definitely not needed for layouts in this way.

    The reason you have the problem is that the DIVs are absolutely positioned to the viewport, so on abigger monitor they will shift accordingly to always be X pixels left etc.

    few ways to remedy it.

    Wrap the absolute divs in an relative container which sits in the middle of the document. that way the absolute divs appear absolutely to the parent div instead of the body.

    or

    redo the divs using floats

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd recommend you to start from reading "why tables for layout is very bad?"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So what I should do is wrap the "absolute div" in a relatively position div. Should I also base this relative on pixels or how should I do it.

    Also, if anyone has any pointers on the submit form button...
    Last edited by Rygarfo; 12-03-2009 at 01:48 AM.

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    First you need a doctype. You have none now which puts everyone into quirks mode. Put this on your first line:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Then let's see where we stand.

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, I posted it into the offline files and am going to upload them in just a minute. However, the positioning on this monitor that I'm on (about 4 inches bigger than my own) has all the text places farther to the left that it shows on my computer. I'm guessing it has to do with what the guy mentioned before.

    Can anyone give me an example of wrapping an absolute position inside of a Relative position or tell me how to fix the Monitor issue?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Rygarfo View Post
    Can anyone give me an example of wrapping an absolute position inside of a Relative position or tell me how to fix the Monitor issue?
    There are two ap boxes in the code below. Resize your monitor and watch how they move relative to screen size.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100.1% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    }
    #apBox {
    	position: absolute;
    	top: 10px;
    	left: 150px;
    	height: 75px;
    	width: 200px;
    	padding: 10px 50px;
    	background: #f00;
    }
    #container {
    	height: 600px;
    	width: 800px;
    	margin: 230px auto;
    	background: #999;
    	position: relative;
    	font-size: 1em;
    }
    #inBox {
    	position: absolute;
    	top: 10px;
    	left: 150px;
    	height: 75px;
    	width: 200px;
    	padding: 10px 50px;
    	background: #f00;
    }
    </style>
    </head>
    <body>
            <div id="apBox">
            	<p>This box is absolutely positioned relative to the body of this document</p>
            <!--end apBox--></div>
        <div id="container">
            <div id="inBox">
            	<p>This box is absolutely positioned but relative to #container</p>
            <!--end inBox--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works great! Thanks. One last question though, since the container is relative does that mean if I make ANOTHER container to hold another piece of information (lets say the Copyright at the bottom of the page) that container cannot overlap the other one?

    I'm trying to do it right now and when I make a new container with the exact same dimensions and then put the copyright in the exact same position as the other text it throws it way to the right or left or wayyyy down.

    Where does a new container naturally go relative to the other if they don't overlap. (south of the other container, to the left, to the right...etc.)

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    On a side note I also realized that by using this method it works GREAT in IE....but when I use mozilla to view it all hell breaks loose.

    Any suggestions?

    Edit:

    If you go to houseonthe-hill.com you'll see what I mean. by it goes crazy.

    I've also noticed that when I use only ONE div=id inside the container it appears fine, but once I use MULTIPLE div ids within the same container it goes nuts on Firefox, but not on IE
    Last edited by Rygarfo; 12-04-2009 at 06:11 AM.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Rygarfo View Post
    On a side note I also realized that by using this method it works GREAT in IE....but when I use mozilla to view it all hell breaks loose.

    Any suggestions?

    Edit:

    If you go to houseonthe-hill.com you'll see what I mean. by it goes crazy.

    I've also noticed that when I use only ONE div=id inside the container it appears fine, but once I use MULTIPLE div ids within the same container it goes nuts on Firefox, but not on IE
    FireFox is showing you what you coded. IE 8 is showing it the same way. IE6 is doing it wrong. Check the links in my sig about validation - houseonthe-hill.com has 1001 errors.
    Also, have a look at why tables are not for layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    FireFox and IE8 ... they are not seeing your CSS file at all. Not sure what's stopping it...could be the </head> <center> tags being in the wrong order?
    IE7 displays it like you probably intended.

    Fixing as many of those errors as you possibly can is a very good start.
    Last edited by Excavator; 12-04-2009 at 09:01 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey guys, sorry I keep bothering you with dumb questions!

    Excavator, I can't seem to validate because it keeps giving me this error message.

    Sorry, I am unable to validate this document because on line 173 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

    The error was: utf8 "\xA9" does not map to Unicode


    I switched the center and head, but that doesn't seem to be the problem. I'm going to go through and try to reorganize and see if I can't catch any problems with my less than keen HTML eye.

  • #13
    New Coder
    Join Date
    Nov 2009
    Location
    Portland Oregon
    Posts
    33
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Your code for html,body is missing a closing '}', I added one as shown below, and it now displays correctly under firefox.

    Code:
    <style type="text/css">
    html, body {
        font: 100.1% "Verdana";
    }
    One suggestion, make your width 960px or so instead of 1023px, as your design doesn't currently fit on a 1024x768 screen. Horizontal scroll bars appear.

  • #14
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha, Ya I realized that error yesterday when I was going through it...can't believe it was something that simple, but it always seems to be that way.

    Do you mean change the entire layout to 960 or change the container.

  • #15
    New Coder
    Join Date
    Nov 2009
    Location
    Portland Oregon
    Posts
    33
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by Rygarfo View Post
    Do you mean change the entire layout to 960 or change the container.
    Pretty much the entire layout should by no more than 960px wide. (actually it doesn't need to be 960, but it needs to be less than 1024 to leave room for vert. scroll bars, etc.) The 960 grid is I think the most popular. A couple links:

    http://www.cameronmoll.com/archives/001220.html (reasoning behind 960)

    http://www.webdesignerdepot.com/2009...and-resources/


  •  

    Posting Permissions

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