[RESOLVED] Div Layout Structure Not Working - HTML Forums

Nigel1985 · 10-30-2009, 05:53 PM

I have always used tables to design a site layout. I'm trying to switch over to <div> and am having trouble. Can someone take a peek at my code and make sure its right? I can't get the two elements to align center when i use the margin-left / right: auto.

Also, when I change the padding to 10px in any element it shifts that entire element out +10px, why is it doing this?

Visually the site should look like this http://www.marcypevaroffhoward.com/ but using divs not tables

Also, I'm trying to have it a fixed width but a scalable height (so if content runs long the page will extend further down)

thanks!

Code:

@charset "UTF-8";
/* CSS Document */

body {
margin: 0px;
padding: 0px;
}

#top {
width:916px;
height:28px;
}

#stockphoto {
width:916px;
height:421px;
}

#nav {
width:916px;
height:63px;
}

#div_top {
width:916px;
height:11px;
}

#div_left {
float:left;
width:10px;
}

#content_top {
width:537px;
font-size:12px;
color:#363636;
padding:10px;
}

#content_right {
width:358px;
}

#div_right {
float:left;
width:11px;
}

#div_middle {
clear:left;
width:537px;
height:1px;
}

#content_bottom {
width:537px;
}

#div_bottom {
width:916;
height:11px;
}

#bottom {
clear:left;
width:916;
height:55px;
}

table.content {
}

Code:

<!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>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Marcy Pevaroff Howard - Legal and Mediation Services</title>
</head>
<body bgcolor="#7f9dbe">
<div id="top"><img src="images/top.gif" /></div>
<div id="stockphoto"><img src="images/stockphoto.jpg" /></div>
<div id="nav"><img src="images/nav.gif" /></div>
<div id="div_top"><img src="images/div_top.gif" /></div>
<table class="content" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="3"><div id="div_left"><img src="images/div_left.gif" /></div></td>
    <td id="content_top" background="images/content_top.gif" />Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque semper ornare mi, in dapibus nulla sodales ut. Quisque nec lacus nisi. Proin vitae ligula a sem euismod ultricies id adipiscing nulla.</td>
    <td rowspan="3" id="content_right" background="images/content_right.gif" /></td>
    <td rowspan="3"><div id="div_right"><img src="images/div_right.gif" /></div></td>
  </tr>
  <tr>
    <td><div id="div_middle"><img src="images/div_middle.gif" /></div></td>
  </tr>
  <tr>
    <td id="content_bottom" background="images/content_bottom.gif" />&nbsp;</td>
  </tr>
</table>
<div id="div_bottom"><img src="images/div_bottom.gif" /></div>
<div id="bottom"><img src="images/bottom.gif" /></div>
</body>
</html>

Nigel1985 · 10-30-2009, 06:28 PM

rather use these codes... I'm still having a padding issue...

Code:

@charset "UTF-8";
/* CSS Document */

body {
margin:0px;
padding:0px;
}

#header, #nav, #footer {
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:916px;
}

#content {
margin-left:auto;
margin-right:auto;
width:916px;
color:#363636;
font-size:12px;
}

.content {
padding:10px;
}

Code:

<!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>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Marcy Pevaroff Howard - Legal and Mediation Services</title>
</head>
<body bgcolor="#7f9dbe">
<div id="header">
<img src="images/top.gif" />
<img src="images/stockphoto.jpg" /></div>
<div id="nav">
<img src="images/nav.gif" />
<img src="images/div_top.gif" /></div>
<div id="content">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="3"><img src="images/div_left.gif" /></td>
    <td class="content" background="images/content_top.gif" width="537" />Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque semper ornare mi, in dapibus nulla sodales ut. Quisque nec lacus nisi. Proin vitae ligula a sem euismod ultricies id adipiscing nulla.</td>
    <td rowspan="3" background="images/content_right.gif" width="360" /></td>
    <td rowspan="3"><img src="images/div_right.gif" /></td>
  </tr>
  <tr>
    <td><img src="images/div_middle.gif" /></td>
  </tr>
  <tr>
    <td background="images/content_bottom.gif" width="537"/></td>
  </tr>
</table></div>
<div id="footer">
<img src="images/div_bottom.gif" />
<img src="images/bottom.gif" /></div>
</body>
</html>

coothead · 10-30-2009, 08:34 PM

Hi there Nigel1985,

check out the attachment for a reworking of your page.

Nigel1985 · 11-01-2009, 02:05 PM

Hi, thanks so much for the code. Put me on the right track. But, not I'm back.

I've created a css rollover menu and it all works great except one button. It displays "home, home, services, contact" instead of "home, about, services, contact"

But what I dont understand is the images are right and the rollover works, just not the default image. Can someone help? http://marcypevaroffhoward.com/

Code:

* {
    margin:0;
    padding:0;
    list-style-type:none;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:100%;
 }
img  {
   display:block;
 }
body {
    margin:28px 0;
    background-color:#7f9dbe;
 }
#container {
    border-top:1px solid #d9efff;
	border-bottom:1px solid #d9efff;
    width:916px;
    margin:auto;
 }
#stockphoto {
    width:916px;
    height:421px;
 }
 
#header {
	width:916px;
	height:63px;
	}

#logo {
    width:428px;
	height:63px;
	float:left;
 }
 
#nav {
	width:488px;
	height:63px;
	overflow:hidden;
	}
	
ul.menu {
	list-style: none;
	padding: 0px;
	}

ul.menu li {
	float: left;
	}

ul.menu li a {
	display: block;
	width: 122px;
	height: 63px;
	background: url('../images/nav.gif');
	}
	
span {
	display:none;
	}

ul.menu li.home a {
	background-position: 0 0;
	}

ul.meny li.about a {
	background-position: -122px 0;
	}

ul.menu li.services a {
	background-position: -244px 0;
	}
	
ul.menu li.contact a {
	background-position: -366px 0;
	}

ul.menu li.home a:hover {
	background-position: 0 -63px;
	}

ul.menu li.about a:hover {
	background-position: -122px -63px;
	}

ul.menu li.services a:hover {
	background-position: -244px -63px;
	}
	
ul.menu li.contact a:hover {
	background-position: -366px -63px;
	}

#content {
    clear:both;
    height:1%;
    border-top:11px solid #ffffff;
    border-right:9px solid #ffffff;
    border-bottom:11px solid #ffffff;
    border-left:9px solid #ffffff;
    background-image:url(../images/contentBg.jpg);
    overflow:hidden;
 }
#content p, table {
	padding:10px;
	font-size:10px;
	color:#363636;
 }
#left_column {
    float:left;
    width:553px; 
    margin-right:2px;
 }
#left_column_bottom {
    border-top:1px solid #d9efff;
    background-color:#c0cfdf;
 }
#right_column {
    float:left;
    width:343px;
 }

Code:

<!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=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Marcy Pevaroff Howard - Legal and Mediation Services</title>

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

</head>
<body>

<div id="container">

<img id="stockphoto" src="images/stockphoto.jpg" alt="">

<div id="header">

<div id="logo">
<img src="images/logo.gif" alt="">
</div> <!-- End #logo -->

<div id="nav">
<ul class="menu">
 <li class="home"><a href="#"><span>HOME</span></a></li>
 <li class="about"><a href="#"><span>ABOUT</span></a></li>
 <li class="services"><a href="#"><span>SERVICES</span></a></li>
 <li class="contact"><a href="#"><span>CONTACT</span></a></li>
</ul>
</div> <!-- End #nav -->
</div> <!-- End #header -->

<div id="content">

<div id="left_column">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>

<div id="left_column_bottom">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div><!-- end #left_column_bottom -->

</div><!-- end #left_column -->

<div id="right_column">
<table border="0" cellpadding="0" cellspacing="0" width="343">
  <tr>
    <td><form action="mail.php" method="POST"><b>NAME:</b></td>
    <td><input type="text" name="name" size="37"></td>
  </tr>
  <tr>
    <td><b>PHONE:</b></td>
    <td><input type="text" name="phone" size="37"></td>
  </tr>
  <tr>
     <td background="images/square.gif"><b>EMAIL:</b></td>
     <td background="images/square.gif"><input type="text" name="email" size="37"></td>
  </tr>
  <tr>
     <td background="images/square.gif"><b>MESSAGE:</b></td>
     <td background="images/square.gif"><textarea cols="34" rows="8" name="message" ></textarea></td>
  </tr>
  <tr>
     <td background="images/square.gif">&nbsp;</td>
     <td background="images/square.gif" valign="top"><input type="reset" value=" Reset "><input type="submit" value=" Send " onmousemove='date.value=this.form.orderdate.value'></form></td>
   </tr>
</table>
</div><!-- end #right_column -->

</div><!-- end #content -->

</div><!-- end #container -->

</body>
</html>

Excavator · 11-01-2009, 02:31 PM

ul.meny li.about a {
background-position: -122px 0;
}

Looks like you missspelled menu.

coothead · 11-01-2009, 03:30 PM

Hi there Nigel1985,

Quote:

I have always used tables to design a site layout.
I'm trying to switch over to <div> and am having trouble.

I see from your latest post that the urge to use them has, unfortunately, not been fully overcome.

Also note that some errors have crept into your coding...

http://validator.w3.org/check?verbos...fhoward.com%2F

Check out the attachment for the cure to these problems.

Nigel1985 · 11-09-2009, 10:50 AM

Hi,

Thank you so much. I understand why div tags are more practical than the table tag for layout design. But, does that mean <table> is deprecated and shouldn't be used? When IS it ok to use a table tag?

coothead · 11-09-2009, 11:10 AM

Hi there Nigel1985,

the table element is certainly not deprecated.

It should be used for the display of tabular data.

Perhaps, this link may help your understanding of it's correct use...

http://webdesign.about.com/od/tables/a/aa122605.htm

Nigel1985 · 11-09-2009, 01:48 PM

Annnnd another question (or two!)
1) Why was the #nav ul {list-style} removed? I thought this was necessary to remove the bullet navigation
2) If I delete the <span> tag, the menu text names no longer appear, why?
3) If I define a new span tag something like #content p span {font-weight:bold;} why does that cause my text to disappear?

I'm still learning to use divs instead of tables so THANKS for your help!

Code:

* {
    margin:0;
    padding:0;
    list-style-type:none;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:10px;
 }
img  {
   display:block;
 }
body {
    margin:28px 0;
	background-color:#7f9dbe;
 }
#container {
    border-top:1px solid #d9efff;
	border-bottom:1px solid #d9efff;
    width:916px;
    margin:auto;
 }
#stockphoto {
    width:916px;
    height:368px;
 }
#nav {
	height:63px;
	padding-left:428px;
    background-image:url(../images/logo.gif);
    background-repeat:no-repeat;
	}
# nav ul {
	list-style:none;
	}
#nav li {
	float: left;
	}
#nav li a {
	display:block;
	width: 122px;
	height: 63px;
	background-image: url(../images/nav.gif);
	}
#nav span {
	display:none;
	}
#home {
	background-position: 0 0;
	}
#about {
	background-position: -122px 0;
	}
#services {
	background-position: -244px 0;
	}
#contact {
	background-position: -366px 0;
	}
#home:hover {
	background-position: 0 -63px;
	}
#about:hover {
	background-position: -122px -63px;
	}
#services:hover {
	background-position: -244px -63px;
	}
#contact:hover {
	background-position: -366px -63px;
	}
#content {
    clear:both;
    height:1%;
    border-top:11px solid #ffffff;
    border-right:9px solid #ffffff;
    border-bottom:11px solid #ffffff;
    border-left:9px solid #ffffff;
    background-image:url(../images/contentBg.jpg);
    overflow:hidden;
 }
#content p {
	padding:10px;
	font-size:10px;
	color:#363636;
 }
#left_column {
    float:left;
	width:553px; 
    margin-right:2px;
 }
#left_column_bottom {
    border-top:1px solid #d9efff;
	clear:both;
	background-color:#c0cfdf;
 }
#right_column {
    float:left;
	width:343px;
 }
 #contactform {
    width:285px;
    margin:20px;
    font-size:10px;
 }
#contactform label {
    float:left;
    clear:both;
    width:75px;
	color:#363636;
    margin-bottom:6px;
 }
#contactform .text {
    float:left;
    width:200px;
    margin-bottom:6px;
 }
#contactform .area {
    height:114px;
    overflow:auto;
 }
#contactform #buttons {
    clear:both;
    padding-left:75px;
 }
 #title {
 	font-weight:bold;
	}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Marcy Pevaroff Howard - Legal and Mediation Services</title>

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

</head>
<body>

<div id="container">

<img id="stockphoto" src="images/about.jpg" alt="">

<ul id="nav">
 <li><a id="home" href="index.html"><span>HOME</span></a></li>
 <li><a id="about" href="about.html"><span>ABOUT</span></a></li>
 <li><a id="services" href="services.html"><span>SERVICES</span></a></li>
 <li><a id="contact" href="contact.html"><span>CONTACT</span></a></li>
</ul>

<div id="content">

<div id="left_column">
<p>
<span id="title">Training</span>
</p>
<div id="left_column_bottom">
<p>
Legal Background
</p>
</div><!-- end #left_column_bottom -->

</div><!-- end #left_column -->

<div id="right_column">

</div><!-- end #right_column -->

</div><!-- end #content -->

</div><!-- end #container -->

<div id="footer">
<ul class="evankalman">
 <li><a href="http://www.evankalman.com"><span>Designed by EvanKalman</span></a></li>
</ul>
</div><!-- end #sitedesign -->
</body>
</html>

coothead · 11-09-2009, 06:26 PM

Hi there Nigel1985,

1. the list-style-type:none has been placed here...

Code:

* {
    margin:0;
    padding:0;
    list-style-type:none;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:10px;
 }

...and will remove the bullet from all ul elements in the document.

3. I don't really understand this question. Can we see this in action with a link to your site?

2. I don't really understand this question. Can we see this in action with a link to your site?

Nigel1985 · 11-09-2009, 07:20 PM

