Text will not format correctly on pages – CSS & PHP

  • Resolved gmbower

    (@gmbower)


    15 years, 10 months ago

    I have a template I am retrofitting for my website
    http://www.sweetgrassrealty.com

    My question has to do with formatting the text so that it comes within approx. 25px of the right sidebar.

    The css has two sidebars (dynamic one and a static one). I have removed the left sidebar call function from the sidebar.php file.

    The style.css looks like this

    /*
Theme Name: Clean Water Drops Theme
Theme URI: http://cleandrops.qualitywordpress.com/
Description: Clean water drops theme. Versatile with any niche, quality, clean, black WordPress design.
Version: 1.0
Author: qualitywordpress
Author URI: http://qualitywordpress.com
*/

/* General */

body {
	margin: 0;
	background: url("images/background.jpg");
}

h1, h2, h3, h4 {
	margin: 0;
}

img {
	border: 0;
}

.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}

/* Page */

#page {
	margin: 0 auto;
	width: 900px;
}

/* Header */

#header {
	width: 900px;
	height: 414px;
	background: #000000 url("images/header.jpg") no-repeat;
	position: relative;
}

	/* Header - Info */

	#header #header-info {
		position: absolute;
		top: 12px;
		left: 25px;
	}

	#header #header-info h1 {
		color: #ffffff;
		font: normal 30px "Trebuchet MS", Verdana;
	}

	#header #header-info h1 a {
		color: #ffffff;
		text-decoration: none;
	}

	#header #header-info .description {
		color: #ffffff;
		font: normal 15px "Trebuchet MS", Verdana;
	}

	/* Header - Menu */

	#header #header-menu {
		position: absolute;
		bottom: 12px;
		height: 41px;
	}

	#header #header-menu ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		height: 41px;
	}

	#header #header-menu ul li {
		float: left;
		height: 41px;
		font: normal 15px/41px "Trebuchet MS", Verdana;
		color: #ffffff;
		padding: 0 23px 0 20px;
		background: url("images/header_menu.gif") no-repeat right top;
	}

	#header #header-menu ul li a {
		color: #ffffff;
		text-decoration: none;
	}

	#header #header-menu ul li a:hover {
		text-decoration: underline;
	}

/* Main */

#main {
	width: 885px;
	padding-left: 15px;
	background: #000000 url("images/main.gif") repeat-y;
}

	/* Main - Content */

	#content {
		float: left;
		width: 490px;
	}

	/* Main - Content - Post */

	#content .post {
		color: #ffffff;
		float: left;
		padding-right: 15px;
		margin-bottom: 50px;
		width: 425px;
	}

		/* Post - Date */

		#content .post .post-date {
			float: left;
			width: 57px;
			height: 57px;
			background: url("images/post_date.jpg") no-repeat;
			font: normal 11px/24px "Trebuchet MS", Verdana;
			color: #ffffff;
			text-align: center;
			text-transform: lowercase;
		}

		#content .post .post-date span {
			font: normal 19px/32px "Trebuchet MS", Verdana;
			margin-bottom: 1px;
			display: block;
		}

		/* Post - Content */

		#content .post .post-content {
			float: right;
			width: 407px;
                        		}

		/* Post - Title */

		#content .post .post-content .post-title {
			font: bold 12px "Trebuchet MS", Verdana;
			color: #ffffff;
			min-height: 60px;
		}

		#content .post .post-content .post-title a {
			color: #ffffff;
			text-decoration: none;
		}

		#content .post .post-content .post-title a:hover {
			text-decoration: underline;
		}

		#content .post .post-content .post-title h2 {
			color: #349415;
			font: bold 25px "Trebuchet MS", Verdana;
		}

		#content .post .post-content .post-title h2 a {
			color: #349415;
			text-decoration: none;
		}

		#content .post .post-content .post-title h2 a:hover {
			text-decoration: underline;
		}

		/* Post - Entry */

		#content .post .post-content .post-entry {
			font: normal 18px/24px "Trebuchet MS", Verdana;
			color: #ffffff;
		}

		#content .post .post-content .post-entry a {
			color: #349415;
			text-decoration: none;
		}

		#content .post .post-content .post-entry a:hover {
			text-decoration: underline;
		}

		#content .post .post-content .post-entry .picture {
			margin: 0 5px 5px 0;
			float: left;
		}

		#content .post .post-content .post-entry .more-link {
			font: bold 12px/20px "Trebuchet MS", Verdana;
			color: #349415;
			float: right;
			padding-bottom: 5px;
		}

		#content .post .post-content .post-entry .more-link a {
			color: #349415;
			text-decoration: none;
		}

		#content .post .post-content .post-entry .more-link a:hover {
			text-decoration: underline;
		}

		/* Post - Info */

		#content .post .post-content .post-info {
			clear: both;
			font: bold 12px/28px "Trebuchet MS", Verdana;
			color: #349415;
		}

		#content .post .post-content .post-info a {
			color: #349415;
			text-decoration: none;
		}

		#content .post .post-content .post-info a:hover {
			text-decoration: underline;
		}

		/* Post - Comments */

		#content .post .post-content h3 {
			height: 36px;
			color: #349415;
			font: bold 18px/36px "Trebuchet MS", Verdana;
			margin-top: 15px;
		}

		#content .post .post-content .comments {
			margin: 0;
			font: normal 12px/18px "Trebuchet MS", Verdana;
			color: #ffffff;
		}

		#content .post .post-content .comments ol {
			margin: 10px 0 10px 0;
			padding-left: 25px;
		}

		#content .post .post-content .comments ol li {
			padding: 5px;
		}

		#content .post .post-content .comments ol li.alt {
			background: #1a1a1a;
		}

		#content .post .post-content .comments ol li cite {
			color: #349415;
			font-style: normal;
			font-weight: bold;
		}

		#content .post .post-content .comments ol li cite a {
			color: #349415;
			text-decoration: none;
		}

		#content .post .post-content .comments ol li cite a:hover {
			text-decoration: underline;
		}

		#content .post .post-content .comments ol li .commentmetadata a {
			color: #349415;
			text-decoration: none;
		}

		#content .post .post-content .comments ol li .commentmetadata a:hover {
			text-decoration: underline;
		}

		#content .post .post-content #commentform {
			margin: 0;
			font: normal 12px/18px "Trebuchet MS", Verdana;
			color: #ffffff;
		}

	/* Main - Sidebar */

	#sidebar {
		float: left;
		width: 385px;
		font: normal 12px "Trebuchet MS", Verdana;
		color: #349415;
	}

	#sidebar a {
		color: #ffffff;
		text-decoration: none;
	}

	#sidebar a:hover {
		text-decoration: underline;
	}

