13 replies [Last post]
Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

Greetings All, Wink

I am very new to CSS. I purchased a book on it and am reading it as we speak. However, I am fooling around with the code so I can at least get my website "presentable". I am sure that the problem I have is VERY simple yet for me being new I can not figure it out and I am spending (without exaggeration) 5 hours in front of my pc playing with margins and padding.

Here is my page: http://binkology.com.

What I want to happen:

1. The sidebar to be horizontal to the HELLO WORLD! title.
2. The note at the bottom mentioning RSS feeds to be more centered.

I would like to be able to get my site up and running while I learn CSS. I have searched for the answer to this question and can't find it. I have found great websites to help with the learning of CSS but it is not helping me with finding which section corresponds to those two wants above. I am listing my index.php file and the stylesheet. I don't think the result is under footer. If I am incorrect please elaborate in detail which section name and declaration (see, I have been reading! Tongue ) I need to change. Thanks!

stylesheet.css

/*  
Theme Name: Spring Bling!
Theme URI: http://wordpress.org/
Description: Bink's Spring Bling! An Introduction to blogging anew.
Version: 1.0
Author: Bink
Author URI: http://binkology.com/

	Spring Bling! v1.5
	 http://binkology.com/

	This theme was designed and built by Bink,
	whose blog you will find at http://binkology.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	

	*** REGARDING IMAGES ***
	All CSS that involves the use of images, can be found in the 'index.php' file.
	This is to ease installation inside subdirectories of a server.

*/



/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background-color: #ffffff;
	color: #333;
	text-align: center;
	}

#page {
	background-color: white;
	border: 1px solid #959596;
	text-align: center;
	}

#header {
	background-color: #ffffff;
	}

#content {
	font-size: 1.2em
	}

.widecolumn .entry p {
	font-size: 1.05em;
	}

.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	}

.widecolumn {
	line-height: 1.6em;
	}
	
.narrowcolumn .postmetadata {
	text-align: center;
	}

.alt {
	background-color: #ffffff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	}

#footer {
	background-color: #fff;
	}

small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}

h1, h2, h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	}

h1 {
	font-size: 4em;
	text-align: center;
	}

.description {
	font-size: 1.2em;
	text-align: center;
	}

h2 {
	font-size: 1.6em;
	}

h2.pagetitle {
	font-size: 1.6em;
	}

#sidebar h2 {
	font-family: 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1.2em;
	}

h3 {
	font-size: 1.3em;
	}

h1, h1 a, h1 a:hover, h1 a:visited, .description {
	text-decoration: none;
	color: white;
	}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #333;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}

.entry p a:visited {
	color: #b85b5a;
	}

.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}
	
.commentlist li {
	font-weight: bold;
	}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
	}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	}

#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	}

#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #777;
	}
	
code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

a, h2 a:hover, h3 a:hover {
	color: #06c;
	text-decoration: none;
	}

a:hover {
	color: #147;
	text-decoration: underline;
	}
	
#wp-calendar #prev a {
	font-size: 9pt;
	}

#wp-calendar a {
	text-decoration: none;
	}

#wp-calendar caption {
	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align: center;
	}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	}
/* End Typography & Colors */



/* Begin Structure */
body {
	margin: 0;
	padding: 0; 
	}

#page {
	background-color: white;
	margin: 20px auto;
	padding: 0;
	width: 760px;
	border: 1px solid #959596;
	}
	
#header {
	padding: 0;
	margin: 0 auto;
	height: 200px;
	width: 100%;
	background-color: #fffff;
	}

#headerimg {
	margin: 0;
	height: 200px;
	width: 100%;
        }

.narrowcolumn {
        float: left;
        padding: 0;
        margin: 0 0 0 100px;
        width: 450px;
        }

.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
	}
	
.post {
	margin: 0 0 40px;
	text-align: justify;
	}

.widecolumn .post {
	margin: 0;
	}

.narrowcolumn .postmetadata {
	padding-top: 5px;
	}

.widecolumn .postmetadata {
	margin: 30px 0;
	}
	
#footer {
	padding: 0 0 0 300px;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	}
/* End Structure */



/*	Begin Headers */
h1 {
	padding-top: 70px;
	margin: 0;
	}

.description {
	text-align: center;
	}

h2 {
	margin: 30px 900 0;
	}

h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}

#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}

h3 {
	padding: 0;
	margin: 30px 0 0;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */



/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
	
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left;
	}
/* End Images */



/* Begin Lists

	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	} 

html>body .entry li {
	margin: 7px 0 8px 10px;
	}

.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
	}

.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
	}

.entry ol li {
	margin: 0;
	padding: 0;
	}

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}
	
#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
	}

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
	}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 10px;
	}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}
/* End Entry Lists */



/* Begin Form Elements */
#searchform {
	margin: 10px auto;
	padding: 5px 3px; 
	text-align: center;
	}

#sidebar #searchform #s {
	width: 115px;
	padding: 2px;
	}

#sidebar #searchsubmit {
	padding: 1px;
	}

.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
	}

select {
	width: 130px;
	}

#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform textarea {
	width: 100%;
	padding: 2px;
	}

#commentform #submit {
	margin: 0;
	float: right;
	}
/* End Form Elements */



/* Begin Comments*/
.alt {
	margin: 0;
	padding: 10px;
	}

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 3px;
	padding: 5px 10px 3px;
	list-style: none;
	}

.commentlist p {
	margin: 10px 5px 10px 0;
	}

#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}
/* End Comments */



/* Begin Sidebar */
#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 545px;
	width: 190px;
	}

#sidebar form {
	margin: 0;
	}
/* End Sidebar */



/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	display: block;
	}

#wp-calendar caption {
	text-align: center;
	width: 100%;
	}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
	}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff; }
/* End Calendar */



/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #999;
	}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}
/* End Various Tags & Classes*/

INDEX.PHP

<?php get_header(); ?>

	<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post(); ?>
				
			<div class="post">
				<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
				
				<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
		
				<p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> 
				
				<!--
				<?php trackback_rdf(); ?>
				-->
			</div>
	
		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
			<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
		</div>
		
	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

	<?php endif; ?>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Simple CSS Problem

I looked at the page. There is no sidebar and there is no set of RSS links.

for sidebars, use float:left or float:right and assign a specific width.
then for the main content assign a margin in the direction of the floated sidebar that is wide enough to avoid the sidebar.

Something along the lines of

CSS -
#sidebar {float:left; width:30%}
#main {margin-left:32%}
* html #main {height:1%}  /* this help IE overcome its nervous floating */

HTML -
<div id="sidebar">my sidebar contents</div>
<div id="main">the main stuff</div>

to centre a div, try assigning a width and using left and right margins of auto, e.g.

#footer {width:25%; margin:0 auto}

the 0 is for the top and bottom margin.

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

PROBLEM SOLVED!

Thanks for pointing me in the right direction! I am using WordPress for the first time and learning CSS (what a combo huh?!). The problem was in the sidebar and the footer as you explained. I did not use % to solve the problem. I used (-)#px.

For Example:

#footer p {
	margin-left: -300px;
	padding: 20px 0;
	text-align: center;
	}

I'm still reading my CSS book so I don't know if this is proper coding but it seems to work for now in addition to eliminating my frustration. I will learn more about WordPress and CSS in the upcoming weeks.

Thanks again for your assistance!

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

PROBLEM UNSOLVED STILL!

Please assist. I am still having problems with my stylesheet. I do know the problem area is "#sidebar". However, I don't know what property is giving me trouble or what property needs to be included to make the #sidebar the same level as the first entry, "Hello World!"

I have looked for this information on the web and am unable to find a fix. I have tried margin-bottom: by pixel and by percentage to no avail. Please help me.

My website: http://binkology.com/

The *updated stylesheet:

/*  
Theme Name: Spring Bling!
Theme URI: http://wordpress.org/
Description: Bink's Spring Bling! An Introduction to blogging anew.
Version: 1.0
Author: Bink
Author URI: http://binkology.com/

	Spring Bling! v1.5
	 http://binkology.com/

	This theme was designed and built by Bink,
	whose blog you will find at http://binkology.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	

	*** REGARDING IMAGES ***
	All CSS that involves the use of images, can be found in the 'index.php' file.
	This is to ease installation inside subdirectories of a server.

*/



/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background-color: #ffffff;
	color: #2F4F2F;
	text-align: center;
	}

#page {
	background-color: white;
	border: 1px solid #ffffff;
	text-align: center;
	}

#header {
	background-color: #ffffff;
	}

#content {
	font-size: 1.2em
	}

.widecolumn .entry p {
	font-size: 1.05em;
	}

.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	}

.widecolumn {
	line-height: 1.6em;
	}
	
.narrowcolumn .postmetadata {
	text-align: center;
	}