Hi,
1) Thanks! Missed that..
2) I deleted #nav span {display:none;} from my main.css but the navigation is not showing the text between the span tags (i.e. Home, About, Services, Contact) that normally appears as a regular hyperlink over the image
3)I added a span tag on the first few words in my top left column
<span id="title">Lorem ipsum</span> but it makes this text vanish. the css is
#title {font-weight:bold;}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Marcy Pevaroff Howard - Legal and Mediation Services</title>

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

</head>
<body>

<div id="container">

<img id="stockphoto" src="images/home.jpg" alt="">

<ul id="nav">
 <li><a id="home" href="index.html"><span>HOME</span></a></li>
 <li><a id="about" href="about.html"><span>ABOUT</span></a></li>
 <li><a id="services" href="services.html"><span>SERVICES</span></a></li>
 <li><a id="contact" href="contact.html"><span>CONTACT</span></a></li>
</ul>

<div id="content">

<div id="left_column">
<p>
<span id="title">Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
<div id="left_column_bottom">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p>
</div><!-- end #left_column_bottom -->

</div><!-- end #left_column -->

<div id="right_column">

</div><!-- end #right_column -->

</div><!-- end #content -->

</div><!-- end #container -->

<div id="footer">
<ul class="evankalman">
 <li><a href="http://www.evankalman.com"><span>Designed by EvanKalman</span></a></li>
</ul>
</div><!-- end #sitedesign -->
</body>
</html>

Code:

* {
    margin:0;
    padding:0;
    list-style-type:none;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:100%;
	}
img {
	display:block;
	}
body {
    margin:28px 0;
	background-color:#7f9dbe;
	}
#container {
    border-top:1px solid #d9efff;
	border-bottom:1px solid #d9efff;
    width:916px;
    margin:auto;
	}
#stockphoto {
    width:916px;
    height:368px;
	}
#nav {
    height:63px;
    padding-left:428px;
    background-image:url(../images/logo.gif);
    background-repeat:no-repeat;
	}
#nav li {
	float:left;
	}
#nav a {
	display:block;
	height:63px;
	background-image: url(../images/nav.gif);
	}

#home {
	width:122px;
	background-position: 0 0;
	}
#home:hover {
	background-position: 0 -63px;
	}
#about {
	width:122px;
	background-position: -122px 0;
	}
#about:hover {
	background-position: -122px -63px;
	}
#services {
	width:122px;
	background-position: -244px 0;
	}
#services:hover {
	background-position: -244px -63px;
	}
#contact {
	width:122px;
	background-position: -366px 0;
	}
#contact:hover {
	background-position: -366px -63px;
	}
#content {
    clear:both;
    height:1%;
    border-top:11px solid #ffffff;
    border-right:9px solid #ffffff;
    border-bottom:11px solid #ffffff;
    border-left:9px solid #ffffff;
    background-image:url(../images/contentBg.jpg);
    overflow:hidden;
 	}
#content p {
	padding:10px;
	font-size:10px;
	color:#363636;
 	}
#left_column {
    float:left;
	width:553px; 
    margin-right:2px;
 	}
#left_column_bottom {
    border-top:1px solid #d9efff;
	clear:both;
	background-color:#c0cfdf;
 	}
#right_column {
    float:left;
	width:343px;
	}
 #contactform {
    width:285px;
    margin:20px;
    font-size:10px;
 	}
#contactform label {
    float:left;
    clear:both;
    width:75px;
	color:#363636;
    margin-bottom:6px;
 	}
#contactform .text {
    float:left;
    width:200px;
    margin-bottom:6px;
 	}
#contactform .area {
    height:114px;
    overflow:auto;
 	}
#contactform #buttons {
    clear:both;
    padding-left:75px;
 	}
 #title {
 	font-weight:bold;
	}

coothead · 11-09-2009, 07:43 PM

Hi there Nigel1985,

2. If I remove...

Code:

#nav span {
    display:none;
 }

from the stylesheet, I see...

HOME, ABOUT, SERVICES and CONTACT

...as expected.

3. If I add...

Code:

#title {
    font-weight:bold;
}

to the stylesheet and...

Code:

<span id="title">Lorem ipsum</span>

...to the...

<div id="left_column">

...I see the text in bold, as expected.

If you are getting different results to mine, put the page on your server so that we can observe it also.

Nigel1985 · 11-09-2009, 07:46 PM

Hi, the css and code is on my server www.marcypevaroffhoward.com

Nigel1985 · 11-09-2009, 07:52 PM

Hi, sorry I figured it out. Another spreadsheet was interfering with the <span> tags. D'oh!

Thanks again and apologies for the obvious fix!

Nigel1985 · 11-09-2009, 08:49 PM

Oh boy. I was adding content and I noticed that when I delete the lorem ipsum text from a page, the entire site shifts over roughly 10 px. Do you know why? Check out the index.html vs the services.html at www.marcypevaroffhoward.com

Thanks!