Div wrapper with background color

  • Hello,

    I am trying to convert a pure HTML site into WordPress.

    I am using the blank theme from html5blank.com.

    Here is the original site: https://www.reinekeconstruction.com/index.html

    Here is my conversion so far: https://test.reinekeconstruction.com/

    The one thing i can’t figure out is how to get that gray background and that white container. I’m wondering if i’m not calling it in the correct place?

    Here’s my CSS:

    <style type="text/css">
body {

	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 20;
	text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

}
.oneColElsCtr #container {
	width: 46em;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	color: #333
}

.oneColElsCtr #mainContent {
	padding: 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #333;
	text-align: center;
	font-size: 80%;
}
.oneColElsCtr #container #mainContent p {
	font-size: 90%;
	font-style: italic;
}
#bullet_list {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: small;
	color: #333;
	text-align: left;
	height: 225px;
	width: 275px;
	line-height: 110%;
	float: left
	margin-left: 400px;
	clear: none;
	float: right;
	padding-top: 40px;
	padding-right: 80px;
}
#navigation_bar {
	font-family: Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	color: #333;
	background-color: #CCC;
	position: relative;
	text-align: center;
	width: 600px;
	float: left;
	padding-top: 0px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 30px;
	top: 5px;
	left: 18px;
	vertical-align: middle;
	height: 30px;
	line-height: 200%;
}
a:link {
	color: #333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #333;
}
a:hover {
	text-decoration: underline;
	color: #333;
}
a:active {
	text-decoration: none;
	color: #333;
}
#about_text {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: 333;
	text-align: justify;
}
.Name1 {
	font-family: Arial, Helvetica, sans-serif;
}
.oneColElsCtr #container #mainContent table tr th {
	font-size: small;
	font-family: Verdana, Geneva, sans-serif;
}
.oneColElsCtr #container #bullet_point_container table tr th pre {
	font-weight: bold;
	font-family: "Times New Roman", Times, serif;
	font-size: small;
}
</style>

    Thanks for your time!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi, The HTML markups need to be simpler, now there are two div with id #mainContent and there are also a few other things too. So we need to fix the markup first.

    but anyway this code will do what you what with current markup.

    body { background: gray; }

#mainContent {
	background: white;
	margin: 0 auto;
	max-width: 900px;
}

    I would just use TwentySixteen theme as a base theme, either make a new theme out of it or use it as parent and create a child theme. It’s way easier to get the site look like the original one.

    Thread Starter k80skinner

    (@k80skinner)

    Thank you for the response!

    Where should i put that piece you gave me? I tried to edit it out in a few places but nothing seemed to make the difference. Or, is there something else i need to do first before it will show?

    Thanks again!

    Did the theme’s style.css file start off as empty? Take out the first line, which has the opening style tag, and the last line, which has the closing style tag. You don’t need them because the link already indicates that it’s pointing to a stylesheet.

    By the way, you may want to reconsider your choice of themes. I know your objective is to convert from HTML over to WordPress, but a secondary objective should be to make the site mobile-friendly as well. That is, the current HTML site is not mobile friendly, because users currently have to zoom in on the site, and/or scroll sideways, when viewing on a mobile device. A mobile friendly site will rearrange itself depending upon the screen width. You can see this on a desktop browser: try changing the screen widths when you visit different sites and notice how the menu changes, and the site elements rearrange themselves.

    Many of the newer WordPress themes are responsive. There are quite a few in the WordPress theme repository. While you can make the Blank theme responsive, it will take you a lot of work, especially coding the menu so you get a mobile friendly drop-down list or a hamburger menu. Plus you’re going to have to write all of the media queries that make the site responsive.

    If you want a recommendation for a responsive theme, I like Montezuma, especially if you already know HTML & CSS. There’s a bit of a learning curve, but you can read more about it in my write-up here.

    But bottom line is that you should plan from the start to go with a responsive design, don’t build a fixed width layout and then try to make it responsive. Many, if not most, of your users are going to be accessing the site through a mobile device, and Google will downgrade non-mobile friendly sites in its search rankings.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Div wrapper with background color’ is closed to new replies.