.alt {
	background-color: #ffffff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	}

#footer {
	background-color: #fff;
	}

small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}

h1, h2, h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	}

h1 {
	font-size: 4em;
	text-align: center;
	}

.description {
	font-size: 1.2em;
	text-align: center;
	}

h2 {
	font-size: 1.6em;
	}

h2.pagetitle {
	font-size: 1.6em;
	}

#sidebar h2 {
	font-family: 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1.2em;
	}

h3 {
	font-size: 1.3em;
	}

h1, h1 a, h1 a:hover, h1 a:visited, .description {
	text-decoration: none;
	color: white;
	}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #003300;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}

.entry p a:visited {
	color: #003300;
	}

.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}
	
.commentlist li {
	font-weight: bold;
	}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
	}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	}

#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	}

#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #003300;
	}
	
code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

a, h2 a:hover, h3 a:hover {
	color: #FFAA00;
	text-decoration: none;
	}

a:hover {
	color: #FFAA00;
	text-decoration: underline;
	}
	
#wp-calendar #prev a {
	font-size: 9pt;
	}

#wp-calendar a {
	text-decoration: none;
	}

#wp-calendar caption {
	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align: center;
	}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	}
/* End Typography & Colors */



/* Begin Structure */
body {
	margin: 0;
	padding: 0; 
	}

#page {
	background-color: white;
	margin: 20px auto;
        padding: 0;	
        width: 760px;
        border: 1px solid #ffffff;
	}
	
#header {
	padding: 0;
	margin: 0 auto;
	height: 200px;
	width: 100%;
	background-color: #fffff;
	}

#headerimg {
	margin: 0;
	height: 200px;
	width: 100%;
        }

.narrowcolumn {
        float: left;
        padding: 0;
        margin: 0 0 0 100px;
        width: 450px;
        }

.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
	}
	
.post {
	margin: 0 0 40px;
	text-align: justify;
	}

.widecolumn .post {
	margin: 0;
	}

.narrowcolumn .postmetadata {
	padding-top: 5px;
	}

.widecolumn .postmetadata {
	margin: 30px 0;
	}
	
#footer {
	padding: 0 0 0 300px;
	margin: 0 auto;
	width: 760px;
	clear: both;
        }

#footer p {
	margin-left: -300px;
	padding: 20px 0;
	text-align: center;
	}
/* End Structure */



/*	Begin Headers */
h1 {
	padding-top: 70px;
	margin: 0;
	}

.description {
	text-align: center;
	}

h2 {
	margin: 30px 900 0;
	}

h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}

#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}

h3 {
	padding: 0;
	margin: 30px 0 0;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */



/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
	
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left;
	}
/* End Images */



/* Begin Lists

	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	} 

html>body .entry li {
	margin: 7px 0 8px 10px;
	}

.entry ul li:before, #sidebar ul ul li:before {
	content: "0BB 020";
	}

.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
	}

.entry ol li {
	margin: 0;
	padding: 0;
	}

.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
	}
	
#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
	}

#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
	}

#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
	}

#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
	}

#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 10px;
	}

ol li, #sidebar ul ol li {
	list-style: decimal outside;
	}

#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
	}
/* End Entry Lists */



/* Begin Form Elements */
#searchform {
	margin: 10px auto;
	padding: 5px 3px; 
	text-align: center;
	}

#sidebar #searchform #s {
	width: 115px;
	padding: 2px;
	}

#sidebar #searchsubmit {
	padding: 1px;
	}

.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
	}

select {
	width: 130px;
	}

#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform textarea {
	width: 100%;
	padding: 2px;
	}

#commentform #submit {
	margin: 0;
	float: right;
	}
/* End Form Elements */



/* Begin Comments*/
.alt {
	margin: 0;
	padding: 10px;
	}

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 3px;
	padding: 5px 10px 3px;
	list-style: none;
	}

.commentlist p {
	margin: 10px 5px 10px 0;
	}

#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	}
/* End Comments */


/* Begin Sidebar */
#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 700px;
	margin-top: 100px;
        width:190px; 
	}

#sidebar form {
	margin: 0;
	}
/* End Sidebar */



/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
	}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
	}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
	}

#wp-calendar a {
	display: block;
	}

#wp-calendar caption {
	text-align: center;
	width: 100%;
	}

#wp-calendar td {
	padding: 3px 0;
	text-align: center;
	}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff; }
/* End Calendar */



/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
	}

acronym, abbr {
	border-bottom: 1px dashed #999;
	}

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}

blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

.center {
	text-align: center;
	}

hr {
	display: none;
	}

a img {
	border: none;
	}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	}
/* End Various Tags & Classes*/

All help is greatly appreciated. Thank you.

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

UPDATE!

Updated section of stylesheet:

/* Begin Sidebar */
#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 700px;
	margin-top: -5335px;
        width: 190px; 
        }

#sidebar form {
	margin: 0;
	}
/* End Sidebar */

The page http://binkology.com/ looks better with this modification is code margin-top: -5335px; for the sidebar. I have a feeling this is going against the CSS rules but I am a beginner. Because of this change, the main page (index.php) is splitting in half. How can I shorten the scrollable section, meaning, I don't want this page to be as long as it currently is now. What section and declaration do I change?

Thank you again for you help. It is always much appreciated.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Simple CSS Problem

Talk about diving in at the deep end Brink, if your relatively new to css you couldn't have picked a harder thing to practise on :roll:

The Kubrick theme for WP 1.5 is not the simplest to understand and nor is the new concept of 'Theme Templates'.

The RSS feed text you mention should be aligned to the middle by default in the Kubrick theme it's in #footer p{}

Your not really showing all the right sections as the sidebar is called via the get_sidebar() function, you have just shown the index.php which does not contain the html for the footer or sidebar which makes it difficult for me to help with this without seeing the whole story.

What's the link to your home site about ? there's no blog running there that I can see , it would help to actually see the blog in action if were to help you with this. Can you not get it running on your site ?.

I can help with the kubrick theme - not that I'm any great fan of it - but need to see the generated page to see if all the hooks are there etc.

An alternative to your problems of course would be to pop along to the WP support forum and ask for help in the Themes/Styling section
at least there you'll find people that are working with WP all the time and understand the problems.

Hugo

Edit: I see that you have indeed posted the question to the WP support forum along with the correct link! so can we take it that your problem is solved ? it's nice to know when a questions been asked at another forum and whether it did solve things then we can consider this post closed.
If your still having problems let us know and we can see what we can do.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

Simple CSS Problem

Thank you for offering to help me Hugo. I appreciate it and anyone else's help for that matter.

Hugo wrote:
The Kubrick theme for WP 1.5 is not the simplest to understand and nor is the new concept of 'Theme Templates'.

I agree!

Hugo wrote:
Edit: I see that you have indeed posted the question to the WP support forum along with the correct link! so can we take it that your problem is solved ? it's nice to know when a questions been asked at another forum and whether it did solve things then we can consider this post closed.
If your still having problems let us know and we can see what we can do.

I did not post this same question on the WP forum. I searched their forums and saw someone ask a question about a stylesheet and they were referred here so I came here as to save the time from being referred.

The Site:
http://binkology.com/memoir/

The Index.php file:
<?php get_header(); ?> 
 
	<div id="content" class="narrowcolumn"> 
 
	<?php if (have_posts()) : ?> 
		 
		<?php while (have_posts()) : the_post(); ?> 
				 
			<div class="post"> 
				<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> 
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small> 
				 
				<div class="entry"> 
					<?php the_content('Read the rest of this entry &raquo;'); ?> 
				</div> 
		 
				<p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>  
				 
				<!-- 
				<?php trackback_rdf(); ?> 
				--> 
			</div> 
	 
		<?php endwhile; ?> 
 
		<div class="navigation"> 
			<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div> 
			<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div> 
		</div> 
		 
	<?php else : ?> 
 
		<h2 class="center">Not Found</h2> 
		<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p> 
		<?php include (TEMPLATEPATH . "/searchform.php"); ?> 
 
	<?php endif; ?> 
 
	</div> 
 
<?php get_sidebar(); ?> 
 
<?php get_footer(); ?>


The Stylesheet:
/*   
Theme Name: Spring Bling! 
Theme URI: http://wordpress.org/ 
Description: Bink's Spring Bling! An Introduction to blogging anew. 
Version: 1.0 
Author: Bink 
Author URI: http://binkology.com/ 
 
	Spring Bling! v1.5 
	 http://binkology.com/ 
 
	This theme was designed and built by Bink, 
	whose blog you will find at http://binkology.com/ 
 
	The CSS, XHTML and design is released under GPL: 
	http://www.opensource.org/licenses/gpl-license.php 
	 
 
	*** REGARDING IMAGES *** 
	All CSS that involves the use of images, can be found in the 'index.php' file. 
	This is to ease installation inside subdirectories of a server. 
 
*/ 
 
 
 
/* Begin Typography & Colors */ 
body { 
	font-size: 62.5%; /* Resets 1em to 10px */ 
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 
	background-color: #ffffff; 
	color: #2F4F2F; 
	text-align: center; 
	} 
 
#page { 
	background-color: white; 
	border: 1px solid #ffffff; 
	text-align: center; 
	} 
 
#header { 
	background-color: #ffffff; 
	} 
 
#content { 
	font-size: 1.2em 
	} 
 
.widecolumn .entry p { 
	font-size: 1.05em; 
	} 
 
.narrowcolumn .entry, .widecolumn .entry { 
	line-height: 1.4em; 
	} 
 
.widecolumn { 
	line-height: 1.6em; 
	} 
	 
.narrowcolumn .postmetadata { 
	text-align: center; 
	} 
 
.alt { 
	background-color: #ffffff; 
	border-top: 1px solid #fff; 
	border-bottom: 1px solid #fff; 
	} 
 
#footer { 
	background-color: #fff; 
	} 
 
small { 
	font-family: Arial, Helvetica, Sans-Serif; 
	font-size: 0.9em; 
	line-height: 1.5em; 
	} 
 
h1, h2, h3 { 
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; 
	font-weight: bold; 
	} 
 
h1 { 
	font-size: 4em; 
	text-align: center; 
	} 
 
.description { 
	font-size: 1.2em; 
	text-align: center; 
	} 
 
h2 { 
	font-size: 1.6em; 
	} 
 
h2.pagetitle { 
	font-size: 1.6em; 
	} 
 
#sidebar h2 { 
	font-family: 'Lucida Grande', Verdana, Sans-Serif; 
	font-size: 1.2em; 
	} 
 
h3 { 
	font-size: 1.3em; 
	} 
 
h1, h1 a, h1 a:hover, h1 a:visited, .description { 
	text-decoration: none; 
	color: white; 
	} 
 
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited { 
	color: #003300; 
	} 
 
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite { 
	text-decoration: none; 
	} 
 
.entry p a:visited { 
	color: #003300; 
	} 
 
.commentlist li, #commentform input, #commentform textarea { 
	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif; 
	} 
	 
.commentlist li { 
	font-weight: bold; 
	} 
 
.commentlist cite, .commentlist cite a { 
	font-weight: bold; 
	font-style: normal; 
	font-size: 1.1em; 
	} 
 
.commentlist p { 
	font-weight: normal; 
	line-height: 1.5em; 
	text-transform: none; 
	} 
 
#commentform p { 
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 
	} 
 
.commentmetadata { 
	font-weight: normal; 
	} 
 
#sidebar { 
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif; 
	} 
 
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike { 
	color: #003300; 
	} 
	 
code { 
	font: 1.1em 'Courier New', Courier, Fixed; 
	} 
 
acronym, abbr, span.caps 
{ 
	font-size: 0.9em; 
	letter-spacing: .07em; 
	} 
 
a, h2 a:hover, h3 a:hover { 
	color: #FFAA00; 
	text-decoration: none; 
	} 
 
a:hover { 
	color: #FFAA00; 
	text-decoration: underline; 
	} 
	 
#wp-calendar #prev a { 
	font-size: 9pt; 
	} 
 
#wp-calendar a { 
	text-decoration: none; 
	} 
 
#wp-calendar caption { 
	font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif; 
	text-align: center; 
	} 
 
#wp-calendar th { 
	font-style: normal; 
	text-transform: capitalize; 
	} 
/* End Typography & Colors */ 
 
 
 
/* Begin Structure */ 
body { 
	margin: 0; 
	padding: 0;  
        } 
 
#page { 
	background-color: white; 
	margin: 20px auto; 
        padding: 0;	 
        width: 760px; 
        border: 1px solid #ffffff; 
	} 
	 
#header { 
	padding: 0; 
	margin: 0 auto; 
	height: 200px; 
	width: 100%; 
	background-color: #fffff; 
	} 
 
#headerimg { 
	margin: 0; 
	height: 200px; 
	width: 100%; 
        } 
 
.narrowcolumn { 
        float: left; 
        padding: 0; 
        margin: 0 0 0 100px; 
        width: 450px; 
        } 
 
.widecolumn { 
	padding: 10px 0 20px 0; 
	margin: 5px 0 0 150px; 
	width: 450px; 
	} 
	 
.post { 
	margin: 0 0 40px; 
	text-align: justify; 
	} 
 
.widecolumn .post { 
	margin: 0; 
	} 
 
.narrowcolumn .postmetadata { 
	padding-top: 5px; 
	} 
 
.widecolumn .postmetadata { 
	margin: 30px 0; 
	} 
	 
#footer { 
	padding: 0 0 0 300px; 
	margin: 0 auto; 
	width: 760px; 
	clear: both; 
        } 
 
#footer p { 
	margin-left: -300px; 
	padding: 20px 0; 
	text-align: center; 
	} 
/* End Structure */ 
 
 
 
/*	Begin Headers */ 
h1 { 
	padding-top: 70px; 
	margin: 0; 
	} 
 
.description { 
	text-align: center; 
	} 
 
h2 { 
	margin: 30px 900 0; 
	} 
 
h2.pagetitle { 
	margin-top: 30px; 
	text-align: center; 
} 
 
#sidebar h2 { 
	margin: 5px 0 0; 
	padding: 0; 
	} 
 
h3 { 
	padding: 0; 
	margin: 30px 0 0; 
	} 
 
h3.comments { 
	padding: 0; 
	margin: 40px auto 20px ; 
	} 
/* End Headers */ 
 
 
 
/* Begin Images */ 
p img { 
	padding: 0; 
	max-width: 100%; 
	} 
 
/*	Using 'class="alignright"' on an image will (who would've 
	thought?!) align the image to the right. And using 'class="centered', 
	will of course center the image. This is much better than using 
	align="center", being much more futureproof (and valid) */ 
	 
img.centered { 
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	} 
	 
img.alignright { 
	padding: 4px; 
	margin: 0 0 2px 7px; 
	display: inline; 
	} 
 
img.alignleft { 
	padding: 4px; 
	margin: 0 7px 2px 0; 
	display: inline; 
	} 
 
.alignright { 
	float: right; 
	} 
	 
.alignleft { 
	float: left; 
	} 
/* End Images */ 
 
 
 
/* Begin Lists 
 
	Special stylized non-IE bullets 
	Do not work in Internet Explorer, which merely default to normal bullets. */ 
 
html>body .entry ul { 
	margin-left: 0px; 
	padding: 0 0 0 30px; 
	list-style: none; 
	padding-left: 10px; 
	text-indent: -10px; 
	}  
 
html>body .entry li { 
	margin: 7px 0 8px 10px; 
	} 
 
.entry ul li:before, #sidebar ul ul li:before { 
	content: "0BB 020"; 
	} 
 
.entry ol { 
	padding: 0 0 0 35px; 
	margin: 0; 
	} 
 
.entry ol li { 
	margin: 0; 
	padding: 0; 
	} 
 
.postmetadata ul, .postmetadata li { 
	display: inline; 
	list-style-type: none; 
	list-style-image: none; 
	} 
	 
#sidebar ul, #sidebar ul ol { 
	margin: 0; 
	padding: 0; 
	} 
 
#sidebar ul li { 
	list-style-type: none; 
	list-style-image: none; 
	margin-bottom: 15px; 
	} 
 
#sidebar ul p, #sidebar ul select { 
	margin: 5px 0 8px; 
	} 
 
#sidebar ul ul, #sidebar ul ol { 
	margin: 5px 0 0 10px; 
	} 
 
#sidebar ul ul ul, #sidebar ul ol { 
	margin: 0 0 10px; 
	} 
 
ol li, #sidebar ul ol li { 
	list-style: decimal outside; 
	} 
 
#sidebar ul ul li, #sidebar ul ol li { 
	margin: 3px 0 0; 
	padding: 0; 
	} 
/* End Entry Lists */ 
 
 
 
/* Begin Form Elements */ 
#searchform { 
	margin: 10px auto; 
	padding: 5px 3px;  
	text-align: center; 
	} 
 
#sidebar #searchform #s { 
	width: 115px; 
	padding: 2px; 
	} 
 
#sidebar #searchsubmit { 
	padding: 1px; 
	} 
 
.entry form { /* This is mainly for password protected posts, makes them look better. */ 
	text-align:center; 
	} 
 
select { 
	width: 130px; 
	} 
 
#commentform input { 
	width: 170px; 
	padding: 2px; 
	margin: 5px 5px 1px 0; 
	} 
 
#commentform textarea { 
	width: 100%; 
	padding: 2px; 
	} 
 
#commentform #submit { 
	margin: 0; 
	float: right; 
	} 
/* End Form Elements */ 
 
 
 
/* Begin Comments*/ 
.alt { 
	margin: 0; 
	padding: 10px; 
	} 
 
.commentlist { 
	padding: 0; 
	text-align: justify; 
	} 
 
.commentlist li { 
	margin: 15px 0 3px; 
	padding: 5px 10px 3px; 
	list-style: none; 
	} 
 
.commentlist p { 
	margin: 10px 5px 10px 0; 
	} 
 
#commentform p { 
	margin: 5px 0; 
	} 
 
.nocomments { 
	text-align: center; 
	margin: 0; 
	padding: 0; 
	} 
 
.commentmetadata { 
	margin: 0; 
	display: block; 
	} 
/* End Comments */ 
 
 
/* Begin Sidebar */ 
#sidebar 
{ 
	padding: 20px 0 10px 0; 
	margin-left: 700px; 
	margin-top: -5335px; 
        width: 190px;  
        } 
 
#sidebar form { 
	margin: 0; 
	} 
/* End Sidebar */ 
 
 
 
/* Begin Calendar */ 
#wp-calendar { 
	empty-cells: show; 
	margin: 10px auto 0; 
	width: 155px; 
	} 
 
#wp-calendar #next a { 
	padding-right: 10px; 
	text-align: right; 
	} 
 
#wp-calendar #prev a { 
	padding-left: 10px; 
	text-align: left; 
	} 
 
#wp-calendar a { 
	display: block; 
	} 
 
#wp-calendar caption { 
	text-align: center; 
	width: 100%; 
	} 
 
#wp-calendar td { 
	padding: 3px 0; 
	text-align: center; 
	} 
 
#wp-calendar td.pad:hover { /* Doesn't work in IE */ 
	background-color: #fff; } 
/* End Calendar */ 
 
 
 
/* Begin Various Tags & Classes */ 
acronym, abbr, span.caps { 
	cursor: help; 
	} 
 
acronym, abbr { 
	border-bottom: 1px dashed #999; 
	} 
 
blockquote { 
	margin: 15px 30px 0 10px; 
	padding-left: 20px; 
	border-left: 5px solid #ddd; 
	} 
 
blockquote cite { 
	margin: 5px 0 0; 
	display: block; 
	} 
 
.center { 
	text-align: center; 
	} 
 
hr { 
	display: none; 
	} 
 
a img { 
	border: none; 
	} 
 
.navigation { 
	display: block; 
	text-align: center; 
	margin-top: 10px; 
	margin-bottom: 60px; 
	} 
/* End Various Tags & Classes*/


Again, any help is greatly appreciated. In addition, I think I have an older book on CSS I'm reading. They are not mentioning "hash" (#) so I'm going to BN and pick up the latest 2005 copy.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Simple CSS Problem

I thought that the questions were the same my mistake.

I did actually post a reply on the WP support forum but you may not have seen it .

I mentioned there that you appear to have an unclosed div which looks to be in relation to the #page div which may well sort out the header problem also the problem with the footer is due to the rather odd padding /margins you have on the #footer and #footer p elements, remove those and it should line up with the content centered.

The hash sign used in front of a selector turns it into an ID selector which must only be referenced once per page, it's also used in front of hex colors such as #000000

I mentioned valadating your work as you go which is an important thing to get in the habit of as it would have picked up the div problem

as well as that with WP generated content due to the complexity of it at times it's a very good idea to add comments to the markup denoting what the divs are i.e if it's the closing div to #page just make a small comment after it, in the fashion of:

</div><!--end of page div--> or similar

This is really helpful when your trying to find sections and work out where various function calls need to go, make liberal use of comments both in the markup and in the stylesheet.

Do disregard my remarks about popping back to close this thread if it was solved, clearly it wasn't the case Smile

Let us know how you get on.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

Lots of Errors

I see what you mean in terms of validators. I viewed the source on my site: http://binkology.com/memoir in dreamweaver. I found several errors when I used Dreamweaver and w3.org to validate.

However, my index.php template does not contain the #page division.

What file/template is calling the #page division? I think I can fix the problem but I don't know which template to start with to solve the issue.

Thanks Hugo!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Simple CSS Problem

Bink this is the problem many people have with the new implementation of WP 1.5 and themes and is understandable.

You have to get a picture of how the various PHP files are called and what they contain and it isn't clear to start with.

You can't find #page in the index.php file as it isn't there Smile and here is where the confusion begins.

If you think of the generated page that you would be looking at if you viewed your site ( the page source, markup) you tend to think of one file that creates this .The way WP 1.5 has been constructed is that to generate that page you need a minimum of four files.

These four files contain all the html markup that is required to produce the index page of your blog .

These four files work together and in a sense are symbiotic as they need each other to complete the whole html structure.

Stop thinking of the Index.php as the main file as that is slightly misleading, the purpose of the index.file is to call the various sections and to contain the WP Loop.

Have a look at the index file at the top you will see the call for the get_header() function this function calls the header.php file located in your themes folder.
header.php contains the xhtml doctype, head elements and body tag plus all of the required structural divs up until the container div for the WP Loop this includes the #page div start tag .

Back to the index file after the get_header() call you will see the start of the #content div and everything within that is related to the Loop and ends with <?php endif; ?></div>

Then you will see the call for the get_sidebar() which inserts the menu div and contents drawn from the sidebar.php and after that call you see the last one get_footer() this contains the closing sections of the html and is where you will find #footer and after that div closes the last </div> should be the #page close.

So in effect to read the code for the generated page in it's natural sequence you need to open header.php read it's contents then continue on in the index file after the the point where the get_header finishes then read the sidebar.php contents and after that the footer.php for all the closing div elements.

This seems confusing but is actually the way it has to be I originally thought it was madness to split the html across files but this is part of the flexibility of the themes design and allows for greater layout control.

The index.php is really only intended to be the frame work for the various sections and is mainly concerned with running the loop.

you need to look in the footer.php and check that it contains the right number of divs I think that you ought to have

<div #footer>   
 <p> footer contents</p>   
   
        </div>   
       </div> //this is the one that should close the opening #page div contained in the header.php


Hope that helps to clarify things a little and apologize if it's a bit rambling.

Don't despair with things it took me a while to understand the template function calls which will probably be your next step Smile it does get easier once you can get a mental picture of how the files interact with each other.
As always let us know how you get on.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

Simple CSS Problem

Thanks for helping me Hugo! I owe you. What can I give you... a Yahoo! 360 invite? A password to my boring site? Tongue

You have helped me to understand how WP works completely! I fixed the footer.php file and everything else fell into line as you stated. However, I have to navigate the stylesheet to put the settings back for conformity.

Now that I'm more familiar with WP and how the index.php calls the four segments I may move away from Kubrick's design and go into a three column design or do you think I should finish reading my CSS book? Laughing out loud lol

Again, thanks!

P.S. I will be back in this section of the forum to ask questions based on the book I'm reading. I hope to interact with you again.

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

CLOSED!! I GOT IT VALIDATED!

Yea, I'm a wannabe CSS guru. hehehe look:
http://binkology.com/memoir/

Now, I just have to get the entries to look better and edit my MT imports. Tongue Finally!!!

Going to sleep. Thanks again Hugo!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Simple CSS Problem

In all honesty you may be better off from a point of view of understanding the way WP is constructed to build your own layout from scratch. The great thing about The way that the 'Theme' concept works is that you do not have go near any of the actual WP core PHP files and can construct as many themes as you like if one happens to break WP with fatal errors for whatever reason you just switch back to the default theme and your running again which is a lot different to WP 1.2 where you often were modifying the core files and when you made an error it was difficult to recover from. So it cant hurt to have a play around and you can have as many themes as you like.

Another interesting point and not that well documented is that you can actually apply more than one stylesheet to the same set of theme files , so you don't have to recreate all the theme files every time you want to make style changes using the template description in the Stylesheet
header block i.e template: themefoldername.

One more thing to pass on that causes confusion at first and that is the way the template-function files work. you'll notice that in the 'default' themes folder and 'classic' themes folder there are differing number of files this is because you can expand the theme to have unique single page and archive files etc but if these files are missing then your theme will, when they're required use the files from the 'default' theme (kubrick) this has caused many people a little confusion. If you look at the template-functions-general.php file you will see a rather clever if/else set of statements that searches for your own versions and if not found directs to the default set of files.

Take time to read through the WP Codex especially the 'how to create themes' sections and 'template tags' it's a mine of information
but does require sorting through, information is not always obvious.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Bink
Bink's picture
Offline
newbie
Last seen: 17 years 25 weeks ago
Joined: 2005-04-10
Posts: 9
Points: 0

Thanks!

Thanks Hugo! I appreciate the info. I will go through that site as well in conjunction with my CSS book.