/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Help with Code

Copy linkTweet thisAlerts:
Feb 26.2009

Here is the code to my new website, and im getting weird distortions when i add the footer div at the end. Anyone know why?

[code=html]<!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” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”Toronto Real Estate Agent – Conrad Rygier” />
<meta name=”keywords” content=”real estate, toronto, buying, selling, lease, rental, condo, bloor west, high park, lakefront, downtown, for sale, for lease, for rent” />
<meta name=”author” content=”Conrad Rygier” />
<link rel=”stylesheet” type=”text/css” href=”real_estate_toronto.css” media=”screen,projection” />
<title>Living In My Toronto – Real Estate Agent – Conrad Rygier</title>
</head>

<body>
<div id=”layout”>

<div id=”buttons”>
<div id=”bt_home”><a href=”main_real_estate_toronto.html”></a></div>
<div id=”bt_buy”><a href=”buying_real_estate_toronto.html”></a></div>
<div id=”bt_sell”><a href=”selling_real_estate_toronto.html”></a></div>
<div id=”bt_lease”><a href=”leasing_real_estate_toronto.html”></a></div>
<div id=”bt_listings”><a href=”listings_real_estate_toronto.html”></a></div>
<div id=”bt_contact”><a href=”contact_real_estate_toronto.html”></a></div>

</div>

<div id=”content_left”>

</div>

<div id=”content_right”>
</div>

<div id=”living_logo”>
<a href=”main_real_estate_toronto.html”><img src=”images/living_logo.jpg” alt=”Living In My Toronto” /></a>
</div>

<div id=”sutton_logo”>
<a target=”_blank” href=”http://www.sutton.com/”><img src=”images/sutton_logo.jpg” alt=”sutton logo” /></a>
</div>

<div id=”sig_photo”><img src=”images/signature.jpg” alt=”Conrad Rygier” /></div>
<div id=”signature”><b>Cell:</b> xxx-xxx-xxxx &nbsp;&nbsp;&nbsp;<a href=”mailto: [email]xxx123xxx-at-gmail.com[/email]?subject=Real Estate Web Inquiry” title=”xxx123xxx-at-gmail.com”><b>Email Me</b></a></div>

<div id=”footer”>
<p>Copyright &copy; 2009 Conrad Rygier | Designed by <a href=”mailto: [email]xx123xx321-at-gmail.com[/email]?subject= Real Estate Website Design Inquiry”>Conrad Rygier</a></p>
</div>

</div>
</body>
</html>[/code]

(edited by WebJoel: be mindful that whatever you post here in a ‘public forum’ gets indexed by spiders/’bots, Google, etc. and becomes part of the permanent web… this includes your e-mail address and phone number -which I removed – ) ?

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@vio1authorFeb 26.2009 — Here is the css file

[code=html]
@charset "utf-8";
/* CSS Document */

body {
background-color:#262624;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color: #FFFFFF;
}

#layout {
position:absolute;
background:url(images/main_page_jpg.jpg) no-repeat center;
width:990px;
height:580px;
text-align:left;
top:0px;
left:50&#37;;
margin-left:-495px;
}

#buttons {
position:absolute;
width:118px;
height:500px;
top:92px;
left:4px;
}

#content_left {
position:absolute;
width:591px;
height:346px;
top:140px;
left:148px;
}

#content_right {
position:absolute;
width:163px;
height:346px;
top:140px;
right:48px;
}

#living_logo {
position:absolute;
width:355px;
height:60px;
top:505px;
right:16px;
}

#sutton_logo {
position:absolute;
width:270px;
height:88px;
top:1px;
right:0px;
padding:0px;
margin:0px;

}

#signature {
position:absolute;
width:450px;
height:30px;
top:534px;
left:149px;
font-size:90%;
margin:5px 0px 0px 3px;
}

#sig_photo {
position:absolute;
width:292px;
height:41px;
padding:0px;
top:493px;
left:149px;

}
img {
border-style:none;
}

sig_left {
float:left;
}

a {
text-decoration:none;
color:#FFFFFF;
}

a:hover {
text-decoration:underline;
}

#footer, #footer a {
position:absolute;
font-size:50%;
color:#1b1b1b;
left:0px;
top:570px;
width:990px;
text-align:center;
height:5px;
margin:0px;
padding:0px;
}

/* BUTTONS */

#buttons a {
display:block;
width:118px;
height:83px;
margin:0px;
}

#buttons a:hover {
background-position:0px -83px;
text-decoration:none;
}

#buttons a:active {
background-position:0px -166px;
}

#bt_home a, #bt_home a:hover, #bt_home a:active {
background:url(images/buttons/bt_home.jpg) 0 0 no-repeat;
height:56px;

}

#bt_buy a {
background: url(images/buttons/bt_buy.jpg) 0 0 no-repeat;
}

#bt_sell a {
background: url(images/buttons/bt_sell.jpg) 0 0 no-repeat;
}

#bt_lease a {
background: url(images/buttons/bt_lease.jpg) 0 0 no-repeat;
}

#bt_listings a {
background: url(images/buttons/bt_listings.jpg) 0 0 no-repeat;
}

#bt_contact a {
background: url(images/buttons/bt_contact.jpg) 0 0 no-repeat;
}[/code]
Copy linkTweet thisAlerts:
@WebJoelFeb 26.2009 — omg ?


....

#layout {

[B]position:absolute;[/B]

background:url(images/main_page_jpg.jpg) no-repeat center;

width:990px;

height:580px;

text-align:left;

top:0px;

left:50&#37;;

margin-left:-495px;

}

....[/QUOTE] EVERYTHING here is "position:absolute;" which exerts no 'pressure' against anything, causing overlaps and distortion. The only way you can use "position:absolute;" on an element is if the element in inside of another element with "position:relative;" and/or you want/expect the "absolute" element to either overlap, or move about the page (such as a 'draggable' element like an image, etc.)

Every one of the "position:absolute;" used on elements are unnecessary and superfluous. They should be "position:relative;" (or the default "position:static;") and let the content 'flow' upwards against its parent, or predecessor element.

This page is 'ice', -if you make your resolution less-than 1024-px wide, you get a horizontal scrollbar... typical of 'absolute' and ice layout. You want either 'fluid' or 'jello' layout; a layout that will resize down (or up!) to accommodate the user's monitor.

This is all 100% salvageable mind you, but between this and the somewhat bloated code which could be reduced about 50%, it will take a little bit or a re-work (and several cups of coffee) ?

While not required to figure this out, "absolute path" to URLs would be helpful, so as to show the images being used, etc.
#layout {

position:absolute;

background:url([B]images/main_page_jpg.jpg[/B]) no-repeat center;

width:990px;

height:580px;

text-align:left;

top:0px;

left:50%;

margin-left:-495px;

}[/QUOTE] This is a [B]relative path[/B], and thus, is not being shown to me locally ?
Copy linkTweet thisAlerts:
@vio1authorFeb 26.2009 — Its just for a computer screen. I saw someone else use "projection screen" so i thought it was a good idea to keep it in there.
×

Success!

Help @vio1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...