Old 20th January 2009, 18:45   #1
mike-db
Pancakes!
(Major Dude)
 
mike-db's Avatar
 
Join Date: Feb 2005
Location: Colour, if you're, you know...
Posts: 3,523
Send a message via ICQ to mike-db
Need some HTML/CSS help

So I'm developing a website for a horse community. And I'm having problems with a theme that I'm making for the blog. It was sandboxed from another design, the old design did not have a known background behind the posts. Which is what I'm trying to do. I have my background image sitting right now but its not repeating like I want it to.

http://trinityhorsehaven.com/

Check out the white area under the links with the black lines on the sides. Why can I not make this thing repeat vertically is beyond me.

EDIT/ you are looking for the div id #post-bg

Here is my code

(index)
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trinity Horse Haven</title>
<link rel="stylesheet" href="http://trinityhorsehaven.com/wp-content/themes/dodo/style.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Trinity Horse Haven RSS Feed" href="http://trinityhorsehaven.com/?feed=rss2" />
<link rel="pingback" href="http://trinityhorsehaven.com/xmlrpc.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://trinityhorsehaven.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://trinityhorsehaven.com/wp-includes/wlwmanifest.xml" />

<meta name="generator" content="WordPress 2.7" />

</head>
<body>
<div id="wrapper">
<div id="header">

<div id="divSearchForm">
<form method="get" id="searchform" action="http://trinityhorsehaven.com/">
<div>
<input type="hidden" value="1" id="IncludeBlogs" name="IncludeBlogs"/>
<input type="text" name="s" class="txt" value="Search Keywords" onfocus="document.forms['searchform'].s.value='';" onblur="if (document.forms['searchform'].s.value == '') document.forms['searchform'].s.value='Search Keywords';" />

<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</div>
<div id="header-bg">

<div id="navcontainer">
<ul id="navlist">
<li class="current_page_item"><a href="http://trinityhorsehaven.com/">Home</a></li>
<li class="page_item page-item-5"><a href="http://trinityhorsehaven.com/?page_id=5" title="Forum">Forum</a></li>

<li class="page_item page-item-9"><a href="http://trinityhorsehaven.com/?page_id=9" title="About">About</a></li>
<li class="page_item page-item-11"><a href="http://trinityhorsehaven.com/?page_id=11" title="Contact">Contact</a></li>
</ul>
</div>
</div>
<div id="post-bg">
</div><!-- end #header -->

<div id="container">

<div id="content">


<div class="post">
<h2><a href="http://trinityhorsehaven.com/?p=13" rel="bookmark">Pancakes and flap jacks</a></h2>
<div class="postmetadata">
January 20, 2009, filed under <a href="http://trinityhorsehaven.com/?cat=3" title="View all posts in Website updates" rel="category">Website updates</a>; <a href="http://trinityhorsehaven.com/?p=13#respond" title="Comment on Pancakes and flap jacks">No Comments</a>.
<br /> </div>
<div class="entry">

<p>Well a few hours later with small amounts of code and very little energy, I have done it! Trinity Horse Haven now has a homepage that is unique and that they can call their own.</p>
<p>No this design for the website is not final, don’t worry about it I know it looks like crap. That will change with time.</p>
<p>-Because penguins can fly<br />
–Mike (resident geak)</p>
</div>
</div>


<div class="post">

<h2><a href="http://trinityhorsehaven.com/?p=3" rel="bookmark">New front page!</a></h2>
<div class="postmetadata">
, filed under <a href="http://trinityhorsehaven.com/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a>; <a href="http://trinityhorsehaven.com/?p=3#respond" title="Comment on New front page!">No Comments</a>.
<br /> </div>
<div class="entry">
<p>Here is the home page of Trinityhorsehaven.com this is a blog powered by Wordpress software. If you have any questions about the blog just post in the forum.</p>

</div>
</div>


<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>


</div><!-- end #content -->

<div id="sidebar">



<h2>Categories</h2>
<ul>
<li class="cat-item cat-item-1"><a href="http://trinityhorsehaven.com/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> (1)
</li>
<li class="cat-item cat-item-3"><a href="http://trinityhorsehaven.com/?cat=3" title="View all posts filed under Website updates">Website updates</a> (1)

</li>
</ul>
<h2>Meta</h2>
<ul>
<li><a href="http://trinityhorsehaven.com/wp-admin/">Site Admin</a></li> <li><a href="http://trinityhorsehaven.com/wp-login.php?action=logout&#038;_wpnonce=7a0a165a1f">Log out</a></li>
</ul>


<h2>RSS</h2>

<ul>
<li><a href="http://trinityhorsehaven.com/?feed=rss2">RSS Blog</a></li>
<li><a href="http://trinityhorsehaven.com/?feed=comments-rss2">RSS Comments</a></li>
</ul>



<h2>Blogroll</h2>
<ul>
</ul>

</div><!-- end #sidebars -->
</div>

<div id="footer-bg">

</div>
Theme Designed by <a href="http://mike-db.deviantart.com">Mike Bergstrom</a> &middot; Powered by <a href="http://www.wordpress.org/" target="_blank">WordPress</a>
</div>
</div><!-- end #wrapper -->
</div>

</body>
</html>



(Stylesheet)
code:
/*
Theme Name: Trinity Horse Haven
Theme URL:
Description: A simple theme sandboxed from a theme designed by inspirebuddy.com.
Version: 1.0
Author: Mike Bergstrom
Author URL: http://mike-db.deviantart.com
Tags: fixed width, two columns, archives, accessible, simple, clean, valid CSS, valid XHTML, black, white, right sidebar, widgets, widget ready
*/

/* Changelog
Version 1.2 - Links color changed to blue (more user friendly), small padding/margin fixes in sidebar navigation and <ol> list in main content.
Version 1.2.1 - Added more info for free support on this theme, and few extra tags.
*/

* {margin:0; padding:0; }
body {
font:62.5% "arial", helvetica, sans-serif;
line-height:1.7em;
color:#444;
background:url(images/bg.jpg) repeat-x;
}
a {
color:#ac1313;
text-decoration:none;
font-weight:bold;
}
a:hover {
color: #ac1313;
text-decoration:underline;
}
p {padding-top:10px;}
h1 {margin: 20px 0 0}
img {
margin:8px 10px 5px 10px;
}
input {vertical-align: middle}
h2 {
font: normal 1.6em "arial", helvetica, sans-serif;
margin: 0 0 12px;
}
blockquote {
margin: 10px 25px 10px 30px;
border-left: 3px solid #124AA8;
background: #FFFDD5;
padding: 5px 15px;
font-size: 1.3em;
color:#000;
}
blockquote p {
font-size: 1em !important;
margin: 0;
}
.aligncenter,
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
#wrapper {
width: 830px;
margin: 0 auto;
padding: 10px 0 0 0;
}
#header {
margin-bottom: 15px;
position:relative;
overflow:hidden;
}
#header-bg {
background:url(images/header-bg.jpg) no-repeat scroll 0 0;
height:325px;
position:relative;
border-top:5px solid #FFF;
}
#navcontainer {
background:transparent url(images/nav-bg.png) no-repeat scroll 0 0;
height:34px;
position:absolute;
bottom:0;
left:0;
width:830px;
}
ul#navlist {
list-style-positionutside;
list-style-type:none;
margin:0;
padding:0;
}
ul#navlist li {
border-right:1px solid #FFF;
float:left;
width:100px;
margin:0;
padding:0;
text-align:left;
}
ul#navlist li a {
color:#CCCCCC;
display:block;
font-size:11px;
text-decoration:none;
height:30px;
font-weight:bold;
padding:4px 15px 0 8px;
}
ul#navlist li a:hover {
background-color:#ac1313;
color:#fff;
}
#navlist li.current_page_item {
background:#666;
color:#FFF !important;
}
#divSearchForm {
float:right;
margin:-32px 0 0 0;
font-size:120%;
}
#divSearchForm label {
display:inline;
margin:0;
color:#333;
font-family:"arial", helvetica, sans-serif;
text-transform:uppercase;
font-weight:bold;
vertical-align:middle;
}
#divSearchForm input.txt {
display:inline;
width:130px;
padding:2px;
border:1px solid #999;
vertical-align:middle;
}
#divSearchForm input.txt:focus {
color:#000;
background:#f6feda;
}
#divSearchForm input.btn {
margin:0;
vertical-align:middle;
}
#container {
width: 100%;
margin-bottom:10px;
}
#container:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#content {
width: 570px;
float: left;
padding: 0 10px 0 0;
overflow: hidden;
}

#content h2 {
font:normal 1.9em "arial", helvetica, sans-serif;
padding: 0 0 4px;
color:#000;
}
#content h2 a {
font-weight:normal;
text-decoration:underline;
color:#000;
}
#content h2 a:hover {
color:#124AA8;
}
#content h2.pagetitle {
padding-left: 3px;
padding: 1px 0 4px;
}
#content h3 {
font:bold 1.7em "arial", helvetica, sans-serif !important;
color:#000;
margin-bottom:-5px !important;
}
#content p, ntent li {
font-size: 1.3em;
line-height: 1.4em;
}
#content h3 a {
text-decoration:underline;
color:#ac1313;
}
#content .post {
margin: 0 0 10 25px;
}
#content .post h2 {
font-size:2em;
margin:0 0 -2px;
}
#content .post h3 {
margin-bottom:0px !important;
}
#post-bg {
background:url(images/post-bg.jpg) repeat;
height:29px;
position:relative;
}
.post ul, .post ol {
margin:0 0 25px 25px;
font-size:12px;
}
.post li {
padding:8px 25px 0 0;
color:#000;
}
.post .postmetadata {
font-size:1.1em;
color:#000;
}
.postmetadata a {
color:#ac1313;
text-decoration: underline;
}
.postmetadata a:hover {
color:#666;
}
.entry {
text-align: justify;
}
.entry h1 {
font-size: 1.8em;
margin: 15px 0 10px;
}
.entry h2 {
font-size: 1.65em !important;
font-weight: bold !important;
margin: 15px 0 10px !important;
padding: 0 !important;
border: none !important;
}
.entry h3 {
font-size: 1.45em !important;
font-weight: bold !important;
margin: 15px 0 10px !important;
padding: 0 !important;
}
.entry h4 {
font-size: 1.3em;
margin: 15px 0 10px;
font-weight: bold !important;
}
.nav {
font-size: 1.3em;
padding: 0 0 22px;
}
.navigation {
font-size: 1.3em;
margin:20px 0 5px 0;
height: 1.3em;
}
.alignleft {float: left;}
.alignright {float: right;}
h3#comments,h3#respond {
padding: 1px 0 4px;
border-bottom: 1px solid #EEE;
}
.commentlist {
margin: 20px 0 30px 18px;
font-size:120%;
}
.commentlist img {
float:none;
padding:0;
border:0;
}
.commentlist li {
padding:5px 0 20px;
font-size:90%;
}
.cdata {
background:#FFFDD5;
border-top:1px solid #BFBC7D;
padding: 3px 3px 3px 7px;
height: 1%;
}
.cdata strong {
display: block;
color:#000;
}
#content img.avatar {
float: right;
display: inline;
border: 0;
margin: 1px 1px 0;
}
.ctext {
padding: 0 7px;
}

.commentlist li p {
font-size: 1em !important;
}
.commentmetadata {
font-size: 0.85em;
}
.commentmetadata a {
color: #848144;
}
#comment {
width: 530px;
height: 170px;
}
/* sidebar
-----------------------------------------------------------------------------*/
#sidebar {
float: left;
width: 240px;
padding: 0 0 0 10px;
font-size: 1.2em;
line-height: 1.4em;
}
#sidebar ul {
list-style: none;
margin:0 0 15px;
font-size:11px;
}
#sidebar ul li ul {
margin:0;
padding:0 0 0 4px;
}
#sidebar ul li ul li ul {
margin:5px 0 -12px 0;
padding:0 0 0 4px;
}
#sidebar ul li {
margin: 0px 0px -1px 0px;
border-top: 1px solid #EEE;
padding:6px 0 6px 5px;
line-height: 15px;
}
#sidebar ul li a {
background:url(images/arrow.gif) no-repeat center left;
padding: 0 0 0 8px;
text-decoration:none;
color:#ac1313;
font-weight:bold;
}
#sidebar ul li a:hover {
text-decoration:underline;
color:#666;
}
#sidebar h2 {
font:bold 1.2em "arial", helvetica, sans-serif;
padding: 6px 0 0 3px;
line-height:0.6em;
color:#000;
border-top: 1px solid #000;
}
#sidebar h3 {
font: normal 1.4em/1.1em "arial", helvetica, sans-serif;
padding: 0 0 3px;

}

.tags,
#tag_cloud {
margin: 0 0 15px;
}
.tags {
text-align:center;
line-height:21px !important;
}
abbr, acronym {
border:medium none;
}
abbr[title], acronym[title] {
border-bottom:1px dotted #999;
cursor:help;
font-style:italic;
}
code, kbd, pre {
font-family: Monaco,"Courier New",Tahoma;
}
pre {
padding:10px;
background:#F6F7F5;
font-size:120%;
}

code {
color:#990000;
font-family:"Courier New",Courier,mono;
}
.txtRed {
color:#ac1313;
font-size:130%;
}
.txtGrey {
color:#999;
}
#footer {
clear: both;
margin: 0 0 15px;
font-size: 1.1em;
color: #808080;
}
#footer-bg {
background:url(images/footer.jpg) no-repeat scroll 0 0;
height:188px;
position:relative;
}
#footer p{
text-align:center;
color:#999;
}
#footer p a{
color:#999;
}
#footer p a:hover{
color:#000;
}
#base .baseHdr{
font-size:1.5em;
color:#000;
font-weight:bold;
margin-bottom:10px;
border:none;
padding:0;
}
#base {display: inline; float: left; margin: 0; width:100%; clear:left;}
#base {background:#F0F0F0; border-bottom:3px solid #000; border-top:3px solid #000; position: relative; }
#base ul {margin:10px 10px; padding:10px 0 0 4px; width:252px; display:inline; float:left; list-style-type:none; }
#base li {padding:5px 4px; border-top:1px solid #C0BDBD; line-height:15px;}
.grid12 h6 { margin: 10px 0 50px 0; }



I know there are a lot of useless things in the index but I have not gotten around to cleaning it up yet. Also if someone could tell me why the padding between the posts fails so badly that would rock my socks.
mike-db is offline   Reply With Quote
Old 21st January 2009, 03:28   #2
gameplaya15143
Major Dude
 
gameplaya15143's Avatar
 
Join Date: Apr 2005
Location: Earth
Posts: 753
The image is 830x29 and just has a black line on each side? Why don't you just use CSS borders?

I'm guessing you want the borders along the sides.

PHP Code:
<div id="container" style="border-left: 1px solid black; border-right: 1px solid black;"
You'll have to adjust the dimensions and whatever to make it look right.

Firebug and the HTML Validator extensions for Firefox are your friend. target="ShameOnYou"
gameplaya15143 is offline   Reply With Quote
Old 21st January 2009, 06:09   #3
jerimiah40
Major Dude
 
jerimiah40's Avatar
 
Join Date: Nov 2004
Posts: 955
And if you actually wanted an answer to your question, here it is:

Technically, it's doing exactly what you've specified. The height of #post-bg is set to 29px, which means it will only take up 29px. However, if you set it higher, then it will bump things down, and you'll have to start screwing around with z-index and browser compatibility with heights. I don't have time to test it right now, but I think it you apply the background-image and background-repeat to #container, it should work as intended.
jerimiah40 is offline   Reply With Quote
Old 25th January 2009, 17:10   #4
MrMagick
Major Dude
 
MrMagick's Avatar
 
Join Date: Feb 2002
Location: Back in Iowa!
Posts: 1,220
Send a message via ICQ to MrMagick Send a message via AIM to MrMagick Send a message via Yahoo to MrMagick
Here I was going to post some step-by-step instructions but you got your answer lol

However, to answer your other questionline 205 of you CSS has no "padding-bottom: #px;"

-~MrMagick~-
MrMagick is offline   Reply With Quote
Reply
Go Back   Winamp & Shoutcast Forums > Community Center > General Discussions

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump