...

View Full Version : Positioning and Styling problems! Help!



Rygarfo
12-02-2009, 09:07 AM
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.

met
12-02-2009, 10:30 AM
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

abduraooft
12-02-2009, 10:46 AM
I'd recommend you to start from reading "why tables for layout is very bad? (http://www.hotdesign.com/seybold/)"

Rygarfo
12-03-2009, 01:42 AM
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...

drhowarddrfine
12-03-2009, 02:42 AM
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.

Rygarfo
12-03-2009, 04:48 AM
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?

Excavator
12-03-2009, 06:46 AM
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.

<!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>

Rygarfo
12-04-2009, 05:05 AM
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.)

Rygarfo
12-04-2009, 06:03 AM
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

Excavator
12-04-2009, 08:37 AM
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 (http://www.hotdesign.com/seybold/everything.html).

Excavator
12-04-2009, 08:59 AM
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.

Rygarfo
12-05-2009, 02:46 AM
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.

dougnbr
12-05-2009, 04:07 AM
Your code for html,body is missing a closing '}', I added one as shown below, and it now displays correctly under firefox.


<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.

Rygarfo
12-06-2009, 02:19 AM
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.

dougnbr
12-06-2009, 06:25 PM
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/05/the-960-grid-system-toolbox-and-resources/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum