Pages: 1#1 2006-11-16 11:42:40Need help with CSS and PHP... cannot get righ...
Heeeeeeeeeeeeeelllllllllppppppppppp!
I am currently working on a site design for a blog. I cannot make the right column of the blog appear where it' supposed to. This happened to me once before but I never documented what I did, and I should have.
Can someone please help me out... the site is at blog.lacruzsite.com. It's a client's blog and am racking my brain trying to get it right.
This is the CSS sample:
Code: css
global settings
----------------------------------------------------------- */
* {
margin: 0;
padding: 0;
}
body {
background: #fff;
font: 100%/1.25em "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
color: #666;
text-align: center;
}
/* links */
a:link {
text-decoration: none;
color: #069;
}
a:visited {
text-decoration: none;
color: #069;
}
a:hover {
background: #e5e5e5;
border-bottom: 1px dotted #333;
color: #036;
}
a:active {
text-decoration: none;
color: #069;
}
a img {
background: none;
border: 0 none;
margin-bottom: -10px;
vertical-align: sub;
}
/* hn */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
color: #515151;
margin: 10px 0;
}
h1 {
margin: 0;
font-size: 4em;
font-weight: bold;
text-transform: uppercase;
}
h1 a {
color: #515151;
}
h1 a:hover {
background: none;
border-bottom: none;
color: #069;
}
h2 {
font-size: 1.1em;
}
h3 {
font-size: 1em;
}
h4 {
font-size: 0.9em;
}
h5 {
font-size: 0.8em;
}
h6 {
font-size: 0.7em;
}
/* misc */
abbr,
acronym {
font-style: normal;
border-bottom: 1px dotted #666;
cursor: help;
}
code, pre {
font-family: Monaco, "Courier New", Courier, monotype, serif;
}
pre {
border: 1px solid #888;
background: #fafafa;
padding: 4px;
overflow: auto;
width: 95%;
max-height: 500px;
margin: 10px auto;
font: 1em/1.5em "courier new", courier, monospace;
}
/* defination lists */
dl {
margin: 20px 0;
}
dt {
font-size: 0.9em;
text-transform: uppercase;
}
dd {
margin: 0 0 20px;
}
/* list styles */
ul {
margin: 10px 0;
}
ul li {
height: 1%;
list-style-type: none;
margin: 0 0 5px;
padding: 0 0 0 15px;
background: url(i/bullet.gif) no-repeat 0 6px;
line-height: 18px;
}
ol {
margin: 10px 0 10px 25px;
}
ol li {
margin: 0 0 5px 0;
}
/* blockquote */
blockquote {
margin: 10px 0;
padding: 5px 10px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font: 0.9em/1.5em georgia, "lucida sans unicode", "trebuchet ms", sans-serif;
color: #666;
}
/* image styles */
img.left {
float: left;
margin: 0 15px 10px 0;
}
img.right {
float: right;
margin: 0 0 10px 15px;
}
img.centered {
display: block;
margin: 10px auto;
}
img.border {
padding: 2px;
border: 1px solid #999;
}
/* layout
------------------------------------------------------ */
#container {
margin: 0 auto;
width: 760px;
font-size: 0.75em;
text-align: left;
}
#wrap {
height: 1%;
margin: 4px 0;
background: url(i/wrap.gif) repeat-y;
}
#col-left {
float: left;
width: 150px;
padding: 20px 0;
text-align: right;
}
#col-main {
float: top;
width: 400px;
}
#col-right {
float: right;
width: 210px;
padding: 20px 0;
}
/* header
------------------------------------------------------ */
#header {
margin: 35px 0 0 20px;
border-bottom: 1px solid #e5e5e5;
}
body#home #header {
border-bottom: none;
}
/* main navigation */
#nav {
margin: 35px 0;
padding: 0 0 20px 135px;
}
#nav li {
float: left;
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-image: none;
}
#nav a:link, #nav a:visited {
float: left;
display: block;
padding: 0 10px 8px 10px;
font-size: 1.2em;
font-weight: bold;
color: #515151;
text-transform: uppercase;
text-decoration: none;
}
#nav li.current_page_item, #nav a:hover {
background: url(i/tab.gif) no-repeat 50% 100%;
border-bottom: none;
color: #069;
}
#nav li.current_page_item a, #nav li.current_page_item a:visited {
color: #069;
}
/* latest post
------------------------------------------------------ */
#latest {
height: 1%;
border-bottom: 1px solid #eee;
}
body#home #latest {
border-top: 1px solid #e1e1e1;
}
#latest-inner {
height: 1%;
margin: 5px 0;
background: url(i/latest.gif) repeat-y;
}
/* post */
#post-latest {
float: left;
width: 550px;
font-size: 1.1em;
color: #333;
}
#post-latest h3 {
margin: 0;
padding: 20px 0 0 20px;
}
#post-latest h2 {
margin: 20px 20px 0;
font: bold 1.1em Verdana, Helvetica, Arial, sans-serif;
}
#post-latest p.post-meta {
margin: 0 20px;
font-size: 0.8em;
color: #666;
}
#post-latest .post-body {
padding: 10px 20px 20px;
}
/* about */
#sec-about {
float: right;
width: 210px;
padding: 0 0 20px;
background: #F3F8F8;
font-size: 0.9em;
line-height: 1.6em;
}
#sec-about p {
margin: 20px;
}
#sec-about h3 {
margin: 0;
padding: 20px 0 0 20px;
font-size: 1.1em;
}
/* main column
------------------------------------------------------ */
/* post */
#col-main h3.sec-title {
padding: 20px 15px 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
div.post {
margin: 0 15px 20px;
padding: 0 0 40px;
background: url(i/3os.gif) no-repeat 50% 100%;
}
div.post-body {
}
h2.post-title {
margin: 0;
font-weight: bold;
}
p.post-meta {
margin: 0;
font-size: 0.85em;
color: #999;
text-transform: uppercase;
}
body#archives p.post-meta-ind {
margin: 10px 0 0;
font-size: 0.85em;
}
span.meta-name {
display: block;
float: left;
width: 120px;
font-size: 1.1em;
text-transform: uppercase;
}
span.meta-detail {
font-size: 1.1em;
text-transform: none;
}
p.more {
margin: 20px 0 0;
padding: 0 0 0 20px;
background: url(i/dashed.gif) no-repeat 0 50%;
line-height: 18px;
}
#col-main a:hover {
border-bottom: 1px dotted #666;
background: #e0e0e0;
text-color: #333;
}
/* prev-next navigation */
div.content-navigate {
padding: 10px 15px 20px;
}
span.alignright {
float: right;
}
span.alignleft {
float: left;
}
/* comments */
#comments {
padding: 0 15px 40px;
background: url(i/3os.gif) no-repeat 50% 100%;
}
#comments h3 {
margin: 0;
padding: 10px 0 0;
font-weight: bold;
}
div.comment {
height: 1%;
padding: 10px 0;
background: url(i/dot.gif) no-repeat 50% 100%;
}
div.comment p {
margin: 5px 0;
}
.comment-meta {
font-size: 0.95em;
text-transform: uppercase;
}
#comments label {
display: block;
font-size: 0.9em;
}
#comment-author,
#comment-email,
#comment-url,
#comment-text,
#s {
width: 90%;
margin: 0 0 10px;
padding: 2px;
border: 1px solid #ccc;
font: 0.95em "lucida sans unicode", "lucida grande", verdana, "trebuchet ms", sans-serif;
}
#searchsubmit,
#comment-submit {
padding: 2px;
background: #eee;
border: 3px double #666;
border-top-color: #ccc;
border-left-color: #ccc;
font-size: 85%;
color: #333;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.1em;
}
/* search page
------------------------------------------------------ */
ul#search-results-list {
margin: 25px 0 0;
}
ul#search-results-list li {
margin: 0 0 40px;
padding: 0 0 0 20px;
background: url(i/dashed.gif) no-repeat 0 6px;
line-height: 18px;
}
ul#search-results-list h2 {
margin: 0;
padding: 0;
}
/* side columns common
------------------------------------------------------ */
#col-right a:hover, #col-left a:hover {
background: transparent;
border-bottom: none;
}
#col-right li, #col-left li {
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #e5e5e5;
background-image: none;
line-height: 20px;
}
#col-right ul ul, #col-left ul ul {
margin: 0;
}
#col-right li li, #col-left li li {
border-top: 1px solid #e5e5e5;
}
h3.sec-title {
margin: 0;
text-transform: uppercase;
letter-spacing: 0.2em;
}
div.left-sec,
div.right-sec {
margin: 0 15px 40px;
}
/* footer
------------------------------------------------------ */
#footer {
margin: 4px 0 0;
padding: 20px 0 20px 165px;
border-top: 1px solid #ccc;
font-size: 0.8em;
}
/* misc
------------------------------------------------------ */
.clear {
clear: both;
height: 0;
line-height: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#2 2006-11-16 12:16:20 Re: Need help with CSS and PHP... cannot get righ...
#3 2006-11-16 12:26:35 Re: Need help with CSS and PHP... cannot get righ...
Thanks aknet47...
I tried it but now the right column, not only is it still showing to the bottom, but now it's on the left side.
I'm going to include the PHP file for the index template:
Code: php
<?php get_header(); ?>
<!-- BEGIN #latest -->
<div id="latest"><div id="latest-inner">
<div id="post-latest" id="post-<?php the_ID(); ?>">
<h3 class="sec-title">Latest Article</h3>
<?php
$posts = get_posts('numberposts=1');
foreach($posts as $post) :
setup_postdata($post);
?>
<h2 class="post-title"><a href="<?php the_permalink() ?>" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta"><?php the_time('F jS, Y') ?> / <?php the_category(', ') ?> / <?php comments_popup_link('No comments', '1 comment', '% comments','Comments are off for this post'); ?></p>
<div class="post-body">
<?php the_excerpt(); ?>
<p class="more"><a href="<?php the_permalink() ?>" title="Permanent link to <?php the_title(); ?>">Continue reading</a></p>
</div>
</div>
<?php endforeach; ?>
<div id="sec-about">
<h3 class="sec-title">About</h3>
<p>I am a writer, first and foremost. I am also a husband and a father. A son, a brother and a friend. My life may differ alot from yours, or it could be almost the same. I express mine through my writing. Please stay, I invite you to read on.</p>
<p class="more"><a href="http://www.lacruzsite.com/about.htm" title="Read More About me">Read More</a></p>
</div>
<div class="clear"></div>
</div>
<!-- END #latest -->
<script type="text/javascript"><!--
google_ad_client = "pub-2231917896779756";
google_ad_width = 728;
google_ad_height = 15;
google_ad_format = "728x15_0ads_al_s";
//2006-10-13: Leo
google_ad_channel = "1164049105";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "006699";
google_color_text = "000000";
google_color_url = "008000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- BEGIN #wrap -->
<div id ="wrap">
<?php include (TEMPLATEPATH . "/col-left.php"); ?>
<!-- BEGIN #col-main -->
<div id="col-main">
<h3 class="sec-title">Recent articles</h3>
<?php
$posts = get_posts('numberposts=5&offset=1');
foreach($posts as $post) :
setup_postdata($post);
?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2 class="post-title"><a href="<?php the_permalink() ?>" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta"><?php the_time('F jS, Y') ?> / <?php the_category(', ') ?> / <?php comments_popup_link('No comments', '1 comment', '% comments','Comments are off for this post'); ?></p>
<div class="post-body">
<?php the_content('Continue reading'); ?>
</div>
</div>
<?php endforeach; ?>
<div class="content-navigate">
<span class="alignleft"><?php next_posts_link('« Previous Entries') ?></span>
<span class="alignright"><?php previous_posts_link('Next Entries »') ?></span>
</div>
</div>
<!-- END #col-main -->
<?php include (TEMPLATEPATH . "/col-right.php"); ?>
<?php get_footer(); ?>
#4 2006-11-16 12:35:42 Re: Need help with CSS and PHP... cannot get righ...
#5 2006-11-16 12:53:42 Re: Need help with CSS and PHP... cannot get righ...
Still isn't working properly...
#6 2006-11-16 13:30:55 Re: Need help with CSS and PHP... cannot get righ...
Northie
Moderator
From: Yorkshire, UK
Registered: 2006-08-19
Posts: 2793
I've been thanked 77 times.
Offline
Moderator
From: Yorkshire, UK
Registered: 2006-08-19
Posts: 2793
I've been thanked 77 times.
Offline
I haven't got much time so I will point you at some pages that are source ordered and work, feel free to look at the css
yorkoudoorgroup.org.uk (3 col)
articledocs.com (2 col)
healthfitnessarticlesweb (2 col, of which main can be expaned to 3 - see category pages)
break your css into diffrent files, one for layout and one for presentation
classes and ids can be styled more than once in the CSS (ids can only be declared once in the HTML, classes can have multiple instances in the HTML)
#7 2006-11-17 08:26:09 Re: Need help with CSS and PHP... cannot get righ...
monchster wrote:
Still isn't working properly...
Today, I had a look on the iexplorer, and ..ups, the layout is still incorrect.
I added 4 px to the width of the container-div (because of the wrap, I think) and voilla.
I didnīt try, but it I guess it should be possible to fiddle around with the amounts of the 3 divs also.
But the layout didnīt match in firefox.
ak
#8 2006-11-17 09:47:09 Re: Need help with CSS and PHP... cannot get righ...
Many times, people will copy code and accidentally add / delete a letter or symbol which can screw up CSS -- so, I suggest you re-copy the codes from the original pages shown below and be very careful in what you edit:
Main CSS
Screen CSS
#9 2006-11-17 10:20:17 Re: Need help with CSS and PHP... cannot get righ...
Thanks for your help all.... I followed aknet's advice and actually subtracted 5px from the widths of the columns... the client is happy.
Dunno, why I didn't think of that to begin with.
Thanks again.... love this forum!
| Never |
You are not logged in.
Active Discussions
Review Requests & Intros
Powered by 
