Forums

johnjf

I'm having trouble keeping the text in the small boxes and in the main content area. How would I go about's fixing this problem? go to first-aidtraining.ca

Also the client selected and h2 heading for there text and it all comes out the same as the title, how can I fix this so when they pick an h2 heading for there text it doesn't come out the same as the titles? I'm using wordpress.

kgscott284

Try this bud...also, for your h2, you just need to locate the css and change it...

The following link has the HTML and CSS you need to fix the box issue...BUT i only fixed one box...If you want i will help you fix the other two boxes as well, just let me know...

http://jsfiddle.net/pseud0cool/ZzMfb/

xpy

Box two needs spaces before and after so the words can wrap...

johnjf

I tried adding the code in and nothing happened. Not sure which of my code I need to remove for it to take affect but here is what my css looks like after trying to fiddle with it. I'm going to have to clean it up abit.

html {
	background: url(images/main_bg.jpg) repeat;
}

body {
	color: #626262;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
}

p {
	color: #626262;
	line-height: 21px;
	padding:5px 5px 10px;
}

h2 {
	color: #363era;
	font-size: 30px;
}

ul {
	font-size: 12px;
	list-style-type: disc;
	list-style-position: inside;
	padding: 10px;
	display: block;
}

#container {
	margin: 0 auto;
	width: 921px;
	text-align: left;
}

#header {
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
}

#header h1 {
	text-indent: -9999px;
	background: url(images/logo.png) no-repeat;
}

#header small {
	color: #a3a3a3;
	position: absolute;
	font-size: 14px;
	top: .63em;
	left: 403px;
}

#nav_main {
	background: url(images/navbg.png) repeat-x;
	overflow: hidden;
	height: 57px;
	margin: 0 auto;
	padding: 0 0 0 10px;
	border-bottom: 1px solid #CCC;
}

#nav_main li {
	background: url(images/hover_a.png) no-repeat;
	display: block;
	font: italic bold 16px monaco, sans-serif;
	text-align: center;
	float: left;
	line-height: 48px;
	list-style-type: none;
    	margin: 5px auto;
}

#nav_main li a {
	text-decoration: none;
	color: #413f3e;
	width: 115px;
	height: 45px;
    	margin: 0 auto;
    	float: left;

}

#nav_main li a:hover {
	background: url(images/hover_b.png) no-repeat;
}


#banner {
	float:left;
	background: url(images/bannerbg.png) no-repeat #9a131a;
	height: 243px;
	position: relative;
	margin-bottom: 0px;
}

#welcome {
	float: left;
	width: 521px;
}

#welcome h1 {
	font-size: 25px;
	margin-left: 30px;
	margin-right: 28px;
	margin-bottom: 0;
	margin-top: 20px;
	color: #ffffff;
	border-bottom: 1px dashed #CCC;
}

#welcome p {
	margin-left: 30px;
	margin-right: 5px;
	color: #ececec;
	font-size: 14px;
	margin-top: .1em;
}

#slider {
	float: left;
	width: 400px;
}

#content_wrap {
	clear: left;
	float: left;
	position: relative;
	background: #ffffff;
	padding-bottom: 4em;
	padding-top: 5px;
	width: 920px;
}

#sub_content {
	float: left;
	padding-left: 10px;
	text-align: left;
}

#sub_content p {
	float: left;
	font-size: 10px;
	padding: 0 20px 0 10px;
}

#box_one {
	float: left;
    	width: 290px;
    	background: url(images/sub_bg.png) center repeat-y;
    	margin: 10px 0;
	padding-left: 11px;
}

#box_two {
	float: left;
    	width: 290px;
    	background: url(images/sub_bg.png) center repeat-y;
    	margin: 10px 0;
	padding-left: 11px;
}

#box_three {
	float: left;
    	width: 290px;
    	background: url(images/sub_bg.png) center repeat-y;
    	margin: 10px 0;
	padding-left: 11px;
}

#sub_content h1 {
	float: left;
    	color: white;
    	font-size: 20px;
	font: Georgia, "Times New Roman", Times, serif;
    	background: url(images/h1_bg.png) no-repeat;
    	padding-left: 15px;
	padding-top: 15px;
	margin: 0 0 0 -5px;
	width: 283px;
	height: 52px;
}

#content_main {
	clear: left;
	padding-top: 15px;
}


#content_main h1 {
	color: #9f3a3a;
	font-size: 30px;
	text-decoration: underline;
	height: 60px;
	width: 920px;
	padding: 30px 0 0 40px;
	margin-left: -10px;
}

#content_main h2 {
	color: #626262;
	padding: 0 20px 0 20px;
}

#content_main p {
	margin-left: 28px;
	margin-right: 57px;
}

#footer-sidebar {
	display:block;
	height: 260px;
}

#footer-sidebar1 {
  	float: left;
	width: 200px;
	font-size: 14px;
	line-height: 20px;
	margin-left: 25px;
	padding: 10px 34px 50px 0;

  }

#footer-sidebar2 {
	float: left;
	font-size: 10px;
	text-align: right;
	width: 600px;
	padding: 10px 0 50px 60px;
 }

#footer-sidebar3 {
	clear: left;
	float: right;
	font-size: 10px;
	width: 600px;
	text-align: right;
	padding: 10px 0 50px 60px;
 }

johnjf

don't forget I'm using Wordpress

treehouse : what would you like to learn today?

Forums

Need Help With Columns For Text