Jump to content
UncleStef Mentoring Update: New SEO course!

I need Help

Guest A_Sexton

By Guest A_Sexton
in Beginners Web Design

 Share

Recommended Posts

Guest A_Sexton

Guest A_Sexton

Posted
Posted

I have designed a site using the coplete web designer video tutorials. The web site address is http://www.fmoutlet.net the problem I am having is the bottom right div lines up perfectly on my screen when I view the page. However when other people look at it the dive I have mentioned is way out of place and I dont know how to fix it. Here is my source code for the page. Please help me understand what is hapening as I have stated the site looks fine when I look at it.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Furniture Matress Outlet</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

 

<body>

<div id="wrapper">

 

<div id="header"><img src="images/fmologo.png" width="297" height="206" alt="logo" /></div><!--ends header-->

 

<div id="nav">

<a href="web/about.html">about</a>

<a href="web/contact.html">contact</a>

<a href="web/map.html">map</a>

<a href="catalog/index.php">catalog</a>

<a href="web/support.html">support</a>

<a href="index.html">home</a></div><!--ends nav-->

 

<div id="leftad1">

<p>Queen Pillow Top with Memory Foam Starting at</p>

<h1>$399.00</h1>

<img src="images/homepage/cutlass_silver.jpg" width="150" height="118" />

<h2> regularly $499.00

</h2>

</div><!--ends leftad1-->

 

<div id="main">

<h1>We have the LARGEST selection of MATTRESSES in the area. </h1>

<h2>20 different mattress sets in our Sleep Gallery.</h2>

<img src="images/homepage/humphrey.jpg" width="300" height="199" />

<p class="italic">Where style is Affordable.</p>

</div><!--ends main-->

 

<div id="rightad1">

<p>King Pillow Top With Memory Foam Starting At</p>

<h1>$599.00</h1>

<img src="images/homepage/diana.jpg" width="150" height="119" />

<h2>Regularly $649</h2>

</div>

<!--ends rightad1-->

<div id="leftad2">

<h1>Over 40 different living room groups in stock</h1>

<img src="images/homepage/livingroom.jpg" width="280" height="185" class="ladd2" /></div><!--ends leftad2-->

<div id="centerad">

<h1>recliners Starting at</h1>

<h2>$199.00</h2>

<img src="images/homepage/recliner.jpg" width="280" height="289" /> </div><!--ends centerad-->

 

<div id="rightad2">

<h1>Table sets, lamps, & home decor for every style</h1>

<img src="images/homepage/tables.jpg" width="280" height="233" class="radd2" /></div><!--ends rightad2-->

 

<div id="footer"></div>

<!--ends footer-->

 

<div id="lowernav">

<a href="web/about.html">about</a>

<a href="web/contact.html">contact</a> <a href="web/map.html">map</a>

<a href="catalog/index.php">catalog</a>

<a href="web/support.html">support</a>

<a href="index.html">home</a></div><!--ends lowernav-->

 

</div><!--ends wrapper-->

</body>

</html>

 

 

 

 

I will enter the css here. I know it is ugly looking but it is my first time trying to use css.

 

@charset "utf-8";

body {

background-color: #000;

text-align: center;

}

* {

margin: 0px;

padding: 0px;

}

#header {

background-image: url(../images/marble.gif);

height: 216px;

}

#lowernav {

text-align: center;

padding-top: 10px;

padding-bottom: 10px;

text-transform: uppercase;

word-spacing: 10px;

clear: both;

background-color: #000;

}

.ladd2 {

padding-bottom: 98px;

text-align: center;

}

.radd2 {

padding-bottom: 50px;

text-align: center;

}

 

 

#lowernav a {

font-size: 16px;

color: #FC0;

}

 

#header img {

float: left;

padding-top: 10px;

padding-left: 10px;

}

#wrapper {

width: 900px;

margin-right: auto;

margin-left: auto;

appearance: workspace;

background-color: #FFF;

}

#leftad2 {

background-color: #FFF;

width: 297px;

text-align: center;

float: left;

border-right-width: 3px;

border-right-style: solid;

border-right-color: #00F;

}

#leftad2 p {

font-size: 20px;

font-weight: bold;

text-transform: capitalize;

padding-top: 65px;

}

#rightad2 p {

font-size: 20px;

font-weight: bold;

text-transform: capitalize;

padding-top: 40px;

}

 

#centerad {

background-color: #FFF;

float: left;

width: 300px;

}

 

 

#leftad1 {

float: left;

width: 150px;

background-color: #FFF;

}

#rightad2 {

background-color: #FFF;

float: right;

width: 297px;

border-left-width: 3px;

border-left-style: solid;

border-left-color: #00F;

}

 

#nav {

background-color: #000;

text-align: center;

padding-top: 10px;

padding-bottom: 10px;

}

#nav a {

font-size: 18px;

text-transform: uppercase;

color: #FC0;

margin-right: 5px;

margin-left: 5px;

text-decoration: none;

}

#nav a:link, a:visited {

color: #FC0;

text-decoration: none;

}

#nav a:hover, a:active {

color: #FFF;

background-color: #333;

margin-right: 5px;

margin-left: 5px;

padding-top: 10px;

padding-bottom: 10px;

}

#leftad1 {

text-align: center;

float: left;

width: 160px;

background-color: #FFF;

border-right-width: 3px;

border-right-color: #00F;

border-bottom-width: 3px;

border-bottom-color: #00F;

border-right-style: solid;

border-bottom-style: solid;

height: 387px;

}

#leftad2 h1 {

font-size: 20px;

font-weight: bold;

text-transform: capitalize;

padding-top: 50px;

padding-bottom: 10px;

text-align: center;

padding-right: 10px;

padding-left: 10px;

}

#rightad2 h1 {

font-size: 20px;

font-weight: bold;

text-transform: capitalize;

padding-top: 50px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

}

#centerad h2 {

font-size: 32px;

color: #F00;

text-align: center;

}

#centerad h1 {

}

 

#leftad1 p {

font-size: 17px;

font-weight: bold;

text-transform: capitalize;

padding-top: 65px;

}

#rightad1 p {

font-size: 17px;

font-weight: bold;

text-transform: capitalize;

padding-top: 65px;

}

 

#leftad1 h1 {

font-size: 20px;

font-weight: bold;

color: #F00;

padding-bottom: 10px;

}

 

#rightad1 h1 {

font-size: 20px;

font-weight: bold;

color: #F00;

padding-bottom: 10px;

}

#centerad p {

font-size: 20px;

font-weight: bold;

text-transform: capitalize;

color: #000;

padding-top: 10px;

}

#centerad h1 {

font-size: 24px;

font-weight: bold;

text-transform: capitalize;

color: #000;

padding-top: 20px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

text-align: center;

}

 

#rightad1 h2 {

font-size: 14px;

font-weight: bold;

text-transform: capitalize;

color: #000;

padding-top: 10px;

padding-bottom: 10px;

}

 

 

#leftad1 h2 {

font-size: 14px;

font-weight: bold;

text-transform: capitalize;

color: #000;

padding-bottom: 10px;

padding-top: 10px;

}

 

 

#main {

background-color: #FFF;

float: left;

width: 574px;

border-bottom-width: 3px;

border-bottom-style: solid;

border-bottom-color: #00F;

}

#main h1 {

font-size: 36px;

color: #F00;

padding-top: 10px;

padding-bottom: 10px;

}

#main h2 {

color: #000;

padding-bottom: 10px;

}

.italic {

font-size: 24px;

font-style: italic;

color: #00F;

text-decoration: blink;

padding-top: 10px;

padding-bottom: 10px;

}

 

 

#rightad1 {

background-color: #FFF;

text-align: center;

float: right;

width: 160px;

border-bottom-width: 3px;

border-left-width: 3px;

border-bottom-style: solid;

border-left-style: solid;

border-bottom-color: #00F;

border-left-color: #00F;

height: 387px;

}

#footer {

background-image: url(../images/marble.gif);

text-align: center;

clear: both;

height: 100px;

}

#main h3 {

font-size: 24px;

font-weight: bold;

padding: 25px;

}

#rightad {

float: right;

width: 150px;

background-color: #FFF;

}

#mainall {

background-color: #FFF;

width: 600px;

float: left;

text-align: left;

}

#leftad {

background-color: #FFF;

text-align: center;

float: left;

width: 150px;

}

#mainall h1 {

font-size: 23px;

padding-top: 15px;

padding-right: 10px;

padding-bottom: 10px;

padding-left: 10px;

}

#mainall iframe {

padding-top: 10px;

padding-bottom: 10px;

padding-left: 87px;

}

.lradd {

padding-top: 49px;

padding-bottom: 50px;

}

.lradd1 {

padding-top: 33px;

padding-bottom: 32px;

}

.h1left {

font-size: 70px;

text-align: left;

text-transform: uppercase;

padding-top: 10px;

font-family: Arial, Helvetica, sans-serif;

}

.left {

float: left;

clear: left;

}

#mainall #form1 {

text-align: left;

padding-right: 20px;

padding-left: 20px;

background-color: #CCC;

}

.lradd2 {

padding-top: 75px;

background-color: #000;

}

 

input {

display: block;

}

.centeralign {

text-align: center;

}

Guest A_Sexton

Guest A_Sexton

Posted
Posted

I did all the changes you suggested but I am unable to tell if it worked could you look and tell me if the site lines up now thanks. The address is http://www.fmoutlet.net thanks. From what i am told that did not fix the problem the bottom right div named rigthad2 is still out of place from what they are telling me it appears to be to the right but it is under the centerad or one line down from where it should be.

newseed Newbie

newseed

Posted
Posted (edited)

I checked the width for each of those divs and found that it equals the width of your wrapper which also includes the border widths. I see the page render correctly via IE9, IE8 & IE7, Firefox, Safari and Chrome running Windows 7.

 

Since you and I do not see the problem maybe you should ask the person that is having issue what he is viewing it on. What OS? What browser? Have him send a screen capture as well.

Edited by Eddie
Guest A_Sexton

Guest A_Sexton

Posted
Posted

They are running windows 7 and ie8. The only difference from me to them is the screen resolution one of them is set really high at 1900 something and the others are at 1024x768. I am going to thier residence today to see if clearing thier cache fixes the problem.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...