#sidebar #sidebar-left {
		float: right;
		width: 188px;
	}

	#sidebar #sidebar-right {
		float: right;
		width: 188px;
	}

		/* Sidebar - Titles */

		#sidebar h3 {
			padding-left: 20px;
			width: 168px;
			font: bold 15px/40px "Trebuchet MS", Verdana;
			color: #349415;
			height: 40px;
			background: url("images/sidebar_title.gif") repeat-x;
		}

		/* Sidebar - Menus */

		#sidebar ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}

		#sidebar ul li {
			color: #349415;
			height: 28px;
			font: normal 12px/28px "Trebuchet MS", Verdana;
			padding-left: 20px;
			border-bottom: 1px solid #000000;
		}

		#sidebar ul li a {
			color: #ffffff;
			text-decoration: none;
		}

		#sidebar ul li a:hover {
			text-decoration: underline;
		}

		/* Sidebar - Sidebar Feed */

		#sidebar #sidebar-feed {
			margin: 0 auto;
			padding: 8px 0 8px 20px;
			border-bottom: 1px solid #000000;
		}

		/* Sidebar - Tables */

		#sidebar #calendar_wrap {
			padding: 5px 0;
			text-align: center;
			border-bottom: 1px solid #000000;
		}

		#sidebar #calendar_wrap table {
			margin: 0 auto;
			width: 116px;
		}

		#sidebar #calendar_wrap caption {
			margin: 0 auto;
			width: 116px;
		}

		/* Sidebar - Forms */

		#sidebar #searchform {
			margin: 0 auto;
			padding: 10px 0;
			text-align: center;
			border-bottom: 1px solid #000000;
		}

		#sidebar #searchform #s {
			width: 140px;
		}

		/* Sidebar - Texts */

		#sidebar .textwidget {
			padding: 5px 10px;
			border-bottom: 1px solid #000000;
		}

/* Footer */

#footer {
	width: 900px;
	height: 36px;
	padding-top: 28px;
	background: url("images/footer.gif") repeat-x;
	color: #ffffff;
	font: normal 12px/36px "Trebuchet MS", Verdana;
	text-align: center;
}

#footer a {
	color: #349415;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

    Can anyone help me on what i need to change so that my text will be formatted properly? Thanks in advance for your help. And yes, i am a complete php/css newbie.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter gmbower

    (@gmbower)

    15 years, 10 months ago

    Here is the sidebar.php

    <!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Right -->
			<div id="sidebar-right">

				<h3>RSS Feed</h3>
				<div id="sidebar-feed">
					<a href="<?php bloginfo('rss_url'); ?>" title="RSS Feed"><img src="<?php bloginfo('template_directory'); ?>/images/sidebar_feed.jpg" alt="RSS Feed" width="143" height="40" /></a>
				</div>

				<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>

				<?php endif; ?>

			</div>
			<!-- /Sidebar Right -->

		</div>
		<!-- Sidebar -->

    Thread Starter gmbower

    (@gmbower)

    15 years, 10 months ago

    anyone got any ideas? thanks in advance!

    Eric Amundson

    (@sewmyheadon)

    15 years, 10 months ago

    Hey George,

    You’ve got two links to your stylesheet in your template, which is redundant, of course.

    This makes it a bit harder to use Firebug or the Web Dev Toolbar with Firefox when you’ve got the duplicate links.

    The duplicate stylesheet links are most likely in your header.php file and look like this when viewing source on the page:

    <link rel="stylesheet" href="http://sweetgrassrealty.com/wp-content/themes/clean-water-drops-10/style.css" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="Sweetgrass Realty RSS Feed" href="http://sweetgrassrealty.com/?feed=rss2" />
	<link rel="pingback" href="http://sweetgrassrealty.com/xmlrpc.php" />

	<link rel="stylesheet" type="text/css" href="http://sweetgrassrealty.com/wp-content/themes/clean-water-drops-10/style.css" />

    Here are my suggestions to get started:

    1. fix the header so there’s only one link to style.css
    2. backup your existing style.css file
    3. in your style.css file change the following:
    • #content should be 690px (instead of 490px)
    • #sidebar should be 185px (instead of 385px)
    • remove the width definitions from both #content .post and #content .post .postcontent

    Hope that helps.

    Thread Starter gmbower

    (@gmbower)

    15 years, 10 months ago

    sewmyheadon…

    first off, thanks much for the input.

    secondly.. that worked like a charm…

    issue resolved..

    I appreciate your expertise!!!

    George

    Eric Amundson

    (@sewmyheadon)

    15 years, 10 months ago

    You’re very welcome. Glad it worked! 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Text will not format correctly on pages – CSS & PHP’ is closed to new replies.